[V0_FILE]typescriptreact:file="components/footer.tsx" isQuickEdit="true" import Link from "next/link" export default function Footer() { const currentYear = new Date().getFullYear() return ( ) } [V0_FILE]typescriptreact:file="app/about/page.tsx" import Header from "@/components/header" import Link from "next/link" import { ArrowRight } from "lucide-react" import Footer from "@/components/footer" import { Button } from "@/components/ui/button" import { FadeIn } from "@/components/fade-in" export default function About() { return (

About me

In 2018, I joined medtech startup Immertec as the second hire to lead all design efforts, increasing usability by 15 points on the SUS scale, from 68 to 83, and helping the company scale to over 50 employees while securing $12M in funding.

After Immertec, I joined FCB Health NY and designed healthcare products for Fortune 100 companies used by over 5M users. Later, at Spontivly, I led design initiatives for a platform that democratized data dashboards and supported over 120 API integrations. In 2023, I joined Corellium, where I led the redesign of their virtualization platform, focusing on scalability, mobile optimization, and accessibility.

I also founded Paidly in 2020, a Stripe-integrated invoicing app used by over 2,000 SMEs, and Magier in 2023, an AI startup acquired the same year and accepted into Techstars' 2024 cohort. I've also published research on accessibility and virtual environments in publications by HFES and SSH. When not designing, I'm probably playing music.

) } [V0_FILE]typescriptreact:file="app/contact/page.tsx" "use client" import { useState } from "react" import type React from "react" import { Send, CheckCircle } from "lucide-react" import Header from "@/components/header" import Footer from "@/components/footer" import { Button } from "@/components/ui/button" import { Checkbox } from "@/components/ui/checkbox" import { FadeIn } from "@/components/fade-in" export default function Contact() { const [isConsented, setIsConsented] = useState(false) const [isSubmitted, setIsSubmitted] = useState(false) const handleSubmit = (e: React.FormEvent) => { e.preventDefault() if (!isConsented) { return } // Get form data const formData = new FormData(e.currentTarget) // Submit the form programmatically to the email const form = e.currentTarget form.action = `mailto:brendan@fourpixels.xyz?subject=Contact Form Submission&body=${encodeURIComponent( `Name: ${formData.get("firstName")} ${formData.get("lastName")} Email: ${formData.get("email")} Company: ${formData.get("company") || "Not provided"} Message: ${formData.get("message")}`, )}` // Show thank you state setIsSubmitted(true) // Submit the form form.submit() } return (

{isSubmitted ? (

Thank you for your message!

I appreciate you reaching out and will get back to you as soon as possible.

) : ( <>

Let's go to market

Ready to take your product from 0 → 1 or looking to expand your team? Reach out below.

First name

Last name

Company

Message

</div>

<div className="flex items-start sm:items-center gap-2 pt-1 sm:pt-2">
                      <Checkbox
                        id="consent"
                        checked={isConsented}
                        onCheckedChange={(checked) => setIsConsented(checked === true)}
                        required
                        className="mt-0.5 sm:mt-0"
                      />
                      <label
                        htmlFor="consent"
                        className="text-[13px] sm:text-[14px] text-muted-foreground cursor-pointer"
                        onClick={() => setIsConsented(!isConsented)}
                      >
                        I accept this information will be used to contact me.
                      </label>
                    </div>

<Button
                      type="submit"
                      className="w-full"
                      disabled={!isConsented}
                      size="sm"
                      className="w-full h-9 sm:h-10 mt-2"
                    >
                      <Send className="mr-2 h-4 w-4" /> Send message
                    </Button>
                  </form>
                </>
              )}
            </div>
          </FadeIn>
        </div>

<Footer />
      </div>
    </div>
  )
}

[V0_FILE]typescriptreact:file="app/not-found.tsx" isQuickEdit="true"
import Header from "@/components/header"
import Link from "next/link"
import Footer from "@/components/footer"
import { Button } from "@/components/ui/button"
import { FadeIn } from "@/components/fade-in"

export default function NotFound() {
  return (
    <div className="min-h-screen bg-background text-foreground flex flex-col">
      <Header />
      <div className="max-w-[1024px] mx-auto px-4 py-6 sm:py-8 w-full">
        <div className="flex-1 flex items-center justify-center my-12 sm:my-24">
          <FadeIn delay={0} duration={350}>
            <div className="w-full border border-border rounded-xl p-6 sm:p-8">
              <div className="text-center">
                <FadeIn delay={50} duration={350}>
                  <h1 className="text-xl sm:text-[24px] font-semibold mb-1 sm:mb-2">Page not found</h1>
                </FadeIn>
                <FadeIn delay={75} duration={350}>
                  <p className="text-sm sm:text-base text-muted-foreground mb-6 sm:mb-8">
                    The page you're looking for could not be found.
                  </p>
                </FadeIn>
                <FadeIn delay={100} duration={350}>
                  <Button asChild size="sm" className="sm:size-default w-full">
                    <Link href="/">Go home</Link>
                  </Button>
                </FadeIn>
              </div>
            </div>
          </FadeIn>
        </div>

<Footer />
      </div>
    </div>
  )
}

[V0_FILE]typescriptreact:file="app/components/header.tsx" isQuickEdit="true"
"use client"

import { useTheme } from "next-themes"
import { Moon, Sun } from "lucide-react"
import Image from "next/image"
import Link from "next/link"
import { usePathname } from "next/navigation"
import { useEffect, useState } from "react"

export default function Header() {
  const { theme, setTheme } = useTheme()
  const pathname = usePathname()
  const [mounted, setMounted] = useState(false)

useEffect(() => {
    setMounted(true)
  }, [])

return (
    <header className="bg-white dark:bg-zinc-900">
      <div className="container mx-auto px-4 py-4 flex items-center justify-between">
        <div className="flex items-center">
          <Image
            src="/placeholder.svg?height=40&width=40"
            alt="Brendan Ciccone"
            width={40}
            height={40}
            className="rounded-full"
          />
          <span className="ml-2 font-medium">Brendan Ciccone</span>
        </div>

<nav>
          <ul className="flex space-x-4">
            <li>
              <Link href="/" className={`text-sm ${pathname === "/" ? "font-medium" : ""}`}>
                Work
              </Link>
            </li>
            <li>
              <Link href="/about" className={`text-sm ${pathname === "/about" ? "font-medium" : ""}`}>
                About
              </Link>
            </li>
            <li>
              <Link href="/contact" className={`text-sm ${pathname === "/contact" ? "font-medium" : ""}`}>
                Contact
              </Link>
            </li>
          </ul>
        </nav>

<div className="flex items-center">
          {mounted && (
            <button
              onClick={() => setTheme(theme === "dark" ? "light" : "dark")}
              className="p-2"
              aria-label="Toggle dark mode"
            >
              {theme === "dark" ? <Moon size={20} /> : <Sun size={20} />}
            </button>
          )}
          <Link
            href="/contact"
            className="bg-primary text-primary-foreground hover:bg-primary/90 ml-4 px-4 py-2 text-sm"
          >
            Let's chat
          </Link>
        </div>
      </div>
    </header>
  )
}

[V0_FILE]typescript:file="components/theme-provider.tsx"
"use client"
import { ThemeProvider as NextThemesProvider } from "next-themes"
import type { ThemeProviderProps } from "next-themes"

export function ThemeProvider({ children, ...props }: ThemeProviderProps) {
  return <NextThemesProvider {...props}>{children}</NextThemesProvider>
}

[V0_FILE]typescriptreact:file="components/ui/toggle.tsx"
"use client"

import * as React from "react"
import * as TogglePrimitive from "@radix-ui/react-toggle"
import { cva, type VariantProps } from "class-variance-authority"

import { cn } from "@/lib/utils"

const toggleVariants = cva(
  "inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-background transition-colors hover:bg-muted hover:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground",
  {
    variants: {
      variant: {
        default: "bg-transparent",
        outline: "border border-input bg-transparent hover:bg-accent hover:text-accent-foreground",
      },
      size: {
        default: "h-10 px-3",
        sm: "h-9 px-2.5",
        lg: "h-11 px-5",
        icon: "h-10 w-10",
      },
    },
    defaultVariants: {
      variant: "default",
      size: "default",
    },
  },
)

const Toggle = React.forwardRef<
  React.ElementRef<typeof TogglePrimitive.Root>,
  React.ComponentPropsWithoutRef<typeof TogglePrimitive.Root> & VariantProps<typeof toggleVariants>
