[ FIX ] fix some paddings, etc.

Author: JjayFabor

src/components/About.jsx

@@ -31,9 +31,9 @@ const About = () => {
     };
 
   return (
-      <section id="about" className="py-16 bg-gray-50 dark:bg-gray-900">
+      <section id="about" className="py-4 bg-gray-50 dark:bg-gray-900">
         <div className="p-6 max-w-4xl w-full mx-auto">
-          <h2 className="text-3xl font-bold mb-10 text-center text-gray-900 dark:text-white">About Me</h2>
+          <h2 className="text-4xl font-bold mb-10 text-center text-gray-900 dark:text-white">About Me</h2>
 
           <div className="mb-14">
             <h3 className="text-2xl font-semibold mb-5 text-gray-800 dark:text-gray-200 flex items-center">

src/components/Bio.jsx

@@ -1,15 +1,49 @@
+import React, { useState, useEffect } from 'react';
+
+const ROLES_LIST = ["Software", "Backend"];
+
 const Bio = () => {
+  const [currentRoleIndex, setCurrentRoleIndex] = useState(0);
+  const [displayedText, setDisplayedText] = useState('');
+  const [isDeleting, setIsDeleting] = useState(false);
+  const [typingSpeed, setTypingSpeed] = useState(150);
+  const pauseDuration = 2000;
+
+  useEffect(() => {
+    const handleTyping = () => {
+      const currentRole = ROLES_LIST[currentRoleIndex];
+      if (isDeleting) {
+        setDisplayedText(currentRole.substring(0, displayedText.length - 1));
+        setTypingSpeed(75);
+      } else {
+        setDisplayedText(currentRole.substring(0, displayedText.length + 1));
+        setTypingSpeed(150);
+      }
+
+      if (!isDeleting && displayedText === currentRole) {
+        setTimeout(() => setIsDeleting(true), pauseDuration);
+      } else if (isDeleting && displayedText === '') {
+        setIsDeleting(false);
+        setCurrentRoleIndex((prevIndex) => (prevIndex + 1) % ROLES_LIST.length);
+      }
+    };
+
+    const timer = setTimeout(handleTyping, typingSpeed);
+    return () => clearTimeout(timer);
+  }, [displayedText, isDeleting, currentRoleIndex, typingSpeed, pauseDuration]);
+
   return (
-    <section id="bio" className="py-10 flex items-center justify-center bg-gray-50 dark:bg-gray-900">
+    <section id="bio" className="py-4 pb-0 flex items-center justify-center bg-gray-50 dark:bg-gray-900">
       <div className="p-6 max-w-4xl w-full mx-auto shadow-none bg-transparent">
         <div className="flex flex-col md:flex-row items-center gap-8">
           <div className="flex-1 text-left md:pr-4">
             <h1 className="text-4xl font-bold text-gray-900 dark:text-white">
               <span className="wave-emoji inline-block mr-2 text-7xl">👋</span>
               Hi, I'm Jaylord Vhan Fabor
             </h1>
-            <p className="text-gray-600 dark:text-gray-400 mt-2 mb-4">
-              Software Developer | Backend Developer
+            <p className="text-gray-600 dark:text-gray-400 mt-2 mb-4 h-8 text-3xl">
+              <span className="underline font-extrabold">{displayedText}</span>
+              <span className="animate-pulse"> Developer</span>
             </p>
             <p className="text-gray-700 dark:text-gray-300">
                 Hey there! I'm more of a backend kind of person — I love setting up a clean, well-structured backend,

src/components/Contact.jsx

@@ -49,9 +49,9 @@ const Contact = () => {
   };
 
   return (
-    <section id="contact" className="py-24 relative  bg-gray-50 dark:bg-gray-900">
+    <section id="contact" className="pt-4 pb-16 relative  bg-gray-50 dark:bg-gray-900">
       <div className="max-w-4xl mx-auto px-6">
-        <h2 className="text-3xl font-bold mb-10 text-center text-gray-900 dark:text-white">Get In Touch</h2>
+        <h2 className="text-4xl font-bold mb-10 text-center text-gray-900 dark:text-white">Get In Touch</h2>
         <p className="text-gray-600 dark:text-gray-100 text-center mb-12">
           Have a question or want to work together? Fill out the form below and I'll get back to you as soon as possible.
         </p>

src/components/Experience.jsx

@@ -23,9 +23,9 @@ const Experience = () => {
   };
 
   return (
-    <section id="experience" className="py-16 bg-gray-50 dark:bg-gray-900">
+    <section id="experience" className="py-4 bg-gray-50 dark:bg-gray-900">
       <div className="p-6 max-w-4xl w-full mx-auto">
-        <h2 className="text-3xl font-bold mb-10 text-center text-gray-900 dark:text-white">Experience</h2>
+        <h2 className="text-4xl font-bold mb-10 text-center text-gray-900 dark:text-white">Experience</h2>
 
         <div className="space-y-6">
           {experiences.map((exp, index) => (

src/components/Projects.jsx

@@ -51,7 +51,7 @@ const Projects = () => {
       description: "An educational platform for personalized learning.",
       image: "projects/bridgeAI.png",
       techStack: ["Python", "GeminiAPI", "Flutter", "Dart", "Flask"],
-      status: "ongoing",
+      status: "completed",
       category: "Mobile Application",
       link: "https://github.com/JjayFabor/bridgeAI"
     },
@@ -117,9 +117,9 @@ const Projects = () => {
   }, []);
 
   return (
-    <section id="projects" className="py-20 bg-gray-50 dark:bg-gray-900">
+    <section id="projects" className="py-4 bg-gray-50 dark:bg-gray-900">
       <div className="max-w-6xl mx-auto px-4">
-        <h2 className="text-3xl font-bold mb-10 text-center text-gray-900 dark:text-white">Projects</h2>
+        <h2 className="text-4xl font-bold mb-10 text-center text-gray-900 dark:text-white">Projects</h2>
 
         <div className="flex justify-center gap-2 mb-10 flex-wrap">
           {categories.map((category) => (

src/components/TechStack.jsx

@@ -168,8 +168,8 @@ const TechStack = () => {
   }, []);
 
   return (
-    <section className="py-10 bg-gray-50 dark:bg-gray-900">
-      <h2 className="text-center text-2xl font-bold mb-8 text-gray-800 dark:text-gray-100">
+    <section className="py-4 bg-gray-50 dark:bg-gray-900">
+      <h2 className="text-center text-4xl font-bold mb-8 text-gray-800 dark:text-gray-100">
         My Tech Stack
       </h2>