sidebar: add sidebar to portfolio

frontend/src/App.tsx

@@ -4,6 +4,7 @@ import { Routes, Route } from 'react-router-dom'
 import './App.css'
 import Home from './pages/Home'
 import Navbar from './components/Navbar'
+import Sidebar from './components/Sidebar'
 import Footer from './components/Footer'
 import Experience from './pages/Experience'
 import Projects from './pages/Projects'
@@ -24,14 +25,21 @@ function App() {
         <main className="bg-amber-50 px-10 dark:bg-gray-900">
           <section className="min-h-screen">
             <Navbar toggleDarkMode={toggleDarkMode} darkMode={darkMode} />
-            <Router>
+            <div className="flex flex-row h-full">
-              <Routes>
+              <div className="w-1/4 max-w-[260px] border-2">
-                <Route path="/" element={<Home />} />
+                <Sidebar />
-                <Route path="/experience" element={<Experience />} />
+              </div>
-                <Route path="/projects" element={<Projects />} />
+              <div className="flex-1">
-                <Route path="/Interests" element={<Interests />} />
+                <Router>
-              </Routes>
+                  <Routes>
-            </Router>
+                    <Route path="/" element={<Home />} />
+                    <Route path="/experience" element={<Experience />} />
+                    <Route path="/projects" element={<Projects />} />
+                    <Route path="/Interests" element={<Interests />} />
+                  </Routes>
+                </Router>
+              </div>
+            </div>
             <Footer />
           </section>
         </main>

frontend/src/components/Sidebar.tsx

@@ -0,0 +1,47 @@
+import { Github, Linkedin, Mail, Twitter, Globe, Calendar } from 'lucide-react'
+
+const Sidebar = () => {
+  return (
+    <div className="p-4 max-w-xs mx-auto">
+      <h2 className="text-blue-800 dark:text-blue-600 mb-2">Contact</h2>
+      <div className="mb-4 bg-gray-200 dark:bg-gray-800 p-4 rounded-lg shadow-sm text-sm">
+        <div className="flex items-center">
+          <Mail size={18} className="text-blue-600 dark:text-blue-400 mr-2" />
+          <a href="mailto:taqitahmid@gmail.com" className="text-blue-600 dark:text-blue-400">
+            taqitahmid@gmail.com
+          </a>
+        </div>
+      </div>
+      <div className="mb-4 bg-gray-200 dark:bg-gray-800 p-4 rounded-lg shadow-sm text-sm">
+        <div className="flex items-center">
+          <Globe size={18} className="text-blue-600 dark:text-blue-400 mr-2" />
+          <a href="https://portfolio.tahmidcloud.com" className="text-blue-600 dark:text-blue-400">
+            My Website
+          </a>
+        </div>
+      </div>
+      <h2 className="text-blue-800 dark:text-blue-600 mb-2">Connect</h2>
+      <div className="mb-4 bg-gray-200 dark:bg-gray-800 p-4 rounded-lg shadow-sm text-sm">
+        <div className="flex items-center">
+          <Linkedin size={18} className="text-blue-600 dark:text-blue-400 mr-2" />
+          <a
+            href="https://www.linkedin.com/in/taqi-tahmid/"
+            className="text-blue-600 dark:text-blue-400"
+          >
+            Taqi Tahmid
+          </a>
+        </div>
+      </div>
+      <div className="mb-4 bg-gray-200 dark:bg-gray-800 p-4 rounded-lg shadow-sm text-sm">
+        <div className="flex items-center">
+          <Github size={18} className="text-blue-600 dark:text-blue-400 mr-2" />
+          <a href="https://github.com/TheTaqiTahmid" className="text-blue-600 dark:text-blue-400">
+            TheTaqiTahmid
+          </a>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default Sidebar

frontend/src/constants.tsx

@@ -26,7 +26,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 +117,67 @@ export const SKILLS = [
   { name: 'Kubernetes', icon: kubernetesIcon },
   { name: 'Prometheus', icon: prometheusIcon },
   { name: 'Grafana', icon: grafanaIcon },
-]
+]
+
+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`}