>(({ className, variant, size, ...props }, ref) => (
  <TogglePrimitive.Root ref={ref} className={cn(toggleVariants({ variant, size, className }))} {...props} />
))

Toggle.displayName = TogglePrimitive.Root.displayName

export { Toggle, toggleVariants }

[V0_FILE]typescriptreact:file="components/theme-switcher.tsx" isQuickEdit="true"
"use client"
import { Moon, Sun } from "lucide-react"
import { useTheme } from "next-themes"
import { Button } from "@/components/ui/button"

export function ThemeSwitcher() {
  const { theme, setTheme } = useTheme()

return (
    <Button
      variant="ghost"
      size="icon"
      onClick={() => setTheme(theme === "dark" ? "light" : "dark")}
      aria-label="Toggle theme"
    >
      {theme === "dark" ? <Sun className="h-6 w-6" /> : <Moon className="h-6 w-6" />}
    </Button>
  )
}

[V0_FILE]typescriptreact:file="components/scroll-to-top.tsx" isFixed="true" isQuickEdit="true"
"use client"

import { useEffect } from "react"
import { usePathname } from "next/navigation"

export default function ScrollToTop() {
  const pathname = usePathname()

// This effect will run whenever the pathname changes
  useEffect(() => {
    // Scroll to top on page navigation
    window.scrollTo({
      top: 0,
      left: 0,
      behavior: "instant", // Use "instant" instead of "smooth" to avoid visual issues during navigation
    })
  }, [pathname]) // Dependency on pathname ensures this runs on every route change

return null
}

[V0_FILE]typescriptreact:file="app/opengraph-image.tsx" isQuickEdit="true"
import { ImageResponse } from "next/og"

// Route segment config
export const runtime = "edge"

// Image metadata
export const alt = "Brendan Ciccone - 0 → 1 Senior Product Designer"
export const size = {
  width: 1200,
  height: 630,
}

export const contentType = "image/png"

// Image generation
export default async function Image() {
  try {
    // Use the provided image URL
    const imageUrl =
      "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/image.jpg-d0SidsvzAZGPwLQFoyhGS1atLlTVa3.jpeg"

// Fetch the image
    const imageResponse = await fetch(imageUrl, { cache: "force-cache" })

if (!imageResponse.ok) {
      throw new Error(`Failed to fetch image: ${imageResponse.status}`)
    }

const imageData = await imageResponse.arrayBuffer()

return new ImageResponse(
      <div
        style={{
          width: "100%",
          height: "100%",
          display: "flex",
          alignItems: "center",
          justifyContent: "center",
          background: "white",
        }}
      >
        <img
          src={`data:image/jpeg;base64,${Buffer.from(imageData).toString("base64")}`}
          alt="Brendan Ciccone - 0 → 1 Senior Product Designer"
          style={{
            width: "100%",
            height: "100%",
            objectFit: "cover",
          }}
        />
      </div>,
      {
        ...size,
      },
    )
  } catch (error) {
    console.error("Error generating OpenGraph image:", error)

// Fallback to a simple text-based image if the image fetch fails
    return new ImageResponse(
      <div
        style={{
          fontSize: 32,
          background: "hsl(var(--background))",
          width: "100%",
          height: "100%",
          display: "flex",
          flexDirection: "column",
          alignItems: "center",
          justifyContent: "center",
          padding: 40,
          color: "hsl(var(--foreground))",
        }}
      >
        <div style={{ fontSize: 48, fontWeight: "bold", marginBottom: 20 }}>Brendan Ciccone</div>
        <div style={{ textAlign: "center", maxWidth: "80%" }}>
          0 → 1 Senior Product Designer with 7 years of experience turning ideas into fully realized B2B and B2C
          products
        </div>
      </div>,
      {
        ...size,
      },
    )
  }
}

[V0_FILE]typescriptreact:file="app/layout.tsx" isQuickEdit="true"
import { Inter } from "next/font/google"
import type React from "react"
import type { Metadata } from "next"
import "./globals.css"
import { ThemeProvider } from "@/components/theme-provider"
import ScrollToTop from "@/components/scroll-to-top"
import { Analytics } from "@vercel/analytics/react"

// Load Inter font
const inter = Inter({
  subsets: ["latin"],
  weight: ["400", "500", "600", "700"],
  display: "swap",
  variable: "--font-inter",
})

export const metadata: Metadata = {
  title: "Brendan Ciccone - 0 → 1 Senior Product Designer",
  description:
    "Brendan Ciccone is a 0 → 1 Senior Product Designer with 7 years of experience turning ideas into fully realized B2B and B2C products across healthcare, cybersecurity, and finance.",
  icons: {
    icon: "/icon.png",
    shortcut: "/favicon.ico",
    apple: "/apple-icon.png",
  },
  openGraph: {
    title: "Brendan Ciccone - 0 → 1 Senior Product Designer",
    description:
      "Brendan Ciccone is a 0 → 1 Senior Product Designer with 7 years of experience turning ideas into fully realized B2B and B2C products across healthcare, cybersecurity, and finance.",
    url: "https://brendanciccone.com",
    siteName: "Brendan Ciccone",
    images: [
      {
        url: "/opengraph-image.png", // This will use the image we're now generating
        width: 1200,
        height: 630,
        alt: "Brendan Ciccone - 0 → 1 Senior Product Designer",
      },
    ],
    locale: "en_US",
    type: "website",
  },
  twitter: {
    card: "summary_large_image",
    title: "Brendan Ciccone - 0 → 1 Senior Product Designer",
    description:
      "Brendan Ciccone is a 0 → 1 Senior Product Designer with 7 years of experience turning ideas into fully realized B2B and B2C products across healthcare, cybersecurity, and finance.",
    images: ["/opengraph-image.png"],
  },
}

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode
}>) {
  return (
    <html lang="en" suppressHydrationWarning className={inter.className}>
      <body>
        <ThemeProvider attribute="class" defaultTheme="system" enableSystem>
          <ScrollToTop />
          {children}
          <Analytics />
        </ThemeProvider>
      </body>
    </html>
  )
}

[V0_FILE]typescriptreact:file="app/globals.css" isFixed="true" isQuickEdit="true"
@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  :root {
    --background: 0 0% 100%;
    --foreground: 240 10% 3.9%;
    --card: 0 0% 100%;
    --card-foreground: 240 10% 3.9%;
    --popover: 0 0% 100%;
    --popover-foreground: 240 10% 3.9%;
    --primary: 240 5.9% 10%;
    --primary-foreground: 0 0% 98%;
    --secondary: 240 4.8% 95.9%;
    --secondary-foreground: 240 5.9% 10%;
    --muted: 240 4.8% 95.9%;
    --muted-foreground: 240 3.8% 46.1%;
    --accent: 240 4.8% 95.9%;
    --accent-foreground: 240 5.9% 10%;
    --destructive: 0 84.2% 60.2%;
    --destructive-foreground: 0 0% 98%;
    --border: 240 5.9% 90%;
    --input: 240 5.9% 90%;
    --ring: 240 5.9% 10%;
    --radius: 0.5rem;
  }

.dark {
    --background: 240 10% 3.9%;
    --foreground: 0 0% 98%;
    --card: 240 10% 3.9%;
    --card-foreground: 0 0% 98%;
    --popover: 240 10% 3.9%;
    --popover-foreground: 0 0% 98%;
    --primary: 0 0% 98%;
    --primary-foreground: 240 5.9% 10%;
    --secondary: 240 3.7% 15.9%;
    --secondary-foreground: 0 0% 98%;
    --muted: 240 3.7% 15.9%;
    --muted-foreground: 240 5% 64.9%;
    --accent: 240 3.7% 15.9%;
    --accent-foreground: 0 0% 98%;
    --destructive: 0 62.8% 30.6%;
    --destructive-foreground: 0 0% 98%;
    --border: 240 3.7% 15.9%;
    --input: 240 3.7% 15.9%;
    --ring: 240 4.9% 83.9%;
  }
}

@layer base {
  * {
    @apply border-border;
  }
  body {
    @apply bg-background text-foreground;
  }
}

