feat: add animations (#33)

Skolaczk · Feb 19, 2024 · 7935f7d · 7935f7d
1 parent 0b18dd2
commit 7935f7d
Show file tree

Hide file tree

Showing 13 changed files with 272 additions and 45 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -33,12 +33,14 @@
     "@t3-oss/env-nextjs": "^0.8.0",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.0",
+    "framer-motion": "^11.0.5",
     "lucide-react": "^0.312.0",
     "next": "14.1.0",
     "next-themes": "^0.2.1",
     "react": "^18",
     "react-dom": "^18",
     "react-hook-form": "^7.50.0",
+    "react-intersection-observer": "^9.8.0",
     "react-vertical-timeline-component": "^3.6.0",
     "resend": "^3.2.0",
     "sonner": "^1.4.0",

diff --git a/src/app/page.tsx b/src/app/page.tsx
@@ -5,6 +5,8 @@ import { Footer } from '@/components/footer';
 import { Header } from '@/components/header';
 import { Intro } from '@/components/intro';
 import { Projects } from '@/components/projects';
+import { SectionDivider } from '@/components/section-divider';
+import { Skills } from '@/components/skills';
 import { ThemeToggle } from '@/components/theme-toggle';
 
 const Home = () => {
@@ -13,8 +15,9 @@ const Home = () => {
       <div className="container flex flex-col items-center">
         <Header />
         <Intro />
-        <div className="bg-muted h-16 w-1 rounded-full sm:my-5" />
+        <SectionDivider />
         <About />
+        <Skills />
         <Projects />
         <Experience />
         <Contact />

diff --git a/src/components/about.tsx b/src/components/about.tsx
@@ -1,11 +1,17 @@
-import { Icons } from '@/components/icons';
+'use client';
+
+import { motion } from 'framer-motion';
+
 import { SectionHeading } from '@/components/section-heading';
 
 export const About = () => {
   return (
-    <section
+    <motion.section
       id="about"
       className="my-8 flex w-full scroll-mt-28 flex-col items-center sm:my-10"
+      initial={{ opacity: 0, y: 100 }}
+      animate={{ opacity: 1, y: 0 }}
+      transition={{ delay: 0.175 }}
     >
       <SectionHeading heading="About Me" />
       <div className="max-w-2xl text-center leading-7">
@@ -26,20 +32,6 @@ export const About = () => {
           how to play the guitar.
         </p>
       </div>
-      <div className="mt-8 flex w-full flex-wrap justify-center gap-10">
-        <Icons.html className="size-12" />
-        <Icons.css className="size-12" />
-        <Icons.sass className="size-12" />
-        <Icons.tailwind className="size-12" />
-        <Icons.javascript className="size-12" />
-        <Icons.typescript className="size-12" />
-        <Icons.react className="size-12" />
-        <Icons.redux className="size-12" />
-        <Icons.nextjs className="size-12" />
-        <Icons.nestjs className="size-12" />
-        <Icons.prisma className="size-12" />
-        <Icons.docker className="size-12" />
-      </div>
-    </section>
+    </motion.section>
   );
 };
diff --git a/src/components/contact.tsx b/src/components/contact.tsx
@@ -2,6 +2,7 @@
 
 import { useForm } from 'react-hook-form';
 import { zodResolver } from '@hookform/resolvers/zod';
+import { motion } from 'framer-motion';
 import { toast } from 'sonner';
 import { z } from 'zod';
 
@@ -42,7 +43,22 @@ export const Contact = () => {
   };
 
   return (
-    <section id="contact" className="my-8 w-full scroll-mt-28 sm:my-10">
+    <motion.section
+      id="contact"
+      className="my-8 w-full scroll-mt-28 sm:my-10"
+      initial={{
+        opacity: 0,
+      }}
+      whileInView={{
+        opacity: 1,
+      }}
+      transition={{
+        duration: 1,
+      }}
+      viewport={{
+        once: true,
+      }}
+    >
       <SectionHeading
         heading="Get In Touch"
         content="Please contact me directly at [email protected] or through this form."
@@ -88,6 +104,6 @@ export const Contact = () => {
           Submit <Icons.arrowRight className="ml-2 size-4" />
         </Button>
       </form>
-    </section>
+    </motion.section>
   );
 };
diff --git a/src/components/experience.tsx b/src/components/experience.tsx
@@ -3,6 +3,7 @@
 import 'react-vertical-timeline-component/style.min.css';
 
 import React from 'react';
+import { useInView } from 'react-intersection-observer';
 import {
   VerticalTimeline,
   VerticalTimelineElement,
@@ -13,6 +14,8 @@ import { SectionHeading } from '@/components/section-heading';
 import { experiencesData } from '@/lib/data';
 
 export const Experience = () => {
+  const { ref, inView } = useInView({ triggerOnce: true });
+
   return (
     <section id="experience" className="my-8 scroll-mt-28 sm:my-10">
       <SectionHeading
@@ -23,7 +26,7 @@ export const Experience = () => {
         {experiencesData.map(({ title, description, location, date }) => (
           <VerticalTimelineElement
             key={title}
-            visible
+            visible={inView}
             contentStyle={{
               background: 'hsl(var(--secondary))',
               boxShadow: 'none',
@@ -38,7 +41,9 @@ export const Experience = () => {
               border: '2px solid hsl(var(--foreground)',
             }}
           >
-            <h3 className="font-medium">{title}</h3>
+            <h3 ref={ref} className="font-medium">
+              {title}
+            </h3>
             <p className="!mt-0 !font-normal">{location}</p>
             <p className="text-muted-foreground !mt-1 !font-normal">
               {description}

diff --git a/src/components/header.tsx b/src/components/header.tsx
@@ -1,6 +1,7 @@
 'use client';
 
 import { useState } from 'react';
+import { motion } from 'framer-motion';
 import Link from 'next/link';
 
 import { Button } from '@/components/button';
@@ -19,7 +20,11 @@ export const Header = () => {
   const [open, setOpen] = useState(false);
 
   return (
-    <header className="sm:bg-secondary/80 sticky top-5 z-20 my-5 flex items-center gap-2 sm:top-10 sm:my-10 sm:rounded-full sm:px-8 sm:py-3 sm:backdrop-blur-sm">
+    <motion.header
+      initial={{ y: -100, opacity: 0 }}
+      animate={{ y: 0, opacity: 1 }}
+      className="sm:bg-secondary/80 sticky top-5 z-20 my-5 flex items-center gap-2 sm:top-10 sm:my-10 sm:rounded-full sm:px-8 sm:py-3 sm:backdrop-blur-sm"
+    >
       <Dialog open={open} onOpenChange={setOpen}>
         <DialogTrigger asChild>
           <Button variant="secondary" size="lg" className="sm:hidden">
@@ -64,6 +69,6 @@ export const Header = () => {
           ))}
         </ul>
       </nav>
-    </header>
+    </motion.header>
   );
 };
diff --git a/src/components/intro.tsx b/src/components/intro.tsx
@@ -1,3 +1,6 @@
+'use client';
+
+import { motion } from 'framer-motion';
 import Link from 'next/link';
 
 import { Button } from '@/components/button';
@@ -9,19 +12,46 @@ export const Intro = () => {
       id="home"
       className="my-8 flex scroll-mt-96 flex-col items-center gap-4 text-center sm:my-10"
     >
-      <a href="#" className="bg-muted rounded px-3 py-1 text-sm font-medium">
+      <motion.a
+        initial={{ opacity: 0, scale: 0 }}
+        animate={{ opacity: 1, scale: 1 }}
+        transition={{
+          type: 'tween',
+          duration: 0.2,
+        }}
+        href="#"
+        className="bg-muted rounded px-3 py-1 text-sm font-medium"
+      >
         🎉
         <span className="ml-3">Check out my new project</span>
-      </a>
-      <h1 className="text-3xl font-bold leading-tight tracking-tighter sm:text-4xl">
+      </motion.a>
+      <motion.h1
+        initial={{ opacity: 0, y: 100 }}
+        animate={{ opacity: 1, y: 0 }}
+        className="text-3xl font-bold leading-tight tracking-tighter sm:text-4xl"
+      >
         Software developer with a passion for design
-      </h1>
-      <p className="text-muted-foreground max-w-2xl">
+      </motion.h1>
+      <motion.p
+        initial={{ opacity: 0, y: 100 }}
+        animate={{ opacity: 1, y: 0 }}
+        transition={{
+          delay: 0.1,
+        }}
+        className="text-muted-foreground max-w-2xl"
+      >
         Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci
         aliquid commodi consequatur culpa, delectus dolore esse, eum laborum nam
         nihil quaerat quas!
-      </p>
-      <div className="flex flex-row gap-2">
+      </motion.p>
+      <motion.div
+        initial={{ opacity: 0, y: 100 }}
+        animate={{ opacity: 1, y: 0 }}
+        transition={{
+          delay: 0.1,
+        }}
+        className="flex flex-row gap-2"
+      >
         <Button asChild size="lg">
           <Link href="#">
             Get in touch <Icons.arrowRight className="ml-2 size-4" />
@@ -47,7 +77,7 @@ export const Intro = () => {
             <Icons.github className="size-6" />
           </a>
         </Button>
-      </div>
+      </motion.div>
     </section>
   );
 };