Seb0927's Portfolio v0.6.0

src/App.jsx

@@ -8,32 +8,33 @@ export default function App() {
   const [hasRendered, setHasRendered] = useState(sections.map(() => false));
 
   const sectionElements = [
-    <Presentation key={0} 
-    hasRendered={hasRendered} 
-    setHasRendered={setHasRendered} 
-    sectionIndex={0}/>,
-    <Projects key={1} 
-    hasRendered={hasRendered} 
-    setHasRendered={setHasRendered} 
-    sectionIndex={1}/>,
-    <Experience key={2} 
-    hasRendered={hasRendered} 
-    setHasRendered={setHasRendered} 
-    sectionIndex={2}/>,
-    <Contact key={3} 
-    hasRendered={hasRendered} 
-    setHasRendered={setHasRendered} 
-    sectionIndex={3}/>,
+    <Presentation key={0}
+      hasRendered={hasRendered}
+      setHasRendered={setHasRendered}
+      sectionIndex={0} />,
+    <Projects key={1}
+      hasRendered={hasRendered}
+      setHasRendered={setHasRendered}
+      sectionIndex={1} />,
+    <Experience key={2}
+      hasRendered={hasRendered}
+      setHasRendered={setHasRendered}
+      sectionIndex={2} />,
+    <Contact key={3}
+      hasRendered={hasRendered}
+      setHasRendered={setHasRendered}
+      sectionIndex={3} />,
   ];
 
   return (
     <Background
-    sections={sections} 
-    currentSection={currentSection} 
-    setCurrentSection={setCurrentSection}>
+      sections={sections}
+      currentSection={currentSection}
+      setCurrentSection={setCurrentSection}>
       {/* Sections */}
       <AnimatePresence mode="wait">
         <motion.div
+          className={`md:h-full md:w-full md:flex md:items-center`}
           key={currentSection}
           initial={{ opacity: 0 }}
           animate={{ opacity: 1 }}

src/components/background/Background.jsx

@@ -26,7 +26,7 @@ const Background = ({ children, sections, currentSection, setCurrentSection }) =
         opacity: 1,
         transition: {
           delay: delay,
-        }
+        },
       }
     },
   }
@@ -106,7 +106,7 @@ const Background = ({ children, sections, currentSection, setCurrentSection }) =
           </motion.div>
 
           {/* Content */}
-          <motion.div className={`relative px-16 py-4 md:content-start md:h-5/6 md:col-span-11 md:px-0 md:py-0`}
+          <motion.div className={`px-16 py-4 md:content-start md:h-5/6 md:w-full md:col-span-11 md:px-0 md:py-0`}
             drag="x"
             dragConstraints={{ left: 0, right: 0 }}
             dragElastic={false}

src/components/contact/Contact.jsx