[V0_FILE]typescriptreact:file="tailwind.config.js"
/** @type {import('tailwindcss').Config} */
module.exports = {
  darkMode: ["class"],
  content: [
    "./pages/**/*.{ts,tsx}",
    "./components/**/*.{ts,tsx}",
    "./app/**/*.{ts,tsx}",
    "./src/**/*.{ts,tsx}",
    "*.{js,ts,jsx,tsx,mdx}",
  ],
  theme: {
    container: {
      center: true,
      padding: "2rem",
      screens: {
        "2xl": "1400px",
      },
    },
    extend: {
      fontFamily: {
        sans: ["var(--font-inter)"],
      },
      colors: {
        border: "hsl(var(--border))",
        input: "hsl(var(--input))",
        ring: "hsl(var(--ring))",
        background: "hsl(var(--background))",
        foreground: "hsl(var(--foreground))",
        primary: {
          DEFAULT: "hsl(var(--primary))",
          foreground: "hsl(var(--primary-foreground))",
        },
        secondary: {
          DEFAULT: "hsl(var(--secondary))",
          foreground: "hsl(var(--secondary-foreground))",
        },
        destructive: {
          DEFAULT: "hsl(var(--destructive))",
          foreground: "hsl(var(--destructive-foreground))",
        },
        muted: {
          DEFAULT: "hsl(var(--muted))",
          foreground: "hsl(var(--muted-foreground))",
        },
        accent: {
          DEFAULT: "hsl(var(--accent))",
          foreground: "hsl(var(--accent-foreground))",
        },
        popover: {
          DEFAULT: "hsl(var(--popover))",
          foreground: "hsl(var(--popover-foreground))",
        },
        card: {
          DEFAULT: "hsl(var(--card))",
          foreground: "hsl(var(--card-foreground))",
        },
      },
      borderRadius: {
        lg: "var(--radius)",
        md: "calc(var(--radius) - 2px)",
        sm: "calc(var(--radius) - 4px)",
      },
      keyframes: {
        "accordion-down": {
          from: { height: 0 },
          to: { height: "var(--radix-accordion-content-height)" },
        },
        "accordion-up": {
          from: { height: "var(--radix-accordion-content-height)" },
          to: { height: 0 },
        },
      },
      animation: {
        "accordion-down": "accordion-down 0.2s ease-out",
        "accordion-up": "accordion-up 0.2s ease-out",
      },
    },
  },
  plugins: [require("tailwindcss-animate")],
}

[V0_FILE]typescriptreact:file="components/fade-in.tsx" isQuickEdit="true"
"use client"

import type React from "react"
import { useEffect, useRef, useState } from "react"
import { cn } from "@/lib/utils"

interface FadeInProps {
  children: React.ReactNode
  className?: string
  delay?: number
  duration?: number
  direction?: "up" | "down" | "left" | "right" | "none"
  threshold?: number
  once?: boolean
}

export function FadeIn({
  children,
  className,
  delay = 0,
  duration = 275,
  direction = "up",
  threshold = 0.01,
  once = true,
}: FadeInProps) {
  const [isVisible, setIsVisible] = useState(false)
  const ref = useRef<HTMLDivElement>(null)

useEffect(() => {
    const observer = new IntersectionObserver(
      ([entry]) => {
        if (entry.isIntersecting) {
          setIsVisible(true)
          if (once && ref.current) {
            observer.unobserve(ref.current)
          }
        } else if (!once) {
          setIsVisible(false)
        }
      },
      {
        threshold,
      },
    )

const currentRef = ref.current
    if (currentRef) {
      observer.observe(currentRef)
    }

return () => {
      if (currentRef) {
        observer.unobserve(currentRef)
      }
    }
  }, [once, threshold])

const directionClasses = {
    up: "translate-y-4",
    down: "translate-y-[-1rem]",
    left: "translate-x-4",
    right: "translate-x-[-1rem]",
    none: "",
  }

return (
    <div
      ref={ref}
      className={cn(
        "transition-all",
        isVisible ? "opacity-100 transform-none" : `opacity-0 ${directionClasses[direction]}`,
        className,
      )}
      style={{
        transitionProperty: "opacity, transform",
        transitionDuration: `${duration}ms`,
        transitionTimingFunction: "ease-out",
        transitionDelay: `${delay}ms`,
      }}
    >
      {children}
    </div>
  )
}

[V0_FILE]typescriptreact:file="app/api/placeholder/route.ts"
import { type NextRequest, NextResponse } from "next/server"

export async function GET(request: NextRequest) {
  const searchParams = request.nextUrl.searchParams
  const text = searchParams.get("text") || "Placeholder Image"
  const width = Number.parseInt(searchParams.get("width") || "1200", 10)
  const height = Number.parseInt(searchParams.get("height") || "800", 10)
  const bgColor = searchParams.get("bgColor") || "#f4f4f5"
  const textColor = searchParams.get("textColor") || "#71717a"

const svg = `
    <svg width="${width}" height="${height}" viewBox="0 0 ${width} ${height}" xmlns="http://www.w3.org/2000/svg">
      <rect width="${width}" height="${height}" fill="${bgColor}"/>
      <text 
        x="50%" 
        y="50%" 
        font-family="system-ui, sans-serif" 
        font-size="24" 
        font-weight="500" 
        fill="${textColor}" 
        text-anchor="middle" 
        dominant-baseline="middle"
      >
        ${text}
      </text>
    </svg>
  `

return new NextResponse(svg, {
    headers: {
      "Content-Type": "image/svg+xml",
      "Cache-Control": "public, max-age=31536000, immutable",
    },
  })
}

[V0_FILE]typescriptreact:file="app/work/layout.tsx"
import type React from "react"
import type { Metadata } from "next"

export const metadata: Metadata = {
  title: "Work | Brendan Ciccone",
  description: "Portfolio of Brendan Ciccone, a 0 → 1 Senior Product Designer with 7 years of experience.",
}

export default function WorkLayout({
  children,
}: Readonly<{
  children: React.ReactNode
}>) {
  return <>{children}</>
}

[V0_FILE]json:file="package.json"
{
  "name": "my-v0-project",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "@hookform/resolvers": "^3.9.1",
    "@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.2.2",
    "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": "14.2.16",
    "next-themes": "^0.4.4",
    "react": "^19",
    "react-day-picker": "8.10.1",
    "react-dom": "^19",
    "react-hook-form": "^7.54.1",
    "react-resizable-panels": "^2.1.7",
    "recharts": "2.15.0",
    "sonner": "^1.7.1",
    "tailwind-merge": "^2.5.5",
    "tailwindcss-animate": "^1.0.7",
    "vaul": "^0.9.6",
    "zod": "^3.24.1"
  },
  "devDependencies": {
    "@types/node": "^22",
    "@types/react": "^18",
    "@types/react-dom": "^18",
    "postcss": "^8",
    "tailwindcss": "^3.4.17",
    "typescript": "^5"
  }
}

[V0_FILE]typescriptreact:file="app/page.tsx"
import Header from "@/components/header"
import Image from "next/image"
import { ArrowRight } from "lucide-react"
import Link from "next/link"
import Footer from "@/components/footer"
import { Button } from "@/components/ui/button"
import { FadeIn } from "@/components/fade-in"

