updated frontend with CKA info and footer
This commit is contained in:
42
frontend/src/components/Footer.tsx
Normal file
42
frontend/src/components/Footer.tsx
Normal file
@ -0,0 +1,42 @@
|
||||
import { Server, Coffee } from "lucide-react";
|
||||
|
||||
const Footer = () => {
|
||||
const currentYear = new Date().getFullYear();
|
||||
|
||||
return (
|
||||
<footer className="mt-12 py-6 border-t border-gray-200 dark:border-gray-800">
|
||||
<div className="max-w-4xl mx-auto px-4">
|
||||
<div className="flex flex-col items-center gap-4 text-gray-600 dark:text-gray-400 text-sm">
|
||||
<div className="flex items-center gap-2">
|
||||
<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/portfolio"
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
className="hover:text-blue-600 dark:hover:text-blue-400 transition-colors"
|
||||
>
|
||||
View Source
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
);
|
||||
};
|
||||
|
||||
export default Footer;
|
||||
@ -1,44 +1,75 @@
|
||||
import { AiFillGithub, AiFillLinkedin } from "react-icons/ai";
|
||||
import React from "react";
|
||||
import { Linkedin, Github, Award } from "lucide-react";
|
||||
|
||||
const Introduction = () => {
|
||||
const BoldStyle = "text-blue-900 dark:text-blue-400";
|
||||
const BoldStyle = "text-blue-900 dark:text-blue-400 font-semibold";
|
||||
|
||||
const socialLinks = [
|
||||
{
|
||||
icon: <Linkedin size={32} />,
|
||||
href: "https://www.linkedin.com/in/taqi-tahmid/",
|
||||
label: "LinkedIn"
|
||||
},
|
||||
{
|
||||
icon: <Github size={32} />,
|
||||
href: "https://github.com/TheTaqiTahmid",
|
||||
label: "GitHub"
|
||||
},
|
||||
{
|
||||
icon: <Award size={32} />,
|
||||
href: "https://ti-user-certificates.s3.amazonaws.com/e0df7fbf-a057-42af-8a1f-590912be5460/3da54db2-f994-4148-a0ca-705ae1d748cd-mohammad-taqi-tahmid-094cf8b4-0db8-4a9f-b787-b4efbb2a90fe-certificate.pdf",
|
||||
label: "CKA Certificate"
|
||||
}
|
||||
];
|
||||
|
||||
return (
|
||||
<div className="text-center p-2">
|
||||
<h2 className="text-5xl text-blue-900 dark:text-blue-400 py-2 font-medium font-burtons">
|
||||
<div className="text-center p-4 max-w-4xl mx-auto">
|
||||
<h1 className="text-5xl text-blue-900 dark:text-blue-400 py-2 font-medium font-burtons">
|
||||
Taqi Tahmid
|
||||
</h2>
|
||||
<h3 className="text-2xl py-2 font-burtons dark:text-blue-200">
|
||||
</h1>
|
||||
|
||||
<h2 className="text-2xl py-2 font-burtons dark:text-blue-200">
|
||||
Test Automation and DevOps Engineer
|
||||
</h3>
|
||||
<p className="text-md py-5 leading-8 text-gray-800 dark:text-gray-300 mx-auto max-w-2xl md:text-xl">
|
||||
I am a <span className={BoldStyle}>Test Automation</span> and{" "}
|
||||
<span className={BoldStyle}>DevOps Engineer </span>
|
||||
with a Bachelor’s from Khulna University of Engineering & Technology
|
||||
(KUET) and a Master’s from Tampere University. I am currently working at
|
||||
Ericsson in Finland as a DevOps Engineer.
|
||||
<br />
|
||||
<br />I specialize in designing CI/CD pipelines and test automation for
|
||||
diverse applications and architectures with four years of industry
|
||||
experience.
|
||||
</p>
|
||||
<div className="text-5xl flex justify-center gap-16 py-3 text-blue-900">
|
||||
<a
|
||||
href="https://www.linkedin.com/in/taqi-tahmid/"
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
>
|
||||
<AiFillLinkedin className="hover:text-sky-600" />
|
||||
</a>
|
||||
<a
|
||||
href="https://github.com/TheTaqiTahmid"
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
>
|
||||
<AiFillGithub className="hover:text-sky-600" />
|
||||
</a>
|
||||
</h2>
|
||||
|
||||
<div className="text-md py-5 leading-8 text-gray-800 dark:text-gray-300 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.
|
||||
</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.
|
||||
</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="text-blue-900 dark:text-blue-400 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,32 +1,34 @@
|
||||
import React from "react"
|
||||
import { Sun, Moon, FileText } from "lucide-react"
|
||||
|
||||
interface NavProps {
|
||||
darkMode: boolean
|
||||
toggleDarkMode: () => void
|
||||
}
|
||||
|
||||
const Navbar: React.FC<NavProps> = ( {toggleDarkMode, darkMode} ) => {
|
||||
const mode = darkMode ? "Light" : "Dark"
|
||||
const Navbar: React.FC<NavProps> = ({toggleDarkMode, darkMode}) => {
|
||||
return (
|
||||
<>
|
||||
<nav className="py-5 mb-12 flex justify-between dark:text-white">
|
||||
<div className="w-full flex justify-center">
|
||||
<nav className="py-5 mb-12 flex justify-between dark:text-white w-full max-w-5xl px-4">
|
||||
<h1>taqitahmid@gmail.com</h1>
|
||||
<ul className="flex items-center">
|
||||
<li className="transition ease-in-out delay-100 hover:scale-110 duration-300 cursor-pointer dark:text-white"
|
||||
<li className="transition ease-in-out delay-100 hover:scale-110 duration-300 cursor-pointer"
|
||||
onClick={toggleDarkMode}>
|
||||
<div className="bg-gradient-to-r from-blue-900 to-sky-600 text-white px-4 py-2 rounded-md ml-8" >
|
||||
{mode}
|
||||
<div className="bg-blue-900 hover:bg-blue-1000 dark:bg-blue-500 dark:hover:bg-blue-600 text-white p-2 rounded-lg ml-8 shadow-sm">
|
||||
{darkMode ? <Sun size={24} /> : <Moon size={24} />}
|
||||
</div>
|
||||
</li>
|
||||
<li className="transition ease-in-out delay-150 hover:scale-110 duration-300">
|
||||
<a className="bg-gradient-to-r from-blue-900 to-sky-600 text-white px-4 py-2 rounded-md ml-8"
|
||||
<a className="bg-blue-900 hover:bg-blue-1000 dark:bg-blue-500 dark:hover:bg-blue-600 text-white p-2 rounded-lg ml-8 shadow-sm inline-flex"
|
||||
href="https://www.linkedin.com/in/taqi-tahmid/overlay/1635520467350/single-media-viewer/?profileId=ACoAACDU_GsBCgKtvw2bmzbVwTy2WixBG6-e3JM"
|
||||
target="_blank"
|
||||
rel="noreferrer">Resume</a>
|
||||
rel="noreferrer">
|
||||
<FileText size={24} />
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
</>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user