Update hero sections

src/web/package-lock.json

@@ -16,6 +16,7 @@
         "react": "^18",
         "react-dom": "^18",
         "react-icons": "^5.0.1",
+        "react-intersection-observer": "^9.8.1",
         "three": "^0.162.0"
       },
       "devDependencies": {
@@ -4259,6 +4260,20 @@
         "react": "*"
       }
     },
+    "node_modules/react-intersection-observer": {
+      "version": "9.8.1",
+      "resolved": "https://registry.npmjs.org/react-intersection-observer/-/react-intersection-observer-9.8.1.tgz",
+      "integrity": "sha512-QzOFdROX8D8MH3wE3OVKH0f3mLjKTtEN1VX/rkNuECCff+aKky0pIjulDhr3Ewqj5el/L+MhBkM3ef0Tbt+qUQ==",
+      "peerDependencies": {
+        "react": "^15.0.0 || ^16.0.0 || ^17.0.0 || ^18.0.0",
+        "react-dom": "^15.0.0 || ^16.0.0 || ^17.0.0 || ^18.0.0"
+      },
+      "peerDependenciesMeta": {
+        "react-dom": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/react-is": {
       "version": "16.13.1",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",

src/web/package.json

@@ -17,6 +17,7 @@
     "react": "^18",
     "react-dom": "^18",
     "react-icons": "^5.0.1",
+    "react-intersection-observer": "^9.8.1",
     "three": "^0.162.0"
   },
   "devDependencies": {

src/web/src/app/layout.js

@@ -5,10 +5,10 @@ import Header from "@/components/header";
 import Footer from "@/components/footer";
 
 // Metadata
-//export const metadata = {
-//  title: "Timothy Pidashev",
-//  description: "Engineering the Future!"
-//};
+export const metadata = {
+ title: "Timothy Pidashev",
+ description: "Engineering the Future!"
+};
 
 // Exports
 export default function Layout({children}) {

src/web/src/components/hero/index.jsx

@@ -1,46 +1,17 @@
 "use client"
 
 import React, { useRef } from 'react';
-import { Canvas, useFrame } from '@react-three/fiber';
-import { ScrollControls, Scroll } from '@react-three/drei';
-import * as THREE from 'three';
-import Particles from '@/components/hero/particles';
-import Sections from '@/components/hero/sections';
+import { Section1, Section2, Section3 } from '@/components/hero/sections';
 
 function Hero() {
-  const cameraRef = useRef();
-
   return (
-    <div className="w-full h-screen">
-      <Canvas>
-        <ScrollControls pages={3}>
-          <Scroll>
-            <Particles />
-          </Scroll>
-          <Scroll html>
-            <Sections />
-          </Scroll>
-        </ScrollControls>
-        <perspectiveCamera ref={cameraRef} position={[0, 0, 5]} />
-        <SceneUpdater cameraRef={cameraRef} />
-      </Canvas>
+    <div className="h-[calc(100vh-96px)] relative">
+      <Section1 />
+      <Section2 />
+      <Section3 />
     </div>
   );
 }
 
-function SceneUpdater({ cameraRef }) {
-  useFrame(({ pointer }) => {
-    const camera = cameraRef.current;
-    if (!camera) return;
-
-    camera.position.x = THREE.MathUtils.lerp(camera.position.x, pointer.x * 0.5, 0.03);
-    camera.position.y = THREE.MathUtils.lerp(camera.position.y, pointer.y * 0.8, 0.01);
-    camera.position.z = THREE.MathUtils.lerp(camera.position.z, Math.max(4, Math.abs(pointer.x * pointer.y * 8)), 0.01);
-    camera.rotation.y = THREE.MathUtils.lerp(camera.rotation.y, pointer.x * -Math.PI * 0.025, 0.001);
-  });
-
-  return null;
-}
-
 export default Hero;
 

src/web/src/components/hero/particles.jsx

@@ -1,28 +0,0 @@
-import React from 'react'
-import { Point, Points } from '@react-three/drei'
-import { useThree } from '@react-three/fiber'
-
-const particleColors = ['#673ab7', '#f4b677', 'orange', 'blue', '#8bc34a', 'purple']
-
-function Particles({ size = 5000 }) {
-  const { width, height } = useThree((state) => state.viewport)
-
-  return (
-    <Points limit={size}>
-      <pointsMaterial size={0.05} vertexColors />
-      {Array.from({ length: size }).map((_, i) => (
-        <Point
-          key={i}
-          position={[
-            (0.5 - Math.random()) * width * 2,
-            0.5 * height + Math.random() ** 0.25 * height * -3,
-            (0.5 - Math.random()) * 25
-          ]}
-          color={particleColors[Math.floor(Math.random() * (particleColors.length - 1))]}
-        />
-      ))}
-    </Points>
-  )
-}
-
-export default Particles

src/web/src/components/hero/sections.jsx

@@ -1,19 +1,102 @@
-import React from 'react';
+"use client"
 
-function Sections() {
+import { motion } from 'framer-motion';
+import { useInView } from 'react-intersection-observer';
+import React, { useRef } from 'react';
+
+
+function Section1() {
+  const [ref, inView] = useInView();
+  const containerRef = useRef(null);
+  
   return (
-    <div className="relative h-screen overflow-y-scroll">
-      <div className="h-screen flex items-center justify-center">
-        <h1 className="text-gray-700">hello.</h1>
-      </div>
-      <div className="h-screen flex items-center justify-center">
-        <h1 className="text-orange-400">Your Future</h1>
-      </div>
-      <div className="h-screen flex items-center justify-center">
-        <h1 className="text-indigo-800">Awaits</h1>
+    <div className="relative h-screen overflow-y-scroll font-bold text-4xl">
+      <div className="h-screen flex flex-col items-center justify-center" ref={containerRef}>
+        <motion.div
+          className="text-center"
+          ref={ref}
+          initial={{ opacity: 0, x: -50 }}
+          animate={inView ? { opacity: 1, x: 0 } : {}}
+          transition={{ duration: 0.5 }}
+        >
+          <h1>Hello, I'm</h1>
+        </motion.div>
+        <motion.div
+          className="text-center"
+          ref={ref}
+          initial={{ opacity: 0, x: -50 }}
+          animate={inView ? { opacity: 1, x: 0 } : {}}
+          transition={{ duration: 0.5, delay: 0.2 }}
+        >
+          <h2>Timothy Pidashev</h2>
+        </motion.div>
       </div>
     </div>
   );
-}
+};
 
-export default Sections;
+function Section2() {
+  const [ref, inView] = useInView();
+  const containerRef = useRef(null);
+
+  return (
+    <div className="relative h-screen overflow-y-scroll font-bold text-4xl">
+      <div className="h-screen flex flex-col items-center justify-center" ref={containerRef}>
+        <motion.div
+          className="text-center"
+          ref={ref}
+          initial={{ opacity: 0, x: -50 }}
+          animate={inView ? { opacity: 1, x: 0 } : {}}
+          transition={{ duration: 0.5 }}
+        >
+          <h1>I'm a 19 year old</h1>
+        </motion.div>
+        <motion.div
+          className="text-center"
+          ref={ref}
+          initial={{ opacity: 0, x: -50 }}
+          animate={inView ? { opacity: 1, x: 0 } : {}}
+          transition={{ duration: 0.5, delay: 0.2 }}
+        >
+          <h2>On an epic journey</h2>
+        </motion.div>
+      </div>
+    </div>
+  );
+};
+
+function Section3() {
+  const [ref, inView] = useInView();
+  const containerRef = useRef(null);
+  
+  return (
+    <div className="relative h-screen overflow-y-scroll font-bold text-4xl">
+      <div className="h-screen flex flex-col items-center justify-center" ref={containerRef}>
+        <motion.div
+          className="text-center"
+          ref={ref}
+          initial={{ opacity: 0, x: -50 }}
+          animate={inView ? { opacity: 1, x: 0 } : {}}
+          transition={{ duration: 0.5 }}
+        >
+          <h1>To become</h1>
+        </motion.div>
+        <motion.div
+          className="text-center"
+          ref={ref}
+          initial={{ opacity: 0, x: -50 }}
+          animate={inView ? { opacity: 1, x: 0 } : {}}
+          transition={{ duration: 0.5, delay: 0.2 }}
+        >
+          <h2>A software engineer!</h2>
+        </motion.div>
+      </div>
+    </div>
+  );
+};
+
+export { 
+  Section1,
+  Section2,
+  Section3,
+}