formatted with prettier
This commit is contained in:
13
frontend/.prettierrc
Normal file
13
frontend/.prettierrc
Normal 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
16
frontend/package-lock.json
generated
@ -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",
|
||||
|
||||
@ -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",
|
||||
|
||||
@ -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 (
|
||||
<>
|
||||
<div className={darkMode ? "dark" : ""}>
|
||||
<main className="bg-amber-50 px-10 dark:bg-gray-900">
|
||||
<section className="min-h-screen">
|
||||
<Navbar toggleDarkMode={toggleDarkMode} darkMode={darkMode}/>
|
||||
<Router>
|
||||
<Routes>
|
||||
<Route path='/' element={<Home/>} />
|
||||
<Route path='/experience' element={<Experience/>} />
|
||||
<Route path='/projects' element={<Projects/>} />
|
||||
<Route path='/Interests' element={<Interests />} />
|
||||
<Route path="/blog" element={<BlogList posts={POSTS} />} />
|
||||
<Route path="/blog/:slug" element={<BlogPost />} />
|
||||
</Routes>
|
||||
</Router>
|
||||
<Footer />
|
||||
</section>
|
||||
</main>
|
||||
</div>
|
||||
<div className={darkMode ? 'dark' : ''}>
|
||||
<main className="bg-amber-50 px-10 dark:bg-gray-900">
|
||||
<section className="min-h-screen">
|
||||
<Navbar toggleDarkMode={toggleDarkMode} darkMode={darkMode} />
|
||||
<Router>
|
||||
<Routes>
|
||||
<Route path="/" element={<Home />} />
|
||||
<Route path="/experience" element={<Experience />} />
|
||||
<Route path="/projects" element={<Projects />} />
|
||||
<Route path="/Interests" element={<Interests />} />
|
||||
</Routes>
|
||||
</Router>
|
||||
<Footer />
|
||||
</section>
|
||||
</main>
|
||||
</div>
|
||||
</>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
export default App
|
||||
export default App
|
||||
|
||||
@ -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>
|
||||
);
|
||||
};
|
||||
@ -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>
|
||||
);
|
||||
};
|
||||
@ -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>
|
||||
);
|
||||
};
|
||||
@ -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 (
|
||||
<footer className="mt-16 py-6 border-t border-gray-200 dark:border-gray-800">
|
||||
@ -11,15 +11,15 @@ const Footer = () => {
|
||||
<Server size={16} className="inline-block" />
|
||||
<span>Self-hosted on my homelab Kubernetes cluster</span>
|
||||
</div>
|
||||
|
||||
|
||||
<div className="flex flex-wrap justify-center gap-x-4 gap-y-2 text-center">
|
||||
<span>© {currentYear} Taqi Tahmid</span>
|
||||
<span>•</span>
|
||||
<span>Built with React & Tailwind CSS</span>
|
||||
<span>•</span>
|
||||
<a
|
||||
href="https://github.com/TheTaqiTahmid/my-portfolio.git"
|
||||
target="_blank"
|
||||
<a
|
||||
href="https://github.com/TheTaqiTahmid/my-portfolio.git"
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
className="hover:text-blue-600 dark:hover:text-blue-400 transition-colors"
|
||||
>
|
||||
@ -29,14 +29,12 @@ const Footer = () => {
|
||||
|
||||
<div className="flex items-center gap-2 text-xs">
|
||||
<Coffee size={14} className="inline-block" />
|
||||
<span>
|
||||
Powered by coffee and countless hours of debugging
|
||||
</span>
|
||||
<span>Powered by coffee and countless hours of debugging</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
);
|
||||
};
|
||||
)
|
||||
}
|
||||
|
||||
export default Footer;
|
||||
export default Footer
|
||||
|
||||
@ -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: <Linkedin size={32} />,
|
||||
href: "https://www.linkedin.com/in/taqi-tahmid/",
|
||||
label: "LinkedIn"
|
||||
href: 'https://www.linkedin.com/in/taqi-tahmid/',
|
||||
label: 'LinkedIn',
|
||||
},
|
||||
{
|
||||
icon: <Github size={32} />,
|
||||
href: "https://github.com/TheTaqiTahmid",
|
||||
label: "GitHub"
|
||||
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"
|
||||
}
|
||||
];
|
||||
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 (
|
||||
<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
|
||||
</h1>
|
||||
|
||||
|
||||
<h2 className={`text-2xl py-2 font-burtons ${COLORS.PRIMARY} ${COLORS.DARK_PRIMARY}`}>
|
||||
Test Automation and DevOps Engineer
|
||||
</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>
|
||||
I am a <span className={BoldStyle}>DevOps</span> and{" "}
|
||||
<span className={BoldStyle}>Test Automation</span> engineer with a{" "}
|
||||
<span className={BoldStyle}>certified Kubernetes Administrator (CKA)</span> certification,
|
||||
specializing in managing Kubernetes clusters and cloud infrastructure.
|
||||
Currently working at Ericsson in Finland as a DevOps Engineer.
|
||||
I am a <span className={BoldStyle}>DevOps</span> and{' '}
|
||||
<span className={BoldStyle}>Test Automation</span> engineer with a{' '}
|
||||
<span className={BoldStyle}>certified Kubernetes Administrator (CKA)</span> certification,
|
||||
specializing in managing Kubernetes clusters and cloud infrastructure. Currently working
|
||||
at Ericsson in Finland as a DevOps Engineer.
|
||||
</p>
|
||||
|
||||
|
||||
<p>
|
||||
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.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="flex justify-center gap-8 py-3">
|
||||
{socialLinks.map((link, index) => (
|
||||
<div key={index} className="group relative">
|
||||
<a
|
||||
href={link.href}
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
className={`${COLORS.PRIMARY} ${COLORS.DARK_PRIMARY} hover:text-sky-600 dark:hover:text-sky-500 transition-colors duration-200`}
|
||||
aria-label={link.label}
|
||||
>
|
||||
{link.icon}
|
||||
</a>
|
||||
<span className="pointer-events-none absolute -top-8 left-1/2 -translate-x-1/2 whitespace-nowrap rounded bg-slate-800 px-2 py-1 text-sm 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">
|
||||
{link.label}
|
||||
</span>
|
||||
</div>
|
||||
<a
|
||||
href={link.href}
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
className={`${COLORS.PRIMARY} ${COLORS.DARK_PRIMARY} hover:text-sky-600 dark:hover:text-sky-500 transition-colors duration-200`}
|
||||
aria-label={link.label}
|
||||
>
|
||||
{link.icon}
|
||||
</a>
|
||||
<span className="pointer-events-none absolute -top-8 left-1/2 -translate-x-1/2 whitespace-nowrap rounded bg-slate-800 px-2 py-1 text-sm 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">
|
||||
{link.label}
|
||||
</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
)
|
||||
}
|
||||
|
||||
export default Introduction;
|
||||
export default Introduction
|
||||
|
||||
@ -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<NavProps> = ({toggleDarkMode, darkMode}) => {
|
||||
const [copied, setCopied] = useState(false);
|
||||
const [isMenuOpen, setIsMenuOpen] = useState(false);
|
||||
const menuRef = useRef<HTMLDivElement>(null);
|
||||
const Navbar: React.FC<NavProps> = ({ toggleDarkMode, darkMode }) => {
|
||||
const [copied, setCopied] = useState(false)
|
||||
const [isMenuOpen, setIsMenuOpen] = useState(false)
|
||||
const menuRef = useRef<HTMLDivElement>(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 (
|
||||
<div className="w-full flex justify-center">
|
||||
<nav className="py-5 mb-6 flex justify-between dark:text-white w-full max-w-5xl px-4">
|
||||
<button
|
||||
onClick={handleCopyEmail}
|
||||
className="flex items-center space-x-2 hover:bg-gray-100 dark:hover:bg-gray-800 px-3 py-2 rounded-lg transition-colors duration-200 group relative"
|
||||
<button
|
||||
onClick={handleCopyEmail}
|
||||
className="flex items-center space-x-2 hover:bg-gray-100 dark:hover:bg-gray-800 px-3 py-2 rounded-lg transition-colors duration-200 group relative"
|
||||
>
|
||||
<Mail size={25} className={`${COLORS.DARK_PRIMARY}`} />
|
||||
<span>Email</span>
|
||||
{copied ? (
|
||||
<Check size={16} className="text-green-500" />
|
||||
) : (
|
||||
<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">
|
||||
{copied ? 'Copied!' : 'Click to copy'}
|
||||
</span>
|
||||
</button>
|
||||
|
||||
<ul className="flex items-center">
|
||||
<li
|
||||
className="transition ease-in-out delay-50 duration-100 cursor-pointer"
|
||||
onClick={toggleDarkMode}
|
||||
>
|
||||
<Mail size={25} className={`${COLORS.DARK_PRIMARY}`} />
|
||||
<span>Email</span>
|
||||
{copied ? (
|
||||
<Check size={16} className="text-green-500" />
|
||||
) : (
|
||||
<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">
|
||||
{copied ? 'Copied!' : 'Click to copy'}
|
||||
</span>
|
||||
</button>
|
||||
<div className="group relative">
|
||||
{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">
|
||||
{darkMode ? 'Light Mode' : 'Dark Mode'}
|
||||
</span>
|
||||
</div>
|
||||
</li>
|
||||
<li className="transition ease-in-out delay-50 duration-100">
|
||||
<div className="group relative">
|
||||
<a
|
||||
className="text-white p-2 ml-8 inline-flex"
|
||||
href={RESUME}
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
>
|
||||
<FileText className="hover:scale-110 text-gray-800 dark:text-white" size={30} />
|
||||
</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">
|
||||
Resume
|
||||
</span>
|
||||
</div>
|
||||
</li>
|
||||
<li className="p-2 ml-5 cursor-pointer">
|
||||
<div ref={menuRef} className="group relative">
|
||||
<button onClick={() => setIsMenuOpen(!isMenuOpen)} className="focus:outline-none">
|
||||
<Menu size={24} />
|
||||
</button>
|
||||
|
||||
<ul className="flex items-center">
|
||||
<li className="transition ease-in-out delay-50 duration-100 cursor-pointer"
|
||||
onClick={toggleDarkMode}>
|
||||
<div className="group relative">
|
||||
{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">
|
||||
{darkMode ? "Light Mode": "Dark Mode"}
|
||||
</span>
|
||||
</div>
|
||||
</li>
|
||||
<li className="transition ease-in-out delay-50 duration-100">
|
||||
<div className="group relative">
|
||||
<a className="text-white p-2 ml-8 inline-flex"
|
||||
href={RESUME}
|
||||
target="_blank"
|
||||
rel="noreferrer">
|
||||
<FileText className="hover:scale-110 text-gray-800 dark:text-white" size={30} />
|
||||
</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">
|
||||
Resume
|
||||
</span>
|
||||
{/* Dropdown Menu */}
|
||||
{isMenuOpen && (
|
||||
<div className="absolute right-0 mt-3 w-36 rounded-md shadow-lg bg-amber-50 dark:bg-gray-800 ring-1 ring-black ring-opacity-5">
|
||||
<div className="py-1" role="menu" aria-orientation="vertical">
|
||||
{menuItem.map((item) => (
|
||||
<a
|
||||
key={item.title}
|
||||
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"
|
||||
role="menuitem"
|
||||
>
|
||||
{item.title}
|
||||
</a>
|
||||
))}
|
||||
</div>
|
||||
</li>
|
||||
<li className="p-2 ml-5 cursor-pointer">
|
||||
<div ref={menuRef} className="group relative">
|
||||
<button onClick={() => setIsMenuOpen(!isMenuOpen)} className='focus:outline-none'>
|
||||
<Menu size={24}/>
|
||||
</button>
|
||||
|
||||
{/* Dropdown Menu */}
|
||||
{isMenuOpen && (
|
||||
<div className="absolute right-0 mt-3 w-36 rounded-md shadow-lg bg-amber-50 dark:bg-gray-800 ring-1 ring-black ring-opacity-5">
|
||||
<div className="py-1" role="menu" aria-orientation="vertical">
|
||||
{menuItem.map((item) => (
|
||||
<a
|
||||
key={item.title}
|
||||
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"
|
||||
role='menuitem'
|
||||
>
|
||||
{item.title}
|
||||
</a>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
)}
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
)
|
||||
}
|
||||
|
||||
export default Navbar;
|
||||
export default Navbar
|
||||
|
||||
@ -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 (
|
||||
<div className="py-3">
|
||||
<img className="relative mx-auto rounded-full w-80 h-80 object-cover"
|
||||
src={taqimugshot}
|
||||
alt="mugshot"/>
|
||||
</div>
|
||||
<img
|
||||
className="relative mx-auto rounded-full w-80 h-80 object-cover"
|
||||
src={taqimugshot}
|
||||
alt="mugshot"
|
||||
/>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
export default Photo
|
||||
export default Photo
|
||||
|
||||
@ -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 (
|
||||
<div>
|
||||
<h1 className={`text-2xl py-5 font-burtons ${COLORS.PRIMARY} ${COLORS.DARK_PRIMARY}`}>
|
||||
Tools and Languages
|
||||
</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) => (
|
||||
<div key={skill.name} className="flex flex-col items-center">
|
||||
<img src={skill.icon} alt={skill.name} className="h-10 w-10" />
|
||||
@ -42,7 +44,7 @@ const Skills = () => {
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
)
|
||||
}
|
||||
|
||||
export default Skills;
|
||||
export default Skills
|
||||
|
||||
@ -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"
|
||||
},
|
||||
];
|
||||
{
|
||||
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',
|
||||
},
|
||||
]
|
||||
|
||||
@ -6,5 +6,5 @@ import './index.css'
|
||||
createRoot(document.getElementById('root')!).render(
|
||||
<StrictMode>
|
||||
<App />
|
||||
</StrictMode>,
|
||||
</StrictMode>
|
||||
)
|
||||
|
||||
@ -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 (
|
||||
<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
|
||||
</h2>
|
||||
|
||||
<div className="space-y-8">
|
||||
{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">
|
||||
<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 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">
|
||||
<Building2 size={16} />
|
||||
<span>{exp.company}</span>
|
||||
@ -96,33 +107,42 @@ const Experience = () => {
|
||||
{exp.responsibilities.map((resp, idx) => (
|
||||
<p key={idx} className="flex text-wrap items-start">
|
||||
<span className="mr-2 mt-1 ml-4">*</span>
|
||||
<span className='text-left'>{resp}</span>
|
||||
<span className="text-left">{resp}</span>
|
||||
</p>
|
||||
))}
|
||||
</div>
|
||||
<div className={`${COLORS.TEXT} ${COLORS.DARK_TEXT} space-y-1 flex items-start`}>
|
||||
<div className='flex text-wrap items-center gap-2'>
|
||||
<Wrench size={20}/>
|
||||
<span>{exp.tools}</span>
|
||||
</div>
|
||||
<div className="flex text-wrap items-center gap-2">
|
||||
<Wrench size={20} />
|
||||
<span>{exp.tools}</span>
|
||||
</div>
|
||||
</div>
|
||||
</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
|
||||
</h2>
|
||||
|
||||
<div className="space-y-6">
|
||||
{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">
|
||||
<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 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">
|
||||
<Building2 size={16} />
|
||||
<span>{edu.institution}</span>
|
||||
@ -137,16 +157,16 @@ const Experience = () => {
|
||||
</div>
|
||||
</div>
|
||||
<div className={`space-y-1 flex items-start ${COLORS.TEXT} ${COLORS.DARK_TEXT}`}>
|
||||
<div className='flex items-center gap-2'>
|
||||
<Microscope size={20}/>
|
||||
<span className={`text-left ${COLORS.TEXT} ${COLORS.DARK_TEXT}`}>{edu.thesis}</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<Microscope size={20} />
|
||||
<span className={`text-left ${COLORS.TEXT} ${COLORS.DARK_TEXT}`}>{edu.thesis}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
)
|
||||
}
|
||||
|
||||
export default Experience;
|
||||
export default Experience
|
||||
|
||||
@ -2,12 +2,12 @@ import Introduction from '../components/Introduction'
|
||||
import Skills from '../components/Skills'
|
||||
|
||||
function Home() {
|
||||
return (
|
||||
<>
|
||||
<Introduction />
|
||||
<Skills />
|
||||
</>
|
||||
)
|
||||
return (
|
||||
<>
|
||||
<Introduction />
|
||||
<Skills />
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
export default Home
|
||||
export default Home
|
||||
|
||||
@ -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: <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} />,
|
||||
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} />,
|
||||
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} />,
|
||||
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} />,
|
||||
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} />,
|
||||
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} />,
|
||||
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: <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 (
|
||||
<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
|
||||
</h1>
|
||||
|
||||
<div className="grid gap-6 md:grid-cols-2">
|
||||
{interests.map((interest, index) => (
|
||||
<div
|
||||
<div
|
||||
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={`${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}
|
||||
</div>
|
||||
<h2 className={`text-2xl ${COLORS.PRIMARY} ${COLORS.DARK_PRIMARY}`}>
|
||||
{interest.title}
|
||||
</h2>
|
||||
</div>
|
||||
|
||||
<p className={`${COLORS.TEXT} ${COLORS.DARK_TEXT} leading-7`}>
|
||||
{interest.description}
|
||||
</p>
|
||||
|
||||
<p className={`${COLORS.TEXT} ${COLORS.DARK_TEXT} leading-7`}>{interest.description}</p>
|
||||
|
||||
{interest.subInterests && (
|
||||
<div className="mt-4 grid gap-4 md:grid-cols-3">
|
||||
{interest.subInterests.map((subInterest, subIndex) => (
|
||||
<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}
|
||||
</h3>
|
||||
<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}`}>
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
)
|
||||
}
|
||||
|
||||
export default Interests;
|
||||
export default Interests
|
||||
|
||||
@ -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: <Github size={24} />,
|
||||
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: <Github size={24} />,
|
||||
href: "https://github.com/TheTaqiTahmid/my-portfolio",
|
||||
label: "GitHub"
|
||||
href: 'https://github.com/TheTaqiTahmid/my-portfolio',
|
||||
label: 'GitHub',
|
||||
},
|
||||
{
|
||||
icon: <Link size={24} />,
|
||||
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: <Github size={24} />,
|
||||
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: <Github size={24} />,
|
||||
href: "https://github.com/TheTaqiTahmid/todo",
|
||||
label: "GitHub"
|
||||
}
|
||||
]
|
||||
}
|
||||
];
|
||||
href: 'https://github.com/TheTaqiTahmid/todo',
|
||||
label: 'GitHub',
|
||||
},
|
||||
],
|
||||
},
|
||||
]
|
||||
|
||||
return (
|
||||
<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
|
||||
</h1>
|
||||
|
||||
<div className="space-y-8">
|
||||
{projects.map((project, index) => (
|
||||
<div
|
||||
<div
|
||||
key={index}
|
||||
className="border-2 border-gray-300 dark:border-gray-700 rounded-lg p-6 hover:shadow-lg transition-shadow duration-300"
|
||||
>
|
||||
<h2 className={`text-2xl mb-2 ${COLORS.PRIMARY} ${COLORS.DARK_PRIMARY}`}>
|
||||
{project.title}
|
||||
</h2>
|
||||
|
||||
|
||||
<p className={`mb-4 ${COLORS.TEXT} ${COLORS.DARK_TEXT} leading-7`}>
|
||||
{project.description}
|
||||
</p>
|
||||
|
||||
|
||||
<div className="mb-4">
|
||||
<span className={BoldStyle}>Technologies: </span>
|
||||
<span className={`${COLORS.TEXT} ${COLORS.DARK_TEXT}`}>
|
||||
{project.technologies.join(", ")}
|
||||
{project.technologies.join(', ')}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
@ -115,7 +115,7 @@ const Projects = () => {
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
)
|
||||
}
|
||||
|
||||
export default Projects;
|
||||
export default Projects
|
||||
|
||||
Reference in New Issue
Block a user