updated frontend with CKA info and footer

2025-01-01 10:27:17 +02:00
parent 731d943997
commit 0abc6ce6e5
7 changed files with 131 additions and 44 deletions
--- a/frontend/Dockerfile
+++ b/frontend/Dockerfile
@ -1,21 +0,0 @@
-# Step 1: Build the React app
-FROM node:20 AS build
-
-WORKDIR /app
-
-COPY package.json ./
-COPY package-lock.json ./
-RUN npm install
-
-COPY . ./
-RUN npm run build
-
-# Step 2: Serve the app
-FROM nginx:alpine
-
-COPY --from=build /app/dist /usr/share/nginx/html
-
-# Expose port 80
-EXPOSE 80
-
-CMD ["nginx", "-g", "daemon off;"]
--- a/frontend/package-lock.json
+++ b/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",
--- a/frontend/package.json
+++ b/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"
--- a/frontend/src/App.tsx
+++ b/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>
--- a/frontend/src/components/Footer.tsx
+++ b/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;
--- a/frontend/src/components/Introduction.tsx
+++ b/frontend/src/components/Introduction.tsx
@ -1,44 +1,75 @@
-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.
-      </p>
-      <div className="text-5xl flex justify-center gap-16 py-3 text-blue-900">
-        <a
-          href="https://www.linkedin.com/in/taqi-tahmid/"
-          target="_blank"
-          rel="noreferrer"
-        >
-          <AiFillLinkedin className="hover:text-sky-600" />
-        </a>
-        <a
-          href="https://github.com/TheTaqiTahmid"
-          target="_blank"
-          rel="noreferrer"
-        >
-          <AiFillGithub className="hover:text-sky-600" />
-        </a>
+      </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>
+        
+        <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={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}
+          >
+            {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>
  );
 };

-export default Introduction;
+export default Introduction;
--- a/frontend/src/components/Navbar.tsx
+++ b/frontend/src/components/Navbar.tsx
@ -1,32 +1,34 @@
 import React from "react"
+import { Sun, Moon, FileText } from "lucide-react"

 interface NavProps {
  darkMode: boolean
  toggleDarkMode: () => void
 }

-const Navbar: React.FC<NavProps> = ( {toggleDarkMode, darkMode} ) => {
-  const mode = darkMode ? "Light" : "Dark"
+const Navbar: React.FC<NavProps> = ({toggleDarkMode, darkMode}) => {
  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>
  )
 }