try again

sobenfolio-frontend/src/app/components/AboutSection.jsx

@@ -26,10 +26,17 @@ const TAB_DATA = [
       <ul className='list-disc pl-2'>
         <li>JavaScript</li>
         <li>React</li>
-        <li>Node.js</li>
+        <li>Node.js/Next.js/Vite.js</li>
         <li>Python</li>
-        <li>C++/C/C#</li>
-        <li>Html</li>
+        <li>C++</li>
+        <li>C</li>
+        <li>C#</li>
+        <li>PHP</li>
+        <li>CSS</li>
+        <li>HTML</li>
+        <li>Git Version Control</li>
+        <li>Database Management/MySQL</li>
+        <li>Data Structures</li>
       </ul>
     ),
   },
@@ -49,9 +56,9 @@ const TAB_DATA = [
       <ul className='list-disc pl-2'>
         <li>Gym</li>
         <li>Reading</li>
+        <li>Drawing (Currently working through Drawabox!)</li>
+        <li>Game Dev</li>
         <li>Terraria</li>
-        <li>Watcing Streams</li>
-        <li>Learning</li>
       </ul>
     ),
   },
@@ -143,7 +150,7 @@ const AboutSection = () => {
               About Me
             </h2>
             <p className={`${orbitron.className} md:text-lg text-center`}>
-                            I am Sobenna. A computer science student currently studying at Vanderbilt University. I believe greatly in the power of creativity, and hope to breathe that life into my projects!
+                            I am Sobenna. A computer science student at Vanderbilt University blending art and technical expertise to make engaging projects and expereinces.
             </p>
 
           </div>

sobenfolio-frontend/src/app/components/Parallax.jsx

@@ -4,6 +4,8 @@ import { useRef, useEffect, useState } from "react";
 import { gsap } from "gsap";
 import { ScrollTrigger } from "gsap/dist/ScrollTrigger";
 import { Press_Start_2P, Pixelify_Sans } from "next/font/google";
+import { motion } from "framer-motion";
+import { ChevronDownIcon } from "@heroicons/react/24/solid";
 import './ellipse.css'
 
 const presstart = Press_Start_2P({   
@@ -15,9 +17,11 @@ const pixel = Pixelify_Sans({
     subsets: ['latin'], 
 })
 
+
 function Parallax() {
 
-    const [background, setBackground] = useState(20)
+    const [background, setBackground] = useState(20);
+    const [isLoading, setIsLoading] = useState(true);
 
     const parallaxRef = useRef(null);
     const backlayer= useRef(null);
@@ -37,6 +41,11 @@ function Parallax() {
                     pin: true,
                     onUpdate: (self) => {
                         setBackground(Math.ceil(self.progress * 100 + 20))
+                        if (self.progress > 0.9) {
+                            setIsLoading(false);
+                        } else {
+                            setIsLoading(true);
+                        }
                     },
                 },
             });
@@ -73,17 +82,52 @@ function Parallax() {
         return () => ctx.revert();
     }, []);
 
+    const handleClick = () => {
+        const projectsSection = document.getElementById('projects');
+        if (projectsSection) {
+            projectsSection.scrollIntoView({ behavior: 'smooth' });
+        }
+    };
+
 
     return (
         <div className="">
             <div ref={parallaxRef} style={{ background: `linear-gradient(#f0c721, #de7a23 ${background}%, #7F5938, #18110f)` }} className='h-[110vh] w-[100%] relative'>
+            <div className="absolute top-4 left-1/2 transform -translate-x-1/2 z-30">
+                <motion.div 
+                    className="text-center cursor-pointer"
+                    onClick={handleClick}
+                    whileHover={{ scale: 1.1 }}
+                    whileTap={{ scale: 0.9 }}
+                    style={{ transformOrigin: 'center center' }}
+                >
+                    <p className={`${presstart.className} text-[#FFFDD0] text-sm mb-2`}>Click me to scroll!</p>
+                    <motion.div
+                        animate={{
+                            y: [0, 5, -2, 0],
+                        }}
+                        transition={{
+                            duration: 1,
+                            repeat: Infinity,
+                            repeatType: "loop"
+                        }}
+                        className="flex justify-center"
+                    >
+                        <ChevronDownIcon className="h-6 w-6 text-[#FFFDD0]" />
+                    </motion.div>
+                </motion.div>
+            </div>
                 <img ref={frontlayer} className='absolute w-[100%] z-[23] bottom-[-81px]' src="/images/bgpics/layer-1.svg" />
                 <img ref={midlayer} className='absolute w-[100%] z-[22] bottom-[-870px]' src="/images/bgpics/layer-22.svg" />
                 <img ref={backlayer} className='absolute w-[100%] z-[21] bottom-[-1000px]' src="/images/bgpics/layer-3.svg" />
                 <div ref={copy} className="absolute bottom-[0%] left-[50%] transform translate-x-[-50%] translate-y-[200%]  z-[24] flex justify-center items-center text-center flex-col opacity-0">
                     <h1 className={`${presstart.className} text-[#FFFDD0] text-6xl`}>Sobenna Onwumelu</h1>
                     <span className={`${pixel.className} p-[1rem] rounded-[0.5rem] `}>
-                        <span className="loading">Now Loading</span>
+                        {isLoading ? (
+                            <span className="loading">Now Loading</span>
+                        ) : (
+                            <span>Loaded. Enjoy!</span>
+                        )}
                     </span>
                 </div>
             </div>

sobenfolio-frontend/src/app/components/ProjectCard.jsx

@@ -1,9 +1,10 @@
 import React, { useState } from 'react';
+import { motion, AnimatePresence } from "framer-motion";
 import { CodeBracketIcon, EyeIcon } from '@heroicons/react/24/solid'
 import Link from 'next/link'
 import ImageModal from './ImageModal';
 
-const ProjectCard = ({imgUrl, title, description, gitUrl, images}) => {
+const ProjectCard = ({ imgUrl, title, description, gitUrl, images, tags = [], tech = [] }) => {
     const [isModalOpen, setIsModalOpen] = useState(false);
 
     const openModal = () => {
@@ -33,6 +34,40 @@ return (
         <div className='text-white rounded-b-xl mt-3 w-[100%] md:w-[50%] bg-[#302a23] py-6 px-4'>
             <h5 className='text-xl font-semibold mb-2'>{title}</h5>
             <p className="text-[#ADB7BE]">{description}</p>
+            {tags.length > 0 && (
+                    <div className="mb-2 flex items-center">
+                        <p className="text-[#c0ae7d45] font-semibold text-sm mr-2">Category:</p>
+                        <div className="flex flex-wrap gap-1">
+                            {tags.map((tag, index) => (
+                                <motion.span
+                                    key={index}
+                                    className="text-[10px] bg-[#423a2f] text-[#c0ae7d] px-1.5 py-0.5 rounded"
+                                    whileHover={{ scale: 1.1 }}
+                                    transition={{ type: "spring", stiffness: 400, damping: 10 }}
+                                >
+                                    {tag}
+                                </motion.span>
+                            ))}
+                        </div>
+                    </div>
+                )}
+                {tech.length > 0 && (
+                    <div className="flex items-center">
+                        <p className="text-[#c0ae7d45] font-semibold text-sm mr-2">Technologies:</p>
+                        <div className="flex flex-wrap gap-1">
+                            {tech.map((item, index) => (
+                                <motion.span
+                                    key={index}
+                                    className="text-[10px] bg-[#4b4335] text-[#d9c7a3] px-1.5 py-0.5 rounded"
+                                    whileHover={{ scale: 1.1, rotate: 5 }}
+                                    transition={{ type: "spring", stiffness: 400, damping: 10 }}
+                                >
+                                    {item}
+                                </motion.span>
+                            ))}
+                        </div>
+                    </div>
+                )}
         </div>
     </div>
   )

sobenfolio-frontend/src/app/components/ProjectsSection.jsx

@@ -28,27 +28,28 @@ const pixel = Pixelify_Sans({
 const projectsData = [
   {
     id: 1,
-    title: "CAN Data Visualizer",
-    description: "A vehicle kinematic data visualizer, with a corresponding published paper.",
-    image: "/images/projects/2.png",
-    tag: ["All"],
-    gitUrl: "https://ieeexplore.ieee.org/abstract/document/10485592",
+    title: "CONCRETE",
+    description: "A 2d pixel art survivor-like. Public DEMO Spring 2025.",
+    image: "/images/projects/6.png",
+    tag: ["Game"],
+    tech: ["C++", "SFML", "Aseprite", "Json", "LLMS", "Audacity"],
+    gitUrl: "https://nitevalecorp.vercel.app/",
     projectImages : [
-      '/images/projects/Datavis1.png',
-      '/images/projects/Datavis2.png',
-      '/images/projects/Datavis3.png'
+      '/images/projects/Concrete1.png',
+      '/images/projects/Concrete2.png',
+      '/images/projects/Concrete3.png'
     ]
   },
   {
     id: 2,
     title: "Ekreb",
     description: "A Word-guessing game made with React and Vite.",
     image: "/images/projects/3.png",
-    tag: ["All", "Web"],
+    tag: ["Web"],
+    tech: ["React", "Vite.js"],
     gitUrl: "https://github.com/SobennaStory/ekreb",
     projectImages : [
       '/images/projects/Ekreb1.png',
-      '/images/projects/Ekreb2.png',
       '/images/projects/Ekreb3.png'
     ]
   },
@@ -57,7 +58,8 @@ const projectsData = [
     title: "SobStore",
     description: "A inventory management app. Only frontend. Does not persist between reloads.",
     image: "/images/projects/4.png",
-    tag: ["All", "Web"],
+    tag: ["Web"],
+    tech: ["React", "Next.js"],
     gitUrl: "https://www.youtube.com/watch?v=N2jZAoTZ0oc&list=PLAqwaEpjgfVHvp4Zo8qynWMX_-8NejPwu&index=2",
     projectImages : [
       '/images/projects/sobstore1.png',
@@ -68,16 +70,30 @@ const projectsData = [
   {
     id: 4,
     title: "NiteVale Corp",
-    description: "A spooky valentine template made to give to a special someone.",
+    description: "A spooky valentine template site made to give to a special someone.",
     image: "/images/projects/5.png",
-    tag: ["All", "Web"],
+    tag: ["Web"],
+    tech: ["React", "Next.js"],
     gitUrl: "https://nitevalecorp.vercel.app/",
     projectImages : [
       '/images/projects/nitevale.png',
       '/images/projects/nitevale2.png',
       '/images/projects/nitevale3.png'
     ]
   },
+  {
+    id: 5,
+    title: "Vehicle Fintess Tracker",
+    description: "A dashboard that analyzes electrical vehicle signals and displays a safety rating for drives.",
+    image: "/images/projects/2.png",
+    tag: ["Research Publication"],
+    tech: ["Python", "PyQT5"],
+    gitUrl: "https://ieeexplore.ieee.org/abstract/document/10485592",
+    projectImages : [
+      '/images/projects/Datavis1.png',
+    ]
+  },
+
 ];
 
 const ProjectsSection = () => {
@@ -163,7 +179,7 @@ const ProjectsSection = () => {
             </p>
             <p className={`${orbitron.className} text-[rgb(192,174,125)] text-center text-sm sm:text-sm mb-6 lg:text-sm`}>
               <a href="https://www.youtube.com/watch?v=N7RIxD4vraM&list=PLAqwaEpjgfVHvp4Zo8qynWMX_-8NejPwu&index=1" target="_blank" rel="noopener noreferrer">
-                Click for project demos.
+                Click on this text for project demos.
               </a>
             </p>
 
@@ -181,6 +197,7 @@ const ProjectsSection = () => {
                   description={projectsData[currentCardIndex].description}
                   imgUrl={projectsData[currentCardIndex].image}
                   tags={projectsData[currentCardIndex].tag}
+                  tech={projectsData[currentCardIndex].tech}
                   gitUrl={projectsData[currentCardIndex].gitUrl}
                   images={projectsData[currentCardIndex].projectImages}
                 />

sobenfolio-frontend/src/app/page.js

@@ -24,7 +24,9 @@ export default function Home() {
             */}
         <ProjectsSection />
         <AboutSection />
+        {/*
         <EmailSection />
+        */}
       </div>
       <Footer />
     </main>