Add circular reveal animation for theme transitions

app/contact/contact-link.css

@@ -0,0 +1,17 @@
+@keyframes blink {
+  0%, 49% {
+    opacity: 1;
+  }
+  50%, 100% {
+    opacity: 0;
+  }
+}
+
+.cursor-block {
+  display: inline-block;
+  width: 0.6em;
+  height: 0.9em;
+  margin-left: 0.1em;
+  background-color: currentColor;
+  animation: blink 1s infinite;
+}

app/contact/contact-link.tsx

@@ -0,0 +1,128 @@
+"use client"
+
+import { useState, useEffect, useRef } from "react"
+import Link from "next/link"
+import { motion, AnimatePresence } from "framer-motion"
+import "./contact-link.css"
+
+function generateRandomKeyframes(): string {
+  const numSteps = Math.floor(Math.random() * 15) + 15
+  const increments = Array.from({ length: numSteps }, () => Math.random() * 4 + 1)
+  const total = increments.reduce((a, b) => a + b, 0)
+  const normalized = increments.map(inc => (inc / total) * 100)
+
+  let keyframes = "0% { width: 0; }"
+  let currentWidth = 0
+  normalized.forEach((increment, index) => {
+    currentWidth += increment
+    const keyframePercent = ((index + 1) / numSteps) * 100
+    keyframes += ` ${keyframePercent.toFixed(1)}% { width: ${currentWidth.toFixed(1)}%; }`
+  })
+
+  return keyframes
+}
+
+interface ContactLinkProps {
+  url: string
+  display: string
+  easterEgg?: string
+}
+
+export function ContactLink({ url, display, easterEgg }: ContactLinkProps) {
+  const [isHovered, setIsHovered] = useState(false)
+  const styleRef = useRef<HTMLStyleElement | null>(null)
+  const animationIdRef = useRef<string>("")
+
+  useEffect(() => {
+    if (isHovered && easterEgg) {
+      const animationId = `typing-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`
+      animationIdRef.current = animationId
+
+      const keyframes = generateRandomKeyframes()
+      const css = `@keyframes ${animationId} { ${keyframes} }`
+
+      // Remove old style element if it exists
+      if (styleRef.current) {
+        styleRef.current.remove()
+      }
+
+      // Create new style element each time
+      styleRef.current = document.createElement("style")
+      styleRef.current.textContent = css
+      document.head.appendChild(styleRef.current)
+    }
+
+    return () => {
+      // Cleanup on unmount
+      if (styleRef.current) {
+        styleRef.current.remove()
+        styleRef.current = null
+      }
+    }
+  }, [isHovered, easterEgg])
+
+  return (
+    <div
+      onMouseEnter={() => setIsHovered(true)}
+      onMouseLeave={() => setIsHovered(false)}
+    >
+      <div className="flex items-center gap-2">
+        <span className="text-accent/60">$</span>
+        <Link
+          href={url}
+          target="_blank"
+          rel="noopener noreferrer"
+          className="group text-muted-foreground hover:text-accent transition-colors"
+        >
+          <span className="text-accent/70 group-hover:text-accent">open</span>
+          <span className="ml-2 group-hover:underline">{display}</span>
+        </Link>
+      </div>
+      <AnimatePresence>
+        {isHovered && easterEgg && (
+          <motion.div
+            initial={{ opacity: 0, height: 0 }}
+            animate={{ opacity: 1, height: "auto" }}
+            exit={{ opacity: 0, height: 0 }}
+            transition={{ duration: 0.2 }}
+            className="overflow-hidden"
+          >
+            <Link
+              href={url}
+              target="_blank"
+              rel="noopener noreferrer"
+              className="flex items-center gap-2 py-1 text-muted-foreground/70 text-xs font-mono"
+            >
+              <span>#</span>
+              <span className="flex items-center">
+                <motion.span
+                  initial={{ width: 0 }}
+                  animate={{ width: "auto" }}
+                  transition={{
+                    duration: 0.6,
+                    ease: "linear",
+                  }}
+                  className="inline-block overflow-hidden whitespace-nowrap"
+                  style={{
+                    animation: isHovered && easterEgg ? `${animationIdRef.current} 0.6s linear forwards` : "none",
+                  }}
+                >
+                  {easterEgg}
+                </motion.span>
+                <motion.span
+                  initial={{ opacity: 0 }}
+                  animate={{ opacity: 1 }}
+                  transition={{
+                    duration: 0.1,
+                    delay: 0.1,
+                  }}
+                  className="cursor-block"
+                />
+              </span>
+            </Link>
+          </motion.div>
+        )}
+      </AnimatePresence>
+    </div>
+  )
+}

