updated frontend with CKA info and footer

frontend/package-lock.json

@@ -8,6 +8,7 @@
       "name": "portfolio",
       "version": "0.0.0",
       "dependencies": {
+        "lucide-react": "^0.469.0",
         "react": "^18.3.1",
         "react-dom": "^18.3.1",
         "react-icons": "^5.3.0"
@@ -2778,6 +2779,14 @@
         "yallist": "^3.0.2"
       }
     },
+    "node_modules/lucide-react": {
+      "version": "0.469.0",
+      "resolved": "https://registry.npmjs.org/lucide-react/-/lucide-react-0.469.0.tgz",
+      "integrity": "sha512-28vvUnnKQ/dBwiCQtwJw7QauYnE7yd2Cyp4tTTJpvglX4EMpbflcdBgrgToX2j71B3YvugK/NH3BGUk+E/p/Fw==",
+      "peerDependencies": {
+        "react": "^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0"
+      }
+    },
     "node_modules/merge2": {
       "version": "1.4.1",
       "resolved": "https://registry.npmjs.org/merge2/-/merge2-1.4.1.tgz",

frontend/package.json

@@ -10,6 +10,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "lucide-react": "^0.469.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-icons": "^5.3.0"

frontend/src/App.tsx

@@ -3,6 +3,7 @@ import './App.css'
 import Navbar from './components/Navbar'
 import Introduction from './components/Introduction'
 import Skills from './components/Skills'
+import Footer from './components/Footer'
 
 function App() {
   const [darkMode, setDarkMode] = useState(true)
@@ -18,6 +19,7 @@ function App() {
           <Navbar toggleDarkMode={toggleDarkMode} darkMode={darkMode}/>
           <Introduction></Introduction>
           <Skills></Skills>
+          <Footer></Footer>
         </section>
       </main>
     </div>

frontend/src/components/Footer.tsx

@@ -0,0 +1,42 @@
+import { Server, Coffee } from "lucide-react";
+
+const Footer = () => {
+  const currentYear = new Date().getFullYear();
+
+  return (
+    <footer className="mt-12 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">
+            <Server size={16} className="inline-block" />
+            <span>Self-hosted on my homelab Kubernetes cluster</span>
+          </div>
+          
+          <div className="flex flex-wrap justify-center gap-x-4 gap-y-2 text-center">
+            <span>© {currentYear} Taqi Tahmid</span>
+            <span>•</span>
+            <span>Built with React & Tailwind CSS</span>
+            <span>•</span>
+            <a 
+              href="https://github.com/TheTaqiTahmid/portfolio" 
+              target="_blank" 
+              rel="noreferrer"
+              className="hover:text-blue-600 dark:hover:text-blue-400 transition-colors"
+            >
+              View Source
+            </a>
+          </div>
+
+          <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>
+          </div>
+        </div>
+      </div>
+    </footer>
+  );
+};
+
+export default Footer;

frontend/src/components/Introduction.tsx

@@ -1,41 +1,72 @@
-import { AiFillGithub, AiFillLinkedin } from "react-icons/ai";
+import React from "react";
+import { Linkedin, Github, Award } from "lucide-react";
 
 const Introduction = () => {
-  const BoldStyle = "text-blue-900 dark:text-blue-400";
+  const BoldStyle = "text-blue-900 dark:text-blue-400 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-2">
-      <h2 className="text-5xl text-blue-900 dark:text-blue-400 py-2 font-medium font-burtons">
+    <div className="text-center p-4 max-w-4xl mx-auto">
+      <h1 className="text-5xl text-blue-900 dark:text-blue-400 py-2 font-medium font-burtons">
         Taqi Tahmid
-      </h2>
-      <h3 className="text-2xl py-2 font-burtons dark:text-blue-200">
+      </h1>
+      
+      <h2 className="text-2xl py-2 font-burtons dark:text-blue-200">
         Test Automation and DevOps Engineer
-      </h3>
-      <p className="text-md py-5 leading-8 text-gray-800 dark:text-gray-300 mx-auto max-w-2xl md:text-xl">
-        I am a <span className={BoldStyle}>Test Automation</span> and{" "}
-        <span className={BoldStyle}>DevOps Engineer </span>
-        with a Bachelor’s from Khulna University of Engineering & Technology
-        (KUET) and a Master’s from Tampere University. I am currently working at
-        Ericsson in Finland as a DevOps Engineer.
-        <br />
-        <br />I specialize in designing CI/CD pipelines and test automation for
-        diverse applications and architectures with four years of industry
-        experience.
+      </h2>
+      
+      <div className="text-md py-5 leading-8 text-gray-800 dark:text-gray-300 md:text-xl space-y-4">
+        <p>
+          I am a <span className={BoldStyle}>DevOps</span> and{" "}
+          <span className={BoldStyle}>Test Automation</span> engineer with a{" "}
+          <span className={BoldStyle}>certified Kubernetes Administrator (CKA)</span> certification, 
+          specializing in managing Kubernetes clusters and cloud infrastructure. 
+          Currently working at Ericsson in Finland as a DevOps Engineer.
         </p>
-      <div className="text-5xl flex justify-center gap-16 py-3 text-blue-900">
+        
+        <p>
+          I bring four years of industry experience in designing CI/CD pipelines
+          and test automation for diverse applications and architectures. I hold a Bachelor's 
+          degree from Khulna University of Engineering & Technology (KUET) and a Master's 
+          degree from Tampere University. My expertise spans across the entire DevOps lifecycle, 
+          from cluster management 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">
           <a
-          href="https://www.linkedin.com/in/taqi-tahmid/"
+            href={link.href}
             target="_blank"
             rel="noreferrer"
+            className="text-blue-900 dark:text-blue-400 hover:text-sky-600 dark:hover:text-sky-500 transition-colors duration-200"
+            aria-label={link.label}
           >
-          <AiFillLinkedin className="hover:text-sky-600" />
-        </a>
-        <a
-          href="https://github.com/TheTaqiTahmid"
-          target="_blank"
-          rel="noreferrer"
-        >
-          <AiFillGithub className="hover:text-sky-600" />
+            {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>
   );

frontend/src/components/Navbar.tsx

@@ -1,4 +1,5 @@
 import React from "react"
+import { Sun, Moon, FileText } from "lucide-react"
 
 interface NavProps {
   darkMode: boolean
@@ -6,27 +7,28 @@ interface NavProps {
 }
 
 const Navbar: React.FC<NavProps> = ({toggleDarkMode, darkMode}) => {
-  const mode = darkMode ? "Light" : "Dark"
   return (
-    <>
-      <nav className="py-5 mb-12 flex justify-between dark:text-white">
+    <div className="w-full flex justify-center">
+      <nav className="py-5 mb-12 flex justify-between dark:text-white w-full max-w-5xl px-4">
           <h1>taqitahmid@gmail.com</h1>
           <ul className="flex items-center">
-              <li className="transition ease-in-out delay-100 hover:scale-110 duration-300 cursor-pointer dark:text-white"
+              <li className="transition ease-in-out delay-100 hover:scale-110 duration-300 cursor-pointer"
               onClick={toggleDarkMode}>
-                <div className="bg-gradient-to-r from-blue-900 to-sky-600 text-white px-4 py-2 rounded-md ml-8" >
-                  {mode}
+                <div className="bg-blue-900 hover:bg-blue-1000 dark:bg-blue-500 dark:hover:bg-blue-600 text-white p-2 rounded-lg ml-8 shadow-sm">
+                  {darkMode ? <Sun size={24} /> : <Moon size={24} />}
                 </div>
               </li>
               <li className="transition ease-in-out delay-150 hover:scale-110 duration-300">
-                  <a className="bg-gradient-to-r from-blue-900 to-sky-600 text-white px-4 py-2 rounded-md ml-8" 
+                  <a className="bg-blue-900 hover:bg-blue-1000 dark:bg-blue-500 dark:hover:bg-blue-600 text-white p-2 rounded-lg ml-8 shadow-sm inline-flex" 
                   href="https://www.linkedin.com/in/taqi-tahmid/overlay/1635520467350/single-media-viewer/?profileId=ACoAACDU_GsBCgKtvw2bmzbVwTy2WixBG6-e3JM" 
                   target="_blank" 
-                  rel="noreferrer">Resume</a>
+                  rel="noreferrer">
+                    <FileText size={24} />
+                  </a>
               </li>
           </ul>
       </nav>
-    </>
+    </div>
   )
 }