diff --git a/components/Navbar.tsx b/components/Navbar.tsx index 7d98d67..6e40c3d 100644 --- a/components/Navbar.tsx +++ b/components/Navbar.tsx @@ -15,7 +15,7 @@ function Navbar() { return ( diff --git a/pages/_app.tsx b/pages/_app.tsx index 948babb..d592439 100644 --- a/pages/_app.tsx +++ b/pages/_app.tsx @@ -4,23 +4,36 @@ import "../styles/globals.css"; import type { AppProps } from "next/app"; import { useState } from "react"; import Image from "next/image"; -import { motion } from "framer-motion"; +import { motion, useScroll, useTransform } from "framer-motion"; function MyApp({ Component, pageProps }: AppProps) { + const { scrollYProgress, scrollY } = useScroll(); + const opacity = useTransform(scrollYProgress, [0, 0.3], [1, 0]); + return ( <>
+ + + {/*
+ +
*/} +
diff --git a/pages/index.tsx b/pages/index.tsx index 6af46f1..90fe244 100644 --- a/pages/index.tsx +++ b/pages/index.tsx @@ -21,7 +21,7 @@ import { StarAndCrescent } from "styled-icons/fa-solid"; const Home: NextPage = () => { const { scrollYProgress, scrollY } = useScroll(); const opacity = useTransform(scrollYProgress, [0, 0.1, 0.5, 1], [1, 1, 0, 0]); - const opacityKirby = useTransform(scrollYProgress, [0, 0.5], [1, 0.5]); + const opacityKirby = useTransform(scrollYProgress, [0, 0.7], [1, 0.7]); interface JobProps { title: string; @@ -57,56 +57,162 @@ const Home: NextPage = () => { return ( -
- - {company} - -

- {title} - {type && " · " + type} +
+

+ {date && date}

-
-

- {description} -

-
- {skills && - skills.map((skill, index) => { - return ( -
- {skill} -
- ); - })} +
+
+ + {/*
+ banner +
*/} +

{company}

+ +

+ {title} + {type && " · " + type} +

+
+
+ {/*

+ {description} +

*/} +
+ {skills && + skills.map((skill, index) => { + return ( +
+ {skill} +
+ ); + })} +
); }; + interface ProjectProps { + title: string; + company?: string; + date: string; + description: string; + link: string; + skills?: string[]; + type?: string; + banner?: string; + end?: boolean; + } + + const Project: React.FC = ({ + title, + company, + date, + description, + link = "/", + skills, + type, + banner = "/", + end = false, + }) => { + const [randomBooleans, setRandomBooleans] = useState([]); + + useEffect(() => { + if (skills) { + const randomValues = skills.map(() => Math.random() < 0.5); + setRandomBooleans(randomValues); + } + }, [skills]); + + return ( + +
+
+ + {/*
+ banner +
*/} +

{company}

+ +

+ {title} + {type && " · " + type} +

+
+
+ {/*

+ {description} +

*/} +
+ {skills && + skills.map((skill, index) => { + return ( +
+ {skill} +
+ ); + })} +
+
+
+
+

+ {date && date} +

+
+ + ); + }; + const text = "RESEARCHER"; const [displayedLetters, setDisplayedLetters] = useState([]); const [isMounted, setIsMounted] = useState(false); + const phrases = [ + "let's talk", + "contact me", + "get in contact", + "work with me", + ]; + const [randomPhrase, setRandomPhrase] = useState(""); useEffect(() => { setIsMounted(true); + setRandomPhrase(phrases[Math.floor(Math.random() * phrases.length)]); }, []); useEffect(() => { @@ -124,7 +230,7 @@ const Home: NextPage = () => { useEffect(() => { const handleScroll = () => { const scrollY = window.scrollY; - const newOffsetY = scrollY * 0.9; // Adjust the multiplier to increase or decrease the effect + const newOffsetY = scrollY * 0.1; // Adjust the multiplier to increase or decrease the effect controls.start({ y: newOffsetY }); }; @@ -149,6 +255,7 @@ const Home: NextPage = () => { @@ -156,12 +263,12 @@ const Home: NextPage = () => { -

+

hi, I'm josh francisco- {" "} @@ -179,9 +286,14 @@ const Home: NextPage = () => { {char} ))} - + & - + { className="2xl:text-2xl md:text-xl text-[3vw] font-major-mono-display font-black ml-auto" animate={{ opacity: 1, y: 0 }} initial={{ opacity: 0, y: 10 }} - transition={{ duration: 2, delay: 1.2 }} + transition={{ duration: 1, delay: 1.2 }} > - *BUT most call me haruxe. + but most call me haruxe. {" "} + + {randomPhrase} +

{/*

@@ -205,75 +335,7 @@ const Home: NextPage = () => { reliability.

*/} - {/*
- -

- Back in 2019, I started my journey in programming. I began - tinkering with game development, making{" "} - - independent games - {" "} - with Unity and C#. Eventually I was enthralled by the world of - blockchain technology and the potential it has to change the - world. -

- Since then, I've had the opportunity to work with DeFi - protocols like{" "} - - BAO Finance - {" "} - and{" "} - - Blueberry Foundation - - - designing, developing, and securing smart contracts and - front-end infrastructure. In my free time I've also written{" "} - - articles - - , been a guest on a{" "} - - podcast - - , and built tools for NFT communities like{" "} - - Kaiju Kingz - - . -

- When I'm not building, I'm usually playing video games, - at the gym, or hanging out with my dog. -

- -
*/} + {scrollYProgress.get() <= 0 && ( { )}
-
-
+ {/*
+ +

+ Back in 2019, I started my journey in programming. I began tinkering + with game development, making{" "} + + independent games + {" "} + with Unity and C#. Eventually I was enthralled by the world of + blockchain technology and the potential it has to change the world. +

+ Since then, I've had the opportunity to work with DeFi + protocols like{" "} + + BAO Finance + {" "} + and{" "} + + Blueberry Foundation + + - designing, developing, and securing smart contracts and front-end + infrastructure. In my free time I've also written{" "} + + articles + + , been a guest on a{" "} + + podcast + + , and built tools for NFT communities like{" "} + + Kaiju Kingz + + . +

+ When I'm not building, I'm usually playing video games, at + the gym, or hanging out with my dog. +

+ +
*/} +
+
+
+ banner +
+

+ WORK EXPERIENCE +

+
+
+
{ banner="/images/BaoBanner.png" />
- +
+
+ +
+
{ end />
+ +
+ +
+
+
+ +
+
+
+ banner +
+

+ PROJECTS +

+
+ +
+
-
+
+
+ +
+
+
+ +
+ +
+ +
diff --git a/styles/globals.css b/styles/globals.css index 7e3413e..b685954 100644 --- a/styles/globals.css +++ b/styles/globals.css @@ -23,8 +23,8 @@ html { color-scheme: dark; } body { - color: #fdffe4; - background: #1a1919; + color: #ffffff; + background: #000000; } @font-face {