Merge pull request #5 from Hkaar/animations

Updated next.js & imporved animations
Hkaar · Oct 22, 2024 · 73b1f21 · 73b1f21
2 parents e80d176 + 39d05d0
commit 73b1f21
Show file tree

Hide file tree

Showing 15 changed files with 672 additions and 100 deletions.
diff --git a/app/(dynamic)/blog/[slug]/page.tsx b/app/(dynamic)/blog/[slug]/page.tsx
@@ -6,9 +6,13 @@ import Profile from "@/components/Profile";
 import Badge from "@/components/Badge";
 import { Icon } from "@iconify/react";
 
-export default function BlogPage({ params }: {
-  params: { slug: string };
-}) {
+interface BlogPageProps {
+  params: Promise<{slug: string}>
+}
+
+export default async function BlogPage(props: BlogPageProps) {
+  const params = await props.params;
+
   return (
     <>
       <ArticleContainer>

diff --git a/app/(dynamic)/projects/[slug]/page.tsx b/app/(dynamic)/projects/[slug]/page.tsx
@@ -6,9 +6,13 @@ import Profile from "@/components/Profile";
 import { Icon } from "@iconify/react";
 import Image from "next/image";
 
-export default function ProjectPage({ params }: {
-  params: { slug: string };
-}) {
+interface ProjectPageProps {
+  params: Promise<{slug: string}>
+}
+
+export default async function ProjectPage(props: ProjectPageProps) {
+  const params = await props.params;
+
   return (
     <>
       <ArticleContainer>

diff --git a/app/globals.css b/app/globals.css
@@ -2,6 +2,19 @@
 @tailwind components;
 @tailwind utilities;
 
+body {
+  transition-property: opacity, filter;
+  transition-timing-function: ease-in-out;
+  transition-duration: 350ms;
+}
+
+@layer components {
+  .page-transition {
+    opacity: 0;
+    filter: blur(12px);
+  }
+}
+
 @layer utilities {
   .text-balance {
     text-wrap: balance;

diff --git a/components/Header/Header.tsx b/components/Header/Header.tsx
@@ -8,6 +8,7 @@ import { Icon } from "@iconify/react";
 import { usePathname } from "next/navigation";
 import { loadStoredTheme } from "@/lib/themeUtils";
 import { useEffect, useState } from "react";
+import Link from "next/link";
 
 export default function Header() {
   const path = usePathname();
@@ -37,18 +38,30 @@ export default function Header() {
       className={`py-4 bg-base-light dark:bg-base-dark border-b border-gray-200 dark:border-gray-800 sticky top-0 z-40
             ${
         isScrolled
-          ? "" // (THIS IS CURRENTLY DISABLED 'KAY?) bg-opacity-20 dark:bg-base-light dark:bg-opacity-[7%] backdrop-blur-lg drop-shadow-lg 
+          ? "" // (THIS IS CURRENTLY DISABLED 'KAY?) bg-opacity-20 dark:bg-base-light dark:bg-opacity-[7%] backdrop-blur-lg drop-shadow-lg
           : ""
       }`}
     >
       <div className="container flex items-center flex-col gap-4 lg:flex-row justify-between">
         <div className="flex justify-between w-full lg:w-fit lg:justify-start">
-          <div className="flex lg:items-center justify-center lg:justify-start gap-2">
-            <Icon icon="material-symbols-light:code" fontSize={32} fontWeight={300}></Icon>
-            <h5 className="font-semibold text-2xl">Shava Jaya</h5>
-          </div>
+          <Link href="/" className="flex lg:items-center justify-center lg:justify-start gap-2">
+            <Icon
+              icon="material-symbols-light:code"
+              fontSize={32}
+              fontWeight={300}
+            >
+            </Icon>
+
+            <h5 className="font-semibold text-2xl">
+              Shava Jaya
+            </h5>
+          </Link>
 
-          <Button className="lg:hidden" icon="mdi-light:menu" onClick={handleCollapse} />
+          <Button
+            className="lg:hidden"
+            icon="mdi-light:menu"
+            onClick={handleCollapse}
+          />
         </div>
 
         <div
@@ -58,21 +71,30 @@ export default function Header() {
           }`}
         >
           <nav className="flex lg:items-center flex-col lg:flex-row gap-2">
-            <Menu href="/" active={path === "/"} icon="material-symbols-light:home-outline">Home</Menu>
+            <Menu
+              href="/"
+              active={path === "/"}
+              icon="material-symbols-light:home-outline"
+            >
+              Home
+            </Menu>
+
             <Menu
               href="/projects"
               active={path.startsWith("/projects")}
               icon="material-symbols-light:deployed-code-outline"
             >
               Projects
             </Menu>
+
             <Menu
               href="/blog"
               active={path.startsWith("/blog")}
               icon="material-symbols-light:newspaper"
             >
               Blog
             </Menu>
+
             <Menu
               href="/contact"
               active={path.startsWith("/contact")}

diff --git a/components/Header/Menu/Menu.tsx b/components/Header/Menu/Menu.tsx
@@ -1,5 +1,5 @@
-import Link from "next/link";
 import { Icon } from "@iconify/react";
+import TransitionLink from "@/components/TransitionLink";
 
 interface MenuProps {
   href: string;
@@ -10,7 +10,7 @@ interface MenuProps {
 
 export default function Menu({ href, icon, active, children }: MenuProps) {
   return (
-    <Link
+    <TransitionLink
       href={href}
       passHref
       className={`${
@@ -22,6 +22,6 @@ export default function Menu({ href, icon, active, children }: MenuProps) {
     >
       {icon ? <Icon icon={icon} fontSize={24} fontWeight={600}></Icon> : null}
       {children}
-    </Link>
+    </TransitionLink>
   );
 }
diff --git a/components/TransitionLink/TransitionLink.tsx b/components/TransitionLink/TransitionLink.tsx
@@ -0,0 +1,48 @@
+"use client";
+
+import Link, { LinkProps } from "next/link";
+import { useRouter } from "next/navigation";
+
+interface TransitionLinkProps extends LinkProps {
+  href: string;
+  children?: React.ReactNode;
+  className?: string;
+}
+
+function sleep(duration: number): Promise<void> {
+  return new Promise(resolve => setTimeout(resolve, duration));
+}
+
+export default function TransitionLink(
+  { href, children, className, ...props }: TransitionLinkProps,
+) {
+  const router = useRouter();
+
+  const handleTransition = async (
+    e: React.MouseEvent<HTMLAnchorElement, MouseEvent>,
+  ) => {
+    e.preventDefault();
+
+    const body = document.querySelector("body");
+    body?.classList.add("page-transition");
+
+    await sleep(300);
+
+    router.push(href);
+
+    await sleep(350);
+
+    body?.classList.remove("page-transition");
+  };
+
+  return (
+    <Link
+      href={href}
+      onClick={handleTransition}
+      {...props}
+      className={className}
+    >
+      {children}
+    </Link>
+  );
+}
diff --git a/components/TransitionLink/index.tsx b/components/TransitionLink/index.tsx
@@ -0,0 +1 @@
+export { default } from './TransitionLink';
diff --git a/components/Transitions/SlideDown/SlideDown.tsx b/components/Transitions/SlideDown/SlideDown.tsx
@@ -9,7 +9,7 @@ export default function SlideDown(
 ) {
   return (
     <motion.div
-      initial={{ y: -200, opacity: 0, z: 30 }}
+      initial={{ y: -50, opacity: 0, z: 30 }}
       whileInView={{ y: 0, opacity: 1, z: 0, transition: { duration: delay ? delay : 1.2 } }}
       viewport={{ once: true }}
     >

diff --git a/components/Transitions/SlideLeft/SlideLeft.tsx b/components/Transitions/SlideLeft/SlideLeft.tsx
@@ -9,10 +9,11 @@ export default function SlideLeft(
 ) {
   return (
     <motion.div
-      initial={{ x: 100, opacity: 0 }}
+      initial={{ x: 100, opacity: 0, z: 30 }}
       whileInView={{
         x: 0,
         opacity: 1,
+        z: 0,
         transition: { duration: delay ? delay : 1.2 },
       }}
       viewport={{ once: true }}

diff --git a/components/Transitions/SlideRight/SlideRight.tsx b/components/Transitions/SlideRight/SlideRight.tsx
@@ -9,10 +9,11 @@ export default function SlideRight(
 ) {
   return (
     <motion.div
-      initial={{ x: -100, opacity: 0 }}
+      initial={{ x: -50, opacity: 0, z: 30 }}
       whileInView={{
         x: 0,
         opacity: 1,
+        z: 0,
         transition: { duration: delay ? delay : 1.2 },
       }}
       viewport={{ once: true }}

diff --git a/components/Transitions/SlideUp/SlideUp.tsx b/components/Transitions/SlideUp/SlideUp.tsx
@@ -9,7 +9,7 @@ export default function SlideUp(
 ) {
   return (
     <motion.div
-      initial={{ y: 200, opacity: 0, z: 30 }}
+      initial={{ y: 50, opacity: 0, z: 30 }}
       whileInView={{ y: 0, opacity: 1, z: 0, transition: { duration: delay ? delay : 1.2 } }}
       viewport={{ once: true }}
     >

diff --git a/lib/client.ts b/lib/client.ts
@@ -2,7 +2,7 @@ import { createClient } from "@sanity/client";
 
 const client = createClient({
     projectId: process.env.SANITY_PROJECT_ID,
-    apiVersion: process.env.SANITY_API_VERSION,
+    apiVersion: process.env.SANITY_API_VERSION ? process.env.SANITY_API_VERSION : "v2022-03-07",
     dataset: process.env.SANITY_DATASET,
     token: process.env.SANITY_API_TOKEN,
     useCdn: false,