From 61f4e66ee019f423831dd71bb3c27b79c5e67c37 Mon Sep 17 00:00:00 2001
From: rohanpatel2002 <rohanpatel2118@gmail.com>
Date: Thu, 14 May 2026 11:16:51 +0530
Subject: [PATCH] feat: 3D depth with creative bento grid layout and a
 fullscreen contact experience

---
 src/components/ContactModal.tsx | 128 ++++++++++++++++++++++++++++++++
 src/components/Motion.tsx       |  33 ++++++++
 src/components/SiteHeader.tsx   |  19 +++--
 src/hooks/use-contact-modal.ts  |  27 +++++++
 src/routes/__root.tsx           |   7 ++
 src/routes/index.tsx            |  99 ++++++++++++++++++------
 6 files changed, 281 insertions(+), 32 deletions(-)
 create mode 100644 src/components/ContactModal.tsx
 create mode 100644 src/hooks/use-contact-modal.ts

diff --git a/src/components/ContactModal.tsx b/src/components/ContactModal.tsx
new file mode 100644
index 0000000..7b421c5
--- /dev/null
+++ b/src/components/ContactModal.tsx
@@ -0,0 +1,128 @@
+import { motion, AnimatePresence } from "framer-motion";
+import { X, Mail, Linkedin, Github, Send } from "lucide-react";
+import { Magnetic } from "./Motion";
+import { useState } from "react";
+import { toast } from "sonner";
+
+interface ContactModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+}
+
+export function ContactModal({ isOpen, onClose }: ContactModalProps) {
+  const [pending, setPending] = useState(false);
+
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+    setPending(true);
+    // Simulate API call
+    setTimeout(() => {
+      setPending(false);
+      toast.success("Message sent! I'll get back to you soon.");
+      onClose();
+    }, 1500);
+  };
+
+  return (
+    <AnimatePresence>
+      {isOpen && (
+        <motion.div
+          initial={{ opacity: 0 }}
+          animate={{ opacity: 1 }}
+          exit={{ opacity: 0 }}
+          className="fixed inset-0 z-[100] flex items-center justify-center bg-background/80 backdrop-blur-xl p-4 md:p-8"
+        >
+          <motion.div
+            initial={{ scale: 0.9, y: 20, opacity: 0 }}
+            animate={{ scale: 1, y: 0, opacity: 1 }}
+            exit={{ scale: 0.9, y: 20, opacity: 0 }}
+            transition={{ type: "spring", damping: 25, stiffness: 300 }}
+            className="relative grid w-full max-w-6xl gap-8 overflow-hidden rounded-[2rem] border border-border bg-card p-8 md:grid-cols-2 md:p-16"
+          >
+            {/* Close button */}
+            <div className="absolute right-6 top-6 z-10">
+              <Magnetic>
+                <button
+                  onClick={onClose}
+                  className="flex h-12 w-12 items-center justify-center rounded-full border border-border bg-card transition-colors hover:bg-muted"
+                >
+                  <X size={20} />
+                </button>
+              </Magnetic>
+            </div>
+
+            {/* Content */}
+            <div className="flex flex-col justify-between space-y-12">
+              <div>
+                <p className="text-xs font-semibold tracking-[0.3em] text-accent uppercase">[ CONTACT ]</p>
+                <h2 className="mt-6 font-display text-5xl sm:text-7xl">Let's start a<br />conversation.</h2>
+                <p className="mt-6 max-w-md text-lg text-muted-foreground leading-relaxed">
+                  I'm always open to discussing new projects, creative ideas or opportunities to be part of your visions.
+                </p>
+              </div>
+
+              <div className="space-y-6">
+                <a href="mailto:rohan@example.com" className="flex items-center gap-4 text-xl hover:text-accent transition-colors">
+                  <Mail className="text-accent" /> rohan@example.com
+                </a>
+                <div className="flex gap-4">
+                  <Magnetic>
+                    <a href="#" className="flex h-12 w-12 items-center justify-center rounded-full border border-border hover:bg-muted transition-colors">
+                      <Linkedin size={20} />
+                    </a>
+                  </Magnetic>
+                  <Magnetic>
+                    <a href="#" className="flex h-12 w-12 items-center justify-center rounded-full border border-border hover:bg-muted transition-colors">
+                      <Github size={20} />
+                    </a>
+                  </Magnetic>
+                </div>
+              </div>
+            </div>
+
+            {/* Form */}
+            <form onSubmit={handleSubmit} className="flex flex-col gap-4">
+              <div className="space-y-2">
+                <label className="text-xs font-semibold uppercase tracking-widest text-muted-foreground">Full Name</label>
+                <input
+                  required
+                  type="text"
+                  placeholder="John Doe"
+                  className="w-full rounded-2xl border border-border bg-muted/50 px-6 py-4 outline-none transition-all focus:border-accent focus:ring-1 focus:ring-accent"
+                />
+              </div>
+              <div className="space-y-2">
+                <label className="text-xs font-semibold uppercase tracking-widest text-muted-foreground">Email Address</label>
+                <input
+                  required
+                  type="email"
+                  placeholder="john@example.com"
+                  className="w-full rounded-2xl border border-border bg-muted/50 px-6 py-4 outline-none transition-all focus:border-accent focus:ring-1 focus:ring-accent"
+                />
+              </div>
+              <div className="space-y-2">
+                <label className="text-xs font-semibold uppercase tracking-widest text-muted-foreground">Message</label>
+                <textarea
+                  required
+                  rows={4}
+                  placeholder="How can I help you?"
+                  className="w-full rounded-2xl border border-border bg-muted/50 px-6 py-4 outline-none transition-all focus:border-accent focus:ring-1 focus:ring-accent resize-none"
+                />
+              </div>
+              <button
+                disabled={pending}
+                className="group relative mt-2 flex items-center justify-center gap-3 overflow-hidden rounded-2xl bg-primary py-5 font-display text-xl text-primary-foreground transition-all active:scale-[0.98] disabled:opacity-50"
+              >
+                <span className="relative z-10 flex items-center gap-2">
+                  {pending ? "SENDING..." : "SEND MESSAGE"}
+                  <Send size={18} className={pending ? "animate-pulse" : ""} />
+                </span>
+                <span className="absolute inset-0 -translate-x-full bg-accent transition-transform duration-500 ease-[0.22,1,0.36,1] group-hover:translate-x-0" />
+              </button>
+            </form>
+          </motion.div>
+        </motion.div>
+      )}
+    </AnimatePresence>
+  );
+}
diff --git a/src/components/Motion.tsx b/src/components/Motion.tsx
index a13a80c..762c94d 100644
--- a/src/components/Motion.tsx
+++ b/src/components/Motion.tsx
@@ -131,7 +131,40 @@ export function ScrambleText({ text, className = "" }: { text: string; className
   );
 }
 
