From 8b33094cef9166a1e3586a7d3d5b0d98ccd0ae8c Mon Sep 17 00:00:00 2001 From: Timothy Pidashev Date: Sat, 23 Mar 2024 04:02:55 +0000 Subject: [PATCH] Update hero sections --- src/web/package-lock.json | 15 +++ src/web/package.json | 1 + src/web/src/app/layout.js | 8 +- src/web/src/components/hero/index.jsx | 39 +------- src/web/src/components/hero/objects.jsx | 0 src/web/src/components/hero/particles.jsx | 28 ------ src/web/src/components/hero/sections.jsx | 109 +++++++++++++++++++--- 7 files changed, 121 insertions(+), 79 deletions(-) delete mode 100644 src/web/src/components/hero/objects.jsx delete mode 100644 src/web/src/components/hero/particles.jsx diff --git a/src/web/package-lock.json b/src/web/package-lock.json index 019a734..79a8542 100644 --- a/src/web/package-lock.json +++ b/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", diff --git a/src/web/package.json b/src/web/package.json index 82eb049..95e9ca2 100644 --- a/src/web/package.json +++ b/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": { diff --git a/src/web/src/app/layout.js b/src/web/src/app/layout.js index 150f70d..2e3fe28 100644 --- a/src/web/src/app/layout.js +++ b/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}) { diff --git a/src/web/src/components/hero/index.jsx b/src/web/src/components/hero/index.jsx index 7384191..e1122f4 100644 --- a/src/web/src/components/hero/index.jsx +++ b/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 ( -
- - - - - - - - - - - - +
+ + +
); } -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; diff --git a/src/web/src/components/hero/objects.jsx b/src/web/src/components/hero/objects.jsx deleted file mode 100644 index e69de29..0000000 diff --git a/src/web/src/components/hero/particles.jsx b/src/web/src/components/hero/particles.jsx deleted file mode 100644 index 6c4549f..0000000 --- a/src/web/src/components/hero/particles.jsx +++ /dev/null @@ -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 ( - - - {Array.from({ length: size }).map((_, i) => ( - - ))} - - ) -} - -export default Particles diff --git a/src/web/src/components/hero/sections.jsx b/src/web/src/components/hero/sections.jsx index 0b2ca12..04c379b 100644 --- a/src/web/src/components/hero/sections.jsx +++ b/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 ( -
-
-

hello.

-
-
-

Your Future

-
-
-

Awaits

+
+
+ +

Hello, I'm

+ + +

Timothy Pidashev

+
); -} +}; -export default Sections; +function Section2() { + const [ref, inView] = useInView(); + const containerRef = useRef(null); + + return ( +
+
+ +

I'm a 19 year old

+ + +

On an epic journey

+ +
+
+ ); +}; + +function Section3() { + const [ref, inView] = useInView(); + const containerRef = useRef(null); + + return ( +
+
+ +

To become

+ + +

A software engineer!

+ +
+
+ ); +}; + +export { + Section1, + Section2, + Section3, +} \ No newline at end of file