added loading screen

Author: smanzler

src/App.tsx

@@ -1,36 +1,65 @@
 import { ThemeProvider } from "@/components/theme-provider";
 import { Header } from "@/components/header";
-import { Hero } from "./components/sections/Hero";
-import { About } from "@/components/sections/About";
-import { Projects } from "@/components/sections/Projects";
 import { BrowserRouter, Route, Routes, useLocation } from "react-router";
 import ProjectDetails from "./components/pages/project-details";
-import { useEffect } from "react";
 import Apps from "./components/pages/apps";
 import AppDetails from "./components/pages/app-details";
 import { Footer } from "./components/footer";
 import Policy from "./components/pages/policy";
 import ProjectsPage from "./components/pages/projects-page";
+import Root from "./components/pages/root";
+import { useEffect, useState } from "react";
+import { ShimmeringText } from "./components/ui/shimmering-text";
+import { motion } from "motion/react";
 
-function Root() {
-  const { state } = useLocation();
+function RootLayout() {
+  const [loading, setLoading] = useState(true);
+  const [isExiting, setIsExiting] = useState(false);
+  const location = useLocation();
+  const isRootPath = location.pathname === "/";
 
   useEffect(() => {
-    if (state?.id) {
-      document.getElementById(state.id)?.scrollIntoView({ behavior: "smooth" });
+    if (!isRootPath) {
+      setLoading(false);
+      return;
     }
-  }, [state?.id]);
 
-  return (
-    <>
-      <Hero />
-      <Projects />
-      <About />
-    </>
-  );
-}
+    const enterDuration = 800;
+    const showDuration = 1500;
+    const exitDuration = 600;
+
+    const exitTimer = setTimeout(() => {
+      setIsExiting(true);
+    }, enterDuration + showDuration);
+
+    const finishTimer = setTimeout(() => {
+      setLoading(false);
+    }, enterDuration + showDuration + exitDuration);
+
+    return () => {
+      clearTimeout(exitTimer);
+      clearTimeout(finishTimer);
+    };
+  }, []);
+
+  if (loading) {
+    return (
+      <div className="min-h-dvh bg-background container mx-auto px-4 flex items-center justify-center">
+        <motion.div
+          initial={{ opacity: 0, y: 10 }}
+          animate={isExiting ? { opacity: 0, y: -10 } : { opacity: 1, y: 0 }}
+          transition={{ duration: isExiting ? 0.6 : 0.8, ease: "easeInOut" }}
+        >
+          <ShimmeringText
+            text="Loading..."
+            duration={1}
+            transition={{ duration: 1 }}
+          />
+        </motion.div>
+      </div>
+    );
+  }
 