app/contact/page.tsx

@@ -0,0 +1,54 @@
+"use client"
+
+import { PageTitle } from "@/components/layout/page-title"
+import { ContactLink } from "./contact-link"
+
+const contactLinks = [
+  {
+    url: "mailto:jakebodea@gmail.com",
+    display: "jakebodea@gmail.com",
+    easterEgg: "no spam pls"
+  },
+  {
+    url: "https://x.com/jakebodea",
+    display: "x.com/jakebodea"
+  },
+  {
+    url: "https://www.linkedin.com/in/jakebodea/",
+    display: "linkedin.com/in/jakebodea",
+    easterEgg: "unfortunately i still need this platform"
+  },
+  {
+    url: "https://github.com/jakebodea",
+    display: "github.com/jakebodea",
+    easterEgg: "don't DM me here but check out my commit history map"
+  }
+]
+
+export default function ContactPage() {
+
+  return (
+    <div className="min-h-[calc(100vh-3.5rem)] flex items-center">
+      <div className="container max-w-2xl mx-auto px-6 py-12">
+        <PageTitle>contact</PageTitle>
+
+        <p className="text-lg md:text-xl text-muted-foreground leading-relaxed mb-12">
+          i&apos;m always interested in connecting. here&apos;s where you can find me:
+        </p>
+
+        <div className="rounded-lg border border-accent/10 bg-muted/20 p-4 font-mono text-sm">
+          <div className="space-y-2">
+            {contactLinks.map((link) => (
+              <ContactLink
+                key={link.url}
+                url={link.url}
+                display={link.display}
+                easterEgg={link.easterEgg}
+              />
+            ))}
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}

app/globals.css

@@ -301,6 +301,33 @@
   }
 }
 
