slide 2

package-lock.json

@@ -8,6 +8,7 @@
       "name": "homepage",
       "version": "0.1.0",
       "dependencies": {
+        "@heroicons/react": "^2.2.0",
         "framer-motion": "^12.23.6",
         "next": "15.4.2",
         "react": "19.1.0",
@@ -229,6 +230,15 @@
         "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
       }
     },
+    "node_modules/@heroicons/react": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/@heroicons/react/-/react-2.2.0.tgz",
+      "integrity": "sha512-LMcepvRaS9LYHJGsF0zzmgKCUim/X3N/DQKc4jepAXJ7l8QxJ1PmxJzqplF2Z3FE4PqBAIGyJAQ/w4B5dsqbtQ==",
+      "license": "MIT",
+      "peerDependencies": {
+        "react": ">= 16 || ^19.0.0-rc"
+      }
+    },
     "node_modules/@humanfs/core": {
       "version": "0.19.1",
       "resolved": "https://registry.npmjs.org/@humanfs/core/-/core-0.19.1.tgz",

package.json

@@ -12,6 +12,7 @@
     "lint": "next lint"
   },
   "dependencies": {
+    "@heroicons/react": "^2.2.0",
     "framer-motion": "^12.23.6",
     "next": "15.4.2",
     "react": "19.1.0",

src/app/page.tsx

@@ -1,6 +1,7 @@
 'use client'
 
 import { useState, useEffect, useCallback } from 'react'
+import { ChevronDoubleDownIcon } from '@heroicons/react/24/solid';
 import Slide from '@/components/Slide';
 import Slide1 from '@/components/Slide1';
 import Slide2 from '@/components/Slide2';
@@ -11,7 +12,7 @@ import Slide5 from '@/components/Slide5';
 
 const slides = [
   <Slide1 key={1} />,
-  //<Slide2 key={2} />,
+  <Slide2 key={2} />,
   //<Slide3 key={3} />,
   //<Slide4 key={4} />,
   //<Slide5 key={5} />,
@@ -57,6 +58,9 @@ export default function Home() {
           {slide}
         </Slide>
       ))}
+      <div className={`absolute bottom-4 left-1/2 transform -translate-x-1/2 text-white ${current === slides.length - 1 ? 'hidden' : ''}`}>
+        <ChevronDoubleDownIcon className="w-12 h-12 animate-bounce cursor-pointer" onClick={nextSlide} />
+      </div>
     </main>
   )
 }

src/components/Slide.tsx

@@ -13,11 +13,11 @@ export default function Slide({ children, index, currentSlide }: SlideProps) {
 
   return (
     <motion.div
-      className={`absolute top-0 left-0 w-full h-full flex flex-col items-center justify-center text-center gap-4 text-4xl`}
+      className={`absolute top-0 left-0 w-full h-full flex flex-col items-center justify-center text-center gap-2 text-3xl`}
       initial={{ opacity: 0 }} // Start off-screen
       // x to left-100% for previous slides, 0 for current, and right-100% for next slides
-      animate={{ x: isActive ? 0 : index < currentSlide ? '-100%' : '100%', opacity: isActive ? 1 : 0 }}
+      animate={{ y: isActive ? 0 : index < currentSlide ? '-100%' : '100%', opacity: isActive ? 1 : 0 }}
-      transition={{ duration: 0.8 }}
+      transition={{ duration: 0.5 }}
     >
       {children}
     </motion.div>

src/components/Slide1.tsx

@@ -37,7 +37,7 @@ export default function Slide1() {
     const genRanges = useMemo(() => {
         const ranges = [];
         for (let i = 0; i < titles.length+1; i++) {
-            const start = i * 1500 + 250 * i;
+            const start = i * 1500 + 100 * i;
             const end = start + 1500;
             ranges.push(start, end);
         }
@@ -82,14 +82,14 @@ export default function Slide1() {
         return os;
     }, []);
 
-    const progress = useTransform(time, (t) => ((t * 2) % genRanges[genRanges.length - 2]));
+    const progress = useTransform(time, (t) => ((t * 1) % genRanges[genRanges.length - 2]));
 
     //
 
     return (
         <>
             <p>I&apos;m Kay</p>
-            <div className="relative flex flex-col h-10 w-full">
+            <div className="relative flex flex-col h-10 w-full overflow-visible">
                 {titles.map((title, i) => (
                     <Title
                         key={i}

src/components/Slide2.tsx

@@ -1,8 +1,35 @@
 
 export default function Slide2() {
     return (
-        <div>
+        <div className="flex flex-col lg:flex-row items-center lg:items-start justify-center w-full gap-8">
-
+            <div className="lg:text-right">
+                <h1 className="text-4xl font-bold">Languages</h1>
+                <ul className="mt-4 text-xl">
+                    <li>C++</li>
+                    <li>C#</li>
+                    <li>TypeScript</li>
+                    <li>JavaScript</li>
+                    <li>SQL</li>
+                </ul>
+            </div>
+            <div className="lg:text-center">
+                <h1 className="text-4xl font-bold">Frameworks</h1>
+                <ul className="mt-4 text-xl">
+                    <li>react/next.js</li>  
+                    <li>ASP.NET</li>
+                    <li>Entity Framework Core</li>
+                    <li>Razor</li>
+                </ul>
+            </div>
+            <div className="lg:text-left">
+                <h1 className="text-4xl font-bold">Tools</h1>
+                <ul className="mt-4 text-xl">
+                    <li>Docker</li>
+                    <li>Git/Gitea/Github</li>
+                    <li>Nginx</li>
+                    <li>MySQL/MS SQL</li>
+                </ul>
+            </div>
         </div>
     )
 }