-function RootLayout() {
   return (
     <div className="min-h-screen bg-background container mx-auto px-4">
       <div className="mx-auto max-w-4xl">

src/components/motion/threshold-container.tsx

@@ -34,7 +34,7 @@ interface ThresholdContainerProps {
  */
 export const ThresholdContainer = ({
   children,
-  threshold = 0.3,
+  threshold = 0.25,
   className,
 }: ThresholdContainerProps) => {
   const ref = useRef<HTMLDivElement>(null);

src/components/motion/threshold-motion-div.tsx

@@ -41,7 +41,7 @@ interface ThresholdMotionDivProps
  */
 const ThresholdMotionDiv = ({
   children,
-  threshold = 0.3,
+  threshold = 0.25,
   onThresholdChange,
   animate = { opacity: 1, y: 0 },
   initial = { opacity: 0, y: 30 },

src/components/pages/projects-page.tsx

@@ -1,10 +1,15 @@
 import { useProjects } from "@/hooks/useProjects";
 import { H1, Lead } from "../ui/typography";
 import ProjectCard from "../ui/project-card";
+import { useEffect } from "react";
 
 const ProjectsPage = () => {
   const { projects } = useProjects();
 
+  useEffect(() => {
+    window.scrollTo(0, 0);
+  }, []);
+
   return (
     <div className="min-h-screen flex flex-col gap-8">
       <div>

src/components/pages/root.tsx

@@ -0,0 +1,25 @@
+import { useEffect } from "react";
+import { About } from "../sections/About";
+import { Hero } from "../sections/Hero";
+import { Projects } from "../sections/Projects";
+import { useLocation } from "react-router";
+
+const Root = () => {
+  const { state } = useLocation();
+
+  useEffect(() => {
+    if (state?.id) {
+      document.getElementById(state.id)?.scrollIntoView({ behavior: "smooth" });
+    }
+  }, [state?.id]);
+
+  return (
+    <>
+      <Hero />
+      <Projects />
+      <About />
+    </>
+  );
+};
+
+export default Root;

src/components/sections/Hero.tsx

@@ -5,7 +5,7 @@ import profileImage from "@/assets/simon.jpeg";
 import { useState } from "react";
 import { Card, CardContent, CardFooter, CardHeader } from "../ui/card";
 import { Button } from "../ui/button";
-import { XIcon } from "lucide-react";
+import { ArrowDown, XIcon } from "lucide-react";
 
 const DELAY = 0.07;
 const DURATION = 0.3;
@@ -157,11 +157,12 @@ export function Hero() {
                       {...LAYOUT_OPTIONS}
                     >
                       <Button
-                        variant="outline"
+                        variant="link"
                         className="w-full"
                         onClick={() => handleScroll("about")}
                       >
                         More About Me
+                        <ArrowDown />
                       </Button>
                     </motion.div>
                   </CardFooter>
@@ -211,7 +212,7 @@ export function Hero() {
         className="mt-12"
       >
         <Button
-          variant="outline"
+          variant="default"
           className="w-[min(calc(100vw-2rem),200px)]"
           onClick={() => handleScroll("projects")}
         >

src/components/ui/featured-project-card.tsx

@@ -32,12 +32,12 @@ const FeaturedProjectCard = ({
       )}
       <div
         className={cn(
-          "absolute inset-0 bg-gradient-to-t from-black to-transparent",
+          "absolute inset-0 bg-gradient-to-t from-white/20 dark:from-black to-transparent",
           side === "left" ? "bg-gradient-to-tr" : "bg-gradient-to-tl"
         )}
       ></div>
 
-      <div
+      <ThresholdMotionDiv
         className={cn(
           "absolute bottom-6 z-1 w-[min(calc(100%-2rem),400px)] flex flex-col justify-between gap-3 p-6 backdrop-blur-sm supports-[backdrop-filter]:bg-white/40 dark:supports-[backdrop-filter]:bg-input/90 rounded-xl",
           side === "left" ? "left-6" : "right-6"
@@ -83,7 +83,7 @@ const FeaturedProjectCard = ({
             )}
           </div>
         </div>
-      </div>
+      </ThresholdMotionDiv>
     </ThresholdMotionDiv>
   );
 };

src/components/ui/shimmering-text.tsx

@@ -0,0 +1,75 @@
+import * as React from "react";
+import { type HTMLMotionProps, motion, type Transition } from "motion/react";
+import { cn } from "@/lib/utils";
+
+type ShimmeringTextProps = {
+  text: string;
+  duration?: number;
+  transition?: Transition;
+  wave?: boolean;
+  color?: string;
+  shimmeringColor?: string;
+} & Omit<HTMLMotionProps<"span">, "children">;
+function ShimmeringText({
+  text,
+  duration = 1,
+  transition,
+  wave = false,
+  className,
+  color = "var(--color-neutral-500)",
+  shimmeringColor = "var(--color-neutral-300)",
+  ...props
+}: ShimmeringTextProps) {
+  return (
+    <motion.span
+      className={cn("relative inline-block [perspective:500px]", className)}
+      style={
+        {
+          "--shimmering-color": shimmeringColor,
+          "--color": color,
+          color: "var(--color)",
+        } as React.CSSProperties
+      }
+      {...props}
+    >
+      {text?.split("")?.map((char, i) => (
+        <motion.span
+          key={i}
+          className="inline-block whitespace-pre [transform-style:preserve-3d]"
+          initial={{
+            ...(wave
+              ? {
+                  scale: 1,
+                  rotateY: 0,
+                }
+              : {}),
+            color: "var(--color)",
+          }}
+          animate={{
+            ...(wave
+              ? {
+                  x: [0, 5, 0],
+                  y: [0, -5, 0],
+                  scale: [1, 1.1, 1],
+                  rotateY: [0, 15, 0],
+                }
+              : {}),
+            color: ["var(--color)", "var(--shimmering-color)", "var(--color)"],
+          }}
+          transition={{
+            duration,
+            repeat: Infinity,
+            repeatType: "loop",
+            repeatDelay: text.length * 0.05,
+            delay: (i * duration) / text.length,
+            ease: "easeInOut",
+            ...transition,
+          }}
+        >
+          {char}
+        </motion.span>
+      ))}
+    </motion.span>
+  );
+}
+export { ShimmeringText, type ShimmeringTextProps };