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

formatted with prettier

Browse Source
This commit is contained in:
Taqi Tahmid
2025-04-10 20:50:21 +03:00
parent d3c744fec7
commit 6944751b82
18 changed files with 473 additions and 469 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
frontend/.prettierrc Normal file
View File

@ -0,0 +1,13 @@
{
"semi": false,
"trailingComma": "es5",
"singleQuote": true,
"jsxSingleQuote": false,
"printWidth": 100,
"tabWidth": 2,
"useTabs": false,
"jsxBracketSameLine": false,
"arrowParens": "always",
"endOfLine": "lf",
"bracketSpacing": true
}

16
frontend/package-lock.json generated
View File

@ -27,6 +27,7 @@
"eslint-plugin-react-refresh": "^0.4.9", "eslint-plugin-react-refresh": "^0.4.9",
"globals": "^15.9.0", "globals": "^15.9.0",
"postcss": "^8.4.45", "postcss": "^8.4.45",
"prettier": "^3.5.3",
"tailwindcss": "^3.4.11", "tailwindcss": "^3.4.11",
"typescript": "^5.5.3", "typescript": "^5.5.3",
"typescript-eslint": "^8.0.1", "typescript-eslint": "^8.0.1",
@ -4048,6 +4049,21 @@
"node": ">= 0.8.0" "node": ">= 0.8.0"
} }
}, },
"node_modules/prettier": {
"version": "3.5.3",
"resolved": "https://registry.npmjs.org/prettier/-/prettier-3.5.3.tgz",
"integrity": "sha512-QQtaxnoDJeAkDvDKWCLiwIXkTgRhwYDEQCghU9Z6q03iyek/rxRh/2lC3HB7P8sWT2xC/y5JDctPLBIGzHKbhw==",
"dev": true,
"bin": {
"prettier": "bin/prettier.cjs"
},
"engines": {
"node": ">=14"
},
"funding": {
"url": "https://github.com/prettier/prettier?sponsor=1"
}
},
"node_modules/property-information": { "node_modules/property-information": {
"version": "6.5.0", "version": "6.5.0",
"resolved": "https://registry.npmjs.org/property-information/-/property-information-6.5.0.tgz", "resolved": "https://registry.npmjs.org/property-information/-/property-information-6.5.0.tgz",

5
frontend/package.json
View File

@ -7,7 +7,9 @@
"dev": "vite", "dev": "vite",
"build": "tsc -b && vite build", "build": "tsc -b && vite build",
"lint": "eslint .", "lint": "eslint .",
"preview": "vite preview" "preview": "vite preview",
"format": "prettier --write .",
"format:check": "prettier --check ."
}, },
"dependencies": { "dependencies": {
"@tailwindcss/typography": "^0.5.16", "@tailwindcss/typography": "^0.5.16",
@ -29,6 +31,7 @@
"eslint-plugin-react-refresh": "^0.4.9", "eslint-plugin-react-refresh": "^0.4.9",
"globals": "^15.9.0", "globals": "^15.9.0",
"postcss": "^8.4.45", "postcss": "^8.4.45",
"prettier": "^3.5.3",
"tailwindcss": "^3.4.11", "tailwindcss": "^3.4.11",
"typescript": "^5.5.3", "typescript": "^5.5.3",
"typescript-eslint": "^8.0.1", "typescript-eslint": "^8.0.1",

31
frontend/src/App.tsx
View File

@ -1,40 +1,35 @@
import { useState } from 'react' import { useState } from 'react'
import { BrowserRouter as Router } from 'react-router-dom'; import { BrowserRouter as Router } from 'react-router-dom'
import { Routes, Route } from 'react-router-dom'; import { Routes, Route } from 'react-router-dom'
import './App.css' import './App.css'
import Home from './pages/Home' import Home from './pages/Home'
import Navbar from './components/Navbar' import Navbar from './components/Navbar'
import Footer from './components/Footer' import Footer from './components/Footer'
import Experience from './pages/Experience'; import Experience from './pages/Experience'
import Projects from './pages/Projects'; import Projects from './pages/Projects'
import Interests from './pages/Interests'; import Interests from './pages/Interests'
import { POSTS } from './constants';
import { BlogList } from "./components/BlogList";
import { BlogPost } from "./components/BlogPost";
function App() { function App() {
const [darkMode, setDarkMode] = useState(() => { const [darkMode, setDarkMode] = useState(() => {
const savedMode = localStorage.getItem('DARK_MODE'); const savedMode = localStorage.getItem('DARK_MODE')
return savedMode ? JSON.parse(savedMode) : true; return savedMode ? JSON.parse(savedMode) : true
}); })
const toggleDarkMode = (): void => { const toggleDarkMode = (): void => {
setDarkMode(!darkMode) setDarkMode(!darkMode)
} }
return ( return (
<> <>
<div className={darkMode ? "dark" : ""}> <div className={darkMode ? 'dark' : ''}>
<main className="bg-amber-50 px-10 dark:bg-gray-900"> <main className="bg-amber-50 px-10 dark:bg-gray-900">
<section className="min-h-screen"> <section className="min-h-screen">
<Navbar toggleDarkMode={toggleDarkMode} darkMode={darkMode} /> <Navbar toggleDarkMode={toggleDarkMode} darkMode={darkMode} />
<Router> <Router>
<Routes> <Routes>
<Route path='/' element={<Home/>} /> <Route path="/" element={<Home />} />
<Route path='/experience' element={<Experience/>} /> <Route path="/experience" element={<Experience />} />
<Route path='/projects' element={<Projects/>} /> <Route path="/projects" element={<Projects />} />
<Route path='/Interests' element={<Interests />} /> <Route path="/Interests" element={<Interests />} />
<Route path="/blog" element={<BlogList posts={POSTS} />} />
<Route path="/blog/:slug" element={<BlogPost />} />
</Routes> </Routes>
</Router> </Router>
<Footer /> <Footer />

17
frontend/src/components/BlogCard.tsx
View File

@ -1,17 +0,0 @@
import { Link } from "react-router-dom";
export const BlogCard = ({ title, description, slug, date }) => {
return (
<Link to={`/blog/${slug}`} className="no-underline">
<div className="rounded-lg border border-gray-200 bg-white p-6 shadow-sm hover:shadow-lg transition-shadow duration-200">
<div className="space-y-2">
<h3 className="text-2xl font-semibold tracking-tight">{title}</h3>
<div>
<p className="text-sm text-gray-500">{date}</p>
<p className="mt-2 text-gray-600">{description}</p>
</div>
</div>
</div>
</Link>
);
};

17
frontend/src/components/BlogList.tsx
View File

@ -1,17 +0,0 @@
import { BlogCard } from "./BlogCard";
export const BlogList = ({ posts }) => {
return (
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 p-4">
{posts.map((post) => (
<BlogCard
key={post.slug}
title={post.title}
description={post.description}
slug={post.slug}
date={post.date}
/>
))}
</div>
);
};

45
frontend/src/components/BlogPost.tsx
View File

@ -1,45 +0,0 @@
import { useEffect, useState } from "react";
import { useParams } from "react-router-dom";
import ReactMarkdown from "react-markdown";
export const BlogPost = () => {
const { slug } = useParams();
const [content, setContent] = useState("");
const [metadata, setMetadata] = useState(null);
useEffect(() => {
const fetchPost = async () => {
try {
const post = await import(`../assets/blogs/${slug}.md`);
const response = await fetch(post.default);
const text = await response.text();
setContent(text);
// const meta = await import(`../content/metadata/${slug}.json`);
// setMetadata(meta.default);
} catch (error) {
console.error("Error loading blog post:", error);
}
};
fetchPost();
}, [slug]);
if (!content) {
return (
<div className="flex justify-center items-center min-h-screen">
<p className="text-gray-600">Loading...</p>
</div>
);
}
return (
<article className="max-w-3xl mx-auto p-6">
{/* <h1 className="text-4xl font-bold mb-4">{metadata.title}</h1>
<div className="text-gray-500 mb-8">{metadata.date}</div> */}
<div className="prose prose-lg">
<ReactMarkdown>{content}</ReactMarkdown>
</div>
</article>
);
};

14
frontend/src/components/Footer.tsx
View File

@ -1,7 +1,7 @@
import { Server, Coffee } from "lucide-react"; import { Server, Coffee } from 'lucide-react'
const Footer = () => { const Footer = () => {
const currentYear = new Date().getFullYear(); const currentYear = new Date().getFullYear()
return ( return (
<footer className="mt-16 py-6 border-t border-gray-200 dark:border-gray-800"> <footer className="mt-16 py-6 border-t border-gray-200 dark:border-gray-800">
@ -29,14 +29,12 @@ const Footer = () => {
<div className="flex items-center gap-2 text-xs"> <div className="flex items-center gap-2 text-xs">
<Coffee size={14} className="inline-block" /> <Coffee size={14} className="inline-block" />
<span> <span>Powered by coffee and countless hours of debugging</span>
Powered by coffee and countless hours of debugging
</span>
</div> </div>
</div> </div>
</div> </div>
</footer> </footer>
); )
}; }
export default Footer; export default Footer

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

@ -1,30 +1,32 @@
import { Linkedin, Github, Award } from "lucide-react"; import { Linkedin, Github, Award } from 'lucide-react'
import { COLORS } from "../constants"; import { COLORS } from '../constants'
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 = [ const socialLinks = [
{ {
icon: <Linkedin size={32} />, icon: <Linkedin size={32} />,
href: "https://www.linkedin.com/in/taqi-tahmid/", href: 'https://www.linkedin.com/in/taqi-tahmid/',
label: "LinkedIn" label: 'LinkedIn',
}, },
{ {
icon: <Github size={32} />, icon: <Github size={32} />,
href: "https://github.com/TheTaqiTahmid", href: 'https://github.com/TheTaqiTahmid',
label: "GitHub" label: 'GitHub',
}, },
{ {
icon: <Award size={32} />, 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", 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" 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 className={`text-5xl py-2 ${COLORS.PRIMARY} ${COLORS.DARK_PRIMARY} font-medium font-mono tracking-wide`}> <h1
className={`text-5xl py-2 ${COLORS.PRIMARY} ${COLORS.DARK_PRIMARY} font-medium font-mono tracking-wide`}
>
Taqi Tahmid Taqi Tahmid
</h1> </h1>
@ -32,21 +34,23 @@ const Introduction = () => {
Test Automation and DevOps Engineer Test Automation and DevOps Engineer
</h2> </h2>
<div className={`text-md py-5 ${COLORS.TEXT} ${COLORS.DARK_TEXT} leading-8 md:text-xl space-y-4`}> <div
className={`text-md py-5 ${COLORS.TEXT} ${COLORS.DARK_TEXT} leading-8 md:text-xl space-y-4`}
>
<p> <p>
I am a <span className={BoldStyle}>DevOps</span> and{" "} I am a <span className={BoldStyle}>DevOps</span> and{' '}
<span className={BoldStyle}>Test Automation</span> engineer with a{" "} <span className={BoldStyle}>Test Automation</span> engineer with a{' '}
<span className={BoldStyle}>certified Kubernetes Administrator (CKA)</span> certification, <span className={BoldStyle}>certified Kubernetes Administrator (CKA)</span> certification,
specializing in managing Kubernetes clusters and cloud infrastructure. specializing in managing Kubernetes clusters and cloud infrastructure. Currently working
Currently working at Ericsson in Finland as a DevOps Engineer. at Ericsson in Finland as a DevOps Engineer.
</p> </p>
<p> <p>
I bring four years of industry experience in designing CI/CD pipelines I bring four years of industry experience in designing CI/CD pipelines and test automation
and test automation for diverse applications and architectures. I hold a Bachelor's for diverse applications and architectures. I hold a Bachelor's degree from Khulna
degree from Khulna University of Engineering & Technology (KUET) and a Master's University of Engineering & Technology (KUET) and a Master's degree from Tampere
degree from Tampere University. My expertise spans across the entire DevOps lifecycle, University. My expertise spans across the entire DevOps lifecycle, from cluster management
from cluster management and infrastructure automation to implementing robust testing frameworks. and infrastructure automation to implementing robust testing frameworks.
</p> </p>
</div> </div>
@ -69,7 +73,7 @@ const Introduction = () => {
))} ))}
</div> </div>
</div> </div>
); )
}; }
export default Introduction; export default Introduction

61
frontend/src/components/Navbar.tsx
View File

@ -1,26 +1,26 @@
import React, { useEffect, useState, useRef } from 'react'; import React, { useEffect, useState, useRef } from 'react'
import { Menu, Sun, Moon, FileText, Mail, Check, Copy } from "lucide-react"; import { Menu, Sun, Moon, FileText, Mail, Check, Copy } from 'lucide-react'
import { COLORS, EMAIL, RESUME } from '../constants'; import { COLORS, EMAIL, RESUME } from '../constants'
interface NavProps { interface NavProps {
darkMode: boolean; darkMode: boolean
toggleDarkMode: () => void; toggleDarkMode: () => void
} }
const Navbar: React.FC<NavProps> = ({ toggleDarkMode, darkMode }) => { const Navbar: React.FC<NavProps> = ({ toggleDarkMode, darkMode }) => {
const [copied, setCopied] = useState(false); const [copied, setCopied] = useState(false)
const [isMenuOpen, setIsMenuOpen] = useState(false); const [isMenuOpen, setIsMenuOpen] = useState(false)
const menuRef = useRef<HTMLDivElement>(null); const menuRef = useRef<HTMLDivElement>(null)
const handleCopyEmail = async () => { const handleCopyEmail = async () => {
try { try {
await navigator.clipboard.writeText(EMAIL); await navigator.clipboard.writeText(EMAIL)
setCopied(true); setCopied(true)
setTimeout(() => setCopied(false), 2000); setTimeout(() => setCopied(false), 2000)
} catch (err) { } catch (err) {
console.error('Failed to copy email'); console.error('Failed to copy email', err)
}
} }
};
useEffect(() => { useEffect(() => {
localStorage.setItem('DARK_MODE', String(darkMode)) localStorage.setItem('DARK_MODE', String(darkMode))
@ -45,7 +45,10 @@ const Navbar: React.FC<NavProps> = ({toggleDarkMode, darkMode}) => {
{copied ? ( {copied ? (
<Check size={16} className="text-green-500" /> <Check size={16} className="text-green-500" />
) : ( ) : (
<Copy size={16} className="opacity-0 group-hover:opacity-100 transition-opacity duration-200" /> <Copy
size={16}
className="opacity-0 group-hover:opacity-100 transition-opacity duration-200"
/>
)} )}
<span className="pointer-events-none absolute -bottom-8 left-1/2 -translate-x-1/2 whitespace-nowrap rounded bg-slate-800 px-2 py-1 text-xs text-slate-100 opacity-0 transition before:absolute before:left-1/2 before:top-full before:-translate-x-1/2 before:border-4 before:border-transparent before:border-t-slate-800 before:content-[''] group-hover:opacity-100"> <span className="pointer-events-none absolute -bottom-8 left-1/2 -translate-x-1/2 whitespace-nowrap rounded bg-slate-800 px-2 py-1 text-xs text-slate-100 opacity-0 transition before:absolute before:left-1/2 before:top-full before:-translate-x-1/2 before:border-4 before:border-transparent before:border-t-slate-800 before:content-[''] group-hover:opacity-100">
{copied ? 'Copied!' : 'Click to copy'} {copied ? 'Copied!' : 'Click to copy'}
@ -53,21 +56,29 @@ const Navbar: React.FC<NavProps> = ({toggleDarkMode, darkMode}) => {
</button> </button>
<ul className="flex items-center"> <ul className="flex items-center">
<li className="transition ease-in-out delay-50 duration-100 cursor-pointer" <li
onClick={toggleDarkMode}> className="transition ease-in-out delay-50 duration-100 cursor-pointer"
onClick={toggleDarkMode}
>
<div className="group relative"> <div className="group relative">
{darkMode ? <Sun className='text-amber-400 hover:scale-110' size={30} /> : <Moon size={24} />} {darkMode ? (
<Sun className="text-amber-400 hover:scale-110" size={30} />
) : (
<Moon size={24} />
)}
<span className="pointer-events-none absolute -bottom-8 left-1/2 -translate-x-1/2 whitespace-nowrap rounded bg-slate-800 px-2 py-1 text-xs text-slate-100 opacity-0 transition before:absolute before:left-1/2 before:top-full before:-translate-x-1/2 before:border-4 before:border-transparent before:border-t-slate-800 before:content-[''] group-hover:opacity-100"> <span className="pointer-events-none absolute -bottom-8 left-1/2 -translate-x-1/2 whitespace-nowrap rounded bg-slate-800 px-2 py-1 text-xs text-slate-100 opacity-0 transition before:absolute before:left-1/2 before:top-full before:-translate-x-1/2 before:border-4 before:border-transparent before:border-t-slate-800 before:content-[''] group-hover:opacity-100">
{darkMode ? "Light Mode": "Dark Mode"} {darkMode ? 'Light Mode' : 'Dark Mode'}
</span> </span>
</div> </div>
</li> </li>
<li className="transition ease-in-out delay-50 duration-100"> <li className="transition ease-in-out delay-50 duration-100">
<div className="group relative"> <div className="group relative">
<a className="text-white p-2 ml-8 inline-flex" <a
className="text-white p-2 ml-8 inline-flex"
href={RESUME} href={RESUME}
target="_blank" target="_blank"
rel="noreferrer"> rel="noreferrer"
>
<FileText className="hover:scale-110 text-gray-800 dark:text-white" size={30} /> <FileText className="hover:scale-110 text-gray-800 dark:text-white" size={30} />
</a> </a>
<span className="pointer-events-none absolute -bottom-8 left-1/2 -translate-x-1/2 whitespace-nowrap rounded bg-slate-800 px-2 py-1 text-xs text-slate-100 opacity-0 transition before:absolute before:left-1/2 before:top-full before:-translate-x-1/2 before:border-4 before:border-transparent before:border-t-slate-800 before:content-[''] group-hover:opacity-100"> <span className="pointer-events-none absolute -bottom-8 left-1/2 -translate-x-1/2 whitespace-nowrap rounded bg-slate-800 px-2 py-1 text-xs text-slate-100 opacity-0 transition before:absolute before:left-1/2 before:top-full before:-translate-x-1/2 before:border-4 before:border-transparent before:border-t-slate-800 before:content-[''] group-hover:opacity-100">
@ -77,7 +88,7 @@ const Navbar: React.FC<NavProps> = ({toggleDarkMode, darkMode}) => {
</li> </li>
<li className="p-2 ml-5 cursor-pointer"> <li className="p-2 ml-5 cursor-pointer">
<div ref={menuRef} className="group relative"> <div ref={menuRef} className="group relative">
<button onClick={() => setIsMenuOpen(!isMenuOpen)} className='focus:outline-none'> <button onClick={() => setIsMenuOpen(!isMenuOpen)} className="focus:outline-none">
<Menu size={24} /> <Menu size={24} />
</button> </button>
@ -90,7 +101,7 @@ const Navbar: React.FC<NavProps> = ({toggleDarkMode, darkMode}) => {
key={item.title} key={item.title}
href={item.href} href={item.href}
className="block px-4 py-2 text-sm text-gray-00 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors duration-150" className="block px-4 py-2 text-sm text-gray-00 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors duration-150"
role='menuitem' role="menuitem"
> >
{item.title} {item.title}
</a> </a>
@ -103,7 +114,7 @@ const Navbar: React.FC<NavProps> = ({toggleDarkMode, darkMode}) => {
</ul> </ul>
</nav> </nav>
</div> </div>
); )
}; }
export default Navbar; export default Navbar

8
frontend/src/components/Photo.tsx
View File

@ -1,11 +1,13 @@
import taqimugshot from "../../src/assets/PhotoRoom_20201011_002118.jpg"; import taqimugshot from '../../src/assets/PhotoRoom_20201011_002118.jpg'
const Photo = () => { const Photo = () => {
return ( return (
<div className="py-3"> <div className="py-3">
<img className="relative mx-auto rounded-full w-80 h-80 object-cover" <img
className="relative mx-auto rounded-full w-80 h-80 object-cover"
src={taqimugshot} src={taqimugshot}
alt="mugshot"/> alt="mugshot"
/>
</div> </div>
) )
} }

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

@ -1,39 +1,41 @@
import pythonIcon from "../assets/python.svg"; import pythonIcon from '../assets/python.svg'
import robotIcon from "../assets/robotframework-svgrepo-com.svg"; import robotIcon from '../assets/robotframework-svgrepo-com.svg'
import goIcon from "../assets/go-original.svg"; import goIcon from '../assets/go-original.svg'
import reactIcon from "../assets/react.svg"; import reactIcon from '../assets/react.svg'
import ansibleIcon from "../assets/ansible.svg"; import ansibleIcon from '../assets/ansible.svg'
import terraformIcon from "../assets/terraform-icon.svg"; import terraformIcon from '../assets/terraform-icon.svg'
import jenkinsIcon from "../assets/jenkins.svg"; import jenkinsIcon from '../assets/jenkins.svg'
import gitIcon from "../assets/git-icon.svg"; import gitIcon from '../assets/git-icon.svg'
import dockerIcon from "../assets/docker-icon.svg"; import dockerIcon from '../assets/docker-icon.svg'
import kubernetesIcon from "../assets/kubernetes.svg"; import kubernetesIcon from '../assets/kubernetes.svg'
import prometheusIcon from "../assets/prometheus.svg"; import prometheusIcon from '../assets/prometheus.svg'
import grafanaIcon from "../assets/grafana.svg"; import grafanaIcon from '../assets/grafana.svg'
import { COLORS } from "../constants"; import { COLORS } from '../constants'
const Skills = () => { const Skills = () => {
const skills = [ const skills = [
{ name: "Python", icon: pythonIcon }, { name: 'Python', icon: pythonIcon },
{ name: "Golang", icon: goIcon }, { name: 'Golang', icon: goIcon },
{ name: "React", icon: reactIcon }, { name: 'React', icon: reactIcon },
{ name: "Robot Framework", icon: robotIcon }, { name: 'Robot Framework', icon: robotIcon },
{ name: "Ansible", icon: ansibleIcon }, { name: 'Ansible', icon: ansibleIcon },
{ name: "Terraform", icon: terraformIcon }, { name: 'Terraform', icon: terraformIcon },
{ name: "Jenkins", icon: jenkinsIcon }, { name: 'Jenkins', icon: jenkinsIcon },
{ name: "Git", icon: gitIcon }, { name: 'Git', icon: gitIcon },
{ name: "Docker", icon: dockerIcon }, { name: 'Docker', icon: dockerIcon },
{ name: "Kubernetes", icon: kubernetesIcon }, { name: 'Kubernetes', icon: kubernetesIcon },
{ name: "Prometheus", icon: prometheusIcon }, { name: 'Prometheus', icon: prometheusIcon },
{ name: "Grafana", icon: grafanaIcon }, { 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}`}>
Tools and Languages Tools and Languages
</h1> </h1>
<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`}> <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`}
>
{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" />
@ -42,7 +44,7 @@ const Skills = () => {
))} ))}
</div> </div>
</div> </div>
); )
}; }
export default Skills; export default Skills

23
frontend/src/constants.tsx
View File

@ -9,19 +9,22 @@ export const COLORS = {
export const EMAIL = 'taqitahmid@gmail.com' 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 RESUME =
'https://www.linkedin.com/in/taqi-tahmid/overlay/1735981754176/single-media-viewer/?profileId=ACoAACDU_GsBCgKtvw2bmzbVwTy2WixBG6-e3JM'
export const POSTS = [ export const POSTS = [
{ {
slug: "deployment-daemonset-statefulset", slug: 'deployment-daemonset-statefulset',
title: "Deployment VS DaemonSet VS StatefulSet", title: 'Deployment VS DaemonSet VS StatefulSet',
description: "All the information you need to find the difference between Deployment, DaemonSet, and StatefulSet controllers used to deploy Pods", description:
date: "2025-01-10" 'All the information you need to find the difference between Deployment, DaemonSet, and StatefulSet controllers used to deploy Pods',
date: '2025-01-10',
}, },
{ {
slug: "volumes", slug: 'volumes',
title: "Volumes in Kubernes and how to manage them", title: 'Volumes in Kubernes and how to manage them',
description: "What is a Volume, different types of volumes, how do you provision, and claim volumes in Kubernetes.", description:
date: "2025-01-10" 'What is a Volume, different types of volumes, how do you provision, and claim volumes in Kubernetes.',
date: '2025-01-10',
}, },
]; ]

2
frontend/src/main.tsx
View File

@ -6,5 +6,5 @@ import './index.css'
createRoot(document.getElementById('root')!).render( createRoot(document.getElementById('root')!).render(
<StrictMode> <StrictMode>
<App /> <App />
</StrictMode>, </StrictMode>
) )

134
frontend/src/pages/Experience.tsx
View File

@ -1,83 +1,94 @@
import { Building2, Calendar, GraduationCap, MapPin, Microscope, Wrench } from 'lucide-react'; import { Building2, Calendar, GraduationCap, MapPin, Microscope, Wrench } from 'lucide-react'
import { COLORS } from '../constants'; import { COLORS } from '../constants'
const Experience = () => { const Experience = () => {
const experiences = [ const experiences = [
{ {
title: "Experienced Developer (DevOps)", title: 'Experienced Developer (DevOps)',
company: "Ericsson", company: 'Ericsson',
location: "Jorvas, Finland", location: 'Jorvas, Finland',
period: "November-2022 - Present", period: 'November-2022 - Present',
responsibilities: [ responsibilities: [
"Managing and optimizing Kubernetes clusters in production environments", 'Managing and optimizing Kubernetes clusters in production environments',
"Designing and implementing CI/CD pipelines for end to end product development flow using Jenkins", 'Designing and implementing CI/CD pipelines for end to end product development flow using Jenkins',
"Automating infrastructure deployment using Terraform and Ansible", 'Automating infrastructure deployment using Terraform and Ansible',
"Develop and maintain monitoring solutions of various resources for greater observability and troubleshooting", 'Develop and maintain monitoring solutions of various resources for greater observability and troubleshooting',
"Actively support development teams regarding product development flow and infrastructure issues", 'Actively support development teams regarding product development flow and infrastructure issues',
"Develop and perform automated end-to-end product testing with Python, Robot Framework, Jenkins, Bash, etc.", 'Develop and perform automated end-to-end product testing with Python, Robot Framework, Jenkins, Bash, etc.',
], ],
tools: "Kubernetes, Docker, KVM, Openstack, Ansible, Terraform, Prometheus, Grafana" tools: 'Kubernetes, Docker, KVM, Openstack, Ansible, Terraform, Prometheus, Grafana',
}, },
{ {
title: "Test Engineer", title: 'Test Engineer',
company: "Nokia", company: 'Nokia',
location: "Espoo, Finland", location: 'Espoo, Finland',
period: "June-2021 - October-2022", period: 'June-2021 - October-2022',
responsibilities: [ responsibilities: [
"Develop and maintain Cloud RAN E2E test setup for vCU and vDU application testing on top of RedHat Openshift", 'Develop and maintain Cloud RAN E2E test setup for vCU and vDU application testing on top of RedHat Openshift',
"Develop automation and CI/CD flow for Cloud RAN testing using Python, Robot Framework, Bash, Jenkins etc.", 'Develop automation and CI/CD flow for Cloud RAN testing using Python, Robot Framework, Bash, Jenkins etc.',
"Develop and perform automated testing to validate the functionality of Nokia Cloud RAN base stations", 'Develop and perform automated testing to validate the functionality of Nokia Cloud RAN base stations',
"Integrate new hardware and software into the test setup", 'Integrate new hardware and software into the test setup',
"Perform hands on debugging and log analysis to nd root cause and solve any software or hardware issues", 'Perform hands on debugging and log analysis to nd root cause and solve any software or hardware issues',
], ],
tools: "Keysight Nemo Outdoor, Nemo Analyze, Qualcomm PCAT, QCAT, QXDM" tools: 'Keysight Nemo Outdoor, Nemo Analyze, Qualcomm PCAT, QCAT, QXDM',
}, },
{ {
title: "Testing and Prototyping Intern", title: 'Testing and Prototyping Intern',
company: "GE Healthcare", company: 'GE Healthcare',
location: "Helsinki, Finland", location: 'Helsinki, Finland',
period: "Jan-2019 - May-2021", period: 'Jan-2019 - May-2021',
responsibilities: [ responsibilities: [
"Planning, writing, and performing manual and automated tests of different prototype wireless medical devices", 'Planning, writing, and performing manual and automated tests of different prototype wireless medical devices',
"Designing driver and PCB circuits in Altium Designer to test the performance of the Digital Sensor Interface", 'Designing driver and PCB circuits in Altium Designer to test the performance of the Digital Sensor Interface',
"Ensuring the PCB componets used in the devices are EU RoHS and REACH compliant", 'Ensuring the PCB componets used in the devices are EU RoHS and REACH compliant',
], ],
tools: "LTSpice, Altium Designer, HP-ALM, Vector Network Analyzer, Spectrum Analyzer, Climate Chamber" tools:
} 'LTSpice, Altium Designer, HP-ALM, Vector Network Analyzer, Spectrum Analyzer, Climate Chamber',
]; },
]
const education = [ const education = [
{ {
degree: "Master's in Wireless Communication & RF Systems", degree: "Master's in Wireless Communication & RF Systems",
institution: "Tampere University", institution: 'Tampere University',
location: "Tampere, Finland", location: 'Tampere, Finland',
period: "2018 - 2020", period: '2018 - 2020',
thesis: "5G Reference Signals and their Possibility to be for 5G Based Positioning" thesis: '5G Reference Signals and their Possibility to be for 5G Based Positioning',
}, },
{ {
degree: "Bachelor's in Electrical & Electronic Engineering", degree: "Bachelor's in Electrical & Electronic Engineering",
institution: "Khulna University of Engineering & Technology", institution: 'Khulna University of Engineering & Technology',
location: "Khulna, Bangladesh", location: 'Khulna, Bangladesh',
period: "2013 - 2017", period: '2013 - 2017',
thesis: "Density-based smart traffic control system using Canny edge detection technique using Digital Image Processing" thesis:
} 'Density-based smart traffic control system using Canny edge detection technique using Digital Image Processing',
]; },
]
return ( return (
<div className="p-4 max-w-4xl mx-auto"> <div className="p-4 max-w-4xl mx-auto">
<h2 className={`text-3xl ${COLORS.PRIMARY} ${COLORS.DARK_PRIMARY} py-4 font-medium font-burtons text-center`}> <h2
className={`text-3xl ${COLORS.PRIMARY} ${COLORS.DARK_PRIMARY} py-4 font-medium font-burtons text-center`}
>
Experience Experience
</h2> </h2>
<div className="space-y-8"> <div className="space-y-8">
{experiences.map((exp, index) => ( {experiences.map((exp, index) => (
<div key={index} className={`border-l-4 ${COLORS.BORDER} ${COLORS.DARK_BORDER} pl-4 space-y-2`}> <div
key={index}
className={`border-l-4 ${COLORS.BORDER} ${COLORS.DARK_BORDER} pl-4 space-y-2`}
>
<div className="flex items-center gap-2"> <div className="flex items-center gap-2">
<Building2 className={`${COLORS.PRIMARY} ${COLORS.DARK_PRIMARY}`} size={24} /> <Building2 className={`${COLORS.PRIMARY} ${COLORS.DARK_PRIMARY}`} size={24} />
<h3 className={`${COLORS.PRIMARY} ${COLORS.DARK_PRIMARY} text-xl font-semibold`}>{exp.title}</h3> <h3 className={`${COLORS.PRIMARY} ${COLORS.DARK_PRIMARY} text-xl font-semibold`}>
{exp.title}
</h3>
</div> </div>
<div className={`flex flex-col md:flex-row md:items-center gap-2 md:gap-6 ${COLORS.TEXT} ${COLORS.DARK_TEXT}`}> <div
className={`flex flex-col md:flex-row md:items-center gap-2 md:gap-6 ${COLORS.TEXT} ${COLORS.DARK_TEXT}`}
>
<div className="flex items-center gap-1"> <div className="flex items-center gap-1">
<Building2 size={16} /> <Building2 size={16} />
<span>{exp.company}</span> <span>{exp.company}</span>
@ -96,12 +107,12 @@ const Experience = () => {
{exp.responsibilities.map((resp, idx) => ( {exp.responsibilities.map((resp, idx) => (
<p key={idx} className="flex text-wrap items-start"> <p key={idx} className="flex text-wrap items-start">
<span className="mr-2 mt-1 ml-4">*</span> <span className="mr-2 mt-1 ml-4">*</span>
<span className='text-left'>{resp}</span> <span className="text-left">{resp}</span>
</p> </p>
))} ))}
</div> </div>
<div className={`${COLORS.TEXT} ${COLORS.DARK_TEXT} space-y-1 flex items-start`}> <div className={`${COLORS.TEXT} ${COLORS.DARK_TEXT} space-y-1 flex items-start`}>
<div className='flex text-wrap items-center gap-2'> <div className="flex text-wrap items-center gap-2">
<Wrench size={20} /> <Wrench size={20} />
<span>{exp.tools}</span> <span>{exp.tools}</span>
</div> </div>
@ -110,19 +121,28 @@ const Experience = () => {
))} ))}
</div> </div>
<h2 className={`text-3xl ${COLORS.PRIMARY} ${COLORS.DARK_PRIMARY} mt-6 py-4 font-medium font-burtons text-center`}> <h2
className={`text-3xl ${COLORS.PRIMARY} ${COLORS.DARK_PRIMARY} mt-6 py-4 font-medium font-burtons text-center`}
>
Education Education
</h2> </h2>
<div className="space-y-6"> <div className="space-y-6">
{education.map((edu, index) => ( {education.map((edu, index) => (
<div key={index} className={`border-l-4 ${COLORS.BORDER} ${COLORS.DARK_BORDER} pl-4 space-y-2`}> <div
key={index}
className={`border-l-4 ${COLORS.BORDER} ${COLORS.DARK_BORDER} pl-4 space-y-2`}
>
<div className="flex items-center gap-2"> <div className="flex items-center gap-2">
<GraduationCap className={`${COLORS.PRIMARY} ${COLORS.DARK_PRIMARY}`} size={24} /> <GraduationCap className={`${COLORS.PRIMARY} ${COLORS.DARK_PRIMARY}`} size={24} />
<h3 className={`text-xl font-semibold ${COLORS.PRIMARY} ${COLORS.DARK_PRIMARY}`}>{edu.degree}</h3> <h3 className={`text-xl font-semibold ${COLORS.PRIMARY} ${COLORS.DARK_PRIMARY}`}>
{edu.degree}
</h3>
</div> </div>
<div className={`flex flex-col md:flex-row md:items-center gap-2 md:gap-6 ${COLORS.TEXT} ${COLORS.DARK_TEXT}`}> <div
className={`flex flex-col md:flex-row md:items-center gap-2 md:gap-6 ${COLORS.TEXT} ${COLORS.DARK_TEXT}`}
>
<div className="flex items-center gap-1"> <div className="flex items-center gap-1">
<Building2 size={16} /> <Building2 size={16} />
<span>{edu.institution}</span> <span>{edu.institution}</span>
@ -137,7 +157,7 @@ const Experience = () => {
</div> </div>
</div> </div>
<div className={`space-y-1 flex items-start ${COLORS.TEXT} ${COLORS.DARK_TEXT}`}> <div className={`space-y-1 flex items-start ${COLORS.TEXT} ${COLORS.DARK_TEXT}`}>
<div className='flex items-center gap-2'> <div className="flex items-center gap-2">
<Microscope size={20} /> <Microscope size={20} />
<span className={`text-left ${COLORS.TEXT} ${COLORS.DARK_TEXT}`}>{edu.thesis}</span> <span className={`text-left ${COLORS.TEXT} ${COLORS.DARK_TEXT}`}>{edu.thesis}</span>
</div> </div>
@ -146,7 +166,7 @@ const Experience = () => {
))} ))}
</div> </div>
</div> </div>
); )
}; }
export default Experience; export default Experience

88
frontend/src/pages/Interests.tsx
View File

@ -1,63 +1,74 @@
import { Camera, Plane, Film, Server, Cpu, Trophy, Car, Gamepad2 } from "lucide-react"; import { Camera, Plane, Film, Server, Cpu, Trophy, Car, Gamepad2 } from 'lucide-react'
import { COLORS } from "../constants"; import { COLORS } from '../constants'
const Interests = () => { const Interests = () => {
const interests = [ const interests = [
{ {
title: "Travelling", title: 'Travelling',
icon: <Plane size={32} />, icon: <Plane size={32} />,
description: "Exploring new places, experiencing different cultures, and creating lasting memories through adventures around the world. From scenic landscapes to bustling cities, every journey is an opportunity to learn and grow." description:
'Exploring new places, experiencing different cultures, and creating lasting memories through adventures around the world. From scenic landscapes to bustling cities, every journey is an opportunity to learn and grow.',
}, },
{ {
title: "Photography", title: 'Photography',
icon: <Camera size={32} />, icon: <Camera size={32} />,
description: "Capturing moments and perspectives through the lens. Particularly interested in landscape and street photography, always looking to improve composition skills and trying new techniques." description:
'Capturing moments and perspectives through the lens. Particularly interested in landscape and street photography, always looking to improve composition skills and trying new techniques.',
}, },
{ {
title: "Movies & Shows", title: 'Movies & Shows',
icon: <Film size={32} />, icon: <Film size={32} />,
description: "Passionate about cinema across various genres and cultures. Enjoy analyzing cinematography, storytelling techniques, and discovering hidden gems from different parts of the world." description:
'Passionate about cinema across various genres and cultures. Enjoy analyzing cinematography, storytelling techniques, and discovering hidden gems from different parts of the world.',
}, },
{ {
title: "Homelab", title: 'Homelab',
icon: <Server size={32} />, icon: <Server size={32} />,
description: "Managing a personal homelab setup for experimenting with self-hosted services, networking configurations, and learning about system administration in a hands-on environment." description:
'Managing a personal homelab setup for experimenting with self-hosted services, networking configurations, and learning about system administration in a hands-on environment.',
}, },
{ {
title: "New Technologies", title: 'New Technologies',
icon: <Cpu size={32} />, icon: <Cpu size={32} />,
description: "Keeping up with the latest technological advancements, particularly in cloud computing, automation, and emerging DevOps tools. Enjoy experimenting with new frameworks and platforms." description:
'Keeping up with the latest technological advancements, particularly in cloud computing, automation, and emerging DevOps tools. Enjoy experimenting with new frameworks and platforms.',
}, },
{ {
title: "Playing Video Games", title: 'Playing Video Games',
icon: <Gamepad2 size={32} />, icon: <Gamepad2 size={32} />,
description: "Enthusiastic gamer with a deep appreciation for interactive storytelling and virtual worlds. Enjoy exploring diverse genres from immersive RPGs to strategic multiplayer games." description:
'Enthusiastic gamer with a deep appreciation for interactive storytelling and virtual worlds. Enjoy exploring diverse genres from immersive RPGs to strategic multiplayer games.',
}, },
{ {
title: "Sports", title: 'Sports',
icon: <Trophy size={32} />, icon: <Trophy size={32} />,
description: "Avid sports enthusiast following multiple disciplines:", description: 'Avid sports enthusiast following multiple disciplines:',
subInterests: [ subInterests: [
{ {
name: "Football", name: 'Football',
details: "Following major leagues and international tournaments, appreciating the tactical aspects and team dynamics of the beautiful game." details:
'Following major leagues and international tournaments, appreciating the tactical aspects and team dynamics of the beautiful game.',
}, },
{ {
name: "Cricket", name: 'Cricket',
details: "Enjoying both test matches and limited-overs formats, following international competitions and analyzing game strategies." details:
'Enjoying both test matches and limited-overs formats, following international competitions and analyzing game strategies.',
}, },
{ {
name: "Formula 1", name: 'Formula 1',
icon: <Car size={24} />, icon: <Car size={24} />,
details: "Following the high-speed world of F1, keeping up with team developments, race strategies, and technical innovations in motorsport." details:
} 'Following the high-speed world of F1, keeping up with team developments, race strategies, and technical innovations in motorsport.',
},
],
},
] ]
}
];
return ( return (
<div className="p-4 max-w-4xl mx-auto"> <div className="p-4 max-w-4xl mx-auto">
<h1 className={`text-4xl text-center py-2 mb-8 ${COLORS.PRIMARY} ${COLORS.DARK_PRIMARY} font-medium font-mono tracking-wide`}> <h1
className={`text-4xl text-center py-2 mb-8 ${COLORS.PRIMARY} ${COLORS.DARK_PRIMARY} font-medium font-mono tracking-wide`}
>
Interests & Hobbies Interests & Hobbies
</h1> </h1>
@ -65,10 +76,14 @@ const Interests = () => {
{interests.map((interest, index) => ( {interests.map((interest, index) => (
<div <div
key={index} key={index}
className={`group p-6 rounded-lg border-2 border-gray-300 dark:border-gray-700 hover:shadow-lg transition-all duration-300 ${interest.subInterests ? 'md:col-span-2' : ''}`} className={`group p-6 rounded-lg border-2 border-gray-300 dark:border-gray-700 hover:shadow-lg transition-all duration-300 ${
interest.subInterests ? 'md:col-span-2' : ''
}`}
> >
<div className="flex items-center gap-4 mb-4"> <div className="flex items-center gap-4 mb-4">
<div className={`${COLORS.PRIMARY} ${COLORS.DARK_PRIMARY} group-hover:text-sky-600 dark:group-hover:text-sky-500 transition-colors duration-200`}> <div
className={`${COLORS.PRIMARY} ${COLORS.DARK_PRIMARY} group-hover:text-sky-600 dark:group-hover:text-sky-500 transition-colors duration-200`}
>
{interest.icon} {interest.icon}
</div> </div>
<h2 className={`text-2xl ${COLORS.PRIMARY} ${COLORS.DARK_PRIMARY}`}> <h2 className={`text-2xl ${COLORS.PRIMARY} ${COLORS.DARK_PRIMARY}`}>
@ -76,15 +91,15 @@ const Interests = () => {
</h2> </h2>
</div> </div>
<p className={`${COLORS.TEXT} ${COLORS.DARK_TEXT} leading-7`}> <p className={`${COLORS.TEXT} ${COLORS.DARK_TEXT} leading-7`}>{interest.description}</p>
{interest.description}
</p>
{interest.subInterests && ( {interest.subInterests && (
<div className="mt-4 grid gap-4 md:grid-cols-3"> <div className="mt-4 grid gap-4 md:grid-cols-3">
{interest.subInterests.map((subInterest, subIndex) => ( {interest.subInterests.map((subInterest, subIndex) => (
<div key={subIndex} className="p-4 bg-orange-100 dark:bg-gray-800 rounded-lg"> <div key={subIndex} className="p-4 bg-orange-100 dark:bg-gray-800 rounded-lg">
<h3 className={`text-lg font-semibold mb-2 ${COLORS.PRIMARY} ${COLORS.DARK_PRIMARY}`}> <h3
className={`text-lg font-semibold mb-2 ${COLORS.PRIMARY} ${COLORS.DARK_PRIMARY}`}
>
{subInterest.name} {subInterest.name}
</h3> </h3>
<p className={`${COLORS.TEXT} ${COLORS.DARK_TEXT} text-sm leading-6`}> <p className={`${COLORS.TEXT} ${COLORS.DARK_TEXT} text-sm leading-6`}>
@ -100,11 +115,12 @@ const Interests = () => {
<div className={`mt-8 text-center ${COLORS.TEXT} ${COLORS.DARK_TEXT}`}> <div className={`mt-8 text-center ${COLORS.TEXT} ${COLORS.DARK_TEXT}`}>
<p className="text-lg"> <p className="text-lg">
These interests not only provide a creative outlet and personal enjoyment but also complement my professional growth in technology and engineering. These interests not only provide a creative outlet and personal enjoyment but also
complement my professional growth in technology and engineering.
</p> </p>
</div> </div>
</div> </div>
); )
}; }
export default Interests; export default Interests

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

@ -1,74 +1,74 @@
import { Github, Link } from "lucide-react"; import { Github, Link } from 'lucide-react'
import { COLORS } from "../constants"; import { COLORS } from '../constants'
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 = [ const projects = [
{ {
title: "Self-Hosted Kubernetes Homelab Cluster", 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.", description:
technologies: ["Kubernetes", "KVM", "Linux", "Go", "Docker", "Helm", "MetalLB"], '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: [ links: [
{ {
icon: <Github size={24} />, icon: <Github size={24} />,
href: "https://github.com/yourusername/k8s-monitoring", href: 'https://github.com/yourusername/k8s-monitoring',
label: "GitHub" label: 'GitHub',
} },
] ],
}, },
{ {
title: "Personal Portfolio Website", 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.", description:
technologies: [ "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.",
"React", technologies: ['React', 'Tailwind CSS', 'Docker', 'Kubernetes', 'Nginx'],
"Tailwind CSS",
"Docker",
"Kubernetes",
"Nginx"
],
links: [ links: [
{ {
icon: <Github size={24} />, icon: <Github size={24} />,
href: "https://github.com/TheTaqiTahmid/my-portfolio", href: 'https://github.com/TheTaqiTahmid/my-portfolio',
label: "GitHub" label: 'GitHub',
}, },
{ {
icon: <Link size={24} />, icon: <Link size={24} />,
href: "https://portfolio.tahmidcloud.com", href: 'https://portfolio.tahmidcloud.com',
label: "Live Demo" label: 'Live Demo',
} },
] ],
}, },
{ {
title: "Automated Crypto Trading Bot", 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.", description:
technologies: ["Python", "Binance API", "Pandas", "NumPy"], "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: [ links: [
{ {
icon: <Github size={24} />, icon: <Github size={24} />,
href: "https://github.com/TheTaqiTahmid/binanceCryptoBot", href: 'https://github.com/TheTaqiTahmid/binanceCryptoBot',
label: "GitHub" label: 'GitHub',
} },
] ],
}, },
{ {
title: "Command Line Todo Application", 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.", description:
technologies: ["Go", "Cobra CLI"], "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: [ links: [
{ {
icon: <Github size={24} />, icon: <Github size={24} />,
href: "https://github.com/TheTaqiTahmid/todo", href: 'https://github.com/TheTaqiTahmid/todo',
label: "GitHub" label: 'GitHub',
} },
],
},
] ]
}
];
return ( return (
<div className="p-4 max-w-4xl mx-auto"> <div className="p-4 max-w-4xl mx-auto">
<h1 className={`text-4xl text-center py-2 mb-8 ${COLORS.PRIMARY} ${COLORS.DARK_PRIMARY} font-medium font-mono tracking-wide`}> <h1
className={`text-4xl text-center py-2 mb-8 ${COLORS.PRIMARY} ${COLORS.DARK_PRIMARY} font-medium font-mono tracking-wide`}
>
Projects Projects
</h1> </h1>
@ -89,7 +89,7 @@ const Projects = () => {
<div className="mb-4"> <div className="mb-4">
<span className={BoldStyle}>Technologies: </span> <span className={BoldStyle}>Technologies: </span>
<span className={`${COLORS.TEXT} ${COLORS.DARK_TEXT}`}> <span className={`${COLORS.TEXT} ${COLORS.DARK_TEXT}`}>
{project.technologies.join(", ")} {project.technologies.join(', ')}
</span> </span>
</div> </div>
@ -115,7 +115,7 @@ const Projects = () => {
))} ))}
</div> </div>
</div> </div>
); )
}; }
export default Projects; export default Projects