+export function Tilt({ children, intensity = 15 }: { children: ReactNode; intensity?: number }) {
+  const ref = useRef<HTMLDivElement>(null);
+  const x = useMotionValue(0);
+  const y = useMotionValue(0);
+  const rotateX = useSpring(useTransform(y, [-0.5, 0.5], [intensity, -intensity]), { stiffness: 150, damping: 15 });
+  const rotateY = useSpring(useTransform(x, [-0.5, 0.5], [-intensity, intensity]), { stiffness: 150, damping: 15 });
+
+  const handleMouseMove = (e: React.MouseEvent) => {
+    if (!ref.current) return;
+    const { left, top, width, height } = ref.current.getBoundingClientRect();
+    x.set((e.clientX - left) / width - 0.5);
+    y.set((e.clientY - top) / height - 0.5);
+  };
+
+  const handleMouseLeave = () => {
+    x.set(0);
+    y.set(0);
+  };
+
+  return (
+    <motion.div
+      ref={ref}
+      onMouseMove={handleMouseMove}
+      onMouseLeave={handleMouseLeave}
+      style={{ rotateX, rotateY, perspective: 1000 }}
+      className="h-full w-full"
+    >
+      {children}
+    </motion.div>
+  );
+}
+
 export function PageTransition({ children, routeKey }: { children: ReactNode; routeKey: string }) {
+
   return (
     <AnimatePresence mode="wait">
       <motion.div key={routeKey} className="relative">
diff --git a/src/components/SiteHeader.tsx b/src/components/SiteHeader.tsx
index 0bc2451..653338c 100644
--- a/src/components/SiteHeader.tsx
+++ b/src/components/SiteHeader.tsx
@@ -2,6 +2,7 @@ import { Link } from "@tanstack/react-router";
 import { AnimatePresence, motion } from "framer-motion";
 import { useState } from "react";
 import { useTheme } from "@/hooks/use-theme";
+import { useContactModal } from "@/hooks/use-contact-modal";
 import { Moon, Sun } from "lucide-react";
 
 const links: { label: string; to: string; hash?: string }[] = [
@@ -26,6 +27,7 @@ export function ThemeToggle() {
 
 export function SiteHeader() {
   const [open, setOpen] = useState(false);
+  const { open: openContact } = useContactModal();
 
   return (
     <motion.header
@@ -54,14 +56,13 @@ export function SiteHeader() {
 
         <div className="flex items-center gap-3">
           <ThemeToggle />
-          <Link
-            to="/"
-            hash="contact"
+          <button
+            onClick={openContact}
             className="group relative hidden overflow-hidden rounded-full bg-primary px-4 py-2 text-xs font-semibold text-primary-foreground sm:inline-block sm:px-5 sm:text-sm"
           >
             <span className="relative z-10">CONTACT</span>
             <span className="absolute inset-0 -translate-x-full bg-accent transition-transform duration-500 ease-[0.22,1,0.36,1] group-hover:translate-x-0" />
-          </Link>
+          </button>
           <button
             aria-label="Menu"
             onClick={() => setOpen((v) => !v)}
@@ -96,14 +97,12 @@ export function SiteHeader() {
                   {l.label}
                 </Link>
               ))}
-              <Link
-                to="/"
-                hash="contact"
-                onClick={() => setOpen(false)}
-                className="mt-1 rounded-xl bg-primary px-4 py-3 text-center text-sm font-semibold text-primary-foreground"
+              <button
+                onClick={() => { setOpen(false); openContact(); }}
+                className="mt-1 rounded-xl bg-primary px-4 py-3 text-center text-sm font-semibold text-primary-foreground w-full"
               >
                 CONTACT
-              </Link>
+              </button>
             </nav>
           </motion.div>
         )}
diff --git a/src/hooks/use-contact-modal.ts b/src/hooks/use-contact-modal.ts
new file mode 100644
index 0000000..c9fbc30
--- /dev/null
+++ b/src/hooks/use-contact-modal.ts
@@ -0,0 +1,27 @@
+import { useState, useEffect } from "react";
+
+const EVENT_NAME = "toggle-contact-modal";
+
+export function useContactModal() {
+  const [isOpen, setIsOpen] = useState(false);
+
+  useEffect(() => {
+    const handleToggle = (e: Event) => {
+      const customEvent = e as CustomEvent<{ isOpen: boolean }>;
+      setIsOpen(customEvent.detail.isOpen);
+    };
+
+    window.addEventListener(EVENT_NAME, handleToggle);
+    return () => window.removeEventListener(EVENT_NAME, handleToggle);
+  }, []);
+
+  const open = () => {
+    window.dispatchEvent(new CustomEvent(EVENT_NAME, { detail: { isOpen: true } }));
+  };
+
+  const close = () => {
+    window.dispatchEvent(new CustomEvent(EVENT_NAME, { detail: { isOpen: false } }));
+  };
+
+  return { isOpen, open, close };
+}
diff --git a/src/routes/__root.tsx b/src/routes/__root.tsx
index 2f08193..f66294b 100644
--- a/src/routes/__root.tsx
+++ b/src/routes/__root.tsx
@@ -72,10 +72,15 @@ function RootShell({ children }: { children: React.ReactNode }) {
   );
 }
 
+import { ContactModal } from "@/components/ContactModal";
+import { useContactModal } from "@/hooks/use-contact-modal";
+import { Toaster } from "sonner";
+
 function RootComponent() {
   const { queryClient } = Route.useRouteContext();
   // Show loader only once per browser session
   const [loaded, setLoaded] = useState(false);
+  const { isOpen, close } = useContactModal();
 
   const routerState = useRouterState();
   const currentPath = routerState.location.pathname;
@@ -105,6 +110,8 @@ function RootComponent() {
           <Outlet />
         </PageTransition>
       </motion.div>
+      <ContactModal isOpen={isOpen} onClose={close} />
+      <Toaster position="bottom-right" />
     </QueryClientProvider>
   );
 }
diff --git a/src/routes/index.tsx b/src/routes/index.tsx
index a9d6ed1..37ace96 100644
--- a/src/routes/index.tsx
+++ b/src/routes/index.tsx
@@ -2,7 +2,8 @@ import { createFileRoute, Link } from "@tanstack/react-router";
 import { motion, useScroll, useTransform, useMotionValue, useSpring, AnimatePresence } from "framer-motion";
 import { useRef, useState, useEffect } from "react";
 import { SiteHeader, SiteFooter } from "@/components/SiteHeader";
-import { Reveal, WordReveal, Marquee, Parallax, Magnetic, ScrambleText } from "@/components/Motion";
+import { Reveal, WordReveal, Marquee, Parallax, Magnetic, ScrambleText, Tilt } from "@/components/Motion";
+import { useContactModal } from "@/hooks/use-contact-modal";
 
 export const Route = createFileRoute("/")({
   head: () => ({
@@ -162,6 +163,7 @@ function Hero() {
 
 
 function Index() {
+  const { open } = useContactModal();
   return (
     <div className="grain min-h-screen bg-background">
       <SiteHeader />
@@ -203,11 +205,13 @@ function Index() {
             {projects.map((p, i) => (
               <Reveal key={p.name} delay={i * 0.1}>
                 <Link to="/projects/$slug" params={{ slug: p.slug }}>
-                  <motion.article
-                    whileHover={{ y: -6 }}
-                    transition={{ type: "spring", stiffness: 200, damping: 20 }}
-                    className="group relative flex h-full flex-col justify-between overflow-hidden rounded-2xl border border-border bg-card p-6 sm:p-8"
-                  >
+                  <Tilt intensity={10}>
+                    <motion.article
+                      whileHover={{ y: -6 }}
+                      transition={{ type: "spring", stiffness: 200, damping: 20 }}
+                      className="group relative flex h-full flex-col justify-between overflow-hidden rounded-2xl border border-border bg-card p-6 sm:p-8"
+                    >
+
                     <span className="absolute inset-0 -z-0 bg-gradient-to-br from-accent/0 via-accent/0 to-accent/10 opacity-0 transition-opacity duration-500 group-hover:opacity-100" />
                     <div className="relative">
                       <p className="text-[11px] font-semibold uppercase tracking-[0.25em] text-accent sm:text-xs">{p.tag}</p>
@@ -219,8 +223,9 @@ function Index() {
                       <motion.span className="font-semibold whitespace-nowrap" whileHover={{ x: 4 }}>View →</motion.span>
                     </div>
                   </motion.article>
-                </Link>
-              </Reveal>
+                </Tilt>
+              </Link>
+            </Reveal>
             ))}
           </div>
         </div>
@@ -270,24 +275,74 @@ function Index() {
         </div>
       </section>
 
-      {/* STACK */}
+      {/* STACK (Bento Grid) */}
       <section className="px-4 pt-24 sm:px-6 sm:pt-32">
         <div className="mx-auto max-w-7xl">
           <Reveal><p className="text-xs font-semibold tracking-[0.3em] text-muted-foreground">[ STACK ]</p></Reveal>
           <WordReveal text="Tools of trade." className="mt-4 font-display text-5xl sm:text-6xl md:text-8xl" />
-          <div className="mt-8 flex flex-wrap gap-2 sm:mt-10 sm:gap-3">
-            {stack.map((s, i) => (
-              <motion.span
-                key={s}
-                initial={{ opacity: 0, y: 10 }}
-                whileInView={{ opacity: 1, y: 0 }}
-                viewport={{ once: true }}
-                transition={{ delay: i * 0.02, duration: 0.4 }}
-                whileHover={{ scale: 1.08, backgroundColor: "var(--accent)", color: "var(--accent-foreground)" }}
-                className="cursor-default rounded-full border border-border bg-card px-3 py-1 text-xs sm:px-4 sm:py-1.5 sm:text-sm"
+          
+          <div className="mt-12 grid grid-cols-2 gap-3 sm:mt-16 sm:grid-cols-4 sm:gap-4 md:grid-cols-6 lg:grid-cols-12 lg:grid-rows-2">
+            {/* Featured: Go */}
+            <motion.div 
+              whileHover={{ scale: 1.02 }}
+              className="col-span-2 row-span-1 flex flex-col justify-between rounded-3xl border border-border bg-card p-6 sm:row-span-2 lg:col-span-4"
+            >
+              <div className="flex h-12 w-12 items-center justify-center rounded-2xl bg-accent/10 text-accent">
+                <span className="font-display text-2xl">Go</span>
+              </div>
+              <div>
+                <h4 className="font-display text-2xl sm:text-3xl">Go / Backend</h4>
+                <p className="mt-2 text-sm text-muted-foreground">Building high-performance, concurrent systems and APIs.</p>
+              </div>
+            </motion.div>
+
+            {/* Featured: React */}
+            <motion.div 
+              whileHover={{ scale: 1.02 }}
+              className="col-span-2 row-span-1 flex flex-col justify-between rounded-3xl border border-border bg-primary p-6 text-primary-foreground lg:col-span-5"
+            >
+              <h4 className="font-display text-3xl sm:text-4xl">React & TypeScript</h4>
+              <p className="mt-2 text-sm opacity-80">Type-safe, component-driven frontend architecture.</p>
+            </motion.div>
+
+            {/* AI/ML */}
+            <motion.div 
+              whileHover={{ scale: 1.02 }}
+              className="col-span-1 row-span-1 flex flex-col items-center justify-center rounded-3xl border border-border bg-card p-6 lg:col-span-3"
+            >
+              <span className="text-3xl">🤖</span>
+              <span className="mt-2 text-xs font-semibold tracking-widest opacity-60">AI / LLM</span>
+            </motion.div>
+
+            {/* Python */}
+            <motion.div 
+              whileHover={{ scale: 1.02 }}
+              className="col-span-1 row-span-1 flex flex-col items-center justify-center rounded-3xl border border-border bg-accent p-6 text-accent-foreground lg:col-span-3"
+            >
+              <span className="font-display text-2xl">PY</span>
+            </motion.div>
+
+            {/* Database */}
+            <motion.div 
+              whileHover={{ scale: 1.02 }}
+              className="col-span-2 row-span-1 flex items-center justify-between rounded-3xl border border-border bg-card p-6 lg:col-span-5"
+            >
+              <div>
+                <h4 className="font-display text-xl sm:text-2xl">Databases</h4>
+                <p className="text-xs text-muted-foreground">Postgres, MongoDB, Redis</p>
+              </div>
+              <span className="text-2xl">🗄️</span>
+            </motion.div>
+
+            {/* Others - mini cards */}
+            {["Node.js", "Django", "Supabase", "Git", "Docker"].map((item) => (
+              <motion.div
+                key={item}
+                whileHover={{ y: -4, backgroundColor: "var(--accent)", color: "var(--accent-foreground)" }}
+                className="col-span-1 flex items-center justify-center rounded-2xl border border-border bg-card p-4 text-xs font-medium transition-colors lg:col-span-2"
               >
-                {s}
-              </motion.span>
+                {item}
+              </motion.div>
             ))}
           </div>
         </div>
@@ -302,7 +357,7 @@ function Index() {
             <p className="relative text-xs font-semibold tracking-[0.3em] opacity-70">[ CONTACT ]</p>
             <h2 className="relative mt-4 font-display text-5xl sm:text-7xl md:text-9xl">Let's build<br />something<span className="text-accent">.</span></h2>
             <div className="relative mt-8 flex flex-wrap gap-3 sm:mt-10 sm:gap-4">
-              <Magnetic><a href="mailto:rohan@example.com" className="rounded-full bg-accent px-5 py-2.5 text-sm font-semibold text-accent-foreground sm:px-7 sm:py-3 sm:text-base">Email me</a></Magnetic>
+              <Magnetic><button onClick={open} className="rounded-full bg-accent px-5 py-2.5 text-sm font-semibold text-accent-foreground sm:px-7 sm:py-3 sm:text-base">Get in touch</button></Magnetic>
               <Magnetic><a href="https://linkedin.com" target="_blank" rel="noreferrer" className="rounded-full border border-primary-foreground/30 px-5 py-2.5 text-sm font-semibold transition-colors hover:bg-primary-foreground/10 sm:px-7 sm:py-3 sm:text-base">LinkedIn</a></Magnetic>
               <Magnetic><Link to="/blog" className="rounded-full border border-primary-foreground/30 px-5 py-2.5 text-sm font-semibold transition-colors hover:bg-primary-foreground/10 sm:px-7 sm:py-3 sm:text-base">Read the blog →</Link></Magnetic>
             </div>