export default function Portfolio() {
  return (
    <div className="min-h-screen bg-background text-foreground">
      <Header />
      <div className="max-w-[1024px] mx-auto px-4 py-6 sm:py-8">
        <FadeIn delay={0} duration={350}>
          <p className="text-base sm:text-lg mb-8 sm:mb-12 text-muted-foreground font-medium">
            <span className="text-foreground">0 → 1 Senior Product Designer</span> with 7 years of experience turning
            ideas into fully realized B2B and B2C products across healthcare, cybersecurity, and finance.
          </p>
        </FadeIn>

<div className="space-y-6 sm:space-y-8">
          {/* Project 1 */}
          <FadeIn delay={50} duration={350}>
            <div className="border border-border rounded-xl overflow-hidden">
              <div className="bg-muted border-b border-border">
                <Link href="/work/spontivly">
                  <Image
                    src="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/7-WhNtJkfUVhAkOhZSBPAbhHNURWpkYU.png"
                    alt="Spontivly social analytics dashboard showing engagement metrics, impression trends, and top performing content"
                    width={600}
                    height={400}
                    className="w-full"
                    priority
                  />
                </Link>
              </div>
              <div className="p-4 sm:p-6">
                {/* Group title and description closer together */}
                <div className="mb-3">
                  <h2 className="text-lg sm:text-xl font-semibold mb-1">Spontivly</h2>
                  <p className="text-muted-foreground">Data dashboards for non-technical users</p>
                </div>

{/* Badges in the middle with proper spacing */}
                <div className="flex flex-wrap gap-2 sm:gap-3 mb-5">
                  <span className="text-xs bg-secondary px-3 py-1 rounded-full">2023</span>
                  <span className="text-xs bg-secondary px-3 py-1 rounded-full">Saas</span>
                  <span className="text-xs bg-secondary px-3 py-1 rounded-full">Data</span>
                </div>

{/* Button with proper spacing */}
                <Button asChild size="lg" className="px-4">
                  <Link href="/work/spontivly">
                    View work <ArrowRight className="ml-1 h-4 w-4 transition-all duration-200" />
                  </Link>
                </Button>
              </div>
            </div>
          </FadeIn>

{/* Project 2 */}
          <FadeIn delay={75} duration={350}>
            <div className="border border-border rounded-xl overflow-hidden">
              <div className="bg-muted border-b border-border">
                <Link href="/work/immertec">
                  <Image
                    src="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/10-REigS5TLwDhOSRkjUpSoZzM0XHLPy1.png"
                    alt="Immertec VR medical training platform showing a live surgical procedure with multiple participating doctors, medical imaging views, and interactive controls for remote learning"
                    width={600}
                    height={400}
                    className="w-full"
                    priority
                  />
                </Link>
              </div>
              <div className="p-4 sm:p-6">
                {/* Group title and description closer together */}
                <div className="mb-3">
                  <h2 className="text-lg sm:text-xl font-semibold mb-1">Immertec</h2>
                  <p className="text-muted-foreground">VR medical training for live surgical procedures</p>
                </div>

{/* Badges in the middle with proper spacing */}
                <div className="flex flex-wrap gap-2 sm:gap-3 mb-5">
                  <span className="text-xs bg-secondary px-3 py-1 rounded-full">2018 - 2023</span>
                  <span className="text-xs bg-secondary px-3 py-1 rounded-full">Series A</span>
                  <span className="text-xs bg-secondary px-3 py-1 rounded-full">Medtech</span>
                </div>

{/* Button with proper spacing */}
                <Button asChild size="lg" className="px-4">
                  <Link href="/work/immertec">
                    View work <ArrowRight className="ml-1 h-4 w-4 transition-all duration-200" />
                  </Link>
                </Button>
              </div>
            </div>
          </FadeIn>

{/* Project 3 */}
          <FadeIn delay={100} duration={350}>
            <div className="border border-border rounded-xl overflow-hidden">
              <div className="bg-muted border-b border-border">
                <Link href="/work/paidly">
                  <Image
                    src="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/6-T3wsvxOlM1iRLfYYJAzhzlAlH5YblJ.png"
                    alt="Paidly mobile app showing invoice list, automatic reminders feature, and customer creation form"
                    width={600}
                    height={400}
                    className="w-full"
                    priority
                  />
                </Link>
              </div>
              <div className="p-4 sm:p-6">
                {/* Group title and description closer together */}
                <div className="mb-3">
                  <h2 className="text-lg sm:text-xl font-semibold mb-1">Paidly</h2>
                  <p className="text-muted-foreground">Stripe-integrated invoicing mobile app for SMEs</p>
                </div>

{/* Badges in the middle with proper spacing */}
                <div className="flex flex-wrap gap-2 sm:gap-3 mb-5">
                  <span className="text-xs bg-secondary px-3 py-1 rounded-full">2020</span>
                  <span className="text-xs bg-secondary px-3 py-1 rounded-full">Fintech</span>
                </div>

{/* Button with proper spacing */}
                <Button asChild size="lg" className="px-4">
                  <Link href="/work/paidly">
                    View work <ArrowRight className="ml-1 h-4 w-4 transition-all duration-200" />
                  </Link>
                </Button>
              </div>
            </div>
          </FadeIn>

{/* Project 4 */}
          <FadeIn delay={125} duration={350}>
            <div className="border border-border rounded-xl overflow-hidden">
              <div className="bg-muted border-b border-border">
                <Link href="#">
                  <Image
                    src="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/2-YNbm8YXYTIRuRh45avNSzDpqW2VQU9.png"
                    alt="Magier AI chatbot mobile app screens showing settings, chat interface, and subscription options"
                    width={600}
                    height={400}
                    className="w-full"
                    priority
                  />
                </Link>
              </div>
              <div className="p-4 sm:p-6">
                {/* Group title and description closer together */}
                <div className="mb-3">
                  <h2 className="text-lg sm:text-xl font-semibold mb-1">Magier</h2>
                  <p className="text-muted-foreground">Privacy-focused AI chatbot mobile app</p>
                </div>

{/* Badges in the middle with proper spacing */}
                <div className="flex flex-wrap gap-2 sm:gap-3 mb-5">
                  <span className="text-xs bg-secondary px-3 py-1 rounded-full">2023</span>
                  <span className="text-xs bg-secondary px-3 py-1 rounded-full">Acquired</span>
                  <span className="text-xs bg-secondary px-3 py-1 rounded-full">AI</span>
                </div>

{/* Button with proper spacing */}
                <Button variant="secondary" disabled size="lg" className="px-4">
                  Coming soon
                </Button>
              </div>
            </div>
          </FadeIn>
        </div>

<Footer />
      </div>
    </div>
  )
}

[V0_FILE]typescriptreact:file="app/work/spontivly/page.tsx" isQuickEdit="true"
import Image from "next/image"
import Link from "next/link"
import { ArrowRight } from "lucide-react"
import Header from "@/components/header"
import Footer from "@/components/footer"
import { Button } from "@/components/ui/button"
import { FadeIn } from "@/components/fade-in"

