Merge pull request #12 from vignesh-gupta/feat/animation

Feat/animation
vignesh-gupta · Nov 14, 2024 · a965177 · a965177
2 parents b47aab6 + 57096ed
commit a965177
Show file tree

Hide file tree

Showing 17 changed files with 368 additions and 158 deletions.
diff --git a/bun.lockb b/bun.lockb
diff --git a/package.json b/package.json
@@ -18,9 +18,10 @@
     "@radix-ui/react-tooltip": "^1.1.3",
     "@sanity/image-url": "^1.1.0",
     "@sanity/vision": "3",
+    "@studio-freight/lenis": "^1.0.42",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.1",
-    "framer-motion": "^11.11.11",
+    "framer-motion": "^11.11.13",
     "lucide-react": "^0.453.0",
     "next": "15.0.1",
     "next-sanity": "^9.8.8",

diff --git a/src/app/(root)/page.tsx b/src/app/(root)/page.tsx
@@ -15,21 +15,25 @@ const info: InfoCardsProps[] = [
     description: "Who am I? What do I do?",
     image: "/about.png",
     className: "pb-8",
+    href: "/about",
   },
   {
-    title: "Notebook",
+    title: "Blogs",
     description: "My thoughts and ideas",
     image: "/notebook.png",
+    href: "/notebook",
   },
   {
     title: "Bookshelf",
     description: "Books and pieces of wisdom I’ve enjoyed reading",
     image: "/bookshelf.png",
+    href: "/bookshelf",
   },
   {
     title: "Tech Stack",
     description: "The dev tools, apps, devices, and games I use and play.",
     image: "/stack.png",
+    href: "/uses",
   },
 ];
 

