diff --git a/frontend/src/components/Introduction.tsx b/frontend/src/components/Introduction.tsx index 6188846..fb3157f 100644 --- a/frontend/src/components/Introduction.tsx +++ b/frontend/src/components/Introduction.tsx @@ -1,28 +1,9 @@ -import { Linkedin, Github, Award } from 'lucide-react' -import { COLORS } from '../constants' +import { COLORS, SOCIALLINKS } from '../constants' import { Tooltip } from './Tooltip' const Introduction = () => { const BoldStyle = 'text-blue-900 dark:text-blue-300 font-semibold' - const socialLinks = [ - { - icon: , - href: 'https://www.linkedin.com/in/taqi-tahmid/', - label: 'LinkedIn', - }, - { - icon: , - href: 'https://github.com/TheTaqiTahmid', - label: 'GitHub', - }, - { - icon: , - href: 'https://ti-user-certificates.s3.amazonaws.com/e0df7fbf-a057-42af-8a1f-590912be5460/3da54db2-f994-4148-a0ca-705ae1d748cd-mohammad-taqi-tahmid-094cf8b4-0db8-4a9f-b787-b4efbb2a90fe-certificate.pdf', - label: 'CKA Certificate', - }, - ] - return (

{

- {socialLinks.map((link, index) => ( + {SOCIALLINKS.map((link, index) => (
{ - const skills = [ - { name: 'Python', icon: pythonIcon }, - { name: 'Golang', icon: goIcon }, - { name: 'React', icon: reactIcon }, - { name: 'Robot Framework', icon: robotIcon }, - { name: 'Ansible', icon: ansibleIcon }, - { name: 'Terraform', icon: terraformIcon }, - { name: 'Jenkins', icon: jenkinsIcon }, - { name: 'Git', icon: gitIcon }, - { name: 'Docker', icon: dockerIcon }, - { name: 'Kubernetes', icon: kubernetesIcon }, - { name: 'Prometheus', icon: prometheusIcon }, - { name: 'Grafana', icon: grafanaIcon }, - ] - return (

@@ -36,7 +9,7 @@ const Skills = () => {
- {skills.map((skill) => ( + {SKILLS.map((skill) => (
{skill.name}

{skill.name}

diff --git a/frontend/src/constants.tsx b/frontend/src/constants.tsx index 0a4bfdf..a66d1c4 100644 --- a/frontend/src/constants.tsx +++ b/frontend/src/constants.tsx @@ -1,3 +1,17 @@ +import { Linkedin, Github, Award, Link } from 'lucide-react' +import pythonIcon from './assets/python.svg' +import robotIcon from './assets/robotframework-svgrepo-com.svg' +import goIcon from './assets/go-original.svg' +import reactIcon from './assets/react.svg' +import ansibleIcon from './assets/ansible.svg' +import terraformIcon from './assets/terraform-icon.svg' +import jenkinsIcon from './assets/jenkins.svg' +import gitIcon from './assets/git-icon.svg' +import dockerIcon from './assets/docker-icon.svg' +import kubernetesIcon from './assets/kubernetes.svg' +import prometheusIcon from './assets/prometheus.svg' +import grafanaIcon from './assets/grafana.svg' + export const COLORS = { PRIMARY: 'text-blue-900', DARK_PRIMARY: 'dark:text-amber-50', @@ -12,19 +26,96 @@ export const EMAIL = 'taqitahmid@gmail.com' export const RESUME = 'https://www.linkedin.com/in/taqi-tahmid/overlay/1735981754176/single-media-viewer/?profileId=ACoAACDU_GsBCgKtvw2bmzbVwTy2WixBG6-e3JM' -export const POSTS = [ + +export const PROJECTS = [ { - slug: 'deployment-daemonset-statefulset', - title: 'Deployment VS DaemonSet VS StatefulSet', + title: 'Self-Hosted Kubernetes Homelab Cluster', description: - 'All the information you need to find the difference between Deployment, DaemonSet, and StatefulSet controllers used to deploy Pods', - date: '2025-01-10', + 'Architected and deployed a production-grade Kubernetes cluster in my homelab environment, showcasing infrastructure-as-code principles and modern DevOps practices. The cluster hosts a diverse ecosystem of services including my portfolio website, high-availability database, private container image registry, network-wide ad-blocking solution using AdGuard, and a comprehensive media server stack.', + technologies: ['Kubernetes', 'KVM', 'Linux', 'Go', 'Docker', 'Helm', 'MetalLB'], + links: [ + { + icon: , + href: 'https://github.com/yourusername/k8s-monitoring', + label: 'GitHub', + }, + ], }, { - slug: 'volumes', - title: 'Volumes in Kubernes and how to manage them', + title: 'Personal Portfolio Website', description: - 'What is a Volume, different types of volumes, how do you provision, and claim volumes in Kubernetes.', - date: '2025-01-10', + "Engineered and deployed a modern, responsive portfolio website using React, showcasing professional experience and technical projects. The website features a clean, intuitive design with dark/light theme support, responsive layouts, and smooth transitions. The site utilizes React's latest features and Tailwind CSS for styling. The entire application is containerized using Docker and deployed on a personal Kubernetes cluster, demonstrating a full DevOps pipeline from development to production.", + technologies: ['React', 'Tailwind CSS', 'Docker', 'Kubernetes', 'Nginx'], + links: [ + { + icon: , + href: 'https://github.com/TheTaqiTahmid/my-portfolio', + label: 'GitHub', + }, + { + icon: , + href: 'https://portfolio.tahmidcloud.com', + label: 'Live Demo', + }, + ], + }, + { + title: 'Automated Crypto Trading Bot', + description: + "Engineered a Python-based cryptocurrency trading bot that interfaces with Binance's API to execute automated trades based on custom strategies. The bot implements real-time price monitoring, configurable stop-loss and take-profit mechanisms, and intelligent position management. It features a robust risk management system, detailed trade logging, and performance analytics. The bot can handle multiple trading pairs simultaneously.", + technologies: ['Python', 'Binance API', 'Pandas', 'NumPy'], + links: [ + { + icon: , + href: 'https://github.com/TheTaqiTahmid/binanceCryptoBot', + label: 'GitHub', + }, + ], + }, + { + title: 'Command Line Todo Application', + description: + "Developed a fast and efficient CLI-based Todo application in Go that enables seamless task management through simple terminal commands. The application leverages Go's strong concurrency features. Users can perform CRUD operations (Create, Read, Update, Delete) on tasks.", + technologies: ['Go', 'Cobra CLI'], + links: [ + { + icon: , + href: 'https://github.com/TheTaqiTahmid/todo', + label: 'GitHub', + }, + ], }, ] + +export const SOCIALLINKS = [ + { + icon: , + href: 'https://www.linkedin.com/in/taqi-tahmid/', + label: 'LinkedIn', + }, + { + icon: , + href: 'https://github.com/TheTaqiTahmid', + label: 'GitHub', + }, + { + icon: , + href: 'https://ti-user-certificates.s3.amazonaws.com/e0df7fbf-a057-42af-8a1f-590912be5460/3da54db2-f994-4148-a0ca-705ae1d748cd-mohammad-taqi-tahmid-094cf8b4-0db8-4a9f-b787-b4efbb2a90fe-certificate.pdf', + label: 'CKA Certificate', + }, +] + +export const SKILLS = [ + { name: 'Python', icon: pythonIcon }, + { name: 'Golang', icon: goIcon }, + { name: 'React', icon: reactIcon }, + { name: 'Robot Framework', icon: robotIcon }, + { name: 'Ansible', icon: ansibleIcon }, + { name: 'Terraform', icon: terraformIcon }, + { name: 'Jenkins', icon: jenkinsIcon }, + { name: 'Git', icon: gitIcon }, + { name: 'Docker', icon: dockerIcon }, + { name: 'Kubernetes', icon: kubernetesIcon }, + { name: 'Prometheus', icon: prometheusIcon }, + { name: 'Grafana', icon: grafanaIcon }, +] \ No newline at end of file diff --git a/frontend/src/pages/Projects.tsx b/frontend/src/pages/Projects.tsx index d4e3f82..5fa1912 100644 --- a/frontend/src/pages/Projects.tsx +++ b/frontend/src/pages/Projects.tsx @@ -1,70 +1,9 @@ -import { Github, Link } from 'lucide-react' -import { COLORS } from '../constants' +import { COLORS, PROJECTS } from '../constants' import { Tooltip } from '../components/Tooltip' const Projects = () => { const BoldStyle = 'text-blue-900 dark:text-blue-300 font-semibold' - const projects = [ - { - title: 'Self-Hosted Kubernetes Homelab Cluster', - description: - 'Architected and deployed a production-grade Kubernetes cluster in my homelab environment, showcasing infrastructure-as-code principles and modern DevOps practices. The cluster hosts a diverse ecosystem of services including my portfolio website, high-availability database, private container image registry, network-wide ad-blocking solution using AdGuard, and a comprehensive media server stack.', - technologies: ['Kubernetes', 'KVM', 'Linux', 'Go', 'Docker', 'Helm', 'MetalLB'], - links: [ - { - icon: , - href: 'https://github.com/yourusername/k8s-monitoring', - label: 'GitHub', - }, - ], - }, - { - title: 'Personal Portfolio Website', - description: - "Engineered and deployed a modern, responsive portfolio website using React, showcasing professional experience and technical projects. The website features a clean, intuitive design with dark/light theme support, responsive layouts, and smooth transitions. The site utilizes React's latest features and Tailwind CSS for styling. The entire application is containerized using Docker and deployed on a personal Kubernetes cluster, demonstrating a full DevOps pipeline from development to production.", - technologies: ['React', 'Tailwind CSS', 'Docker', 'Kubernetes', 'Nginx'], - links: [ - { - icon: , - href: 'https://github.com/TheTaqiTahmid/my-portfolio', - label: 'GitHub', - }, - { - icon: , - href: 'https://portfolio.tahmidcloud.com', - label: 'Live Demo', - }, - ], - }, - { - title: 'Automated Crypto Trading Bot', - description: - "Engineered a Python-based cryptocurrency trading bot that interfaces with Binance's API to execute automated trades based on custom strategies. The bot implements real-time price monitoring, configurable stop-loss and take-profit mechanisms, and intelligent position management. It features a robust risk management system, detailed trade logging, and performance analytics. The bot can handle multiple trading pairs simultaneously.", - technologies: ['Python', 'Binance API', 'Pandas', 'NumPy'], - links: [ - { - icon: , - href: 'https://github.com/TheTaqiTahmid/binanceCryptoBot', - label: 'GitHub', - }, - ], - }, - { - title: 'Command Line Todo Application', - description: - "Developed a fast and efficient CLI-based Todo application in Go that enables seamless task management through simple terminal commands. The application leverages Go's strong concurrency features. Users can perform CRUD operations (Create, Read, Update, Delete) on tasks.", - technologies: ['Go', 'Cobra CLI'], - links: [ - { - icon: , - href: 'https://github.com/TheTaqiTahmid/todo', - label: 'GitHub', - }, - ], - }, - ] - return (

{

- {projects.map((project, index) => ( + {PROJECTS.map((project, index) => (