[V0_FILE]typescriptreact:file="components/theme-toggle.tsx" isMerged="true" "use client" import { useState, useEffect } from "react" import { Button } from "@/components/ui/button" import { Moon, Sun } from "lucide-react" export function ThemeToggle() { const [theme, setTheme] = useState<"light" | "dark">("dark") useEffect(() => { const savedTheme = localStorage.getItem("theme") as "light" | "dark" | null if (savedTheme) { setTheme(savedTheme) document.documentElement.className = savedTheme } }, []) const toggleTheme = () => { const newTheme = theme === "light" ? "dark" : "light" setTheme(newTheme) document.documentElement.className = newTheme localStorage.setItem("theme", newTheme) } return ( ) } [V0_FILE]jpg:file="public/professional-headshot-of-a-designer.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/professional-headshot-of-a-designer-jJMRbMfU8T66H4bUcUsqxB6q73ydpq.jpg" isMerged="true" [V0_FILE]jpg:file="public/modern-design-system-interface-dashboard.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/modern-design-system-interface-dashboard-bfsyYwmHrrtCexf9MrcmeaadbW0HSN.jpg" isMerged="true" [V0_FILE]jpg:file="public/mobile-ecommerce-app-interface-with-ar-features.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/mobile-ecommerce-app-interface-with-ar-features-n9AgcfEmmKL8tkeq5TirKaCU9EF1K3.jpg" isMerged="true" [V0_FILE]png:file="public/healthcare-dashboard.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/healthcare-dashboard-jmzAJugtpCb1vugTKx4fUAH426UAFJ.png" isMerged="true" [V0_FILE]jpg:file="public/creative-portfolio-website-with-interactive-galler.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/creative-portfolio-website-with-interactive-galler-N4S4ZdYFMopvl6iD7NtaOlR2Vp1M44.jpg" isMerged="true" [V0_FILE]jpg:file="public/futuristic-design-system-interface.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/futuristic-design-system-interface-bLEemMqhqlDjrDhuRnxfAKQKwSiOkT.jpg" isMerged="true" [V0_FILE]jpg:file="public/accessibility-design-tools-and-interfaces.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/accessibility-design-tools-and-interfaces-6XMwGB5adkDhA1zzkh3NkiACpc1sQj.jpg" isMerged="true" [V0_FILE]jpg:file="public/web-components-code-editor-interface.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/web-components-code-editor-interface-5XVT57TKFepy0a7DuTCx6iUVDWiTe9.jpg" isMerged="true" [V0_FILE]json:file="package.json" isMerged="true" { "name": "my-v0-project", "version": "0.1.0", "private": true, "scripts": { "dev": "next dev", "build": "next build", "start": "next start", "lint": "eslint ." }, "dependencies": { "@hookform/resolvers": "^3.10.0", "@radix-ui/react-accordion": "1.2.2", "@radix-ui/react-alert-dialog": "1.1.4", "@radix-ui/react-aspect-ratio": "1.1.1", "@radix-ui/react-avatar": "1.1.2", "@radix-ui/react-checkbox": "1.1.3", "@radix-ui/react-collapsible": "1.1.2", "@radix-ui/react-context-menu": "2.2.4", "@radix-ui/react-dialog": "1.1.4", "@radix-ui/react-dropdown-menu": "2.1.4", "@radix-ui/react-hover-card": "1.1.4", "@radix-ui/react-label": "2.1.1", "@radix-ui/react-menubar": "1.1.4", "@radix-ui/react-navigation-menu": "1.2.3", "@radix-ui/react-popover": "1.1.4", "@radix-ui/react-progress": "1.1.1", "@radix-ui/react-radio-group": "1.2.2", "@radix-ui/react-scroll-area": "1.2.2", "@radix-ui/react-select": "2.1.4", "@radix-ui/react-separator": "1.1.1", "@radix-ui/react-slider": "1.2.2", "@radix-ui/react-slot": "1.1.1", "@radix-ui/react-switch": "1.1.2", "@radix-ui/react-tabs": "1.1.2", "@radix-ui/react-toast": "1.2.4", "@radix-ui/react-toggle": "1.1.1", "@radix-ui/react-toggle-group": "1.1.1", "@radix-ui/react-tooltip": "1.1.6", "@vercel/analytics": "1.3.1", "autoprefixer": "^10.4.20", "class-variance-authority": "^0.7.1", "clsx": "^2.1.1", "cmdk": "1.0.4", "date-fns": "4.1.0", "embla-carousel-react": "8.5.1", "input-otp": "1.4.1", "lucide-react": "^0.454.0", "next": "16.0.10", "next-themes": "^0.4.6", "react": "19.2.0", "react-day-picker": "9.8.0", "react-dom": "19.2.0", "react-hook-form": "^7.60.0", "react-resizable-panels": "^2.1.7", "recharts": "2.15.4", "sonner": "^1.7.4", "tailwind-merge": "^3.3.1", "tailwindcss-animate": "^1.0.7", "vaul": "^1.1.2", "zod": "3.25.76" }, "devDependencies": { "@tailwindcss/postcss": "^4.1.9", "@types/node": "^22", "@types/react": "^19", "@types/react-dom": "^19", "postcss": "^8.5", "tailwindcss": "^4.1.9", "tw-animate-css": "1.3.3", "typescript": "^5" } } [V0_FILE]jpg:file="public/professional-creative-designer-portrait-artistic-l.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/professional-creative-designer-portrait-artistic-l-dixXGNaOZ0GAXiUK0up1efjewKK4S0.jpg" isMerged="true" [V0_FILE]jpg:file="public/dark-abstract-nft-art-collection-cyberpunk-digital.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/dark-abstract-nft-art-collection-cyberpunk-digital-OFL6DedrNAjzKHDRo43BbltrW6UUmD.jpg" isMerged="true" [V0_FILE]jpg:file="public/mystical-nft-art-collection-ethereal-digital-art-m.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/mystical-nft-art-collection-ethereal-digital-art-m-8Q4RUbU45mRMaiO0CqPCsNsXHsnLLc.jpg" isMerged="true" [V0_FILE]jpg:file="public/futuristic-digital-art-portrait-nft-glitch-art-hum.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/futuristic-digital-art-portrait-nft-glitch-art-hum-KwF1DqN5P2BoU8B138hDshvDx8Cseb.jpg" isMerged="true" [V0_FILE]jpg:file="public/modern-web3-brand-identity-logo-design-minimal-fut.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/modern-web3-brand-identity-logo-design-minimal-fut-TzEb8JgGZCkvqkfcqSATMGoksDBpfI.jpg" isMerged="true" [V0_FILE]jpeg:file="public/nft-dolphin-monkey-1.jpeg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/77d77a84-0da4-40fe-9a66-518a0421df7f.jpeg" isMerged="true" [V0_FILE]jpeg:file="public/nft-dolphin-monkey-2.jpeg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/9118cec6-f8ad-40fd-b342-c214e43a5f7a.jpeg" isMerged="true" [V0_FILE]jpeg:file="public/nft-dolphin-monkey-3.jpeg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/4aecafd8-8115-47da-8581-d39f1e8dbb92.jpeg" isMerged="true" [V0_FILE]jpeg:file="public/nft-dolphin-monkey-4.jpeg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/177b6800-b87f-4ed1-b6b2-845475419caa.jpeg" isMerged="true" [V0_FILE]typescriptreact:file="app/about/page.tsx" isMerged="true" import { About } from "@/components/about" import { Navigation } from "@/components/navigation" import { ThemeToggle } from "@/components/theme-toggle" import { NftBanner } from "@/components/nft-banner" export default function AboutPage() { return (

) } [V0_FILE]typescriptreact:file="app/work/page.tsx" isMerged="true" import { Portfolio } from "@/components/portfolio" import { Navigation } from "@/components/navigation" import { ThemeToggle } from "@/components/theme-toggle" import { NftBanner } from "@/components/nft-banner" export default function WorkPage() { return (

) } [V0_FILE]typescriptreact:file="app/blog/page.tsx" isMerged="true" import { Blog } from "@/components/blog" import { Navigation } from "@/components/navigation" import { ThemeToggle } from "@/components/theme-toggle" import { NftBanner } from "@/components/nft-banner" export default function BlogPage() { return (

) } [V0_FILE]typescriptreact:file="app/contact/page.tsx" isMerged="true" import { Contact } from "@/components/contact" import { Navigation } from "@/components/navigation" import { ThemeToggle } from "@/components/theme-toggle" import { NftBanner } from "@/components/nft-banner" export default function ContactPage() { return (

) } [V0_FILE]jpeg:file="public/nft-abstract-sculpture.jpeg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/5358c33b-35d0-4ecd-8772-b2a8b3524d93.jpeg" isMerged="true" [V0_FILE]jpeg:file="public/nft-gorilla-glue.jpeg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/9d8a3154-8661-40a2-be7a-4f41b27df59d.jpeg" isMerged="true" [V0_FILE]jpeg:file="public/nft-fuodup.jpeg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/3a3d94e0-1aad-417d-a9de-6af177df3b4c.jpeg" isMerged="true" [V0_FILE]jpeg:file="public/nft-mandala-panda.jpeg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/1a0dfee8-f360-4ad9-9a92-a0e59ea1c751.jpeg" isMerged="true" [V0_FILE]jpeg:file="public/nft-lost-soul.jpeg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/b53dbf34-d0be-4843-bb1c-1d7bdf4769f1.jpeg" isMerged="true" [V0_FILE]jpeg:file="public/nft-mushroom.jpeg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/3e5b9d3d-c07b-469e-bf37-8a75163b0fea.jpeg" isMerged="true" [V0_FILE]jpeg:file="public/nft-red-abstract.jpeg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/0d4ca900-92ee-465d-b6af-9c9347c6e894.jpeg" isMerged="true" [V0_FILE]typescriptreact:file="components/nft-banner.tsx" isMerged="true" "use client" const nftCollection = [ { src: "/nft-abstract-sculpture.jpeg", alt: "Abstract 3D Sculpture" }, { src: "/nft-gorilla-glue.jpeg", alt: "Gorilla Glue" }, { src: "/nft-fuodup.jpeg", alt: "FUODUP Typography" }, { src: "/nft-mandala-panda.jpeg", alt: "Mandala Panda" }, { src: "/nft-lost-soul.jpeg", alt: "Lost Soul" }, { src: "/nft-mushroom.jpeg", alt: "Psychedelic Mushroom" }, { src: "/nft-red-abstract.jpeg", alt: "Red Abstract" }, ] export function NftBanner() { return (

{nftCollection.map((nft, index) => (

))}

) } [V0_FILE]jpeg:file="public/red-moon.jpeg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/3b70ef77-7f5c-49ef-8bbf-f82cbb65b12b.jpeg" isMerged="true" [V0_FILE]typescriptreact:file="app/layout.tsx" isMerged="true" import type React from "react" import type { Metadata, Viewport } from "next" import { Geist, Geist_Mono } from "next/font/google" import { Analytics } from "@vercel/analytics/next" import { EarthGlobe } from "@/components/earth-globe" import "./globals.css" const _geist = Geist({ subsets: ["latin"] }) const _geistMono = Geist_Mono({ subsets: ["latin"] }) export const metadata: Metadata = { title: "Jordan Haynes — NFT & Web3 Designer", description: "Creative designer specializing in NFT collections, Web3 experiences, and digital art. Featured work with Aanarch and NUNTii the original.", generator: "v0.app", icons: { icon: [ { url: "/icon-light-32x32.png", media: "(prefers-color-scheme: light)", }, { url: "/icon-dark-32x32.png", media: "(prefers-color-scheme: dark)", }, { url: "/icon.svg", type: "image/svg+xml", }, ], apple: "/apple-icon.png", }, } export const viewport: Viewport = { width: "device-width", initialScale: 1, maximumScale: 1, } export default function RootLayout({ children, }: Readonly<{ children: React.ReactNode }>) { return (

{children}

) } [V0_FILE]jpeg:file="public/jordan-haynes.jpeg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/94a2fb08-0e5e-495e-895a-f022ad9b6491.jpeg" isMerged="true" [V0_FILE]typescriptreact:file="components/about.tsx" isMerged="true" "use client" import { useEffect, useRef, useState } from "react" import { Card, CardContent } from "@/components/ui/card" import { Badge } from "@/components/ui/badge" const skills = [ "NFT Art Direction", "Web3 Branding", "Generative Art", "Motion Design", "Figma", "Adobe Creative Suite", "Blender", "After Effects", "Solidity Basics", "Community Building", "Token Design", "3D Modeling", ] const timeline = [ { year: "2023 — Present", role: "Lead Designer", company: "NUNTii the original", description: "Designing the visual identity and NFT collection art for this groundbreaking collective.", }, { year: "2022 — Present", role: "Creative Director", company: "Aanarch Collective", description: "Shaping the aesthetic vision and brand identity for one of Web3's most innovative collectives.", }, { year: "2021 — 2022", role: "NFT Artist & Designer", company: "Freelance", description: "Created custom NFT collections and Web3 branding for emerging projects and artists.", }, { year: "2019 — 2021", role: "Digital Designer", company: "Creative Agency", description: "Built brand identities and digital experiences for tech startups and cultural brands.", }, ] export function About() { const [isVisible, setIsVisible] = useState(false) const sectionRef = useRef(null) useEffect(() => { const observer = new IntersectionObserver( ([entry]) => { if (entry.isIntersecting) { setIsVisible(true) } }, { threshold: 0.1 }, ) if (sectionRef.current) { observer.observe(sectionRef.current) } return () => observer.disconnect() }, []) return (

About Me

{/* Personal story - Updated for Jordan */}

{/* Profile Photo */}

I'm Jordan Haynes, a designer deeply embedded in the Web3 and NFT space. My work sits at the intersection of digital art, community, and decentralized culture — creating visual experiences that resonate and endure.

Currently, I'm the Creative Director at Aanarch and Lead Designer at NUNTii the original, two collectives pushing the boundaries of what NFT art and Web3 culture can be.

I believe great design in Web3 isn't just about aesthetics — it's about building identity, fostering community, and creating work that collectors are proud to own and display.

{/* Skills */}

Skills & Expertise

{skills.map((skill) => ( {skill} ))}

{/* Timeline */}

Professional Journey

{timeline.map((item, index) => (

{item.year}

{item.role}

{item.company}

{item.description}

))}

) } [V0_FILE]typescriptreact:file="components/earth-globe.tsx" isMerged="true" "use client" import { useEffect, useRef } from "react" import { usePathname } from "next/navigation" export function EarthGlobe() { const canvasRef = useRef(null) const pathname = usePathname() const isHomePage = pathname === "/" useEffect(() => { if (isHomePage) { return } const canvas = canvasRef.current if (!canvas) return const ctx = canvas.getContext("2d") if (!ctx) return let animationId: number let rotation = 0 let huePhase = 0 const resize = () => { canvas.width = window.innerWidth canvas.height = window.innerHeight } // Simplified continent outlines (longitude, latitude pairs for each continent) const continents = { northAmerica: [ [-170, 65], [-168, 70], [-145, 70], [-130, 70], [-120, 75], [-85, 75], [-75, 80], [-60, 82], [-45, 75], [-55, 68], [-65, 60], [-75, 55], [-80, 50], [-85, 45], [-90, 30], [-95, 25], [-105, 20], [-115, 25], [-120, 35], [-125, 45], [-130, 55], [-145, 60], [-170, 65] ], southAmerica: [ [-80, 10], [-75, 5], [-70, 5], [-60, 5], [-50, 0], [-45, -5], [-40, -15], [-40, -25], [-45, -30], [-55, -40], [-65, -55], [-70, -50], [-75, -45], [-75, -35], [-70, -25], [-75, -15], [-80, -5], [-80, 10] ], europe: [ [-10, 35], [0, 40], [5, 45], [10, 50], [20, 55], [30, 60], [40, 65], [50, 70], [60, 70], [50, 55], [40, 50], [30, 45], [20, 40], [10, 35], [-10, 35] ], africa: [ [-15, 35], [10, 37], [30, 32], [40, 20], [50, 12], [45, 0], [40, -10], [35, -25], [25, -35], [15, -35], [10, -25], [5, -10], [10, 5], [0, 10], [-10, 15], [-20, 20], [-15, 35] ], asia: [ [30, 45], [40, 50], [60, 55], [80, 55], [100, 60], [120, 65], [140, 60], [150, 55], [160, 60], [170, 65], [180, 65], [170, 55], [150, 45], [140, 35], [130, 30], [120, 25], [110, 20], [100, 10], [90, 15], [80, 25], [70, 25], [60, 30], [50, 35], [40, 40], [30, 45] ], australia: [ [115, -20], [130, -15], [145, -15], [150, -25], [150, -35], [145, -40], [135, -35], [125, -35], [115, -30], [115, -20] ] } const latLngTo3D = (lat: number, lng: number, radius: number) => { const latRad = (lat * Math.PI) / 180 const lngRad = (lng * Math.PI) / 180 return { x: radius * Math.cos(latRad) * Math.cos(lngRad), y: radius * Math.sin(latRad), z: radius * Math.cos(latRad) * Math.sin(lngRad) } } const project = (x: number, y: number, z: number, centerX: number, centerY: number, rotationAngle: number) => { // Rotate around Y axis const cosR = Math.cos(rotationAngle) const sinR = Math.sin(rotationAngle) const rotatedX = x * cosR - z * sinR const rotatedZ = x * sinR + z * cosR return { x: centerX + rotatedX, y: centerY - y, z: rotatedZ } } const drawGlobe = () => { ctx.clearRect(0, 0, canvas.width, canvas.height) const centerX = canvas.width / 2 const centerY = canvas.height / 2 const radius = Math.min(canvas.width, canvas.height) * 0.35 // Calculate color transition from grey to red huePhase += 0.003 const colorTransition = (Math.sin(huePhase) + 1) / 2 // 0 to 1 // Interpolate between grey (128,128,128) and red (255,26,26) const r = Math.floor(128 + (255 - 128) * colorTransition) const g = Math.floor(128 + (26 - 128) * colorTransition) const b = Math.floor(128 + (26 - 128) * colorTransition) const mainColor = `rgba(${r}, ${g}, ${b}, 0.2)` const strokeColor = `rgba(${r}, ${g}, ${b}, 0.35)` const continentColor = `rgba(${r}, ${g}, ${b}, 0.45)` // Draw sphere outline ctx.strokeStyle = strokeColor ctx.lineWidth = 2.5 ctx.beginPath() ctx.arc(centerX, centerY, radius, 0, Math.PI * 2) ctx.stroke() // Draw latitude lines for (let lat = -60; lat <= 60; lat += 30) { ctx.strokeStyle = mainColor ctx.lineWidth = 1.5 ctx.beginPath() for (let lng = 0; lng <= 360; lng += 5) { const point3D = latLngTo3D(lat, lng, radius) const projected = project(point3D.x, point3D.y, point3D.z, centerX, centerY, rotation) if (projected.z > 0) { if (lng === 0) { ctx.moveTo(projected.x, projected.y) } else { ctx.lineTo(projected.x, projected.y) } } else { ctx.moveTo(projected.x, projected.y) } } ctx.stroke() } // Draw longitude lines for (let lng = 0; lng < 360; lng += 30) { ctx.strokeStyle = mainColor ctx.lineWidth = 1.5 ctx.beginPath() let started = false for (let lat = -90; lat <= 90; lat += 5) { const point3D = latLngTo3D(lat, lng, radius) const projected = project(point3D.x, point3D.y, point3D.z, centerX, centerY, rotation) if (projected.z > 0) { if (!started) { ctx.moveTo(projected.x, projected.y) started = true } else { ctx.lineTo(projected.x, projected.y) } } else { started = false } } ctx.stroke() } // Draw continents Object.values(continents).forEach((continent) => { ctx.strokeStyle = continentColor ctx.lineWidth = 3 ctx.beginPath() let started = false let lastVisible = false continent.forEach(([lng, lat], index) => { const point3D = latLngTo3D(lat, lng, radius) const projected = project(point3D.x, point3D.y, point3D.z, centerX, centerY, rotation) const isVisible = projected.z > 0 if (isVisible) { if (!started || !lastVisible) { ctx.moveTo(projected.x, projected.y) started = true } else { ctx.lineTo(projected.x, projected.y) } } lastVisible = isVisible }) ctx.stroke() }) rotation += 0.003 animationId = requestAnimationFrame(drawGlobe) } resize() window.addEventListener("resize", resize) drawGlobe() return () => { window.removeEventListener("resize", resize) cancelAnimationFrame(animationId) } }, [isHomePage]) if (isHomePage) { return null } return (

About Me

Skills & Expertise

Professional Journey

{item.role}

Selected Work

{project.title}

Let's Work Together

Get In Touch