diff --git a/frontend/.prettierrc b/frontend/.prettierrc new file mode 100644 index 0000000..d62dbf3 --- /dev/null +++ b/frontend/.prettierrc @@ -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 + } \ No newline at end of file diff --git a/frontend/package-lock.json b/frontend/package-lock.json index 90ccc1c..094b8cc 100644 --- a/frontend/package-lock.json +++ b/frontend/package-lock.json @@ -27,6 +27,7 @@ "eslint-plugin-react-refresh": "^0.4.9", "globals": "^15.9.0", "postcss": "^8.4.45", + "prettier": "^3.5.3", "tailwindcss": "^3.4.11", "typescript": "^5.5.3", "typescript-eslint": "^8.0.1", @@ -4048,6 +4049,21 @@ "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": { "version": "6.5.0", "resolved": "https://registry.npmjs.org/property-information/-/property-information-6.5.0.tgz", diff --git a/frontend/package.json b/frontend/package.json index de49d9b..b90da03 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -7,7 +7,9 @@ "dev": "vite", "build": "tsc -b && vite build", "lint": "eslint .", - "preview": "vite preview" + "preview": "vite preview", + "format": "prettier --write .", + "format:check": "prettier --check ." }, "dependencies": { "@tailwindcss/typography": "^0.5.16", @@ -29,6 +31,7 @@ "eslint-plugin-react-refresh": "^0.4.9", "globals": "^15.9.0", "postcss": "^8.4.45", + "prettier": "^3.5.3", "tailwindcss": "^3.4.11", "typescript": "^5.5.3", "typescript-eslint": "^8.0.1", diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx index 8051711..c9762a2 100644 --- a/frontend/src/App.tsx +++ b/frontend/src/App.tsx @@ -1,48 +1,43 @@ import { useState } from 'react' -import { BrowserRouter as Router } from 'react-router-dom'; -import { Routes, Route } from 'react-router-dom'; +import { BrowserRouter as Router } from 'react-router-dom' +import { Routes, Route } from 'react-router-dom' import './App.css' import Home from './pages/Home' import Navbar from './components/Navbar' import Footer from './components/Footer' -import Experience from './pages/Experience'; -import Projects from './pages/Projects'; -import Interests from './pages/Interests'; -import { POSTS } from './constants'; -import { BlogList } from "./components/BlogList"; -import { BlogPost } from "./components/BlogPost"; +import Experience from './pages/Experience' +import Projects from './pages/Projects' +import Interests from './pages/Interests' function App() { const [darkMode, setDarkMode] = useState(() => { - const savedMode = localStorage.getItem('DARK_MODE'); - return savedMode ? JSON.parse(savedMode) : true; - }); + const savedMode = localStorage.getItem('DARK_MODE') + return savedMode ? JSON.parse(savedMode) : true + }) const toggleDarkMode = (): void => { setDarkMode(!darkMode) } return ( <> -
-
-
- - - - } /> - } /> - } /> - } /> - } /> - } /> - - -
-
-
+
+
+
+ + + + } /> + } /> + } /> + } /> + + +
+
+
) -} +} -export default App \ No newline at end of file +export default App diff --git a/frontend/src/components/BlogCard.tsx b/frontend/src/components/BlogCard.tsx deleted file mode 100644 index a291f0f..0000000 --- a/frontend/src/components/BlogCard.tsx +++ /dev/null @@ -1,17 +0,0 @@ -import { Link } from "react-router-dom"; - -export const BlogCard = ({ title, description, slug, date }) => { - return ( - -
-
-

{title}

-
-

{date}

-

{description}

-
-
-
- - ); -}; \ No newline at end of file diff --git a/frontend/src/components/BlogList.tsx b/frontend/src/components/BlogList.tsx deleted file mode 100644 index 92ef15e..0000000 --- a/frontend/src/components/BlogList.tsx +++ /dev/null @@ -1,17 +0,0 @@ -import { BlogCard } from "./BlogCard"; - -export const BlogList = ({ posts }) => { - return ( -
- {posts.map((post) => ( - - ))} -
- ); -}; \ No newline at end of file diff --git a/frontend/src/components/BlogPost.tsx b/frontend/src/components/BlogPost.tsx deleted file mode 100644 index 1c86929..0000000 --- a/frontend/src/components/BlogPost.tsx +++ /dev/null @@ -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 ( -
-

Loading...

-
- ); - } - - return ( -
- {/*

{metadata.title}

-
{metadata.date}
*/} -
- {content} -
-
- ); -}; \ No newline at end of file diff --git a/frontend/src/components/Footer.tsx b/frontend/src/components/Footer.tsx index 46437e5..3526c05 100644 --- a/frontend/src/components/Footer.tsx +++ b/frontend/src/components/Footer.tsx @@ -1,7 +1,7 @@ -import { Server, Coffee } from "lucide-react"; +import { Server, Coffee } from 'lucide-react' const Footer = () => { - const currentYear = new Date().getFullYear(); + const currentYear = new Date().getFullYear() return ( - ); -}; + ) +} -export default Footer; \ No newline at end of file +export default Footer diff --git a/frontend/src/components/Introduction.tsx b/frontend/src/components/Introduction.tsx index 7d61b58..d0c8144 100644 --- a/frontend/src/components/Introduction.tsx +++ b/frontend/src/components/Introduction.tsx @@ -1,75 +1,79 @@ -import { Linkedin, Github, Award } from "lucide-react"; -import { COLORS } from "../constants"; +import { Linkedin, Github, Award } from 'lucide-react' +import { COLORS } from '../constants' 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: , - href: "https://www.linkedin.com/in/taqi-tahmid/", - label: "LinkedIn" + href: 'https://www.linkedin.com/in/taqi-tahmid/', + label: 'LinkedIn', }, { icon: , - href: "https://github.com/TheTaqiTahmid", - label: "GitHub" + 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" - } - ]; + 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 (
-

+

Taqi Tahmid

- +

Test Automation and DevOps Engineer

- -
+ +

- I am a DevOps and{" "} - Test Automation engineer with a{" "} - certified Kubernetes Administrator (CKA) certification, - specializing in managing Kubernetes clusters and cloud infrastructure. - Currently working at Ericsson in Finland as a DevOps Engineer. + I am a DevOps and{' '} + Test Automation engineer with a{' '} + certified Kubernetes Administrator (CKA) certification, + specializing in managing Kubernetes clusters and cloud infrastructure. Currently working + at Ericsson in Finland as a DevOps Engineer.

- +

- I bring four years of industry experience in designing CI/CD pipelines - and test automation for diverse applications and architectures. I hold a Bachelor's - degree from Khulna University of Engineering & Technology (KUET) and a Master's - degree from Tampere University. My expertise spans across the entire DevOps lifecycle, - from cluster management and infrastructure automation to implementing robust testing frameworks. + I bring four years of industry experience in designing CI/CD pipelines and test automation + for diverse applications and architectures. I hold a Bachelor's degree from Khulna + University of Engineering & Technology (KUET) and a Master's degree from Tampere + University. My expertise spans across the entire DevOps lifecycle, from cluster management + and infrastructure automation to implementing robust testing frameworks.

{socialLinks.map((link, index) => (
- - {link.icon} - - - {link.label} - -
+ + {link.icon} + + + {link.label} + +
))}
- ); -}; + ) +} -export default Introduction; +export default Introduction diff --git a/frontend/src/components/Navbar.tsx b/frontend/src/components/Navbar.tsx index d3f008a..8a1f2f2 100644 --- a/frontend/src/components/Navbar.tsx +++ b/frontend/src/components/Navbar.tsx @@ -1,109 +1,120 @@ -import React, { useEffect, useState, useRef } from 'react'; -import { Menu, Sun, Moon, FileText, Mail, Check, Copy } from "lucide-react"; -import { COLORS, EMAIL, RESUME } from '../constants'; +import React, { useEffect, useState, useRef } from 'react' +import { Menu, Sun, Moon, FileText, Mail, Check, Copy } from 'lucide-react' +import { COLORS, EMAIL, RESUME } from '../constants' interface NavProps { - darkMode: boolean; - toggleDarkMode: () => void; + darkMode: boolean + toggleDarkMode: () => void } -const Navbar: React.FC = ({toggleDarkMode, darkMode}) => { - const [copied, setCopied] = useState(false); - const [isMenuOpen, setIsMenuOpen] = useState(false); - const menuRef = useRef(null); +const Navbar: React.FC = ({ toggleDarkMode, darkMode }) => { + const [copied, setCopied] = useState(false) + const [isMenuOpen, setIsMenuOpen] = useState(false) + const menuRef = useRef(null) const handleCopyEmail = async () => { try { - await navigator.clipboard.writeText(EMAIL); - setCopied(true); - setTimeout(() => setCopied(false), 2000); + await navigator.clipboard.writeText(EMAIL) + setCopied(true) + setTimeout(() => setCopied(false), 2000) } catch (err) { - console.error('Failed to copy email'); + console.error('Failed to copy email', err) } - }; + } useEffect(() => { localStorage.setItem('DARK_MODE', String(darkMode)) - },[darkMode]) + }, [darkMode]) const menuItem = [ - {title: 'Home', href: '/'}, - {title: 'Experience', href: '/experience'}, - {title: 'Projects', href: '/projects'}, - {title: 'Interests', href: '/interests'}, + { title: 'Home', href: '/' }, + { title: 'Experience', href: '/experience' }, + { title: 'Projects', href: '/projects' }, + { title: 'Interests', href: '/interests' }, ] return (
- ); -}; + ) +} -export default Navbar; \ No newline at end of file +export default Navbar diff --git a/frontend/src/components/Photo.tsx b/frontend/src/components/Photo.tsx index 0edba68..fccecd5 100644 --- a/frontend/src/components/Photo.tsx +++ b/frontend/src/components/Photo.tsx @@ -1,12 +1,14 @@ -import taqimugshot from "../../src/assets/PhotoRoom_20201011_002118.jpg"; +import taqimugshot from '../../src/assets/PhotoRoom_20201011_002118.jpg' const Photo = () => { return (
- mugshot -
+ mugshot + ) } -export default Photo \ No newline at end of file +export default Photo diff --git a/frontend/src/components/Skills.tsx b/frontend/src/components/Skills.tsx index 014adf6..fcf6da6 100644 --- a/frontend/src/components/Skills.tsx +++ b/frontend/src/components/Skills.tsx @@ -1,39 +1,41 @@ -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"; -import { COLORS } from "../constants"; +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' +import { COLORS } from '../constants' 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 }, - ]; + { 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 (