+/* Theme transition - circular reveal from toggle button */
+@property --reveal-size {
+  syntax: "<length>";
+  initial-value: 0px;
+  inherits: false;
+}
+
+::view-transition-old(root),
+::view-transition-new(root) {
+  animation: none;
+  mix-blend-mode: normal;
+}
+
+::view-transition-old(root) {
+  z-index: 1;
+}
+
+::view-transition-new(root) {
+  z-index: 9999;
+  mask: radial-gradient(
+    circle at var(--reveal-x, 50%) var(--reveal-y, 50%),
+    black 0,
+    black calc(var(--reveal-size) - 160px),
+    transparent var(--reveal-size)
+  );
+}
+
 @layer base {
   * {
     @apply border-border;

app/layout.tsx

@@ -79,7 +79,6 @@ export default function RootLayout({
           attribute="class"
           defaultTheme="dark"
           enableSystem
-          disableTransitionOnChange
         >
           <NavigationProvider>
             {process.env.VERCEL_GIT_COMMIT_REF === "dev" && (

components/layout/mobile-menu.tsx

@@ -60,7 +60,7 @@ export function MobileMenu({ navItems, isOpen, onClose }: MobileMenuProps) {
           initial={{ opacity: 0 }}
           animate={{ opacity: 1, transition: { duration: 0.15 } }}
           exit={{ opacity: 0, transition: { duration: 0.1, delay: 0.1 } }}
-          className="fixed inset-0 z-[70] bg-background md:hidden"
+          className="fixed inset-0 z-[70] bg-background lg:hidden"
         >
           {/* Spacer for nav header */}
           <div className="h-14" />

components/layout/page-transition.tsx

@@ -14,7 +14,7 @@ function useIsMobile() {
   const [isMobile, setIsMobile] = useState(false)
 
   useEffect(() => {
-    const check = () => setIsMobile(window.innerWidth < 768)
+    const check = () => setIsMobile(window.innerWidth < 1024)
     check()
     window.addEventListener("resize", check)
     return () => window.removeEventListener("resize", check)

components/layout/theme-toggle.tsx

@@ -1,6 +1,7 @@
 "use client"
 
-import { useState, useEffect, useRef } from "react"
+import { useState, useEffect, useRef, useCallback } from "react"
+import { flushSync } from "react-dom"
 import { useTheme } from "next-themes"
 import { AnimatePresence, motion } from "framer-motion"
 import { Moon, Sun, Monitor } from "lucide-react"
@@ -46,26 +47,96 @@ export function ThemeToggle({
   const [open, setOpen] = useState(false)
   const [mounted, setMounted] = useState(false)
   const leaveTimer = useRef<ReturnType<typeof setTimeout> | null>(null)
+  const triggerRef = useRef<HTMLButtonElement>(null)
+  const triggerRectRef = useRef<DOMRect | null>(null)
+
+  // Capture button position on pointer down, before dropdown interaction moves things
+  const capturePosition = useCallback(() => {
+    if (triggerRef.current) {
+      triggerRectRef.current = triggerRef.current.getBoundingClientRect()
+    }
+  }, [])
+
+  const setThemeWithTransition = useCallback(
+    (newTheme: string) => {
+      const supportsViewTransition =
+        typeof document !== "undefined" &&
+        "startViewTransition" in document
+
+      if (!supportsViewTransition) {
+        setTheme(newTheme)
+        return
+      }
+
+      // Use captured position, fall back to live measurement
+      const rect =
+        triggerRectRef.current ??
+        triggerRef.current?.getBoundingClientRect()
+
+      if (!rect || (rect.x === 0 && rect.y === 0 && rect.width === 0)) {
+        setTheme(newTheme)
+        return
+      }
+
+      const x = rect.left + rect.width / 2
+      const y = rect.top + rect.height / 2
+      const endRadius = Math.hypot(
+        Math.max(x, window.innerWidth - x),
+        Math.max(y, window.innerHeight - y),
+      )
+
+      // Set the circle origin for the CSS mask
+      const root = document.documentElement
+      root.style.setProperty("--reveal-x", `${x}px`)
+      root.style.setProperty("--reveal-y", `${y}px`)
+
+      const transition = (document as any).startViewTransition(() => {
+        flushSync(() => {
+          setTheme(newTheme)
+        })
+      })
+
+      transition.ready
+        .then(() => {
+          root.animate(
+            { "--reveal-size": [`0px`, `${endRadius + 80}px`] },
+            {
+              duration: 350,
+              easing: "ease-out",
+              fill: "forwards",
+              pseudoElement: "::view-transition-new(root)",
+            },
+          )
+        })
+        .catch(() => {})
+
+      // Clear captured position after use
+      triggerRectRef.current = null
+    },
+    [setTheme],
+  )
 
   useEffect(() => {
     setMounted(true)
   }, [])
 
-  // 't' keyboard shortcut for quick toggle
+  // 't' keyboard shortcut for quick toggle (only one instance registers)
   useEffect(() => {
+    if (!shortcut) return
+
     const handleKeyDown = (e: KeyboardEvent) => {
       const target = e.target as HTMLElement
       if (target.tagName === "INPUT" || target.tagName === "TEXTAREA") return
 
       if (e.key === "t") {
-        setTheme(resolvedTheme === "dark" ? "light" : "dark")
+        setThemeWithTransition(resolvedTheme === "dark" ? "light" : "dark")
         setOpen(false)
       }
     }
 
     window.addEventListener("keydown", handleKeyDown)
     return () => window.removeEventListener("keydown", handleKeyDown)
-  }, [resolvedTheme, setTheme])
+  }, [shortcut, resolvedTheme, setThemeWithTransition])
 
   // Cleanup leave timer on unmount
   useEffect(() => {
@@ -91,9 +162,14 @@ export function ThemeToggle({
   const trigger = (
     <DropdownMenuTrigger asChild>
       <button
+        ref={triggerRef}
         className="p-2 text-muted-foreground hover:text-foreground transition-colors rounded-md"
         aria-label="Toggle theme"
-        onPointerEnter={handlePointerEnter}
+        onPointerDown={capturePosition}
+        onPointerEnter={(e) => {
+          capturePosition()
+          handlePointerEnter(e)
+        }}
         onPointerLeave={handlePointerLeave}
       >
         <AnimatePresence mode="wait">
@@ -132,7 +208,7 @@ export function ThemeToggle({
           return (
             <DropdownMenuItem
               key={option.value}
-              onSelect={() => setTheme(option.value)}
+              onSelect={() => setThemeWithTransition(option.value)}
               className={
                 isActive
                   ? "text-accent focus:text-accent bg-accent/10 focus:bg-accent/10"