project 4

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 './ellipse.css'
+
 const presstart = Press_Start_2P({   
     subsets: ['latin'],
     weight: '400', 
@@ -80,7 +82,9 @@ function Parallax() {
                 <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] `}>Now Loading..</span>
+                    <span className={`${pixel.className} p-[1rem] rounded-[0.5rem] `}>
+                        <span className="loading">Now Loading</span>
+                    </span>
                 </div>
             </div>
         </div>

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

@@ -3,6 +3,7 @@ import React, { useState, useRef } from "react";
 import ProjectCard from "./ProjectCard";
 import { motion, AnimatePresence } from "framer-motion";
 import { WrenchIcon } from "@heroicons/react/24/solid";
+import { CodeBracketIcon, EyeIcon } from '@heroicons/react/24/solid'
 import { Orbitron, Press_Start_2P, Pixelify_Sans } from 'next/font/google';
 
 
@@ -65,6 +66,19 @@ const projectsData = [
       '/images/projects/Ekreb3.png'
     ]
   },
+  {
+    id: 4,
+    title: "SobStore",
+    description: "A inventory management app. Only frontend. Does not persist between reloads.",
+    image: "/images/projects/4.png",
+    tag: ["All", "Web"],
+    gitUrl: "https://sobstore.vercel.app/",
+    projectImages : [
+      '/images/projects/sobstore1.png',
+      '/images/projects/sobstore2.png',
+      '/images/projects/sobstore3.png'
+    ]
+  },
 ];
 
 const ProjectsSection = () => {
@@ -121,7 +135,7 @@ const ProjectsSection = () => {
 
   return (
     <section id='projects'>
-      <div className="md:grid md:grid-cols-8 items-center">
+      <div className="md:grid md:grid-cols-8 items-center my-12">
         <motion.div
             whileHover="hover"
             animate={wrenchClicked ? 'click' : 'base'}
@@ -142,6 +156,12 @@ const ProjectsSection = () => {
             <p className={`${orbitron.className} text-[#ADB7BE] text-center text-base sm:text-lg mb-6 lg:text-xl`}>
               (Click the Wrench!)
             </p>
+            <p className={`${orbitron.className} text-[#ADB7BE] text-center text-sm sm:text-sm mb-6 lg:text-sm`}>
+              <CodeBracketIcon className="inline-block w-8 h-8"/> To see code or project.
+            </p>
+            <p className={`${orbitron.className} text-[#ADB7BE] text-center text-sm sm:text-sm mb-6 lg:text-sm`}>
+              <EyeIcon className="inline-block w-8 h-8"/> To see fun pictures. 
+            </p>
 
               <motion.div
                 key={currentCardIndex}

sobenfolio-frontend/src/app/components/ellipse.css

@@ -0,0 +1,13 @@
+.loading::after {
+  display: inline-block;
+  animation: dotty steps(1,end) 1s infinite;
+  content: '';
+}
+
+@keyframes dotty {
+    0%   { content: ''; }
+    25%  { content: '.'; }
+    50%  { content: '..'; }
+    75%  { content: '...'; }
+    100% { content: ''; }
+}

sobenfolio-frontend/src/app/page.js

@@ -22,8 +22,8 @@ export default function Home() {
         <AchievmentsSection />
         I have no achievments
             */}
-        <AboutSection />
         <ProjectsSection />
+        <AboutSection />
         <EmailSection />
       </div>
       <Footer />