- 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.
diff --git a/sobenfolio-frontend/src/app/components/Parallax.jsx b/sobenfolio-frontend/src/app/components/Parallax.jsx
index f047396..579399e 100644
--- a/sobenfolio-frontend/src/app/components/Parallax.jsx
+++ b/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 (
+
+
+ Click me to scroll!
+
+
+
+
+
Sobenna Onwumelu
- Now Loading
+ {isLoading ? (
+ Now Loading
+ ) : (
+ Loaded. Enjoy!
+ )}
diff --git a/sobenfolio-frontend/src/app/components/ProjectCard.jsx b/sobenfolio-frontend/src/app/components/ProjectCard.jsx
index 1568cdf..0deb699 100644
--- a/sobenfolio-frontend/src/app/components/ProjectCard.jsx
+++ b/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 (
{title}
{description}
+ {tags.length > 0 && (
+
+
Category:
+
+ {tags.map((tag, index) => (
+
+ {tag}
+
+ ))}
+
+
+ )}
+ {tech.length > 0 && (
+
+
Technologies:
+
+ {tech.map((item, index) => (
+
+ {item}
+
+ ))}
+
+
+ )}
)
diff --git a/sobenfolio-frontend/src/app/components/ProjectsSection.jsx b/sobenfolio-frontend/src/app/components/ProjectsSection.jsx
index 7a07791..e43caa9 100644
--- a/sobenfolio-frontend/src/app/components/ProjectsSection.jsx
+++ b/sobenfolio-frontend/src/app/components/ProjectsSection.jsx
@@ -28,15 +28,16 @@ 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'
]
},
{
@@ -44,11 +45,11 @@ const projectsData = [
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,9 +70,10 @@ 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',
@@ -78,6 +81,19 @@ const projectsData = [
'/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 = () => {