From 37065af6d49b56394767d924ea3a15e3f23aa89c Mon Sep 17 00:00:00 2001
From: Jeeho Ahn <io@jcde.xyz>
Date: Tue, 19 Dec 2023 23:49:57 +0900
Subject: [PATCH] a

---
 app/components/sticky.tsx |   2 +-
 app/cursor.css            | 115 ++++++++++++++++++++++++++++++++++++++
 app/footer.tsx            |   5 +-
 app/globals.css           |   3 +-
 app/layout.tsx            |   1 +
 app/method.tsx            |  36 ------------
 app/page.tsx              |  14 ++---
 app/preloader.tsx         |   9 +++
 app/works/project.tsx     |  41 ++++++++++++++
 app/{ => works}/works.tsx |  52 ++++++-----------
 package.json              |   1 +
 pnpm-lock.yaml            |   7 +++
 12 files changed, 205 insertions(+), 81 deletions(-)
 create mode 100644 app/cursor.css
 delete mode 100644 app/method.tsx
 create mode 100644 app/works/project.tsx
 rename app/{ => works}/works.tsx (72%)

diff --git a/app/components/sticky.tsx b/app/components/sticky.tsx
index 7034250..59ec482 100644
--- a/app/components/sticky.tsx
+++ b/app/components/sticky.tsx
@@ -22,7 +22,7 @@ export function Sticky({
   start?: number;
   end?: number | string;
   target?: string;
-  snap:
+  snap?:
     | number
     | number[]
     | "labels"
diff --git a/app/cursor.css b/app/cursor.css
new file mode 100644
index 0000000..04e9a95
--- /dev/null
+++ b/app/cursor.css
@@ -0,0 +1,115 @@
+.mf-cursor{
+    position:fixed;
+    top:0;
+    left:0;
+    z-index:250;
+    direction:ltr;
+    contain:layout style size;
+    pointer-events:none;
+    transition:opacity .3s,color .4s
+}
+.mf-cursor:before{
+    content:"";
+    position:absolute;
+    top:-24px;
+    left:-24px;
+    display:block;
+    width:48px;
+    height:48px;
+    transform:scale(0.2);
+    background:currentColor;
+    border-radius:50%;
+    transition:transform .25s ease-in-out,opacity .1s
+}
+.mf-cursor.-inverse{
+    color:#fff
+}
+@supports(mix-blend-mode: exclusion){
+    .mf-cursor.-exclusion{
+        mix-blend-mode:exclusion
+    }
+    .mf-cursor.-exclusion:before{
+        background:#fff
+    }
+}
+.mf-cursor.-pointer:before{
+    transform:scale(0.15)
+}
+.mf-cursor.-text:before{
+    opacity:.85;
+    transform:scale(2)
+}
+.mf-cursor.-text.-active:before{
+    transform:scale(2);
+    transition-duration:.2s
+}
+.mf-cursor.-icon:before{
+    transform:scale(1.5)
+}
+.mf-cursor.-icon.-active:before{
+    transform:scale(1.4)
+}
+.mf-cursor.-hidden:before{
+    transform:scale(0)
+}
+.mf-cursor-text{
+    position:absolute;
+    top:-18px;
+    left:-18px;
+    width:36px;
+    height:36px;
+    display:flex;
+    align-items:center;
+    justify-content:center;
+    transform:scale(0) rotate(10deg);
+    opacity:0;
+    color:#fff;
+    font-size:32px;
+    line-height:20px;
+    text-align:center;
+    transition:opacity .4s,transform .3s
+}
+.mf-cursor.-text .mf-cursor-text,.mf-cursor.-icon .mf-cursor-text{
+    opacity:1;
+    transform:scale(1)
+}
+.mf-cursor-media{
+    position:absolute;
+    width:400px;
+    height:400px;
+    margin:-200px 0 0 -200px
+}
+.mf-cursor-media img,.mf-cursor-media video{
+    position:absolute;
+    top:50%;
+    left:50%;
+    transform:translate(-50%, -50%);
+    border-radius:50%
+}
+@supports(object-fit: cover){
+    .mf-cursor-media img,.mf-cursor-media video{
+        position:static;
+        width:100%;
+        height:100%;
+        object-fit:cover;
+        transform:translateZ(0)
+    }
+}
+.mf-cursor-media-box{
+    position:relative;
+    width:100%;
+    height:100%;
+    overflow:hidden;
+    transform:scale(0) translateZ(0);
+    padding:1px;
+    opacity:0;
+    border-radius:50%;
+    transition:transform .35s,opacity .2s .2s
+}
+.mf-cursor.-media .mf-cursor-media-box{
+    opacity:1;
+    transform:scale(0.696);
+    transition-duration:.4s,.4s;
+    transition-delay:0s,0s
+}
+/*# sourceMappingURL=mouse-follower.min.css.map */
diff --git a/app/footer.tsx b/app/footer.tsx
index 8a0cf71..8ed0d75 100644
--- a/app/footer.tsx
+++ b/app/footer.tsx
@@ -6,7 +6,10 @@ import { useEffect } from "react";
 export const Footer = () => {
   return (
     <>
-      <footer className="h-screen relative z-0 w-full flex flex-col justify-between dark bg-black text-white">
+      <footer
+        data-cursor="-inverse"
+        className="h-screen relative z-0 w-full flex flex-col justify-between dark bg-black text-white"
+      >
         <div className="container font-display flex flex-col mt-12 justify-center h-full items-center">
           <h2 className="text-4xl text-center sm:text-5xl font-medium">
             Have a project in mind?
diff --git a/app/globals.css b/app/globals.css
index dc20fa7..62914c1 100644
--- a/app/globals.css
+++ b/app/globals.css
@@ -51,8 +51,9 @@ span[data-scroll] {
   }
 }
 
+ 
 @keyframes scroll {
   0% {  transform: scaleY(0%) scaleX(0%); }
   50% { transform: scaleY(100%); }
   100% {  transform: scaleY(0%) scaleX(0%); }
-}
\ No newline at end of file
+}
diff --git a/app/layout.tsx b/app/layout.tsx
index 612f451..911f102 100644
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -6,6 +6,7 @@ import Nav from "./nav";
 import { Footer } from "./footer";
 import { LenisProvider } from "./lenis";
 import Preloader from "./preloader";
+import "./cursor.css";
 
 const inter = localFont({
   src: [
diff --git a/app/method.tsx b/app/method.tsx
deleted file mode 100644
index 95bc9bb..0000000
--- a/app/method.tsx
+++ /dev/null
@@ -1,36 +0,0 @@
-"use client";
-
-import { gsap } from "@/lib/gsap";
-import { useEffect } from "react";
-
-const Method = () => {
-  useEffect(() => {
-    const ctx = gsap.context(() => {
-      gsap.fromTo(
-        ".method.container",
-        {
-          scrollTrigger: {
-            trigger: ".method.container",
-            start: "top center",
-            end: "+=500",
-          },
-        },
-        {}
-      );
-    });
-  }, []);
-
-  return (
-    <div className="method container ">
-      <div>
-        <h1 className="text-8xl">Method</h1>
-
-        <p className="text-lg mt-8">
-          We believe that design and development are inseparable, and that the
-          best products are made when the two are considered together. <br />
-        </p>
-      </div>
-    </div>
-  );
-};
-export default Method;
diff --git a/app/page.tsx b/app/page.tsx
index aa8a574..66d570e 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -3,14 +3,16 @@ import Image from "next/image";
 import Logo from "./components/logo";
 import { Hero } from "./hero";
 import { Teto } from "./teto";
-import Works from "./works";
-import Method from "./method";
+import Works from "./works/works";
 
 export default function Home() {
   return (
     <main>
       <Hero />
-      <div className="py-32 w-full bg-black dark text-white flex flex-wrap gap-8 justify-between">
+      <div
+        data-cursor="-inverse"
+        className="py-32 w-full bg-black dark text-white flex flex-wrap gap-8 justify-between"
+      >
         <div className=" container grid  sm:grid-cols-[2.5fr_3fr_0.5fr] justify-between">
           <h2 className="text-sm mb-8 sm:text-xl font-medium font-display">
             WHO WE ARE
@@ -40,16 +42,14 @@ export default function Home() {
 
       <Works />
       <div className="py-20 container h-screen">
-        <h2 className="text-3xl font-display font-bold ">Specialties</h2>
-        <ul className="xl:text-8xl font-medium [&>*:hover]:text-red-500 [&>*]:text-gray-12 [&>*]:transition font-display space-y-4 mt-8">
+        <h2 className="text-3xl font-display font-bold ">Services we offer</h2>
+        <ul className="xl:text-5xl font-medium [&>*:hover]:text-red-500 [&>*]:text-gray-12 [&>*]:transition font-display space-y-4 mt-8">
           <li>UI design</li>
           <li>Full-stack development</li>
           <li>Branding</li>
           <li>Product design</li>
         </ul>
       </div>
-
-    <Method />
     </main>
   );
 }
diff --git a/app/preloader.tsx b/app/preloader.tsx
index 31dd441..e1662c3 100644
--- a/app/preloader.tsx
+++ b/app/preloader.tsx
@@ -7,12 +7,21 @@ import { SplitText } from "@/lib/splitText.js";
 
 let resolver: (v?: any) => void;
 
+export let cursor: any;
+
+import MouseFollower from "mouse-follower";
+
 export const promise = new Promise((resolve) => {
   resolver = resolve;
 });
 
 const Loader = () => {
   useEffect(() => {
+    MouseFollower.registerGSAP(gsap);
+
+    cursor = new MouseFollower({
+      speed: 0.3,
+    });
     // const pageAccessedByReload =
     //   (window.performance.navigation &&
     //     window.performance.navigation.type === 1) ||
diff --git a/app/works/project.tsx b/app/works/project.tsx
new file mode 100644
index 0000000..6334101
--- /dev/null
+++ b/app/works/project.tsx
@@ -0,0 +1,41 @@
+"use client";
+import Image from "next/image";
+import { useEffect } from "react";
+import { cursor } from "../preloader";
+import Link from "next/link";
+
+export const Project = ({
+  img,
+  name,
+  desc,
+  type,
+  slug,
+}: {
+  img: string;
+  name: string;
+  desc: string;
+  type: string;
+  slug: string;
+}) => {
+  return (
+    <Link
+      href={`/projects/${slug}`}
+      className="relative project-overview"
+      data-cursor-text="↗"
+    >
+      <Image
+        alt=""
+        className="rounded-lg"
+        src={img}
+        width={1000}
+        height={500}
+      />
+
+      <div className="text-2xl mt-4 font-semibold font-display">
+        {name}{" "}
+        <span className="text-gray-11 font-normal text-lg">- {type}</span>
+      </div>
+      <div className="text-gray-11 mt-1">{desc}</div>
+    </Link>
+  );
+};
diff --git a/app/works.tsx b/app/works/works.tsx
similarity index 72%
rename from app/works.tsx
rename to app/works/works.tsx
index 8c00a43..eb52d72 100644
--- a/app/works.tsx
+++ b/app/works/works.tsx
@@ -1,4 +1,7 @@
 import Image from "next/image";
+import Link from "next/link";
+import { Project } from "./project";
+
 const ProjectDetails = () => {
   return (
     <div className="grid grid-cols-[1.4fr_1fr] gap-12">
@@ -41,50 +44,29 @@ const ProjectDetails = () => {
   );
 };
 
-const Project = ({
-  img,
-  name,
-  desc,
-  type,
-}: {
-  img: string;
-  name: string;
-  desc: string;
-  type: string;
-}) => {
-  return (
-    <div className="relative">
-      <Image
-        alt=""
-        className="rounded-lg"
-        src={img}
-        width={1000}
-        height={500}
-      />
-
-      <div className="text-2xl mt-4 font-semibold font-display">
-        {name}{" "}
-        <span className="text-gray-11 font-normal text-lg">- {type}</span>
-      </div>
-      <div className="text-gray-11 mt-1">{desc}</div>
-    </div>
-  );
-};
-
 const Works = () => {
   return (
     <div className="container py-32">
-      <h2 className="font-display text-3xl font-semibold text-center">
-        RECENT WORKS ↓
-      </h2>
-
+      <div className="flex items-end  sm:px-6 py-4 flex-wrap gap-8 justify-between">
+        <h2 className="font-display text-3xl sm:text-5xl font-semibold text-center">
+          RECENT WORKS <span className="hidden sm:inline-block">↓</span>
+        </h2>
+        <div className=" text-xl text-center">
+          <Link
+            href=""
+            className="hover:underline decoration-gray-11 underline-offset-8"
+          >
+            See more &rarr;
+          </Link>
+        </div>
+      </div>
       <div className="mt-8 grid sm:grid-cols-2 gap-8">
         <Project
           name="Devbench"
           desc="Developer forum"
           type="Website"
           img={"/devbench.png"}
-        />{" "}
+        />
         <Project
           name="Vignette"
           type="Website"
diff --git a/package.json b/package.json
index 7cd5b34..565a1ab 100644
--- a/package.json
+++ b/package.json
@@ -25,6 +25,7 @@
     "gsap": "^3.12.3",
     "leva": "^0.9.35",
     "lucide-react": "^0.295.0",
+    "mouse-follower": "^1.1.2",
     "next": "14.0.4",
     "prop-types": "^15.8.1",
     "react": "^18",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index f721f9c..b62a528 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -53,6 +53,9 @@ dependencies:
   lucide-react:
     specifier: ^0.295.0
     version: 0.295.0(react@18.2.0)
+  mouse-follower:
+    specifier: ^1.1.2
+    version: 1.1.2
   next:
     specifier: 14.0.4
     version: 14.0.4(react-dom@18.2.0)(react@18.2.0)
@@ -2820,6 +2823,10 @@ packages:
       is-extendable: 1.0.1
     dev: false
 
+  /mouse-follower@1.1.2:
+    resolution: {integrity: sha512-Wa/3MKMNWW1qy7XuG34NMRAm504p0PckJU4yTyXCoNYFaaIcZi+bpnTg0L2u8QuGBYgs2ue84wGCPIaQQzRV3Q==}
+    dev: false
+
   /ms@2.1.2:
     resolution: {integrity: sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==}
     dev: true