diff --git a/app/contact/contact-link.css b/app/contact/contact-link.css
new file mode 100644
index 0000000..cbf0865
--- /dev/null
+++ b/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;
+}
diff --git a/app/contact/contact-link.tsx b/app/contact/contact-link.tsx
new file mode 100644
index 0000000..00c870f
--- /dev/null
+++ b/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>
+  )
+}
diff --git a/app/contact/page.tsx b/app/contact/page.tsx
new file mode 100644
index 0000000..0574582
--- /dev/null
+++ b/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>
+  )
+}
diff --git a/components/layout/mobile-menu.tsx b/components/layout/mobile-menu.tsx
index 691746b..e4a98be 100644
--- a/components/layout/mobile-menu.tsx
+++ b/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" />
diff --git a/components/layout/page-transition.tsx b/components/layout/page-transition.tsx
index 6ebc2c6..8dc498c 100644
--- a/components/layout/page-transition.tsx
+++ b/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)
diff --git a/components/layout/top-nav.tsx b/components/layout/top-nav.tsx
index 46db264..054cefa 100644
--- a/components/layout/top-nav.tsx
+++ b/components/layout/top-nav.tsx
@@ -17,6 +17,7 @@ const navItems = [
   { title: "projects", href: "/projects" },
   { title: "blogs", href: "/blogs" },
   { title: "quotes", href: "/quotes" },
+  { title: "contact", href: "/contact" },
 ]
 
 export function TopNav() {
@@ -71,7 +72,7 @@ export function TopNav() {
           <div className="flex h-14 items-center justify-center">
             {/* Desktop Navigation */}
             <TooltipProvider delayDuration={300}>
-              <div ref={navContainerRef} className="relative hidden md:flex items-center gap-1">
+              <div ref={navContainerRef} className="relative hidden lg:flex items-center gap-1">
                 <motion.span
                   className="absolute top-0 bottom-0 bg-accent/10 rounded-md"
                   animate={indicator}
@@ -102,7 +103,7 @@ export function TopNav() {
             </TooltipProvider>
 
             {/* Mobile Header */}
-            <div className="flex md:hidden items-center justify-end w-full">
+            <div className="flex lg:hidden items-center justify-end w-full">
               <div className="flex items-center gap-2 -mr-2">
                 {/* Mobile Theme toggle */}
                 <ThemeToggle iconSize="md" align="end" />