taqi/portfolio
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor frontend code

Browse Source 
Fixes #3
This commit is contained in:
Taqi Tahmid
2025-04-12 10:02:02 +03:00
parent e4f9282d7d
commit 1d45fca783
4 changed files with 106 additions and 122 deletions
Download Patch File Download Diff File Expand all files Collapse all files

23
frontend/src/components/Introduction.tsx
View File

@ -1,28 +1,9 @@
import { Linkedin, Github, Award } from 'lucide-react' import { COLORS, SOCIALLINKS } from '../constants'
import { COLORS } from '../constants'
import { Tooltip } from './Tooltip' import { Tooltip } from './Tooltip'
const Introduction = () => { const Introduction = () => {
const BoldStyle = 'text-blue-900 dark:text-blue-300 font-semibold' const BoldStyle = 'text-blue-900 dark:text-blue-300 font-semibold'
const socialLinks = [
{
icon: <Linkedin size={32} />,
href: 'https://www.linkedin.com/in/taqi-tahmid/',
label: 'LinkedIn',
},
{
icon: <Github size={32} />,
href: 'https://github.com/TheTaqiTahmid',
label: 'GitHub',
},
{
icon: <Award size={32} />,
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 ( return (
<div className="text-center p-4 max-w-4xl mx-auto"> <div className="text-center p-4 max-w-4xl mx-auto">
<h1 <h1
@ -56,7 +37,7 @@ const Introduction = () => {
</div> </div>
<div className="flex justify-center gap-8 py-3"> <div className="flex justify-center gap-8 py-3">
{socialLinks.map((link, index) => ( {SOCIALLINKS.map((link, index) => (
<div key={index} className="group relative"> <div key={index} className="group relative">
<Tooltip label={link.label} position="top"> <Tooltip label={link.label} position="top">
<a <a

31
frontend/src/components/Skills.tsx
View File

@ -1,33 +1,6 @@
import pythonIcon from '../assets/python.svg' import { COLORS, SKILLS } from '../constants'
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'
import { COLORS } from '../constants'
const Skills = () => { const Skills = () => {
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 ( return (
<div> <div>
<h1 className={`text-2xl py-5 font-burtons ${COLORS.PRIMARY} ${COLORS.DARK_PRIMARY}`}> <h1 className={`text-2xl py-5 font-burtons ${COLORS.PRIMARY} ${COLORS.DARK_PRIMARY}`}>
@ -36,7 +9,7 @@ const Skills = () => {
<div <div
className={`grid grid-cols-4 gap-6 text-md py-5 leading-8 ${COLORS.TEXT} ${COLORS.DARK_TEXT} mx-auto max-w-2xl md:text-xl`} className={`grid grid-cols-4 gap-6 text-md py-5 leading-8 ${COLORS.TEXT} ${COLORS.DARK_TEXT} mx-auto max-w-2xl md:text-xl`}
> >
{skills.map((skill) => ( {SKILLS.map((skill) => (
<div key={skill.name} className="flex flex-col items-center"> <div key={skill.name} className="flex flex-col items-center">
<img src={skill.icon} alt={skill.name} className="h-10 w-10" /> <img src={skill.icon} alt={skill.name} className="h-10 w-10" />
<p className="mt-2 text-center">{skill.name}</p> <p className="mt-2 text-center">{skill.name}</p>

109
frontend/src/constants.tsx
View File

@ -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 = { export const COLORS = {
PRIMARY: 'text-blue-900', PRIMARY: 'text-blue-900',
DARK_PRIMARY: 'dark:text-amber-50', DARK_PRIMARY: 'dark:text-amber-50',
@ -12,19 +26,96 @@ export const EMAIL = 'taqitahmid@gmail.com'
export const RESUME = export const RESUME =
'https://www.linkedin.com/in/taqi-tahmid/overlay/1735981754176/single-media-viewer/?profileId=ACoAACDU_GsBCgKtvw2bmzbVwTy2WixBG6-e3JM' '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: 'Self-Hosted Kubernetes Homelab Cluster',
title: 'Deployment VS DaemonSet VS StatefulSet',
description: description:
'All the information you need to find the difference between Deployment, DaemonSet, and StatefulSet controllers used to deploy Pods', '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.',
date: '2025-01-10', technologies: ['Kubernetes', 'KVM', 'Linux', 'Go', 'Docker', 'Helm', 'MetalLB'],
links: [
{
icon: <Github size={24} />,
href: 'https://github.com/yourusername/k8s-monitoring',
label: 'GitHub',
},
],
}, },
{ {
slug: 'volumes', title: 'Personal Portfolio Website',
title: 'Volumes in Kubernes and how to manage them',
description: description:
'What is a Volume, different types of volumes, how do you provision, and claim volumes in Kubernetes.', "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.",
date: '2025-01-10', technologies: ['React', 'Tailwind CSS', 'Docker', 'Kubernetes', 'Nginx'],
links: [
{
icon: <Github size={24} />,
href: 'https://github.com/TheTaqiTahmid/my-portfolio',
label: 'GitHub',
},
{
icon: <Link size={24} />,
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: <Github size={24} />,
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: <Github size={24} />,
href: 'https://github.com/TheTaqiTahmid/todo',
label: 'GitHub',
},
],
}, },
] ]
export const SOCIALLINKS = [
{
icon: <Linkedin size={32} />,
href: 'https://www.linkedin.com/in/taqi-tahmid/',
label: 'LinkedIn',
},
{
icon: <Github size={32} />,
href: 'https://github.com/TheTaqiTahmid',
label: 'GitHub',
},
{
icon: <Award size={32} />,
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 },
]

65
frontend/src/pages/Projects.tsx
View File

@ -1,70 +1,9 @@
import { Github, Link } from 'lucide-react' import { COLORS, PROJECTS } from '../constants'
import { COLORS } from '../constants'
import { Tooltip } from '../components/Tooltip' import { Tooltip } from '../components/Tooltip'
const Projects = () => { const Projects = () => {
const BoldStyle = 'text-blue-900 dark:text-blue-300 font-semibold' 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: <Github size={24} />,
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: <Github size={24} />,
href: 'https://github.com/TheTaqiTahmid/my-portfolio',
label: 'GitHub',
},
{
icon: <Link size={24} />,
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: <Github size={24} />,
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: <Github size={24} />,
href: 'https://github.com/TheTaqiTahmid/todo',
label: 'GitHub',
},
],
},
]
return ( return (
<div className="p-4 max-w-4xl mx-auto"> <div className="p-4 max-w-4xl mx-auto">
<h1 <h1
@ -74,7 +13,7 @@ const Projects = () => {
</h1> </h1>
<div className="space-y-8"> <div className="space-y-8">
{projects.map((project, index) => ( {PROJECTS.map((project, index) => (
<div <div
key={index} key={index}
className="border-2 border-gray-300 dark:border-gray-700 rounded-lg p-6 hover:shadow-lg transition-shadow duration-300" className="border-2 border-gray-300 dark:border-gray-700 rounded-lg p-6 hover:shadow-lg transition-shadow duration-300"