feat: some more animations

src/app/projects/[slug]/layout.tsx

@@ -1,5 +1,5 @@
 import { Footer } from "@/components/Footer";
-import { ProjectNavbar } from "@/components/Project/Navbar";
+import { Navbar } from "@/components/Navbar";
 
 export default function ProjectsLayout({
   children,
@@ -8,7 +8,7 @@ export default function ProjectsLayout({
 }) {
   return (
     <>
-      <ProjectNavbar />
+      <Navbar />
 
       <div className="min-h-[90vh]">{children}</div>
 

src/components/Home/Projects/Project.tsx

@@ -43,7 +43,7 @@ export const Project: React.FC<ProjectsProps> = ({ project }) => {
       className="mb-20 lg:mb-24 last:mb-0 flex flex-col"
       initial="offscreen"
       whileInView="onscreen"
-      viewport={{ once: true, amount: 0.5 }}
+      viewport={{ once: true, amount: 0.3 }}
       transition={{ staggerChildren: 0.3 }}
     >
       {project.comingSoon ? (

src/components/Navbar/index.tsx → src/components/Navbar.tsx

@@ -4,7 +4,7 @@ import { CONTRA_LINK } from "@/utils/constants";
 
 export const Navbar: React.FC = () => {
   return (
-    <div className="w-screen flex bg-transparent justify-between items-center py-8 px-8 md:px-16 lg:px-32 xl:px-48 z-50">
+    <div className="w-screen flex bg-transparent justify-between items-center py-10 px-8 md:px-16 lg:px-32 xl:px-48 z-50">
       <div className="flex items-center">
         <Link href="/">
           <span className="text-black text-2xl lg:text-4xl font-bodoni">

src/components/Project/Block/CarouselBlock/index.tsx

@@ -1,20 +1,9 @@
-import {
-  BaseBlock,
-  CarouselBlock as ICarouselBlock,
-  ProjectBlock,
-  ProjectBlockType,
-} from "@/types/global";
+import { CarouselBlock as ICarouselBlock } from "@/types/global";
 
 import { Carousel } from "./Carousel";
 
 import "react-responsive-carousel/lib/styles/carousel.min.css"; // requires a loader
 
-export function blockIsCarouselBlock(
-  block: Partial<BaseBlock> | ProjectBlock
-): block is ICarouselBlock {
-  return block.type === ProjectBlockType.CAROUSEL;
-}
-
 interface CarouselBlockProps {
   block: ICarouselBlock;
 }

src/components/Project/Block/FullScreenBlock.tsx

@@ -1,17 +1,6 @@
 import Image from "next/image";
 
-import {
-  BaseBlock,
-  FullScreenBlock as IFullScreenBlock,
-  ProjectBlock,
-  ProjectBlockType,
-} from "@/types/global";
-
-export function blockIsFullScreenBlock(
-  block: Partial<BaseBlock> | ProjectBlock
-): block is IFullScreenBlock {
-  return block.type === ProjectBlockType.FULL_SCREEN;
-}
+import { FullScreenBlock as IFullScreenBlock } from "@/types/global";
 
 interface FullScreenBlockProps {
   block: IFullScreenBlock;

src/components/Project/Block/GridBlock/index.tsx

@@ -1,19 +1,7 @@
 import classnames from "classnames";
 import Image from "next/image";
 
-import {
-  BaseBlock,
-  GridBlock as IGridBlock,
-  GridBlockSpacing,
-  ProjectBlock,
-  ProjectBlockType,
-} from "@/types/global";
-
-export function blockIsGridBlock(
-  block: Partial<BaseBlock> | ProjectBlock
-): block is IGridBlock {
-  return block.type === ProjectBlockType.GRID_BLOCK;
-}
+import { GridBlock as IGridBlock, GridBlockSpacing } from "@/types/global";
 
 interface FullScreenBlockProps {
   block: IGridBlock;

src/components/Project/Block/ProjectInfoBlock.tsx

@@ -1,27 +1,44 @@
+"use client";
+
+import { motion, Variants } from "framer-motion";
+
 import { RichText } from "@/components/Richtext";
-import {
-  BaseBlock,
-  ProjectBlock,
-  ProjectBlockType,
-  ProjectInfoBlock as IProjectInfoBlock,
-} from "@/types/global";
-
-export function blockIsProjectInfoBlock(
-  block: Partial<BaseBlock> | ProjectBlock
-): block is IProjectInfoBlock {
-  return block.type === ProjectBlockType.PROJECT_INFO;
-}
+import { ProjectInfoBlock as IProjectInfoBlock } from "@/types/global";
+
+const variants: Variants = {
+  offscreen: {
+    y: 50,
+    opacity: 0,
+  },
+  onscreen: {
+    y: 0,
+    opacity: 1,
+    transition: {
+      delay: 3.3,
+      y: {
+        type: "spring",
+        duration: 1.3,
+      },
+      opacity: {
+        duration: 0.3,
+      },
+    },
+  },
+};
 
 interface LineProps {
   title: string;
   value: string;
 }
 
 const Line: React.FC<LineProps> = ({ title, value }) => (
-  <div className="flex flex-col lg:flex-row lg:justify-between lg:items-center border-t-2 border-black py-4">
+  <motion.div
+    className="flex flex-col lg:flex-row lg:justify-between lg:items-center border-t-2 border-black py-4"
+    variants={variants}
+  >
     <span className="uppercase tracking-[.30rem]">{title}</span>
     <span className="mt-3 lg:mt-0">{value}</span>
-  </div>
+  </motion.div>
 );
 
 interface ProjectInfoBlockProps {
@@ -33,26 +50,34 @@ export const ProjectInfoBlock: React.FC<ProjectInfoBlockProps> = ({
 }) => {
   return (
     <div className="project-section bg-white">
-      <div className="project-container flex flex-col">
-        <h1 className="text-3xl lg:text-4xl font-medium mb-1">{block.title}</h1>
-        <span className="text-lg lg:text-xl font-light text-[#8C8C8C] mb-6 leading-snug">
+      <motion.div
+        className="project-container flex flex-col"
+        initial="offscreen"
+        whileInView="onscreen"
+        viewport={{ once: true, amount: 0.6 }}
+        transition={{ staggerChildren: 0.3 }}
+      >
+        <motion.h1
+          className="text-3xl lg:text-4xl font-medium mb-1"
+          variants={variants}
+        >
+          {block.title}
+        </motion.h1>
+        <motion.span
+          className="text-lg lg:text-xl font-light text-[#8C8C8C] mb-6 leading-snug"
+          variants={variants}
+        >
           <RichText richtext={block.description} />
-        </span>
+        </motion.span>
 
-        <div className="flex flex-col">
-          {block.info.team && <Line title="Team" value={block.info.team} />}
+        {block.info.team && <Line title="Team" value={block.info.team} />}
 
-          {block.info.client && (
-            <Line title="Client" value={block.info.client} />
-          )}
+        {block.info.client && <Line title="Client" value={block.info.client} />}
 
-          {block.info.role && <Line title="role" value={block.info.role} />}
+        {block.info.role && <Line title="role" value={block.info.role} />}
 
-          {block.info.skills && (
-            <Line title="skills" value={block.info.skills} />
-          )}
-        </div>
-      </div>
+        {block.info.skills && <Line title="skills" value={block.info.skills} />}
+      </motion.div>
     </div>
   );
 };

src/components/Project/Block/TitleAndTextBlock.tsx

@@ -1,16 +1,5 @@
 import { RichText } from "@/components/Richtext";
-import {
-  BaseBlock,
-  ProjectBlock,
-  ProjectBlockType,
-  TitleAndTextBlock as ITitleAndTextBlock,
-} from "@/types/global";
-
-export function blockIsTitleAndTextBlock(
-  block: Partial<BaseBlock> | ProjectBlock
-): block is ITitleAndTextBlock {
-  return block.type === ProjectBlockType.TITLE_AND_TEXT;
-}
+import { TitleAndTextBlock as ITitleAndTextBlock } from "@/types/global";
 
 interface TitleAndTextBlockProps {
   block: ITitleAndTextBlock;

src/components/Project/Block/TwoTitlesAndParagraphBlock.tsx

@@ -1,9 +1,4 @@
-import {
-  BaseBlock,
-  ProjectBlock,
-  ProjectBlockType,
-  TwoTitlesAndParagraphBlock as ITwoTitlesAndParagraphBlock,
-} from "@/types/global";
+import { TwoTitlesAndParagraphBlock as ITwoTitlesAndParagraphBlock } from "@/types/global";
 
 interface ParagraphProps {
   mb?: string;
@@ -24,12 +19,6 @@ const Paragraph: React.FC<ParagraphProps> = ({ paragraph, mb = "" }) => (
   </div>
 );
 
-export function blockIsTwoTitlesAndParagraphBlock(
-  block: Partial<BaseBlock> | ProjectBlock
-): block is ITwoTitlesAndParagraphBlock {
-  return block.type === ProjectBlockType.TWO_TITLES_AND_PARAGRAPH;
-}
-
 interface TwoTitlesAndParagraphBlockProps {
   block: ITwoTitlesAndParagraphBlock;
 }

src/components/Project/Block/index.tsx

@@ -1,44 +1,60 @@
-import { BaseBlock, ProjectBlock } from "@/types/global";
-
-import { blockIsCarouselBlock, CarouselBlock } from "./CarouselBlock";
-import { blockIsFullScreenBlock, FullScreenBlock } from "./FullScreenBlock";
-import { blockIsGridBlock, GridBlock } from "./GridBlock";
-import { blockIsProjectInfoBlock, ProjectInfoBlock } from "./ProjectInfoBlock";
-import {
-  blockIsTitleAndTextBlock,
-  TitleAndTextBlock,
-} from "./TitleAndTextBlock";
 import {
-  blockIsTwoTitlesAndParagraphBlock,
-  TwoTitlesAndParagraphBlock,
-} from "./TwoTitlesAndParagraphBlock";
+  BaseBlock,
+  CarouselBlock as ICarouselBlock,
+  FullScreenBlock as IFullScreenBlock,
+  GridBlock as IGridBlock,
+  ProjectBlock,
+  ProjectBlockType,
+  ProjectInfoBlock as IProjectInfoBlock,
+  TitleAndTextBlock as ITitleAndTextBlock,
+  TwoTitlesAndParagraphBlock as ITwoTitlesAndParagraphBlock,
+} from "@/types/global";
+
+import { CarouselBlock } from "./CarouselBlock";
+import { FullScreenBlock } from "./FullScreenBlock";
+import { GridBlock } from "./GridBlock";
+import { ProjectInfoBlock } from "./ProjectInfoBlock";
+import { TitleAndTextBlock } from "./TitleAndTextBlock";
+import { TwoTitlesAndParagraphBlock } from "./TwoTitlesAndParagraphBlock";
 
 interface BlockProps {
   block: Partial<BaseBlock> | ProjectBlock;
 }
 
+function blockIs<T extends BaseBlock>(
+  block: Partial<BaseBlock>,
+  type: T["type"]
+): block is T {
+  return block.type === type;
+}
+
 const Block: React.FC<BlockProps> = ({ block }) => {
-  if (blockIsProjectInfoBlock(block)) {
+  if (blockIs<IProjectInfoBlock>(block, ProjectBlockType.PROJECT_INFO)) {
     return <ProjectInfoBlock block={block} />;
   }
 
-  if (blockIsTwoTitlesAndParagraphBlock(block)) {
+  if (
+    blockIs<ITwoTitlesAndParagraphBlock>(
+      block,
+      ProjectBlockType.TWO_TITLES_AND_PARAGRAPH
+    )
+  ) {
     return <TwoTitlesAndParagraphBlock block={block} />;
   }
 
-  if (blockIsTitleAndTextBlock(block)) {
+  if (blockIs<ITitleAndTextBlock>(block, ProjectBlockType.TITLE_AND_TEXT)) {
     return <TitleAndTextBlock block={block} />;
   }
 
-  if (blockIsGridBlock(block)) {
+  if (blockIs<IGridBlock>(block, ProjectBlockType.GRID_BLOCK)) {
     return <GridBlock block={block} />;
   }
 
-  if (blockIsCarouselBlock(block)) {
+  if (blockIs<ICarouselBlock>(block, ProjectBlockType.CAROUSEL)) {
     return <CarouselBlock block={block} />;
   }
 
-  if (blockIsFullScreenBlock(block)) {
+  if (blockIs<IFullScreenBlock>(block, ProjectBlockType.FULL_SCREEN)) {
     return <FullScreenBlock block={block} />;
   }