frotnend: add more refactoring

frontend/src/components/Introduction.tsx

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

frontend/src/components/Skills.tsx

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

frontend/src/constants.tsx

@@ -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',
@@ -119,3 +119,128 @@ export const SKILLS = [
   { 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',
+  },
+]

frontend/src/pages/Experience.tsx

@@ -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`}

frontend/src/pages/Interests.tsx

@@ -1,69 +1,6 @@
-import { Camera, Plane, Film, Server, Cpu, Trophy, Car, Gamepad2 } from 'lucide-react'
+import { COLORS, INTERESTS } from '../constants'
-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
@@ -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 ${