@@ -44,7 +44,7 @@ function Contact({ hasRendered, setHasRendered, sectionIndex }) {
 
   return (
     <>
-      <div className="md:h-full">
+      <div className="md:h-full md:w-full">
         <h1 className="mb-8 col-span-2 text-5xl font-semibold text-center md:py-8">More about me?</h1>
         <div className="md:flex md:flex-row md:gap-12 lg:gap-24">
           <section className="flex-1">

src/components/experience/Experience.jsx

@@ -36,7 +36,7 @@ function Experience({ hasRendered, setHasRendered, sectionIndex }) {
   }
 
   return (
-    <div className="md:px-16 md:py-4 md:flex md:justify-center md:h-5/6">
+    <div className="md:px-16 md:py-4 md:flex md:justify-center md:h-full md:w-full">
       <section>
         <motion.h1 className="text-8xl text-center font-bold mb-4"
         variants={renderVariants}

src/components/presentation/Presentation.jsx

@@ -27,7 +27,7 @@ function Presentation({ hasRendered, setHasRendered, sectionIndex }) {
         }
       },
     }
-    
+
   } else {
     renderVariants = {
       hiddenUp: { opacity: 0 },
@@ -38,9 +38,7 @@ function Presentation({ hasRendered, setHasRendered, sectionIndex }) {
   }
 
   return (
-    <>  
-      {/* TO-DO: You should search something better for this... */}
-      <div className="md:h-16" />
+    <div>
       {/* Content */}
       <motion.div className="md:grid md:grid-cols-11 md:gap-2"
         key={"presentation"}>
@@ -52,7 +50,7 @@ function Presentation({ hasRendered, setHasRendered, sectionIndex }) {
             animate="visible"
             custom={2}
           >I’m Sebastian Idrobo</motion.h1>
-          <motion.div className=""
+          <motion.div className="md:overflow-y-auto md:max-h-80"
             variants={renderVariants}
             initial="hiddenUp"
             animate="visible"
@@ -89,7 +87,7 @@ function Presentation({ hasRendered, setHasRendered, sectionIndex }) {
         custom={5}>
         <ProgrammingIcons></ProgrammingIcons>
       </motion.div>
-    </>
+    </div>
   )
 }
 

src/components/projects/Project.jsx

@@ -0,0 +1,46 @@
+import React, { useState } from 'react';
+import { motion } from "framer-motion";
+
+function Project(props) {
+  const { title, description, img, link } = props;
+  const [isHovered, setIsHovered] = useState(false);
+
+  const handleHoverStart = () => { setIsHovered(true) }
+  const handleHoverEnd = () => { setIsHovered(false) }
+
+  return (
+    <motion.div
+      className="relative flex items-center h-full w-full rounded-3xl overflow-hidden bg-zinc-100 md:max-h-60"
+      onHoverStart={handleHoverStart}
+      onHoverEnd={handleHoverEnd}
+      onTap={() => setIsHovered(!isHovered)}
+    >
+      <div className='absolute inset-0'>
+          <img src={img} alt="Project" className="w-full h-full object-cover opacity-10" />
+        </div>
+
+      <motion.div
+        className="p-4 w-full"
+        initial={{ scale: 0 }}
+        animate={{ scale: isHovered ? 1 : 0 }}
+        transition={{ type: "spring", stiffness: 200, damping: 30 }}
+      >
+
+
+        <h2 className="text-center text-2xl font-bold mb-2">{title}</h2>
+        <p className="text-center mb-4">
+          {description}
+        </p>
+        <div className="flex justify-center">
+          <a href={link}>
+            <button className="bg-transparent hover:bg-purple-500 text-purple-700 font-semibold hover:text-white py-2 px-4 border border-purple-500 hover:border-transparent rounded">
+              Visit
+            </button>
+          </a>
+        </div>
+      </motion.div>
+    </motion.div>
+  );
+}
+
+export default Project;

src/components/projects/Projects.jsx

@@ -1,5 +1,9 @@
 import { useEffect } from "react";
-import { motion } from "framer-motion";
+import Project from "./Project.jsx";
+import questAIImage from '../../assets/images/questai.jpg';
+import storeImage from '../../assets/images/store.jpg';
+import portfolioImage from '../../assets/images/portfolio.jpg';
+import wipImage from '../../assets/images/wip.png';
 
 function Projects({ hasRendered, setHasRendered, sectionIndex }) {
 
@@ -36,52 +40,25 @@ function Projects({ hasRendered, setHasRendered, sectionIndex }) {
   }
 
   return (
-    <div className="md:px-16 md:py-4 md:flex md:justify-center md:h-5/6">
-      <section>
-        <motion.h1 className="text-8xl text-center font-bold mb-4"
-        variants={renderVariants}
-        initial="hiddenUp"
-        animate="visible"
-        custom={1}>WIP</motion.h1>
-        <motion.p className="text-xl text-center"
-        variants={renderVariants}
-        initial="hiddenUp"
-        animate="visible"
-        custom={2}>This section is still under construction! Sorry for the inconvenience</motion.p>
-        <motion.div className="flex justify-center items-center"
-        variants={renderVariants}
-        initial="hiddenUp"
-        animate="visible"
-        custom={3}>
-          <pre className="text-[8px] w-auto justify-center md:text-[12px]">
-          {`
-⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⢀⣴⣿⣿⡷⣄⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
-⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⢀⣴⣿⡿⠋⠈⠻⣮⣳⡀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
-⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⢀⣠⣴⣾⡿⠋⠀⠀⠀⠀⠙⣿⣿⣤⣀⡀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
-⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⢀⣤⣶⣿⡿⠟⠛⠉⠀⠀⠀⠀⠀⠀⠀⠈⠛⠛⠿⠿⣿⣷⣶⣤⣄⣀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
-⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⣠⣴⣾⡿⠟⠋⠁⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠈⠉⠛⠻⠿⣿⣶⣦⣄⡀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
-⠀⠀⠀⣀⣠⣤⣤⣀⡀⠀⠀⣀⣴⣿⡿⠛⠁⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠉⠛⠿⣿⣷⣦⣄⡀⠀⠀⠀⠀⠀⠀⠀⢀⣀⣤⣄⠀⠀
-⢀⣤⣾⡿⠟⠛⠛⢿⣿⣶⣾⣿⠟⠉⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠉⠛⠿⣿⣷⣦⣀⣀⣤⣶⣿⡿⠿⢿⣿⡀⠀
-⣿⣿⠏⠀⢰⡆⠀⠀⠉⢿⣿⡀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠙⠻⢿⡿⠟⠋⠁⠀⠀⢸⣿⠇⠀
-⣿⡟⠀⣀⠈⣀⡀⠒⠃⠀⠙⣿⡆⠀⠀⠀⠀⠀⠀⠀⣀⡀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⢸⣿⠇⠀
-⣿⡇⠀⠛⢠⡋⢙⡆⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⣾⣿⣿⠄⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⣿⣿⠀⠀
-⣿⣧⠀⠀⠀⠓⠛⠁⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠘⠛⠋⠀⠀⢸⣧⣤⣤⣶⡀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⢰⣿⡿⠀⠀
-⣿⣿⣤⣀⡀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠉⠉⠉⠻⣷⣶⣶⡆⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⢀⣿⣿⠁⠀⠀
-⠈⠛⠻⠿⢿⣿⣷⣶⣦⣤⣄⣀⡀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⣴⣿⣷⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⣾⣿⡏⠀⠀⠀
-⠀⠀⠀⠀⠀⠀⠀⠉⠙⠛⠻⠿⢿⣿⣷⣶⣦⣤⣄⣀⡀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠙⠿⠛⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠘⢿⣿⡄⠀⠀
-⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠈⠉⠙⠛⠻⠿⢿⣿⣷⣶⣦⣤⣄⣀⡀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠈⢿⣿⡄⠀
-⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠉⠉⠛⠛⠿⠿⣿⣷⣶⣶⣤⣤⣀⡀⠀⠀⠀⢀⣴⡆⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠈⢿⡿⣄
-⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠉⠉⠛⠛⠿⠿⣿⣷⣶⡿⠋⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠈⣿⣹
-⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⣿⣿⠃⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⢀⣀⣀⠀⠀⠀⠀⠀⠀⢸⣧
-⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⢻⣿⣆⠀⠀⠀⠀⠀⠀⢀⣀⣠⣤⣶⣾⣿⣿⣿⣿⣤⣄⣀⡀⠀⠀⠀⣿
-⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠈⠻⢿⣻⣷⣶⣾⣿⣿⡿⢯⣛⣛⡋⠁⠀⠀⠉⠙⠛⠛⠿⣿⣿⡷⣶⣿
-          `}
-          </pre>
-        </motion.div>
-        <div className="h-56 md:h-0" />
-        <p className="text-sm text-center md:h-0 md:text-[0px]">(ﾉ◕ヮ◕)ﾉ*:･ﾟ✧ ✧ﾟ･: *ヽ(◕ヮ◕ヽ)</p>
-        {/*https://emojicombos.com/cute-ascii-art */}
-      </section>
+    <div className="grid grid-cols-1 lg:grid-cols-3 gap-6 lg:pt-6 lg:gap-8 md:auto-rows-fr md:grid-cols-2 md:gap-4 md:h-full md:w-full md:px-16 md:pb-16 md:items-center">
+        <Project 
+        title={"QuestAI"} 
+        description={"Website where you can record your interviews, save them to text and have assistance with the help of AI"} 
+        img={questAIImage}
+        link={"https://github.com/Seb0927/QuestAI"} />
+        <Project 
+        title={"3DStore"}
+        description={"Website store for 3D Items, with 3D animation on items and CRUD for items and orders"}
+        img={storeImage}
+        link={"https://github.com/Seb0927/3DStore"}/>
+        <Project title={"My Portfolio"}
+        description={"Web portfolio for showing myself and with animation, using Motion library!"}
+        img={portfolioImage}
+        link={"https://github.com/Seb0927/seb0927.github.io"}/>
+        <Project title={"WIP"}
+        description={"I hope to have more projects to display here!"}
+        img={wipImage}
+        link={"https://seb0927.github.io/"}/>
     </div>
   )
 }