export default function SpontivlyPage() {
  return (
    <div className="min-h-screen bg-background text-foreground">
      <Header />
      <div className="max-w-[1024px] mx-auto px-4 py-6 sm:py-8">
        <FadeIn delay={0} duration={350}>
          <div className="mb-6 sm:mb-10">
            <div className="flex items-center mb-3">
              <div className="w-10 h-10 rounded-lg border border-border flex items-center justify-center mr-3 bg-transparent overflow-hidden">
                <Image
                  src="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/sdtEuqGIPQw38owJSawPdDh1myE-dMMHZU0Y0hIYLLG1OoLVxrDe6ZqZlF.webp"
                  alt="Spontivly logo"
                  width={40}
                  height={40}
                  className="w-full h-full object-cover"
                />
              </div>
              <h1 className="text-xl sm:text-2xl font-semibold">Spontivly</h1>
            </div>
            <p className="text-base sm:text-lg text-muted-foreground mb-4 max-w-2xl">
              Data dashboards for non-technical users
            </p>
            <div className="flex flex-wrap gap-2">
              <span className="text-xs bg-secondary px-3 py-1 rounded-full">2023</span>
              <span className="text-xs bg-secondary px-3 py-1 rounded-full">Seed</span>
              <span className="text-xs bg-secondary px-3 py-1 rounded-full">Data</span>
            </div>
          </div>
        </FadeIn>

<div className="space-y-12 sm:space-y-16">
          {/* Overview Section */}
          <FadeIn delay={50} duration={350}>
            <section>
              <h2 className="text-lg sm:text-xl font-semibold mb-4">Overview</h2>
              <div className="space-y-4 text-muted-foreground">
                <p>
                  In 2023, I worked as a Senior Product Designer with Spontivly, a venture-backed startup democratizing
                  data dashboards. I designed a platform allowing non-technical users to create custom dashboards
                  without needing an engineer, helping teams make better, data-driven decisions.
                </p>
                <ul className="list-disc pl-5 space-y-2">
                  <li>Designed a platform with support for 120+ API integrations</li>
                  <li>Redesigned the marketing website to decrease the amount of friction for onboarding users</li>
                  <li>Created interactive sales prototypes in Figma that shortened the sales cycle</li>
                </ul>
              </div>
            </section>
          </FadeIn>

{/* Social Dashboard Section */}
          <FadeIn delay={75} duration={350}>
            <section>
              <div className="bg-muted p-3 sm:p-4 rounded-lg mb-6">
                <Image
                  src="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/1-WdXXd2S7UErPJUOdDGGcki7Gq9r0TN.png"
                  alt="Spontivly social dashboard showing analytics and engagement metrics"
                  width={1200}
                  height={800}
                  className="rounded-lg w-full"
                />
              </div>
            </section>
          </FadeIn>

{/* Website Redesign Section */}
          <FadeIn delay={100} duration={350}>
            <section>
              <h2 className="text-lg sm:text-xl font-semibold mb-4">Website Redesign</h2>
              <div className="space-y-4 text-muted-foreground mb-6">
                <p>
                  My first project at Spontivly was redesigning the marketing website to create a more consistent
                  message and visual language. I collaborated closely with the marketing team and presented concepts to
                  stakeholders, ensuring the new design aligned with the company's ethos. By advocating for an
                  accessible CMS, I enabled anyone in the company to manage content like blog posts. I led the
                  development and hired some of my engineering contacts, and we successfully launched the new site over
                  a month ahead of schedule.
                </p>
              </div>
              <div className="bg-muted p-3 sm:p-4 rounded-lg mb-6">
                <Image
                  src="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/2-WtBgFu7RPx0w5ppbt7HCyV17wHHwsK.png"
                  alt="Spontivly marketing website showing data dashboards without technical fuss tagline"
                  width={1200}
                  height={800}
                  className="rounded-lg w-full"
                  priority
                />
              </div>
            </section>
          </FadeIn>

{/* Dashboard Builder Section */}
          <FadeIn delay={125} duration={350}>
            <section>
              <h2 className="text-lg sm:text-xl font-semibold mb-4">Dashboard Builder</h2>
              <div className="space-y-4 text-muted-foreground mb-6">
                <p>
                  I led the design of the data dashboard builder and an admin dashboard for managing user-created
                  dashboards and permissions. The goal was to enable users to connect any API from social media, CRMs,
                  and more and customize the generated charts and tables in a drag-and-drop builder. I collaborated
                  closely with marketing, engineering, and co-founders to understand our users and their varied goals,
                  from providing stakeholder reports to making data-driven decisions. I tried to steer the design toward
                  something that felt familiar while still incorporating all of the features that make Spontivly a
                  unique platform for data analysis.
                </p>
              </div>
              <div className="bg-muted p-3 sm:p-4 rounded-lg mb-6">
                <Image
                  src="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/3-K6zVOHyu0haPpgDtEStbsDrwqDl1Lt.png"
                  alt="Spontivly dashboard overview showing multiple dashboard cards for different purposes like Recent Events, Sales Leads, and Social Overview, each with their integrated platforms"
                  width={1200}
                  height={800}
                  className="rounded-lg w-full"
                />
              </div>
              <div className="bg-muted p-3 sm:p-4 rounded-lg mb-6">
                <Image
                  src="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/4-GhS5M97fmuUUo2QbvcNDyiW97xc3bc.png"
                  alt="Spontivly profile settings interface showing personal information management and profile picture upload"
                  width={1200}
                  height={800}
                  className="rounded-lg w-full"
                />
              </div>
              <div className="bg-muted p-3 sm:p-4 rounded-lg mb-6">
                <Image
                  src="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/5-nAN6iIm4GpTngSI9u7hKN7O5l3tP9L.png"
                  alt="Spontivly team management interface showing member roles, permissions, and workspace access controls"
                  width={1200}
                  height={800}
                  className="rounded-lg w-full"
                />
              </div>
            </section>
          </FadeIn>

{/* Insights Section */}
          <FadeIn delay={150} duration={350}>
            <section>
              <h2 className="text-lg sm:text-xl font-semibold mb-4">Insights</h2>
              <div className="space-y-4 text-muted-foreground mb-6">
                <p>
                  This experience taught me a lot about designing data visualization and how crucial it is to balance a
                  product's complexity to satisfy advanced users without scaring off newcomers. At Spontivly, we struck
                  that balance, leading to noteworthy teams from various industries becoming users.
                </p>
                <p>
                  My key takeaway is that introducing complex features should be done strategically: prioritize the most
                  relevant features and push advanced options further into the background while still keeping them
                  within reach. This approach enhances usability for all skill levels and drives deeper engagement and
                  adoption among mixed user groups.
                </p>
              </div>
              <div className="bg-muted p-3 sm:p-4 rounded-lg mb-6">
                <Image
                  src="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/6-QASqlEIRz1pkUNGGxmLRjjUfAqOjDq.png"
                  alt="Spontivly chart builder interface showing customization options for data visualization"
                  width={1200}
                  height={800}
                  className="rounded-lg w-full"
                />
              </div>
            </section>
          </FadeIn>

{/* CTA Section */}
          <FadeIn delay={175} duration={350}>
            <section className="py-10 sm:py-16 text-center mt-12">
              <h2 className="text-xl sm:text-2xl font-semibold mb-2">Let's go to market</h2>
              <p className="text-muted-foreground mb-6">
                Ready to take your product from 0 → 1 or looking to expand your team?
              </p>
              <Button asChild size="lg" className="px-4">
                <Link href="/contact">
                  Contact Me <ArrowRight className="ml-1 h-4 w-4 transition-all duration-200" />
                </Link>
              </Button>
            </section>
          </FadeIn>
        </div>

<Footer />
      </div>
    </div>
  )
}

[V0_FILE]typescriptreact:file="app/work/paidly/page.tsx" isQuickEdit="true"
import Image from "next/image"
import Link from "next/link"
import { ArrowRight } from "lucide-react"
import Header from "@/components/header"
import Footer from "@/components/footer"
import { Button } from "@/components/ui/button"
import { FadeIn } from "@/components/fade-in"