diff --git a/src/app/(root)/work/page.tsx b/src/app/(root)/work/page.tsx
@@ -22,8 +22,8 @@ const WorkPage = () => {
       />
       <PageContainer>
         <ProjectSection />
-        <Card className="w-full overflow-hidden lg:h-[500px] relative bg-card/50 border-4 border-dashed flex items-center justify-center flex-col">
-          <StarsIcon className="size-24 text-foreground" />
+        <Card className="w-full overflow-hidden lg:h-[500px] relative bg-card/50 border-4 border-dashed flex items-center justify-center flex-col p-5">
+          <StarsIcon className="md:size-24 size-12 text-foreground" />
           <CardTitle className="my-5">Want to see more?</CardTitle>
           <CardDescription className="text-muted/80">
             I have more projects on my{" "}

diff --git a/src/app/globals.css b/src/app/globals.css
@@ -90,3 +90,19 @@ body {
 .bg-gradient {
   background: linear-gradient(180deg, #1a1a1a, #131313);
 }
+
+::-webkit-scrollbar {
+  @apply w-1.5
+}
+
+::-webkit-scrollbar-track {
+  @apply bg-accent rounded-full
+}
+
+::-webkit-scrollbar-thumb {
+  @apply dark:bg-gray-400/30 bg-onyx/50 rounded-full
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background: #c0a0b9;
+}
diff --git a/src/app/not-found.tsx b/src/app/not-found.tsx
@@ -1,11 +1,31 @@
 "use client";
 
-import HeaderGradient from "@/components/common/header-gradient";
-import { ThemeProvider } from "@/components/theme/theme-provider";
 import clsx from "clsx";
+import { motion } from "framer-motion";
+import { ArrowLeft } from "lucide-react";
 import Link from "next/link";
 
+import HeaderGradient from "@/components/common/header-gradient";
+import { ThemeProvider } from "@/components/theme/theme-provider";
+
+const pageData = [
+  {
+    title: "Oops! Looks like this page is on a coffee break.",
+    describe: "Don't worry, even the best developers get lost sometimes.",
+    footer:
+      "Error: 404 | Page Not Found | Stack Trace: Just kidding, we don't do that here.",
+  },
+  {
+    title: "Oops! This page seems to have a bug :(",
+    describe:
+      "Don't worry, even the best developers encounter unexpected errors.",
+    footer: "Error: 404 | Page Not Found | Git blame: Probably the intern",
+  },
+];
+
 export default function Page404() {
+  const randomData = pageData[Math.floor(Math.random() * pageData.length)];
+
   return (
     <body
       className={clsx(
@@ -14,12 +34,33 @@ export default function Page404() {
     >
       <HeaderGradient className="h-[500px]" />
       <ThemeProvider attribute="class" defaultTheme="dark">
-        <h1 className="text-xl capitalize md:text-2xl">
-          404 | Oops seems like a wrong page
-        </h1>
-        <Link href="/" className="rounded-lg primary-button px-5 py-3 text-white">
-          Go home
-        </Link>
+        <motion.div
+          initial={{ opacity: 0, y: -20 }}
+          animate={{ opacity: 1, y: 0 }}
+          transition={{ duration: 0.5 }}
+          className="text-center"
+        >
+          <h1 className="text-9xl font-bold mb-4">404</h1>
+          <p className="text-2xl mb-8">{randomData.title}</p>
+          <p className="text-lg mb-8">{randomData.describe}</p>
+          <motion.div whileHover={{ scale: 1.05 }} whileTap={{ scale: 0.95 }}>
+            <Link
+              href="/"
+              className="rounded-lg primary-button px-5 py-3 inline-flex items-center text-lg font-medium"
+            >
+              <ArrowLeft className="w-5 h-5 mr-2" />
+              Go Home
+            </Link>
+          </motion.div>
+        </motion.div>
+        <motion.div
+          initial={{ opacity: 0 }}
+          animate={{ opacity: 1 }}
+          transition={{ delay: 0.5, duration: 0.5 }}
+          className="mt-16 text-sm text-gray-500 dark:text-gray-400"
+        >
+          <p>{randomData.footer}</p>
+        </motion.div>
       </ThemeProvider>
     </body>
   );

diff --git a/src/components/common/header.tsx b/src/components/common/header.tsx
@@ -1,12 +1,21 @@
-import { navLinks, socials } from "@/lib/constants";
+"use client"
+
 import Link from "next/link";
+import { motion } from "framer-motion";
+
+import { navLinks, socials } from "@/lib/constants";
 import Logo from "./logo";
 import MobileNav from "./mobile-nav";
 
 const Header = () => {
   return (
     <>
-      <header className="relative z-[999] pt-10 hidden px-4 md:block">
+      <motion.header
+        initial={{ translateY: -100 }}
+        animate={{ translateY: 0 }}
+        transition={{ duration: 0.2 }}
+        className="relative z-[999] pt-10 hidden px-4 md:block"
+      >
         <div className="container mx-auto flex h-16 w-full max-w-[1024px] items-center justify-between rounded-full border-[1px] border-white/25 bg-white/25 px-8 backdrop-blur-md dark:border-[#5E5E5E]/20 dark:bg-[#18181D]/30">
           <div className="flex items-center gap-10">
             <Link aria-label="Vignesh Gupta Logo" href="/">
@@ -50,7 +59,7 @@ const Header = () => {
             </div>
           </div>
         </div>
-      </header>
+      </motion.header>
       <Link
         href="/"
         aria-label="Vignesh Gupta Logo"

diff --git a/src/components/common/mobile-nav.tsx b/src/components/common/mobile-nav.tsx
@@ -1,11 +1,18 @@
-import { navLinks, socials } from "@/lib/constants";
 import Link from "next/link";
+import { motion } from "framer-motion";
+
+import { navLinks, socials } from "@/lib/constants";
 import { Tooltip, TooltipContent, TooltipTrigger } from "../ui/tooltip";
 import Logo from "./logo";
 
 const MobileNav = () => {
   return (
-    <header className="fixed z-[999] md:hidden px-4 bottom-10 inset-x-0 block">
+    <motion.header
+      initial={{ translateY: 100 }}
+      animate={{ translateY: 0 }}
+      transition={{ duration: 0.2 }}
+      className="fixed z-[999] md:hidden px-4 bottom-10 inset-x-0 block"
+    >
       <div className="container mx-auto flex h-16 w-full max-w-[1024px] items-center justify-between rounded-full border-[1px] border-white/25 bg-white/25 px-8 backdrop-blur-md dark:border-[#5E5E5E]/20 dark:bg-[#18181D]/30">
         <div className="flex items-center flex-1">
           <Link aria-label="Vignesh Gupta Logo" href="/">
@@ -49,7 +56,7 @@ const MobileNav = () => {
           </div>
         </div>
       </div>
-    </header>
+    </motion.header>
   );
 };
 

diff --git a/src/components/contact/contact-form.tsx b/src/components/contact/contact-form.tsx
@@ -1,6 +1,7 @@
 import { zodResolver } from "@hookform/resolvers/zod";
 import { useForm } from "react-hook-form";
 import { z } from "zod";
+import { motion } from "framer-motion";
 
 import { Button } from "@/components/ui/button";
 import {
@@ -34,10 +35,10 @@ const ContactForm = ({ setSuccess }: ContactFormProps) => {
   const form = useForm<z.infer<typeof formSchema>>({
     resolver: zodResolver(formSchema),
     defaultValues: {
-      name: "Vignesh",
-      email: "[email protected]",
-      subject: "Test",
-      message: "Testing the form",
+      name: "",
+      email: "",
+      subject: "",
+      message: "",
     },
   });
 
@@ -69,7 +70,12 @@ const ContactForm = ({ setSuccess }: ContactFormProps) => {
   }
 
   return (
-    <div className="relative min-h-[565px] overflow-hidden rounded-2xl border-[1px] bg-muted/10 pb-3">
+    <motion.div
+      initial={{ opacity: 0, translateY: 50 }}
+      animate={{ opacity: 1, translateY: 0 }}
+      transition={{ duration: 0.5 }}
+      className="relative min-h-[565px] overflow-hidden rounded-2xl border-[1px] bg-muted/10 pb-3"
+    >
       <div className="relative flex flex-col items-center justify-center py-4">
         <div className="absolute left-4 top-[22px] flex gap-2">
           <div className="h-3 w-3 rounded-full border-[1px] border-[#F63636] bg-[#FF6057]" />
@@ -179,7 +185,7 @@ const ContactForm = ({ setSuccess }: ContactFormProps) => {
           </Button>
         </form>
       </Form>
-    </div>
+    </motion.div>
   );
 };
 

diff --git a/src/components/hero/hero-section.tsx b/src/components/hero/hero-section.tsx
@@ -1,24 +1,36 @@
 import Link from "next/link";
 import HeroImage from "./hero-image";
+import { Tooltip, TooltipContent, TooltipTrigger } from "../ui/tooltip";
+import { calculateYearsFromNov2021 } from "@/lib/utils";
 
 const HeroSection = () => {
   return (
-    <section className="relative grid grid-cols-1 py-32 lg:grid-cols-3">
+    <section className="relative grid grid-cols-1 py-32 lg:grid-cols-3 group">
       <div className="flex flex-col text-center gap-y-10 lg:text-left lg:col-span-2 ">
         <div>
-          <span className="text-lg font-semibold md:text-xl lg:text-2xl text-muted">
-            Hey there 👋
+          <span className="text-lg font-semibold  md:text-xl lg:text-2xl text-muted">
+            Hey there <span className="animate-wave">👋</span>!
           </span>
           <h1 className="text-4xl font-bold md:text-5xl lg:text-6xl text-muted">
             I&apos;m <span className="text-primary">Vignesh Gupta</span>
           </h1>
         </div>
-        <p className="text-lg md:text-xl text-muted text-pretty">
-          A Self-taught Developer, functioning in the industry for 2+ years now.
-          I&apos;m a passionate learner who&apos;s always willing to learn and
-          work across technologies and domains. I love to explore new
-          technologies and leverage them to solve real-life problems.
-        </p>
+        <div className="text-lg md:text-xl text-muted text-pretty">
+          <span>A Self-taught Developer, functioning in the industry for</span>
+          <Tooltip>
+            <TooltipTrigger className="border-dashed border-b border-muted/50 mx-1 hover:text-foreground transition duration-300 hover:border-muted-foreground">
+              {calculateYearsFromNov2021()} years.
+            </TooltipTrigger>
+            <TooltipContent className="dark:bg-onyx font-semibold text-muted-foreground border-opacity-0 shadow-lg">
+              Since Nov 2021
+            </TooltipContent>
+          </Tooltip>
+          <span>
+            I&apos;m a passionate learner who&apos;s always willing to learn and
+            work across technologies and domains. I love to explore new
+            technologies and leverage them to solve real-life problems.
+          </span>
+        </div>
         <div className="flex flex-col items-center gap-3 md:flex-row ">
           <Link
             href={"/"}

diff --git a/src/components/info/info-cards.tsx b/src/components/info/info-cards.tsx
@@ -1,13 +1,15 @@
 import { cn } from "@/lib/utils";
 import { Card, CardDescription, CardTitle } from "../ui/card";
 import Image from "next/image";
+import Link from "next/link";
 
 export type InfoCardsProps = {
   title: string;
   description: string;
   image: string;
   className?: string;
   size?: number;
+  href: string;
 };
 
 const InfoCards = ({
@@ -16,24 +18,27 @@ const InfoCards = ({
   title,
   className,
   size,
+  href,
 }: InfoCardsProps) => {
   return (
-    <Card
-      className={cn(
-        "w-full overflow-hidden  transition duration-300 pt-12 group flex items-center flex-col gap-y-2 aspect-square group",
-        className
-      )}
-    >
-      <CardTitle>{title}</CardTitle>
-      <CardDescription>{description}</CardDescription>
-      <Image
-        src={image}
-        alt={title}
-        width={size ?? 504}
-        height={size ?? 365}
-        className="flex-1 object-contain w-auto mt-8 group-hover:scale-110 transition-transform duration-300"
-      />
-    </Card>
+    <Link href={href} prefetch={false}>
+      <Card
+        className={cn(
+          "w-full overflow-hidden  transition duration-300 pt-12 group flex items-center flex-col gap-y-2 aspect-square group",
+          className
+        )}
+      >
+        <CardTitle>{title}</CardTitle>
+        <CardDescription>{description}</CardDescription>
+        <Image
+          src={image}
+          alt={title}
+          width={size ?? 504}
+          height={size ?? 365}
+          className="flex-1 object-contain w-auto mt-8 group-hover:scale-110 transition-transform duration-300"
+        />
+      </Card>
+    </Link>
   );
 };
 

diff --git a/src/components/page/page-container.tsx b/src/components/page/page-container.tsx
@@ -6,7 +6,7 @@ const PageContainer = ({
 className,
 }: PropsWithChildren<{ className?: string }>) => {
   return (
-    <main className={cn("container max-w-screen-lg px-8 pt-16 mx-auto space-y-20", className)}>
+    <main className={cn("container max-w-screen-lg px-8 pt-16 mx-auto space-y-20 animate-fade-in", className)}>
       {children}
     </main>
   );