feat: Major update

src/app/page.tsx

@@ -6,9 +6,9 @@ import { WorkExperience } from "../sections/WorkExperience";
 import { Uptime } from "../sections/Uptime";
 import { Activity } from "../sections/Activity";
 import { Affiliates } from "../sections/Affiliates";
+import { AgentSkills } from "../sections/AgentSkills";
 import { ProjectCard } from "../components/ProjectCard";
 import { MiniProjectCard } from "../components/MiniProjectCard";
-import { ExperienceCard } from "../components/ExperienceCard";
 import { ExperienceModal } from "../components/ExperienceModal";
 import { MiniProjectModal } from "../components/MiniProjectModal";
 import { Navbar } from "../components/Navbar";
@@ -16,7 +16,9 @@ import { Footer } from "../sections/Footer";
 import { TechStack } from "../sections/TechStack";
 import { TypingRoomIntro } from "../components/TypingRoomIntro";
 import { useCallback, useEffect, useState } from "react";
-import type { Experience } from "../types";
+import { SkillsExperience } from "@/sections/SkillsExperience";
+
+const ENABLE_PAGE_ANIMATION = false;
 
 export default function Home() {
   const {
@@ -27,7 +29,7 @@ export default function Home() {
     selectedMiniProject, selectedExperience
   } = useProfile();
 
-  const [showTypingIntro, setShowTypingIntro] = useState(true);
+  const [showTypingIntro, setShowTypingIntro] = useState(ENABLE_PAGE_ANIMATION);
   const oldUsernames = [
     "getspaced (ingame)",
     "Space (alternative)",
@@ -42,18 +44,11 @@ export default function Home() {
     setShowTypingIntro(false);
   }, []);
 
-  const groupedExperiences = experiences.reduce(
-    (acc, exp) => {
-      if (!acc[exp.type]) acc[exp.type] = [];
-      acc[exp.type].push(exp);
-      return acc;
-    },
-    {} as Record<string, Experience[]>,
-  );
-
   return (
     <>
-      <TypingRoomIntro active={showTypingIntro} onFinish={handleIntroFinish} />
+      {ENABLE_PAGE_ANIMATION && (
+        <TypingRoomIntro active={showTypingIntro} onFinish={handleIntroFinish} />
+      )}
       {!showTypingIntro && (
         <>
           <Navbar />
@@ -74,9 +69,7 @@ export default function Home() {
 
             <Activity />
 
-            <Affiliates />
-
-            <TechStack />
+            <AgentSkills />
 
             <section className="w-full max-w-6xl mx-auto space-y-12 px-4">
               <div className="text-center space-y-4">
@@ -110,30 +103,14 @@ export default function Home() {
               </div>
             </section>
 
-            <section className="w-full max-w-6xl mx-auto space-y-12 px-4 pb-20">
-              <div className="text-center space-y-4">
-                <h2 className="text-3xl font-bold">Skills & Experience</h2>
-                <p className="text-gray-400">Things I've worked with over the years.</p>
-              </div>
-              <div className="grid grid-cols-1 md:grid-cols-2 gap-12">
-                {Object.entries(groupedExperiences).map(([type, items]) => (
-                  <div key={type} className="space-y-6">
-                    <h3 className="text-xl font-semibold border-l-4 border-blue-500 pl-4 capitalize">
-                      {type}
-                    </h3>
-                    <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
-                      {items.map((exp, index) => (
-                        <ExperienceCard
-                          key={index}
-                          experience={exp}
-                          onClick={() => setSelectedExperience(exp)}
-                        />
-                      ))}
-                    </div>
-                  </div>
-                ))}
-              </div>
-            </section>
+            <Affiliates />
+
+            <TechStack />
+
+            <SkillsExperience
+              experiences={experiences}
+              onSelectExperience={setSelectedExperience}
+            />
           </div>
 
           <Footer />
@@ -155,4 +132,3 @@ export default function Home() {
     </>
   );
 }
-