export default function PaidlyPage() {
  return (
    <div className="min-h-screen bg-background text-foreground">
      <Header />
      <div className="max-w-[1024px] mx-auto px-4 py-6 sm:py-8">
        <FadeIn delay={0} duration={350}>
          <div className="mb-6 sm:mb-10">
            <div className="flex items-center mb-3">
              <div className="w-10 h-10 rounded-lg border border-border flex items-center justify-center mr-3 bg-transparent overflow-hidden">
                <Image
                  src="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/uvNlfL0W1id65iarhG9wcUaT3aA-wvwBeKadRSwDEpSkFpeHnvcna1xp85.webp"
                  alt="Paidly logo"
                  width={40}
                  height={40}
                  className="w-full h-full object-cover"
                />
              </div>
              <h1 className="text-xl sm:text-2xl font-semibold">Paidly</h1>
            </div>
            <p className="text-base sm:text-lg text-muted-foreground mb-4 max-w-2xl">
              Stripe-integrated invoicing mobile app for SMEs
            </p>
            <div className="flex flex-wrap gap-2">
              <span className="text-xs bg-secondary px-3 py-1 rounded-full">2020</span>
              <span className="text-xs bg-secondary px-3 py-1 rounded-full">Fintech</span>
            </div>
          </div>
        </FadeIn>

<div className="space-y-12 sm:space-y-16">
          {/* Overview Section */}
          <FadeIn delay={50} duration={350}>
            <section>
              <h2 className="text-lg sm:text-xl font-semibold mb-4">Overview</h2>
              <div className="space-y-4 text-muted-foreground">
                <p>
                  During 2020, I noticed an increase in interest in entrepreneurship and freelancing, likely due to a
                  lack of job security spurred on by the pandemic. I believed this would increase demand for tools like
                  invoicing, and as someone with a freelancer background, I knew the importance. After conducting market
                  research, I founded Paidly and a small team of developers and designed the entire application that
                  launched on iOS and Android.
                </p>
                <ul className="list-disc pl-5 space-y-2">
                  <li>Served over 2,000 SME clients</li>
                  <li>Became an official Stripe partner</li>
                  <li>Maintained an average 4-star or higher rating</li>
                </ul>
              </div>
            </section>
          </FadeIn>

{/* App Screenshots Section */}
          <FadeIn delay={75} duration={350}>
            <section>
              <div className="bg-muted p-3 sm:p-4 rounded-lg mb-6">
                <Image
                  src="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/6-ZvLOgtuigyMw4YHmpEcm0a6xW4SS0t.png"
                  alt="Paidly mobile app screens showing invoice list view, automatic reminders feature, and customer creation form"
                  width={1200}
                  height={800}
                  className="rounded-lg w-full"
                />
              </div>
            </section>
          </FadeIn>

{/* Research Section */}
          <FadeIn delay={100} duration={350}>
            <section>
              <h2 className="text-lg sm:text-xl font-semibold mb-4">Research</h2>
              <div className="space-y-4 text-muted-foreground mb-6">
                <p>
                  Drawing on my experiences with invoicing, I looked into what was available in the market for iOS and
                  Android. While many industry leaders had comprehensive invoicing in their mobile apps, I was surprised
                  to find Stripe's app ecosystem lacking even the most basic features.
                </p>
                <p>
                  Based upon this discovery and knowing how integral Stripe was to payments on the web, I started diving
                  into hundreds of reviews, uncovering what people liked and disliked about existing applications. I
                  discovered users preferred non-subscription-based access and the ability for all the core functions
                  found on the web version of Stripe. To further validate this project, I surveyed relevant users and
                  found that 90% of respondents were open to switching invoicing apps. The survey gave me the extra
                  confidence to move forward and start designing.
                </p>
              </div>
              <div className="bg-muted p-3 sm:p-4 rounded-lg mb-6">
                <Image
                  src="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/7-KqqHEHgnDGs24Q3dtjmHD3eReZb68N.png"
                  alt="Paidly app screens showing onboarding flow, invoice creation, business setup, and Stripe integration"
                  width={1200}
                  height={800}
                  className="rounded-lg w-full"
                  priority
                />
              </div>
              <div className="bg-muted p-3 sm:p-4 rounded-lg mb-6">
                <Image
                  src="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/8-Pc0Tpc99z68zE31Dw1IGIZ5heLRbum.png"
                  alt="Paidly brand identity showing the full logo and app icon variations"
                  width={1200}
                  height={800}
                  className="rounded-lg w-full"
                  priority
                />
              </div>
            </section>
          </FadeIn>

{/* Stripe-Based Invoicing App Section */}
          <FadeIn delay={125} duration={350}>
            <section>
              <h2 className="text-lg sm:text-xl font-semibold mb-4">Stripe-Based Invoicing App</h2>
              <div className="space-y-4 text-muted-foreground mb-6">
                <p>
                  Using a prototype in Figma and testing it in Maze, I was ready to take things to development and build
                  an MVP. Realizing my development knowledge was not deep enough for the technical challenges ahead, I
                  screened and hired a capable team of mobile developers.
                </p>
                <p>
                  Our collaboration happened primarily through Slack for daily communication and Trello for tracking our
                  progress and feature implementation. The developers were provided with all the tools and documentation
                  needed, including access to Figma and an extensively user-tested high-fidelity prototype, to ensure a
                  smooth process for the MVP and beyond.
                </p>
              </div>
              <div className="bg-muted p-3 sm:p-4 rounded-lg mb-6">
                <Image
                  src="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/9-x7H18OAILjxiFS651ndFzNK1kMqnEE.png"
                  alt="Paidly app screens showing item management: adding items, empty state, and item creation form"
                  width={1200}
                  height={800}
                  className="rounded-lg w-full"
                />
              </div>
            </section>
          </FadeIn>

{/* Insights Section */}
          <FadeIn delay={150} duration={350}>
            <section>
              <h2 className="text-lg sm:text-xl font-semibold mb-4">Insights</h2>
              <div className="space-y-4 text-muted-foreground mb-6">
                <p>
                  Building on a 3rd party platform often comes with benefits like an existing user base you can tap
                  into, partnerships, and a powerful underlying API. At the same time, it also comes with the risk of
                  locking your product into an ecosystem where the platform and supported features may not align with
                  the needs of your users or product vision.
                </p>
                <p>
                  My key takeaway is that any product largely reliant on third-party platforms should have an actively
                  updated plan to become independent if needed. It's hard to predict what can happen, but deviating can
                  be necessary to enhance user experience, gain a broader market reach, or even remain in business.
                </p>
              </div>
              <div className="bg-muted p-3 sm:p-4 rounded-lg mb-6">
                <Image
                  src="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/10-0qjyaHWB67eHnejL4hiWKJ13XJ32o0.png"
                  alt="Paidly app screens showing customer management: customer list, success confirmation, and customer details form"
                  width={1200}
                  height={800}
                  className="rounded-lg w-full"
                />
              </div>
            </section>
          </FadeIn>

<Footer />
      </div>
    </div>
  )
}

[V0_FILE]typescriptreact:file="app/work/immertec/page.tsx" isQuickEdit="true"
import Image from "next/image"
import Link from "next/link"
import { ArrowRight } from "lucide-react"
import Header from "@/components/header"
import Footer from "@/components/footer"
import { Button } from "@/components/ui/button"
import { FadeIn } from "@/components/fade-in"

