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

frotnend: add more refactoring

Browse Source
This commit is contained in:
Taqi Tahmid
2025-04-20 13:16:47 +03:00
parent 1d45fca783
commit 71b095a0e4
5 changed files with 182 additions and 137 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,9 +1,28 @@
import { COLORS, SOCIALLINKS } from '../constants'
import { Linkedin, Github, Award } from 'lucide-react'
import { COLORS } from '../constants'
import { Tooltip } from './Tooltip'
const Introduction = () => {
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',
},
{
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-4 max-w-4xl mx-auto">
<h1
@ -37,7 +56,7 @@ const Introduction = () => {
</div>
<div className="flex justify-center gap-8 py-3">
{SOCIALLINKS.map((link, index) => (
{socialLinks.map((link, index) => (
<div key={index} className="group relative">
<Tooltip label={link.label} position="top">
<a

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

@ -1,6 +1,33 @@
import { COLORS, SKILLS } 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 },
]
return (
<div>
<h1 className={`text-2xl py-5 font-burtons ${COLORS.PRIMARY} ${COLORS.DARK_PRIMARY}`}>
@ -9,7 +36,7 @@ const Skills = () => {
<div
className={`grid grid-cols-4 gap-6 text-md py-5 leading-8 ${COLORS.TEXT} ${COLORS.DARK_TEXT} mx-auto max-w-2xl md:text-xl`}
>
{SKILLS.map((skill) => (
{skills.map((skill) => (
<div key={skill.name} className="flex flex-col items-center">
<img src={skill.icon} alt={skill.name} className="h-10 w-10" />
<p className="mt-2 text-center">{skill.name}</p>

129
frontend/src/constants.tsx
View File

@ -1,4 +1,5 @@
import { Linkedin, Github, Award, Link } from 'lucide-react'
import { Camera, Plane, Film, Server, Cpu, Trophy, Car, Gamepad2 } from 'lucide-react'
import pythonIcon from './assets/python.svg'
import robotIcon from './assets/robotframework-svgrepo-com.svg'
import goIcon from './assets/go-original.svg'
@ -26,7 +27,6 @@ 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 PROJECTS = [
{
title: 'Self-Hosted Kubernetes Homelab Cluster',
@ -118,4 +118,129 @@ export const SKILLS = [
{ name: 'Kubernetes', icon: kubernetesIcon },
{ name: 'Prometheus', icon: prometheusIcon },
{ name: 'Grafana', icon: grafanaIcon },
]
]
export 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.',
},
],
},
]
export const EXPERIENCE = [
{
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.',
],
tools: 'Kubernetes, Docker, KVM, Openstack, Ansible, Terraform, Prometheus, Grafana',
},
{
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',
],
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',
},
]
export 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',
},
{
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',
},
]

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

@ -1,70 +1,7 @@
import { Building2, Calendar, GraduationCap, MapPin, Microscope, Wrench } from 'lucide-react'
import { COLORS } from '../constants'
import { COLORS, EXPERIENCE, EDUCATION } from '../constants'
const Experience = () => {
const experiences = [
{
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.',
],
tools: 'Kubernetes, Docker, KVM, Openstack, Ansible, Terraform, Prometheus, Grafana',
},
{
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',
],
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',
},
]
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',
},
{
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',
},
]
return (
<div className="p-4 max-w-4xl mx-auto">
<h2
@ -74,7 +11,7 @@ const Experience = () => {
</h2>
<div className="space-y-8">
{experiences.map((exp, index) => (
{EXPERIENCE.map((exp, index) => (
<div
key={index}
className={`border-l-4 ${COLORS.BORDER} ${COLORS.DARK_BORDER} pl-4 space-y-2`}
@ -128,7 +65,7 @@ const Experience = () => {
</h2>
<div className="space-y-6">
{education.map((edu, index) => (
{EDUCATION.map((edu, index) => (
<div
key={index}
className={`border-l-4 ${COLORS.BORDER} ${COLORS.DARK_BORDER} pl-4 space-y-2`}

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

@ -1,69 +1,6 @@
import { Camera, Plane, Film, Server, Cpu, Trophy, Car, Gamepad2 } from 'lucide-react'
import { COLORS } from '../constants'
import { COLORS, INTERESTS } 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
@ -73,7 +10,7 @@ const Interests = () => {
</h1>
<div className="grid gap-6 md:grid-cols-2">
{interests.map((interest, index) => (
{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 ${