WIP: Restyling

components.json

@@ -17,5 +17,8 @@
     "ui": "~/ui",
     "lib": "~/lib",
     "hooks": "~/hooks"
+  },
+  "registries": {
+    "@react-bits": "https://reactbits.dev/r/{name}.json"
   }
 }

package.json

@@ -29,12 +29,15 @@
   "homepage": "https://github.com/bprosen/Website#readme",
   "dependencies": {
     "@radix-ui/react-slot": "^1.2.4",
+    "@tabler/icons-react": "^3.36.1",
     "@tailwindcss/postcss": "^4.1.18",
     "@vercel/analytics": "^1.6.1",
     "@vercel/speed-insights": "^1.3.1",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "culori": "^4.0.2",
+    "framer-motion": "^12.29.0",
+    "gsap": "^3.13.0",
     "lucide-react": "^0.544.0",
     "next": "15.5.9",
     "postcss": "^8.5.6",

src/app/page.tsx

@@ -1,5 +1,11 @@
+import { FullPageBlurScroll, UnderConstruction } from '~/components';
 import { Home } from '~/routes';
 
-const Page: React.FC = () => <Home />;
+const Page: React.FC = () => (
+  <FullPageBlurScroll blur>
+    <Home />
+    <UnderConstruction />
+  </FullPageBlurScroll>
+);
 
 export default Page;

src/components/FullPageScroll/FullPageScroll.tsx

@@ -0,0 +1,72 @@
+'use client';
+
+import { motion, useInView } from 'framer-motion';
+import { Children, type ReactNode, type RefObject, useRef } from 'react';
+import { cn } from '~/lib/ui';
+
+type BlurPageProps = {
+  children: ReactNode;
+  scrollRef: RefObject<HTMLDivElement | null>;
+  blur?: boolean;
+};
+
+const BlurPage = ({ children, scrollRef, blur }: BlurPageProps) => {
+  const pageRef = useRef<HTMLDivElement>(null);
+  const isInView = useInView(pageRef, {
+    amount: 0.5,
+    root: scrollRef,
+  });
+
+  return (
+    <motion.div
+      animate={{
+        filter: blur && !isInView ? 'blur(10px)' : 'blur(0px)',
+      }}
+      className='min-h-screen w-full snap-start snap-always'
+      initial={false}
+      ref={pageRef}
+      transition={{
+        duration: 0.5,
+        ease: [0.25, 0.46, 0.45, 0.94],
+        type: 'tween',
+      }}
+    >
+      {children}
+    </motion.div>
+  );
+};
+
+type FullPageBlurScrollProps = {
+  children: ReactNode;
+  className?: string;
+  blur?: boolean;
+};
+
+export const FullPageBlurScroll = ({
+  children,
+  className,
+  blur,
+}: FullPageBlurScrollProps) => {
+  const scrollRef = useRef<HTMLDivElement>(null);
+  const pages = Children.toArray(children);
+
+  return (
+    <div
+      className={cn(
+        'h-screen min-h-screen overflow-y-auto overflow-x-hidden snap-y snap-mandatory',
+        className,
+      )}
+      ref={scrollRef}
+    >
+      {pages.map((page, index) => (
+        <BlurPage
+          blur={blur}
+          key={`scroll-page-${index + 1}`}
+          scrollRef={scrollRef}
+        >
+          {page}
+        </BlurPage>
+      ))}
+    </div>
+  );
+};

src/components/Header/Header.tsx

@@ -0,0 +1,24 @@
+import {
+  IconBrandGithub,
+  IconBrandLinkedin,
+  IconMail,
+} from '@tabler/icons-react';
+import { EMAIL, GITHUB, LINKED_IN } from '~/constants';
+
+export const Header = () => {
+  return (
+    <div className='flex justify-between w-full px-6 py-4'>
+      <div className='flex gap-4'>
+        <a href={GITHUB} target='_blank'>
+          <IconBrandGithub color='#FFFFFF' size={40} stroke={1.2} />
+        </a>
+        <a href={LINKED_IN} target='_blank'>
+          <IconBrandLinkedin color='#FFFFFF' size={40} stroke={1.2} />
+        </a>
+        <a href={EMAIL} target='_blank'>
+          <IconMail color='#FFFFFF' size={40} stroke={1.2} />
+        </a>
+      </div>
+    </div>
+  );
+};

src/components/Intro/Intro.tsx

@@ -0,0 +1,22 @@
+import { Card, TextType } from '~/ui';
+
+export const Intro = () => {
+  return (
+    <Card className='min-w-xl shadow-xl md:max-w-xl my-4 mx-12 sm:mx-2 md:mx-auto'>
+      <div className='p-12 flex flex-col text-black text-2xl'>
+        <p>Hey I'm Ben! It's great to meet you!</p>
+        <div className='flex flex-row'>
+          <p>I'm a passionate&nbsp;</p>
+          <TextType
+            className='underline underline-offset-4 decoration-2 text-bold'
+            deletingSpeed={30}
+            text={['Frontend', 'Backend', 'React', 'Java']}
+            textColors={['#4720ff', '#4249fD', '#94249F', '#jfgwF89']}
+            typingSpeed={60}
+          />
+          <div> Software Developer</div>
+        </div>
+      </div>
+    </Card>
+  );
+};

src/components/ScrollDownIndicator/ScrollDownIndicator.tsx

@@ -0,0 +1,9 @@
+import { IconChevronDown } from '@tabler/icons-react';
+
+export const ScrollDownIndicator = () => {
+  return (
+    <div className='flex justify-center pb-4'>
+      <IconChevronDown color='#ffffff' size={50} />
+    </div>
+  );
+};

src/components/UnderConstruction/UnderConstruction.tsx

@@ -3,22 +3,24 @@ import { Card, CardContent, CardHeader, CardTitle } from '~/ui';
 
 export const UnderConstruction: React.FC = () => {
   return (
-    <Card className='shadow-xl md:max-w-xl my-4 mx-12 sm:mx-2 md:mx-auto'>
-      <CardHeader>
-        <CardTitle className='text-center text-2xl sm:text-3xl'>
-          Hold on a second!
-        </CardTitle>
-      </CardHeader>
-      <CardContent className='flex flex-col items-center gap-4'>
-        <Construction
-          className='w-[200px] h-[200px] sm:w-[250px] sm:h-[250px] md:w-[350px] md:h-[350px]'
-          color='#e4ec75'
-          strokeWidth={1.2}
-        />
-        <p className='text-base text-center'>
-          This page is under construction, check back soon
-        </p>
-      </CardContent>
-    </Card>
+    <div className='min-h-screen flex items-center justify-center p-4'>
+      <Card className='shadow-xl md:max-w-xl w-full'>
+        <CardHeader>
+          <CardTitle className='text-center text-2xl sm:text-3xl'>
+            Hold on a second!
+          </CardTitle>
+        </CardHeader>
+        <CardContent className='flex flex-col items-center gap-4'>
+          <Construction
+            className='w-[200px] h-[200px] sm:w-[250px] sm:h-[250px] md:w-[350px] md:h-[350px]'
+            color='#e4ec75'
+            strokeWidth={1.2}
+          />
+          <p className='text-base text-center'>
+            This page is under construction, check back soon
+          </p>
+        </CardContent>
+      </Card>
+    </div>
   );
 };

src/components/index.ts

@@ -1 +1,6 @@
+export * from './FullPageScroll/FullPageScroll';
+export * from './FullPageScroll/FullPageScroll';
+export * from './Header/Header';
+export * from './Intro/Intro';
+export * from './ScrollDownIndicator/ScrollDownIndicator';
 export * from './UnderConstruction/UnderConstruction';

src/constants/index.ts

@@ -0,0 +1 @@
+export * from './urls';

src/constants/urls.ts

@@ -0,0 +1,3 @@
+export const GITHUB = 'https://github.com/bprosen';
+export const LINKED_IN = 'https://www.linkedin.com/in/ben-edgar-prosen/';
+export const EMAIL = 'mailto:benedgarprosen@gmail.com';

src/routes/Home.tsx

@@ -1,21 +1,12 @@
-import { UnderConstruction } from '~/components';
-import { VantaNet } from '~/ui';
-import { isMobile } from '~/utils/utils';
-
-export const Home = async () => {
-  const mobile = await isMobile();
+import { Intro, ScrollDownIndicator } from '~/components';
 
+export const Home = () => {
   return (
-    <VantaNet
-      backgroundColor='var(--primary)'
-      className='flex flex-col items-center justify-center h-screen'
-      gyroControls={mobile}
-      maxDistance={mobile ? 20.0 : 18}
-      mouseControls={!mobile}
-      spacing={mobile ? 18.0 : 15.0}
-      touchControls={mobile}
-    >
-      <UnderConstruction />
-    </VantaNet>
+    <div className='min-h-screen flex flex-col'>
+      <div className='flex-1 flex items-center justify-center'>
+        <Intro />
+      </div>
+      <ScrollDownIndicator />
+    </div>
   );
 };