export default function ImmertecPage() {
  return (
    <div className="min-h-screen bg-background text-foreground">
      <Header />
      <div className="max-w-[1024px] mx-auto px-4 py-6 sm:py-8">
        <FadeIn delay={0} duration={350}>
          <div className="mb-6 sm:mb-10">
            <div className="flex items-center mb-3">
              <div className="w-10 h-10 rounded-lg border border-border flex items-center justify-center mr-3 bg-transparent overflow-hidden">
                <Image
                  src="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/ZB46OTsYlyreitEnm0AF94HXml0-xaEm3pRxEPLnB9hDdXRiA2ZaOQk1K2.webp"
                  alt="Immertec logo"
                  width={40}
                  height={40}
                  className="w-full h-full object-cover"
                />
              </div>
              <h1 className="text-xl sm:text-2xl font-semibold">Immertec</h1>
            </div>
            <p className="text-base sm:text-lg text-muted-foreground mb-4 max-w-2xl">
              VR medical training for live surgical procedures
            </p>
            <div className="flex flex-wrap gap-2">
              <span className="text-xs bg-secondary px-3 py-1 rounded-full">2018 - 2023</span>
              <span className="text-xs bg-secondary px-3 py-1 rounded-full">Series A</span>
              <span className="text-xs bg-secondary px-3 py-1 rounded-full">Medtech</span>
            </div>
          </div>
        </FadeIn>

<div className="space-y-12 sm:space-y-16">
          {/* Overview Section */}
          <FadeIn delay={50} duration={350}>
            <section>
              <h2 className="text-lg sm:text-xl font-semibold mb-4">Overview</h2>
              <div className="space-y-4 text-muted-foreground">
                <p>
                  In 2018, I joined Immertec as a Product Designer as the 2nd hire, where I spent a little over 5 years
                  leading all design initiatives. During this time, I was promoted to Senior Product Designer, we grew
                  to over 50 team members, secured our Series A round, and worked alongside top medical device companies
                  to train healthcare professionals in real-time using VR and other mediums.
                </p>
                <ul className="list-disc pl-5 space-y-2">
                  <li>Reduced average customer sales cycles by 50%</li>
                  <li>Increased usability through a redesign by 15%</li>
                  <li>Maintained an average NPS score of over 80</li>
                  <li>Published 3 papers on accessibility and virtual environments</li>
                  <li>Won 4 awards, including Startup of the Year in 2019</li>
                  <li>Assisted in fundraising efforts of a $12M Series A round</li>
                </ul>
              </div>
            </section>
          </FadeIn>

{/* Virtual Reality Section */}
          <FadeIn delay={85} duration={350}>
            <section>
              <h2 className="text-lg sm:text-xl font-semibold mb-4">Virtual Reality Viewer</h2>
              <div className="space-y-4 text-muted-foreground mb-6">
                <p>
                  At the core of our platform was the Virtual Reality Viewer, immersing healthcare professionals as if
                  they were in the operating room. These were not simulations. When users donned a VR headset, they'd
                  view live medical procedures and engage with peers in real-time from across the world.
                </p>
                <p>
                  Navigating the landscape of VR design was daunting at times, as established norms and testing
                  challenges were present. Despite this, we designed a template that allowed us to rapidly iterate in
                  Sketch or Figma and bring those designs into VR with nearly perfect placement and scaling.
                </p>
              </div>
              <div className="bg-muted p-3 sm:p-4 rounded-lg mb-6">
                <Image
                  src="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/11-LA41LuF5sSIT62tpvxty89U9pXq6fI.png"
                  alt="Immertec VR interface showing participant list, medical imaging with annotations, and surgical procedure views"
                  width={1200}
                  height={800}
                  className="rounded-lg w-full"
                  priority
                />
              </div>
            </section>
          </FadeIn>

{/* Admin Dashboard Section */}
          <FadeIn delay={100} duration={350}>
            <section>
              <h2 className="text-lg sm:text-xl font-semibold mb-4">Admin Dashboard</h2>
              <div className="space-y-4 text-muted-foreground mb-6">
                <p>
                  I worked closely with the co-founders and internal and external users while building interfaces for
                  mobile, web, and VR platforms.
                </p>
                <p>
                  One initial challenge was streamlining event creation and management. While some issues, like user
                  metrics and basic event management capabilities, were obvious, others were more ambiguous, such as
                  merging multiple user workflows or making certain features accessible to non-technical users.
                </p>
                <p>
                  Based on our research, we decided to segment functionalities based on user roles in one unified
                  dashboard. The admin dashboard freed up resources and empowered internal and external users to manage
                  events, headsets, organizations, and more.
                </p>
              </div>
              <div className="space-y-6">
                <div className="bg-muted p-3 sm:p-4 rounded-lg">
                  <Image
                    src="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/12-KU0EwkEyzN9ysxcYRZ58fyGf6ZfgR8.png"
                    alt="Immertec admin dashboard showing analytics overview, attendance trends, and user management interface"
                    width={1200}
                    height={800}
                    className="rounded-lg w-full"
                  />
                </div>
                <div className="grid grid-cols-2 gap-6">
                  <div className="bg-muted p-3 sm:p-4 rounded-lg">
                    <Image
                      src="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/13-oXK3wJmwKyi6QagP3qI4uu9I6qlIeG.png"
                      alt="Immertec event metrics and calendar interface showing event statistics, scheduling, and management tools"
                      width={600}
                      height={400}
                      className="rounded-lg w-full"
                    />
                  </div>
                  <div className="bg-muted p-3 sm:p-4 rounded-lg">
                    <Image
                      src="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/14-abrW9mE5W3Cjk0AXupxWYF5AQQMmBT.png"
                      alt="Immertec headset request management interface showing request status, shipping details, and tracking information"
                      width={600}
                      height={400}
                      className="rounded-lg w-full"
                    />
                  </div>
                </div>
                {/* Add another row of images */}
                <div className="grid grid-cols-2 gap-6">
                  <div className="bg-muted p-3 sm:p-4 rounded-lg">
                    <Image
                      src="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/15-UYFYy1BDnDYurjBLbGTRNYF62se158.png"
                      alt="Immertec event list interface showing detailed event information, filtering options, and approval status for medical training sessions"
                      width={600}
                      height={400}
                      className="rounded-lg w-full"
                    />
                  </div>
                  <div className="bg-muted p-3 sm:p-4 rounded-lg">
                    <Image
                      src="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/16-7oCkNwC6dfvy2m4Fc5dqbrHad89C8d.png"
                      alt="Immertec media library interface showing searchable grid of surgical procedure images with upload functionality"
                      width={600}
                      height={400}
                      className="rounded-lg w-full"
                    />
                  </div>
                </div>
              </div>
            </section>
          </FadeIn>

{/* Interactive Web Player Section */}
          <FadeIn delay={125} duration={350}>
            <section>
              <h2 className="text-lg sm:text-xl font-semibold mb-4">Interactive Web Viewer</h2>
              <div className="space-y-4 text-muted-foreground mb-6">
                <p>
                  I noticed recurring issues while collaborating with customer success where users struggled to access
                  events. Initially, it appeared to be an authentication user flow issue. I eventually discovered the
                  core problem: joining events in a headset requires more steps than many of our users had the time to
                  complete.
                </p>
                <p>
                  To make joining an event seamless, I introduced a web-based interface, allowing live event access on
                  any device with a browser. It was a technical feat, as our incredible engineering team managed to take
                  live video initially meant for VR and display it perfectly on a 2D screen. This shift minimized the
                  hassles of headset distribution and simplified event access while allowing for flexibility between VR
                  and web-based experiences.
                </p>
                <p>New event? Just send the user a link.</p>
              </div>
              <div className="bg-muted p-3 sm:p-4 rounded-lg">
                <Image
                  src="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/17-min-bEqAYIUXZdyTO6YiwToLYQIQ7wwetJ.png"
                  alt="Immertec web viewer interface showing live surgical procedure with participant list, medical imaging overlays, and interactive controls for collaboration"
                  width={1200}
                  height={800}
                  className="rounded-lg w-full"
                />
              </div>
            </section>
          </FadeIn>

{/* Insights Section */}
          <FadeIn delay={150} duration={350}>
            <section>
              <h2 className="text-lg sm:text-xl font-semibold mb-4">Insights</h2>
              <div className="space-y-4 text-muted-foreground mb-6">
                <p>
                  Working with new technology is not easy, but it presents challenges that keep you interested in ways
                  other products may not. Combine that with the healthcare focus, and I felt I had an inherent reason
                  for solving the problems we were working on.
                </p>
                <p>
                  While I learned a lot about startups in the early days of the company, I think my biggest lesson was
                  one that can apply to nearly any role at any company: you may have the correct answer or idea, but how
                  you present it and when you present it matters almost as much as whether it's right or wrong.
                </p>
              </div>
              <div className="bg-muted p-3 sm:p-4 rounded-lg">
                <Image
                  src="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/18-k1AacMyxarBVQjXec4gdARQddduncR.png"
                  alt="Immertec sign-in interface showing streamlined authentication options including email, Google, and Apple ID sign-in methods"
                  width={1200}
                  height={800}
                  className="rounded-lg w-full"
                />
              </div>
            </section>
          </FadeIn>

<Footer />
      </div>
    </div>
  )
}

[V0_FILE]typescriptreact:file="app/favicon.tsx" isQuickEdit="true"
import { ImageResponse } from "next/og"

// Route segment config
export const runtime = "edge"

// Image metadata
export const size = {
  width: 32,
  height: 32,
}
export const contentType = "image/png"

// Image generation
export default async function Icon() {
  // Fetch the avatar image
  const avatarUrl = "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/Image-sGYSp0BHGJgJt4KAmgUA2l6NjyBYwq.png"

return new ImageResponse(
    <div
      style={{
        fontSize: 24,
        background: "transparent",
        width: "100%",
        height: "100%",
        display: "flex",
        alignItems: "center",
        justifyContent: "center",
        borderRadius: "50%",
        overflow: "hidden",
      }}
    >
      <img src={avatarUrl || "/placeholder.svg"} width={32} height={32} style={{ objectFit: "cover" }} />
    </div>,
    {
      ...size,
    },
  )
}

[V0_FILE]typescriptreact:file="app/favicon.ico.tsx" isQuickEdit="true"
import { ImageResponse } from "next/og"

// Route segment config
export const runtime = "edge"

// Image metadata
export const size = {
  width: 32,
  height: 32,
}
export const contentType = "image/png"

// Image generation
export default async function Icon() {
  try {
    // Try to fetch the avatar image
    const avatarResponse = await fetch(
      "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/Image-sGYSp0BHGJgJt4KAmgUA2l6NjyBYwq.png",
      { cache: "force-cache" },
    )

if (!avatarResponse.ok) {
      throw new Error(`Failed to fetch avatar: ${avatarResponse.status}`)
    }

const avatarData = await avatarResponse.arrayBuffer()

return new ImageResponse(
      <div
        style={{
          width: "100%",
          height: "100%",
          display: "flex",
          alignItems: "center",
          justifyContent: "center",
          borderRadius: "50%",
          overflow: "hidden",
        }}
      >
        <img
          src={`data:image/jpeg;base64,${Buffer.from(avatarData).toString("base64")}`}
          width={32}
          height={32}
          style={{ objectFit: "cover" }}
          alt="BC"
        />
      </div>,
      {
        ...size,
      },
    )
  } catch (error) {
    console.error("Error generating favicon:", error)

// Fallback to initials if image loading fails
    return new ImageResponse(
      <div
        style={{
          fontSize: 16,
          background: "hsl(var(--foreground))",
          width: "100%",
          height: "100%",
          display: "flex",
          alignItems: "center",
          justifyContent: "center",
          borderRadius: "50%",
          color: "hsl(var(--background))",
        }}
      >
        BC
      </div>,
      {
        ...size,
      },
    )
  }
}

[V0_FILE]typescriptreact:file="app/icon.tsx" isQuickEdit="true"
import { ImageResponse } from "next/og"

// Route segment config
export const runtime = "edge"

// Image metadata
export const size = {
  width: 192,
  height: 192,
}
export const contentType = "image/png"

