add links to sidebar

frontend/package.json

@@ -18,7 +18,8 @@
     "react-dom": "^18.3.1",
     "react-icons": "^5.3.0",
     "react-markdown": "^9.0.3",
-    "react-router-dom": "^7.1.1"
+    "react-router-dom": "^7.1.1",
+    "styled-component": "^2.8.0"
   },
   "devDependencies": {
     "@eslint/js": "^9.9.0",

frontend/src/App.tsx

@@ -26,7 +26,7 @@ function App() {
           <section className="min-h-screen">
             <Navbar toggleDarkMode={toggleDarkMode} darkMode={darkMode} />
             <div className="flex flex-row h-full">
-              <div className="w-1/4 max-w-[260px] border-2">
+              <div className="w-1/4 max-w-[260px] max-h-[928px] border-2 border-gray-300 dark:border-gray-700 rounded-lg shadow-sm">
                 <Sidebar />
               </div>
               <div className="flex-1">

frontend/src/components/Footer.tsx

@@ -4,7 +4,7 @@ const Footer = () => {
   const currentYear = new Date().getFullYear()
 
   return (
-    <footer className="mt-16 py-6 border-t border-gray-200 dark:border-gray-800">
+    <footer className="mt-24 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">
@@ -29,7 +29,7 @@ const Footer = () => {
 
           <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>
+            <span>Powered by coffee and Love</span>
           </div>
         </div>
       </div>

frontend/src/components/Introduction.tsx

@@ -1,28 +1,8 @@
-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
@@ -54,24 +34,6 @@ const Introduction = () => {
           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">
-            <Tooltip label={link.label} position="top">
-              <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>
-            </Tooltip>
-          </div>
-        ))}
-      </div>
     </div>
   )
 }

frontend/src/components/Sidebar.tsx

@@ -1,46 +1,122 @@
-import { Github, Linkedin, Mail, Twitter, Globe, Calendar } from 'lucide-react'
+import { Aperture, Award, Github, Instagram, Linkedin, Mail, Globe, ScrollText } from 'lucide-react'
+import { COLORS } from '../constants'
 
-const Sidebar = () => {
+interface LinkProps {
+  href: string
+  children: React.ReactNode
+  icon: React.ReactNode
+}
+
+const Link: React.FC<LinkProps> = ({ icon, href, children }) => {
   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" />
+    <div className="transition-all duration-200 hover:translate-x-1">
+      <div className="mb-2 border border-gray-200 dark:border-gray-700 p-3 rounded-lg hover:shadow-md">
         <a
-            href="https://www.linkedin.com/in/taqi-tahmid/"
-            className="text-blue-600 dark:text-blue-400"
+          href={href}
+          target="_blank"
+          rel="noopener noreferrer"
+          className="flex items-center text-gray-700 dark:text-gray-200 hover:text-blue-600 dark:hover:text-blue-400"
         >
-            Taqi Tahmid
+          {icon}
+          <span className="text-sm font-medium hidden md:inline">{children}</span>
         </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>
+  )
+}
+
+const Sidebar = () => {
+  const iconClass = 'text-blue-600 dark:text-blue-400 mr-3'
+
+  const links = {
+    contact: [
+      {
+        icon: <Mail size={20} className={iconClass} />,
+        href: 'mailto:taqitahmid@gmail.com',
+        text: 'Email Me',
+      },
+      {
+        icon: <Globe size={20} className={iconClass} />,
+        href: 'https://portfolio.tahmidcloud.com/',
+        text: 'My Website',
+      },
+    ],
+    connect: [
+      {
+        icon: <Linkedin size={20} className={iconClass} />,
+        href: 'https://www.linkedin.com/in/taqi-tahmid/',
+        text: 'LinkedIn',
+      },
+      {
+        icon: <Github size={20} className={iconClass} />,
+        href: 'https://github.com/theTaqiTahmid',
+        text: 'GitHub',
+      },
+    ],
+    follow: [
+      {
+        icon: <Aperture size={20} className={iconClass} />,
+        href: 'https://500px.com/p/taqi1203050?view=photos',
+        text: 'My Photography',
+      },
+      {
+        icon: <Instagram size={20} className={iconClass} />,
+        href: 'https://www.instagram.com/tahmidtaqi/',
+        text: 'Instagram',
+      },
+    ],
+    publications: [
+      {
+        icon: <Award size={20} className={iconClass} />,
+        href: 'https://www.credly.com/badges/abb049aa-d811-4954-a460-8c7351ceba3e/public_url',
+        text: 'CKA Certification',
+      },
+      {
+        icon: <ScrollText size={20} className={iconClass} />,
+        href: 'https://scholar.google.fi/citations?user=w3BoP0AAAAAJ&hl=en',
+        text: 'Google Scholar',
+      },
+    ],
+  }
+
+  const SectionTitle = ({ children }: { children: React.ReactNode }) => (
+    <h2 className={`mt-6 mb-4 text-lg font-semibold ${COLORS.PRIMARY} ${COLORS.DARK_PRIMARY}`}>
+      {children}
+    </h2>
+  )
+
+  return (
+    <div
+      className={`p-6 max-w-xs mx-auto ${COLORS.PRIMARY} ${COLORS.DARK_PRIMARY} rounded-xl shadow-sm`}
+    >
+      <SectionTitle>Contact</SectionTitle>
+      {links.contact.map((link, index) => (
+        <Link key={index} icon={link.icon} href={link.href}>
+          {link.text}
+        </Link>
+      ))}
+
+      <SectionTitle>Connect</SectionTitle>
+      {links.connect.map((link, index) => (
+        <Link key={index} icon={link.icon} href={link.href}>
+          {link.text}
+        </Link>
+      ))}
+
+      <SectionTitle>Follow</SectionTitle>
+      {links.follow.map((link, index) => (
+        <Link key={index} icon={link.icon} href={link.href}>
+          {link.text}
+        </Link>
+      ))}
+
+      <SectionTitle>Achievements</SectionTitle>
+      {links.publications.map((link, index) => (
+        <Link key={index} icon={link.icon} href={link.href}>
+          {link.text}
+        </Link>
+      ))}
+    </div>
   )
 }