frontend: added Experience, Interests, and projects section
This commit is contained in:
@ -1,8 +1,7 @@
|
||||
import { Building2, Calendar, GraduationCap, MapPin, Microscope, Wrench } from 'lucide-react';
|
||||
import { COLORS } from '../constants';
|
||||
|
||||
const Experience = () => {
|
||||
const BoldStyle = "text-blue-900 dark:text-blue-400 font-semibold";
|
||||
|
||||
const experiences = [
|
||||
{
|
||||
title: "Experienced Developer (DevOps)",
|
||||
@ -66,19 +65,19 @@ const Experience = () => {
|
||||
|
||||
return (
|
||||
<div className="p-4 max-w-4xl mx-auto">
|
||||
<h2 className="text-3xl text-blue-900 dark:text-blue-400 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 border-blue-900 dark:border-blue-400 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="text-blue-900 dark:text-blue-400" size={24} />
|
||||
<h3 className={`text-xl ${BoldStyle}`}>{exp.title}</h3>
|
||||
<Building2 className={`${COLORS.PRIMARY} ${COLORS.DARK_PRIMARY}`} size={24} />
|
||||
<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 text-gray-600 dark:text-gray-400">
|
||||
<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>
|
||||
@ -93,16 +92,16 @@ const Experience = () => {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="text-gray-800 dark:text-gray-300 space-y-1">
|
||||
<div className={`${COLORS.TEXT} ${COLORS.DARK_TEXT} space-y-1`}>
|
||||
{exp.responsibilities.map((resp, idx) => (
|
||||
<p key={idx} className="flex items-start">
|
||||
<span className="mr-2 mt-2 ml-4">•</span>
|
||||
<span>{resp}</span>
|
||||
<p key={idx} className="flex text-wrap items-start">
|
||||
<span className="mr-2 mt-1 ml-4">*</span>
|
||||
<span className='text-left'>{resp}</span>
|
||||
</p>
|
||||
))}
|
||||
</div>
|
||||
<div className="text-gray-800 dark:text-gray-300 space-y-1 flex items-start">
|
||||
<div className='flex items-center gap-2'>
|
||||
<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>
|
||||
@ -111,19 +110,19 @@ const Experience = () => {
|
||||
))}
|
||||
</div>
|
||||
|
||||
<h2 className="text-3xl text-blue-900 dark:text-blue-400 py-4 mt-8 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 border-blue-900 dark:border-blue-400 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="text-blue-900 dark:text-blue-400" size={24} />
|
||||
<h3 className={`text-xl ${BoldStyle}`}>{edu.degree}</h3>
|
||||
<GraduationCap className={`${COLORS.PRIMARY} ${COLORS.DARK_PRIMARY}`} size={24} />
|
||||
<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 text-gray-600 dark:text-gray-400">
|
||||
<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,10 +136,10 @@ const Experience = () => {
|
||||
<span>{edu.period}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="text-gray-600 dark:text-gray-400 space-y-1 flex items-start">
|
||||
<div className='flex items-center gap-1'>
|
||||
<Microscope />
|
||||
<span>{edu.thesis}</span>
|
||||
<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>
|
||||
</div>
|
||||
|
||||
110
frontend/src/pages/Interests.tsx
Normal file
110
frontend/src/pages/Interests.tsx
Normal file
@ -0,0 +1,110 @@
|
||||
import { Camera, Plane, Film, Server, Cpu, Trophy, Car, Gamepad2 } from "lucide-react";
|
||||
import { COLORS } from "../constants";
|
||||
|
||||
const Interests = () => {
|
||||
const interests = [
|
||||
{
|
||||
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."
|
||||
},
|
||||
{
|
||||
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."
|
||||
},
|
||||
{
|
||||
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."
|
||||
},
|
||||
{
|
||||
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."
|
||||
},
|
||||
{
|
||||
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."
|
||||
},
|
||||
{
|
||||
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."
|
||||
},
|
||||
{
|
||||
title: "Sports",
|
||||
icon: <Trophy size={32} />,
|
||||
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: "Cricket",
|
||||
details: "Enjoying both test matches and limited-overs formats, following international competitions and analyzing game strategies."
|
||||
},
|
||||
{
|
||||
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."
|
||||
}
|
||||
]
|
||||
}
|
||||
];
|
||||
|
||||
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`}>
|
||||
Interests & Hobbies
|
||||
</h1>
|
||||
|
||||
<div className="grid gap-6 md:grid-cols-2">
|
||||
{interests.map((interest, index) => (
|
||||
<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' : ''}`}
|
||||
>
|
||||
<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`}>
|
||||
{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>
|
||||
|
||||
{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}`}>
|
||||
{subInterest.name}
|
||||
</h3>
|
||||
<p className={`${COLORS.TEXT} ${COLORS.DARK_TEXT} text-sm leading-6`}>
|
||||
{subInterest.details}
|
||||
</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<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.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default Interests;
|
||||
121
frontend/src/pages/Projects.tsx
Normal file
121
frontend/src/pages/Projects.tsx
Normal file
@ -0,0 +1,121 @@
|
||||
import { Github, Link } from "lucide-react";
|
||||
import { COLORS } from "../constants";
|
||||
|
||||
const Projects = () => {
|
||||
const BoldStyle = "text-blue-900 dark:text-blue-300 font-semibold";
|
||||
|
||||
const projects = [
|
||||
{
|
||||
title: "Self-Hosted Kubernetes Homelab Cluster",
|
||||
description: "Architected and deployed a production-grade Kubernetes cluster in my homelab environment, showcasing infrastructure-as-code principles and modern DevOps practices. The cluster hosts a diverse ecosystem of services including my portfolio website, high-availability database, private container image registry, network-wide ad-blocking solution using AdGuard, and a comprehensive media server stack.",
|
||||
technologies: ["Kubernetes", "KVM", "Linux", "Go", "Docker", "Helm", "MetalLB"],
|
||||
links: [
|
||||
{
|
||||
icon: <Github size={24} />,
|
||||
href: "https://github.com/yourusername/k8s-monitoring",
|
||||
label: "GitHub"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: "Personal Portfolio Website",
|
||||
description: "Engineered and deployed a modern, responsive portfolio website using React, showcasing professional experience and technical projects. The website features a clean, intuitive design with dark/light theme support, responsive layouts, and smooth transitions. The site utilizes React's latest features and Tailwind CSS for styling. The entire application is containerized using Docker and deployed on a personal Kubernetes cluster, demonstrating a full DevOps pipeline from development to production.",
|
||||
technologies: [
|
||||
"React",
|
||||
"Tailwind CSS",
|
||||
"Docker",
|
||||
"Kubernetes",
|
||||
"Nginx"
|
||||
],
|
||||
links: [
|
||||
{
|
||||
icon: <Github size={24} />,
|
||||
href: "https://github.com/TheTaqiTahmid/my-portfolio",
|
||||
label: "GitHub"
|
||||
},
|
||||
{
|
||||
icon: <Link size={24} />,
|
||||
href: "https://portfolio.tahmidcloud.com",
|
||||
label: "Live Demo"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: "Automated Crypto Trading Bot",
|
||||
description: "Engineered a Python-based cryptocurrency trading bot that interfaces with Binance's API to execute automated trades based on custom strategies. The bot implements real-time price monitoring, configurable stop-loss and take-profit mechanisms, and intelligent position management. It features a robust risk management system, detailed trade logging, and performance analytics. The bot can handle multiple trading pairs simultaneously.",
|
||||
technologies: ["Python", "Binance API", "Pandas", "NumPy"],
|
||||
links: [
|
||||
{
|
||||
icon: <Github size={24} />,
|
||||
href: "https://github.com/TheTaqiTahmid/binanceCryptoBot",
|
||||
label: "GitHub"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: "Command Line Todo Application",
|
||||
description: "Developed a fast and efficient CLI-based Todo application in Go that enables seamless task management through simple terminal commands. The application leverages Go's strong concurrency features. Users can perform CRUD operations (Create, Read, Update, Delete) on tasks.",
|
||||
technologies: ["Go", "Cobra CLI"],
|
||||
links: [
|
||||
{
|
||||
icon: <Github size={24} />,
|
||||
href: "https://github.com/TheTaqiTahmid/todo",
|
||||
label: "GitHub"
|
||||
}
|
||||
]
|
||||
}
|
||||
];
|
||||
|
||||
return (
|
||||
<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`}>
|
||||
Projects
|
||||
</h1>
|
||||
|
||||
<div className="space-y-8">
|
||||
{projects.map((project, index) => (
|
||||
<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(", ")}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div className="flex gap-4">
|
||||
{project.links.map((link, linkIndex) => (
|
||||
<div key={linkIndex} 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>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default Projects;
|
||||
Reference in New Issue
Block a user