// Image generation
export default async function Icon() {
  try {
    // Try to fetch the avatar image
    const avatarResponse = await fetch(
      "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/Profile.jpg-al2nGt8LMiAxExrg2Jeb9tDq6VnRHb.jpeg",
      { cache: "force-cache" },
    )

if (!avatarResponse.ok) {
      throw new Error(`Failed to fetch avatar: ${avatarResponse.status}`)
    }

const avatarData = await avatarResponse.arrayBuffer()

return new ImageResponse(
      <div
        style={{
          width: "100%",
          height: "100%",
          display: "flex",
          alignItems: "center",
          justifyContent: "center",
          borderRadius: "50%",
          overflow: "hidden",
        }}
      >
        <img
          src={`data:image/jpeg;base64,${Buffer.from(avatarData).toString("base64")}`}
          width={192}
          height={192}
          style={{ objectFit: "cover" }}
          alt="BC"
        />
      </div>,
      {
        ...size,
      },
    )
  } catch (error) {
    console.error("Error generating icon:", error)

// Fallback to initials if image loading fails
    return new ImageResponse(
      <div
        style={{
          fontSize: 96,
          background: "hsl(var(--foreground))",
          width: "100%",
          height: "100%",
          display: "flex",
          alignItems: "center",
          justifyContent: "center",
          borderRadius: "50%",
          color: "hsl(var(--background))",
        }}
      >
        BC
      </div>,
      {
        ...size,
      },
    )
  }
}

[V0_FILE]typescriptreact:file="app/apple-icon.tsx" isQuickEdit="true"
import { ImageResponse } from "next/og"

// Route segment config
export const runtime = "edge"

// Image metadata
export const size = {
  width: 180,
  height: 180,
}
export const contentType = "image/png"

// Image generation
export default async function Icon() {
  try {
    // Try to fetch the avatar image
    const avatarResponse = await fetch(
      "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/Profile.jpg-al2nGt8LMiAxExrg2Jeb9tDq6VnRHb.jpeg",
      { cache: "force-cache" },
    )

if (!avatarResponse.ok) {
      throw new Error(`Failed to fetch avatar: ${avatarResponse.status}`)
    }

const avatarData = await avatarResponse.arrayBuffer()

return new ImageResponse(
      <div
        style={{
          width: "100%",
          height: "100%",
          display: "flex",
          alignItems: "center",
          justifyContent: "center",
          borderRadius: "50%",
          overflow: "hidden",
        }}
      >
        <img
          src={`data:image/jpeg;base64,${Buffer.from(avatarData).toString("base64")}`}
          width={180}
          height={180}
          style={{ objectFit: "cover" }}
          alt="BC"
        />
      </div>,
      {
        ...size,
      },
    )
  } catch (error) {
    console.error("Error generating apple icon:", error)

// Fallback to initials if image loading fails
    return new ImageResponse(
      <div
        style={{
          fontSize: 90,
          background: "hsl(var(--foreground))",
          width: "100%",
          height: "100%",
          display: "flex",
          alignItems: "center",
          justifyContent: "center",
          borderRadius: "50%",
          color: "hsl(var(--background))",
        }}
      >
        BC
      </div>,
      {
        ...size,
      },
    )
  }
}

[V0_FILE]typescriptreact:file="components/header.tsx" isFixed="true" isQuickEdit="true"
"use client"

import Image from "next/image"
import Link from "next/link"
import { usePathname } from "next/navigation"
import { ArrowRight, Menu, X } from "lucide-react"
import { useEffect, useState } from "react"
import { Button } from "@/components/ui/button"
import { ThemeSwitcher } from "@/components/theme-switcher"

export default function Header() {
  const pathname = usePathname()
  const [mounted, setMounted] = useState(false)
  const [mobileMenuOpen, setMobileMenuOpen] = useState(false)

useEffect(() => {
    setMounted(true)
  }, [])

// Close mobile menu when route changes
  useEffect(() => {
    setMobileMenuOpen(false)
  }, [pathname])

return (
    <header
      className={`sticky top-0 z-50 w-full ${
        mobileMenuOpen
          ? "bg-background"
          : "bg-background/95 backdrop-blur-md supports-[backdrop-filter]:bg-background/80"
      }`}
    >
      <div className="max-w-[1024px] mx-auto flex h-20 items-center justify-between px-4">
        <Link href="/" className="flex items-center gap-2">
          <Image
            src="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/Profile.jpg-al2nGt8LMiAxExrg2Jeb9tDq6VnRHb.jpeg"
            alt="Brendan Ciccone"
            width={40}
            height={40}
            className="rounded-full object-cover"
            priority
          />
          <span className="font-medium">Brendan Ciccone</span>
        </Link>

{/* Desktop Navigation */}
        <nav className="hidden md:flex items-center">
          <div className="flex space-x-2">
            <Link
              href="/"
              className={`text-sm h-10 px-4 min-w-[70px] flex items-center justify-center rounded-md transition-colors duration-200 ${
                pathname === "/"
                  ? "font-medium bg-secondary text-foreground"
                  : "text-muted-foreground hover:text-foreground hover:bg-secondary/40"
              }`}
              prefetch={true}
            >
              Work
            </Link>
            <Link
              href="/about"
              className={`text-sm h-10 px-4 min-w-[70px] flex items-center justify-center rounded-md transition-colors duration-200 ${
                pathname === "/about"
                  ? "font-medium bg-secondary text-foreground"
                  : "text-muted-foreground hover:text-foreground hover:bg-secondary/40"
              }`}
              prefetch={true}
            >
              About
            </Link>
            <Link
              href="/contact"
              className={`text-sm h-10 px-4 min-w-[70px] flex items-center justify-center rounded-md transition-colors duration-200 ${
                pathname === "/contact"
                  ? "font-medium bg-secondary text-foreground"
                  : "text-muted-foreground hover:text-foreground hover:bg-secondary/40"
              }`}
              prefetch={true}
            >
              Contact
            </Link>
          </div>
        </nav>

<div className="hidden md:flex items-center gap-3">
          <div className="w-10">{mounted && <ThemeSwitcher />}</div>
          <Button asChild>
            <Link href="/contact" prefetch={true}>
              Let's chat
              <ArrowRight className="ml-1 h-4 w-4 transition-all duration-200" />
            </Link>
          </Button>
        </div>

{/* Mobile Menu Button */}
        <div className="flex md:hidden items-center gap-3">
          <div className="w-10">{mounted && <ThemeSwitcher />}</div>
          <Button
            variant="default"
            size="icon"
            onClick={() => setMobileMenuOpen(!mobileMenuOpen)}
            aria-label={mobileMenuOpen ? "Close menu" : "Open menu"}
            className="bg-foreground text-background hover:bg-foreground/90"
          >
            {mobileMenuOpen ? <X className="h-6 w-6" /> : <Menu className="h-6 w-6" />}
          </Button>
        </div>
      </div>

{/* Mobile Menu */}
      <div
        className={`md:hidden bg-background absolute left-0 right-0 shadow-md border-b border-border transform transition-all duration-300 ease-in-out ${
          mobileMenuOpen ? "opacity-100 translate-y-0" : "opacity-0 -translate-y-4 pointer-events-none"
        }`}
      >
        <div className="max-w-[1024px] mx-auto px-4 py-5 flex flex-col items-center space-y-5">
          <div>
            <Link
              href="/"
              className={`text-sm inline-flex py-2 px-3 rounded-md transition-colors duration-200 ${
                pathname === "/"
                  ? "font-medium bg-secondary text-foreground"
                  : "hover:bg-secondary/40 hover:text-foreground"
              }`}
              prefetch={true}
            >
              Work
            </Link>
          </div>
          <div>
            <Link
              href="/about"
              className={`text-sm inline-flex py-2 px-3 rounded-md transition-colors duration-200 ${
                pathname === "/about"
                  ? "font-medium bg-secondary text-foreground"
                  : "hover:bg-secondary/40 hover:text-foreground"
              }`}
              prefetch={true}
            >
              About
            </Link>
          </div>
          <div>
            <Link
              href="/contact"
              className={`text-sm inline-flex py-2 px-3 rounded-md transition-colors duration-200 ${
                pathname === "/contact"
                  ? "font-medium bg-secondary text-foreground"
                  : "hover:bg-secondary/40 hover:text-foreground"
              }`}
              prefetch={true}
            >
              Contact
            </Link>
          </div>
          <Button asChild className="max-w-[200px]">
            <Link href="/contact" prefetch={true}>
              Let's chat
              <ArrowRight className="ml-1 h-4 w-4 transition-all duration-200" />
            </Link>
          </Button>
        </div>
      </div>
    </header>
  )
}
</article></body></html>