Tools and Languages

-
+
{skills.map((skill) => (
{skill.name} @@ -42,7 +44,7 @@ const Skills = () => { ))}
- ); -}; + ) +} -export default Skills; +export default Skills diff --git a/frontend/src/constants.tsx b/frontend/src/constants.tsx index 44e00ef..0a4bfdf 100644 --- a/frontend/src/constants.tsx +++ b/frontend/src/constants.tsx @@ -1,27 +1,30 @@ export const COLORS = { - PRIMARY: 'text-blue-900', - DARK_PRIMARY: 'dark:text-amber-50', - TEXT: 'text-gray-700', - DARK_TEXT: 'dark:text-gray-300', - BORDER: 'border-blue-900', - DARK_BORDER: 'border-blue-900', + PRIMARY: 'text-blue-900', + DARK_PRIMARY: 'dark:text-amber-50', + TEXT: 'text-gray-700', + DARK_TEXT: 'dark:text-gray-300', + BORDER: 'border-blue-900', + DARK_BORDER: 'border-blue-900', } 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 = [ - { - slug: "deployment-daemonset-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", - date: "2025-01-10" - }, - { - slug: "volumes", - 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.", - date: "2025-01-10" - }, -]; \ No newline at end of file + { + slug: 'deployment-daemonset-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', + date: '2025-01-10', + }, + { + slug: 'volumes', + 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.', + date: '2025-01-10', + }, +] diff --git a/frontend/src/main.tsx b/frontend/src/main.tsx index 6f4ac9b..234dd89 100644 --- a/frontend/src/main.tsx +++ b/frontend/src/main.tsx @@ -6,5 +6,5 @@ import './index.css' createRoot(document.getElementById('root')!).render( - , + ) diff --git a/frontend/src/pages/Experience.tsx b/frontend/src/pages/Experience.tsx index 0b71525..c35be05 100644 --- a/frontend/src/pages/Experience.tsx +++ b/frontend/src/pages/Experience.tsx @@ -1,83 +1,94 @@ -import { Building2, Calendar, GraduationCap, MapPin, Microscope, Wrench } from 'lucide-react'; -import { COLORS } from '../constants'; +import { Building2, Calendar, GraduationCap, MapPin, Microscope, Wrench } from 'lucide-react' +import { COLORS } from '../constants' const Experience = () => { const experiences = [ { - title: "Experienced Developer (DevOps)", - company: "Ericsson", - location: "Jorvas, Finland", - period: "November-2022 - Present", + title: 'Experienced Developer (DevOps)', + company: 'Ericsson', + location: 'Jorvas, Finland', + period: 'November-2022 - Present', responsibilities: [ - "Managing and optimizing Kubernetes clusters in production environments", - "Designing and implementing CI/CD pipelines for end to end product development flow using Jenkins", - "Automating infrastructure deployment using Terraform and Ansible", - "Develop and maintain monitoring solutions of various resources for greater observability and troubleshooting", - "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.", + 'Managing and optimizing Kubernetes clusters in production environments', + 'Designing and implementing CI/CD pipelines for end to end product development flow using Jenkins', + 'Automating infrastructure deployment using Terraform and Ansible', + 'Develop and maintain monitoring solutions of various resources for greater observability and troubleshooting', + '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.', ], - tools: "Kubernetes, Docker, KVM, Openstack, Ansible, Terraform, Prometheus, Grafana" + tools: 'Kubernetes, Docker, KVM, Openstack, Ansible, Terraform, Prometheus, Grafana', }, { - title: "Test Engineer", - company: "Nokia", - location: "Espoo, Finland", - period: "June-2021 - October-2022", + title: 'Test Engineer', + company: 'Nokia', + location: 'Espoo, Finland', + period: 'June-2021 - October-2022', responsibilities: [ - "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 and perform automated testing to validate the functionality of Nokia Cloud RAN base stations", - "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", + '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 and perform automated testing to validate the functionality of Nokia Cloud RAN base stations', + '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', ], - 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", - company: "GE Healthcare", - location: "Helsinki, Finland", - period: "Jan-2019 - May-2021", - responsibilities: [ - "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", - "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" - } - ]; + title: 'Testing and Prototyping Intern', + company: 'GE Healthcare', + location: 'Helsinki, Finland', + period: 'Jan-2019 - May-2021', + responsibilities: [ + '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', + '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', + }, + ] const education = [ { degree: "Master's in Wireless Communication & RF Systems", - institution: "Tampere University", - location: "Tampere, Finland", - period: "2018 - 2020", - thesis: "5G Reference Signals and their Possibility to be for 5G Based Positioning" + institution: 'Tampere University', + location: 'Tampere, Finland', + period: '2018 - 2020', + thesis: '5G Reference Signals and their Possibility to be for 5G Based Positioning', }, { degree: "Bachelor's in Electrical & Electronic Engineering", - institution: "Khulna University of Engineering & Technology", - location: "Khulna, Bangladesh", - period: "2013 - 2017", - thesis: "Density-based smart traffic control system using Canny edge detection technique using Digital Image Processing" - } - ]; + institution: 'Khulna University of Engineering & Technology', + location: 'Khulna, Bangladesh', + period: '2013 - 2017', + thesis: + 'Density-based smart traffic control system using Canny edge detection technique using Digital Image Processing', + }, + ] return (
-

+

Experience

{experiences.map((exp, index) => ( -
+
-

{exp.title}

+

+ {exp.title} +

- -
+ +
{exp.company} @@ -96,33 +107,42 @@ const Experience = () => { {exp.responsibilities.map((resp, idx) => (

* - {resp} + {resp}

))}
-
- - {exp.tools} -
+
+ + {exp.tools} +
))}
-

+

Education

{education.map((edu, index) => ( -
+
-

{edu.degree}

+

+ {edu.degree} +

- -
+ +
{edu.institution} @@ -137,16 +157,16 @@ const Experience = () => {
-
- - {edu.thesis} -
+
+ + {edu.thesis} +
))}
- ); -}; + ) +} -export default Experience; \ No newline at end of file +export default Experience diff --git a/frontend/src/pages/Home.tsx b/frontend/src/pages/Home.tsx index eae12cc..1d7e60a 100644 --- a/frontend/src/pages/Home.tsx +++ b/frontend/src/pages/Home.tsx @@ -2,12 +2,12 @@ import Introduction from '../components/Introduction' import Skills from '../components/Skills' function Home() { - return ( - <> - - - - ) + return ( + <> + + + + ) } -export default Home \ No newline at end of file +export default Home diff --git a/frontend/src/pages/Interests.tsx b/frontend/src/pages/Interests.tsx index fe966b1..a3000a3 100644 --- a/frontend/src/pages/Interests.tsx +++ b/frontend/src/pages/Interests.tsx @@ -1,90 +1,105 @@ -import { Camera, Plane, Film, Server, Cpu, Trophy, Car, Gamepad2 } from "lucide-react"; -import { COLORS } from "../constants"; +import { Camera, Plane, Film, Server, Cpu, Trophy, Car, Gamepad2 } from 'lucide-react' +import { COLORS } from '../constants' const Interests = () => { const interests = [ { - title: "Travelling", + title: 'Travelling', icon: , - 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: , - 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: , - 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: , - 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: , - 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: , - 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: , - description: "Avid sports enthusiast following multiple disciplines:", + description: 'Avid sports enthusiast following multiple disciplines:', subInterests: [ { - name: "Football", - details: "Following major leagues and international tournaments, appreciating the tactical aspects and team dynamics of the beautiful game." + name: 'Football', + details: + 'Following major leagues and international tournaments, appreciating the tactical aspects and team dynamics of the beautiful game.', }, { - name: "Cricket", - details: "Enjoying both test matches and limited-overs formats, following international competitions and analyzing game strategies." + name: 'Cricket', + details: + 'Enjoying both test matches and limited-overs formats, following international competitions and analyzing game strategies.', }, { - name: "Formula 1", + name: 'Formula 1', icon: , - 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 (
-

+

Interests & Hobbies

{interests.map((interest, index) => ( -
-
+
{interest.icon}

{interest.title}

- -

- {interest.description} -

+ +

{interest.description}

{interest.subInterests && (
{interest.subInterests.map((subInterest, subIndex) => (
-

+

{subInterest.name}

@@ -100,11 +115,12 @@ const Interests = () => {

- 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.

- ); -}; + ) +} -export default Interests; \ No newline at end of file +export default Interests diff --git a/frontend/src/pages/Projects.tsx b/frontend/src/pages/Projects.tsx index 14a66cb..eaa9c0d 100644 --- a/frontend/src/pages/Projects.tsx +++ b/frontend/src/pages/Projects.tsx @@ -1,95 +1,95 @@ -import { Github, Link } from "lucide-react"; -import { COLORS } from "../constants"; +import { Github, Link } from 'lucide-react' +import { COLORS } from '../constants' 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"], + 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" - } - ] + 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" - ], + 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" + href: 'https://github.com/TheTaqiTahmid/my-portfolio', + label: 'GitHub', }, { icon: , - href: "https://portfolio.tahmidcloud.com", - label: "Live Demo" - } - ] + 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"], + 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" - } - ] + 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"], + 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" - } - ] - } - ]; + href: 'https://github.com/TheTaqiTahmid/todo', + label: 'GitHub', + }, + ], + }, + ] return (
-

+

Projects

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

{project.title}

- +

{project.description}

- +
Technologies: - {project.technologies.join(", ")} + {project.technologies.join(', ')}
@@ -115,7 +115,7 @@ const Projects = () => { ))}
- ); -}; + ) +} -export default Projects; \ No newline at end of file +export default Projects