[V0_FILE]plaintext:file=".gitignore" # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. # dependencies /node_modules # next.js /.next/ /out/ # production /build # debug npm-debug.log* yarn-debug.log* yarn-error.log* .pnpm-debug.log* # env files .env* # vercel .vercel # typescript *.tsbuildinfo next-env.d.ts [V0_FILE]markdown:file="README.md" # Portfolio creation *Automatically synced with your [v0.app](https://v0.app) deployments* [![Deployed on Vercel](https://img.shields.io/badge/Deployed%20on-Vercel-black?style=for-the-badge&logo=vercel)](https://vercel.com/saadsafdas-projects/v0-portfolio-creation) [![Built with v0](https://img.shields.io/badge/Built%20with-v0.app-black?style=for-the-badge)](https://v0.app/chat/qTh0AWibOfx) ## Overview This repository will stay in sync with your deployed chats on [v0.app](https://v0.app). Any changes you make to your deployed app will be automatically pushed to this repository from [v0.app](https://v0.app). ## Deployment Your project is live at: **[https://vercel.com/saadsafdas-projects/v0-portfolio-creation](https://vercel.com/saadsafdas-projects/v0-portfolio-creation)** ## Build your app Continue building your app on: **[https://v0.app/chat/qTh0AWibOfx](https://v0.app/chat/qTh0AWibOfx)** ## How It Works 1. Create and modify your project using [v0.app](https://v0.app) 2. Deploy your chats from the v0 interface 3. Changes are automatically pushed to this repository 4. Vercel deploys the latest version from this repository [V0_FILE]css:file="app/globals.css" @import "tailwindcss"; @import "tw-animate-css"; @custom-variant dark (&:is(.dark *)); /* Light theme as default */ :root { --background: oklch(0.98 0.01 250); --foreground: oklch(0.15 0.02 250); --card: oklch(1 0 0); --card-foreground: oklch(0.15 0.02 250); --popover: oklch(1 0 0); --popover-foreground: oklch(0.15 0.02 250); --primary: oklch(0.55 0.2 180); --primary-foreground: oklch(0.98 0 0); --secondary: oklch(0.94 0.01 250); --secondary-foreground: oklch(0.25 0.02 250); --muted: oklch(0.92 0.01 250); --muted-foreground: oklch(0.45 0.02 250); --accent: oklch(0.55 0.2 180); --accent-foreground: oklch(0.98 0 0); --destructive: oklch(0.577 0.245 27.325); --destructive-foreground: oklch(0.98 0 0); --border: oklch(0.88 0.01 250); --input: oklch(0.92 0.01 250); --ring: oklch(0.55 0.2 180); --chart-1: oklch(0.646 0.222 41.116); --chart-2: oklch(0.6 0.118 184.704); --chart-3: oklch(0.398 0.07 227.392); --chart-4: oklch(0.828 0.189 84.429); --chart-5: oklch(0.769 0.188 70.08); --radius: 0.625rem; --sidebar: oklch(0.98 0.01 250); --sidebar-foreground: oklch(0.15 0.02 250); --sidebar-primary: oklch(0.55 0.2 180); --sidebar-primary-foreground: oklch(0.98 0 0); --sidebar-accent: oklch(0.94 0.01 250); --sidebar-accent-foreground: oklch(0.15 0.02 250); --sidebar-border: oklch(0.88 0.01 250); --sidebar-ring: oklch(0.55 0.2 180); } /* Dark theme */ .dark { --background: oklch(0.13 0.02 250); --foreground: oklch(0.95 0 0); --card: oklch(0.16 0.02 250); --card-foreground: oklch(0.95 0 0); --popover: oklch(0.16 0.02 250); --popover-foreground: oklch(0.95 0 0); --primary: oklch(0.75 0.15 180); --primary-foreground: oklch(0.13 0.02 250); --secondary: oklch(0.22 0.02 250); --secondary-foreground: oklch(0.85 0 0); --muted: oklch(0.25 0.02 250); --muted-foreground: oklch(0.65 0 0); --accent: oklch(0.75 0.15 180); --accent-foreground: oklch(0.13 0.02 250); --destructive: oklch(0.396 0.141 25.723); --destructive-foreground: oklch(0.637 0.237 25.331); --border: oklch(0.28 0.02 250); --input: oklch(0.22 0.02 250); --ring: oklch(0.75 0.15 180); --chart-1: oklch(0.488 0.243 264.376); --chart-2: oklch(0.696 0.17 162.48); --chart-3: oklch(0.769 0.188 70.08); --chart-4: oklch(0.627 0.265 303.9); --chart-5: oklch(0.645 0.246 16.439); --sidebar: oklch(0.16 0.02 250); --sidebar-foreground: oklch(0.95 0 0); --sidebar-primary: oklch(0.75 0.15 180); --sidebar-primary-foreground: oklch(0.13 0.02 250); --sidebar-accent: oklch(0.22 0.02 250); --sidebar-accent-foreground: oklch(0.95 0 0); --sidebar-border: oklch(0.28 0.02 250); --sidebar-ring: oklch(0.75 0.15 180); } @theme inline { --font-sans: "Inter", "Inter Fallback"; --font-mono: "Geist Mono", "Geist Mono Fallback"; --color-background: var(--background); --color-foreground: var(--foreground); --color-card: var(--card); --color-card-foreground: var(--card-foreground); --color-popover: var(--popover); --color-popover-foreground: var(--popover-foreground); --color-primary: var(--primary); --color-primary-foreground: var(--primary-foreground); --color-secondary: var(--secondary); --color-secondary-foreground: var(--secondary-foreground); --color-muted: var(--muted); --color-muted-foreground: var(--muted-foreground); --color-accent: var(--accent); --color-accent-foreground: var(--accent-foreground); --color-destructive: var(--destructive); --color-destructive-foreground: var(--destructive-foreground); --color-border: var(--border); --color-input: var(--input); --color-ring: var(--ring); --color-chart-1: var(--chart-1); --color-chart-2: var(--chart-2); --color-chart-3: var(--chart-3); --color-chart-4: var(--chart-4); --color-chart-5: var(--chart-5); --radius-sm: calc(var(--radius) - 4px); --radius-md: calc(var(--radius) - 2px); --radius-lg: var(--radius); --radius-xl: calc(var(--radius) + 4px); --color-sidebar: var(--sidebar); --color-sidebar-foreground: var(--sidebar-foreground); --color-sidebar-primary: var(--sidebar-primary); --color-sidebar-primary-foreground: var(--sidebar-primary-foreground); --color-sidebar-accent: var(--sidebar-accent); --color-sidebar-accent-foreground: var(--sidebar-accent-foreground); --color-sidebar-border: var(--sidebar-border); --color-sidebar-ring: var(--sidebar-ring); } @layer base { * { @apply border-border outline-ring/50; } body { @apply bg-background text-foreground; } } /* Custom animations */ @keyframes fade-up { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } } @keyframes fade-in { from { opacity: 0; } to { opacity: 1; } } @keyframes slide-in-left { from { opacity: 0; transform: translateX(-30px); } to { opacity: 1; transform: translateX(0); } } @keyframes glow { 0%, 100% { opacity: 0.5; } 50% { opacity: 1; } } .animate-fade-up { animation: fade-up 0.6s ease-out forwards; } .animate-fade-in { animation: fade-in 0.6s ease-out forwards; } .animate-slide-in-left { animation: slide-in-left 0.6s ease-out forwards; } .animate-glow { animation: glow 2s ease-in-out infinite; } [V0_FILE]typescriptreact:file="app/layout.tsx" import type React from "react" import type { Metadata } from "next" import { Inter, Geist_Mono } from "next/font/google" import { Analytics } from "@vercel/analytics/next" import { ThemeProvider } from "@/components/theme-provider" import "./globals.css" import Script from "next/script" const inter = Inter({ subsets: ["latin"], variable: "--font-inter", display: "swap" }) const geistMono = Geist_Mono({ subsets: ["latin"], variable: "--font-geist-mono", display: "swap" }) export const metadata: Metadata = { title: "Muhammad Saad | 3D Portfolio", description: "Explore my work in an immersive 3D house experience - Software Engineer specializing in ERPNext, Flutter, React Native, and Backend Integrations", generator: "v0.app", keywords: ["Muhammad Saad", "Portfolio", "3D Portfolio", "Software Engineer", "ERPNext", "Flutter", "React Native"], authors: [{ name: "Muhammad Saad" }], openGraph: { title: "Muhammad Saad | 3D Portfolio", description: "Explore my work in an immersive 3D house experience", type: "website", }, 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 default function RootLayout({ children, }: Readonly<{ children: React.ReactNode }>) { return ( {children} ) } [V0_FILE]typescriptreact:file="app/page.tsx" "use client" import dynamic from "next/dynamic" import { Suspense } from "react" const House3D = dynamic(() => import("@/components/3d/house-scene").then((mod) => mod.House3D), { ssr: false, loading: () => , }) function LoadingScreen() { return (

Muhammad Saad

Loading portfolio...

) } export default function Home() { return (

) } [V0_FILE]json:file="components.json" { "$schema": "https://ui.shadcn.com/schema.json", "style": "new-york", "rsc": true, "tsx": true, "tailwind": { "config": "", "css": "app/globals.css", "baseColor": "neutral", "cssVariables": true, "prefix": "" }, "aliases": { "components": "@/components", "utils": "@/lib/utils", "ui": "@/components/ui", "lib": "@/lib", "hooks": "@/hooks" }, "iconLibrary": "lucide" } [V0_FILE]typescriptreact:file="components/3d/house-scene.tsx" "use client" import type React from "react" import { Canvas } from "@react-three/fiber" import { Environment, OrbitControls, PerspectiveCamera, Html, Float, Text, RoundedBox } from "@react-three/drei" import { useState, useRef, useEffect } from "react" import type * as THREE from "three" import portfolioData from "@/data/portfolio.json" import { ThemeToggle } from "@/components/theme-toggle" import { useTheme } from "next-themes" import { Github, Linkedin, Mail, ExternalLink, ChevronLeft, ChevronRight, Home, User, Code, Briefcase, FolderOpen, MessageSquare, Server, Smartphone, Layout, Database, Terminal, } from "lucide-react" const themeColors = { dark: { floor: "#0a0a0f", wall: "#0d0d15", desk: "#1a1a24", panel: "#0a0a0f", text: "#ffffff", textMuted: "#94a3b8", roomBg: "#0f172a", }, light: { floor: "#f1f5f9", wall: "#e2e8f0", desk: "#cbd5e1", panel: "#f8fafc", text: "#0f172a", textMuted: "#475569", roomBg: "#f1f5f9", }, } const rooms = [ { id: "entrance", name: "Entrance", icon: Home, position: [0, 0, 0] as [number, number, number] }, { id: "about", name: "About", icon: User, position: [15, 0, 0] as [number, number, number] }, { id: "skills", name: "Skills", icon: Code, position: [30, 0, 0] as [number, number, number] }, { id: "experience", name: "Experience", icon: Briefcase, position: [45, 0, 0] as [number, number, number] }, { id: "projects", name: "Projects", icon: FolderOpen, position: [60, 0, 0] as [number, number, number] }, { id: "contact", name: "Contact", icon: MessageSquare, position: [75, 0, 0] as [number, number, number] }, ] function Room({ position, children, color, isDark = true, }: { position: [number, number, number]; children: React.ReactNode; color?: string; isDark?: boolean }) { const colors = isDark ? themeColors.dark : themeColors.light const roomColor = color || colors.roomBg return ( {/* Floor */} {/* Back Wall */} {/* Left Wall */} {/* Right Wall */} {/* Ceiling */} {children} ) } function FloatingFrame({ position, rotation = [0, 0, 0], children, size = [4, 3], isDark = true, }: { position: [number, number, number] rotation?: [number, number, number] children: React.ReactNode size?: [number, number] isDark?: boolean }) { const colors = isDark ? themeColors.dark : themeColors.light return ( {/* Frame */} {/* Inner Frame */} {/* Content */}

{children}

) } function ColorfulRoom({ position, children, isDark = true, }: { position: [number, number, number]; children: React.ReactNode; isDark?: boolean }) { const colors = isDark ? themeColors.dark : themeColors.light return ( {/* Floor with gradient effect */} {/* Back Wall */} {/* Left Wall */} {/* Right Wall */} {/* Ceiling */} {/* Colorful accent lights on walls */} {/* Side wall neon accents */} {/* Floor LED strips */} {children} ) } function RealisticFlowerPot({ position }: { position: [number, number, number] }) { return ( {/* Terracotta pot - outer */} {/* Pot rim - top ring */} {/* Pot bottom ring */} {/* Soil surface */} {/* Main thick stem */} {/* Branch stems */} {/* Large leaves - bottom layer */} {[0, 1, 2, 3, 4, 5, 6, 7].map((i) => ( ))} {/* Medium leaves - middle layer */} {[0, 1, 2, 3, 4, 5].map((i) => ( ))} {/* Small leaves - top layer */} {[0, 1, 2, 3, 4].map((i) => ( ))} {/* Flowers */} ) } function Bookshelf({ position, isDark = true }: { position: [number, number, number]; isDark?: boolean }) { const bookColors = ["#ef4444", "#3b82f6", "#22c55e", "#f59e0b", "#8b5cf6", "#ec4899", "#14b8a6", "#f97316"] return ( {/* Shelf frame */} {/* Shelves */} {[-0.7, -0.1, 0.5].map((y, i) => ( ))} {/* Books on shelves */} {[-0.7, -0.1, 0.5].map((shelfY, shelfIndex) => ( {[...Array(5)].map((_, bookIndex) => ( ))} ))} ) } function WallClock({ position, isDark = true }: { position: [number, number, number]; isDark?: boolean }) { return ( {/* Clock face */} {/* Clock rim */} {/* Hour markers */} {[...Array(12)].map((_, i) => ( ))} {/* Hour hand */} {/* Minute hand */} {/* Center dot */} ) } function FloorLamp({ position, isDark = true }: { position: [number, number, number]; isDark?: boolean }) { return ( {/* Base */} {/* Pole */} {/* Lamp shade */} {/* Light bulb glow */} {/* Actual light */} ) } function AreaRug({ position, isDark = true }: { position: [number, number, number]; isDark?: boolean }) { return ( {/* Main rug */} {/* Rug border */} {/* Decorative pattern - center */} ) } function WallArt({ position, rotation = [0, 0, 0] as [number, number, number], isDark = true, }: { position: [number, number, number]; rotation?: [number, number, number]; isDark?: boolean }) { return ( {/* Frame */} {/* Canvas */} {/* Abstract art shapes */} ) } function ModernDesk({ position, isDark = true }: { position: [number, number, number]; isDark?: boolean }) { const colors = isDark ? themeColors.dark : themeColors.light return ( {/* Desktop surface - sleek */} {/* Left leg - angular modern */} {/* Right leg */} {/* RGB underglow strip - front */} {/* RGB underglow strip - back */} {/* RGB side strips */} ) } function ModernGamingChair({ position, isDark = true }: { position: [number, number, number]; isDark?: boolean }) { return ( {/* Seat */} {/* Back rest */} {/* Colorful side wings - left */} {/* Colorful side wings - right */} {/* Headrest */} {/* Armrests */} {/* Chair base */} {/* Star base */} {/* Wheels with RGB */} {[0, 1, 2, 3, 4].map((i) => ( ))} ) } function Monitor({ position, rotation = [0, 0, 0], }: { position: [number, number, number]; rotation?: [number, number, number] }) { return ( {/* Monitor bezel */} {/* Screen */} {/* Monitor stand */} {/* Monitor base */} ) } function UltrawideMonitor({ position, rotation = [0, 0, 0], showSkills = false, isDark = true, }: { position: [number, number, number] rotation?: [number, number, number] showSkills?: boolean isDark?: boolean }) { const { skills } = portfolioData const skillIcons: Record = { "Backend & ERP": , "Mobile Development": , Frontend: , "Databases & Tools": , } const skillColors = ["#f472b6", "#818cf8", "#2dd4bf", "#fb923c"] return ( {/* Monitor curved bezel */} {/* Screen */} {/* RGB strip on bottom */} {/* Monitor stand - modern V shape */} {/* Content on screen - improved visibility */} {showSkills ? (

MY SKILLS

{skills.categories.map((category, i) => (

{skillIcons[category.title] ||

}
                    {category.title}


                  
                    {category.skills.slice(0, 4).map((skill, j) => (
                      
                        {skill.split(" ")[0]}
                      
                    ))}

))}


        ) : (
          
            
              
              
                WELCOME
              
            
            
              {">"} Ready to code amazing things...
            
            
              {["#f472b6", "#818cf8", "#2dd4bf", "#fb923c"].map((color, i) => (
                
              ))}
            
          
        )}
      
    
  )
}

function Keyboard({ position }: { position: [number, number, number] }) {
  return (
    
      
        
        
      
      {/* RGB strip */}
      
        
        
      
    
  )
}

function RGBKeyboard({ position }: { position: [number, number, number] }) {
  return (
    
      
        
      

      {/* RGB backlight rows */}
      {[-0.15, -0.05, 0.05, 0.15].map((z, i) => (
        
          
          
        
      ))}
    
  )
}

function Mouse({ position }: { position: [number, number, number] }) {
  return (
    
      
        
        
      
      {/* RGB accent */}
      
        
        
      
    
  )
}

function RGBMouse({ position }: { position: [number, number, number] }) {
  return (
    
      
        
      

      
        
        
      

      {/* Scroll wheel - fixed rotation */}
      
        
        
      
    
  )
}

function PCTower({ position }: { position: [number, number, number] }) {
  return (
    
      {/* Main case */}
      
        
        
      
      {/* Glass panel */}
      
        
        
      
      {/* RGB fans visible through glass */}
      
        
        
      
      
        
        
      
      {/* Power LED */}
      
        
        
      
    
  )
}

function ModernPCTower({ position }: { position: [number, number, number] }) {
  return (
    
      {/* Main case */}
      
        
      

      {/* Glass panel with tint */}
      
        
        
      

      {/* RGB fans visible through glass - fixed torusGeometry */}
      
        
          
          
        
      
      
        
          
          
        
      
      
        
          
          
        
      

      {/* Front IO - Power button - fixed cylinderGeometry rotation */}
      
        
        
      

      {/* Front RGB strip */}
      
        
        
      
    
  )
}

function ModernWallDisplay({ position, isDark = true }: { position: [number, number, number]; isDark?: boolean }) {
  const { personal } = portfolioData
  const colors = isDark ? themeColors.dark : themeColors.light

  return (
    
      {/* Main display panel - larger */}
      
        
      

      {/* Glowing borders - multi-color */}
      
        
        
      
      
        
        
      
      
        
        
      
      
        
        
      

      {/* Name text - much larger */}
      
        {personal.name}
      

      {/* Decorative line under name */}
      
        
        
      

      {/* Title - larger */}
      
        {personal.title}
      

      {/* Tagline - larger */}
      
        {personal.tagline}
      

      {/* Specializations with colors - much larger and clearer */}
      
        
          {personal.specializations.map((spec, i) => {
            const specColors = ["#f472b6", "#818cf8", "#2dd4bf", "#fb923c"]
            return (
              
                {spec}
              
            )
          })}
        
      

      {/* Corner decorations - larger */}
      {[
        [-5.1, 2.35, "#f472b6"],
        [5.1, 2.35, "#818cf8"],
        [-5.1, -2.35, "#fb923c"],
        [5.1, -2.35, "#2dd4bf"],
      ].map(([x, y, color], i) => (
        
          
          
        
      ))}
    
  )
}

function Shelf({ position }: { position: [number, number, number] }) {
  return (
    
      {/* Shelf board */}
      
        
        
      
      {/* Brackets */}
      
        
        
      
      
        
        
      
    
  )
}

function FloatingDecor({ position, color }: { position: [number, number, number]; color: string }) {
  return (
    
      
        
        
      
    
  )
}

function CeilingLight({ position }: { position: [number, number, number] }) {
  return (
    
      {/* Light fixture */}
      
        
        
      
      {/* Light panel */}
      
        
        
      
      
    
  )
}

function EntranceRoom({ position, isDark = true }: { position: [number, number, number]; isDark?: boolean }) {
  const { personal } = portfolioData

  return (
    
      {/* Wall Display - Main showcase */}
      

      {/* Modern desk setup */}
      

      {/* Dual ultrawide monitors - one showing skills */}
      
      

      

      {/* RGB Keyboard and mouse */}
      
      

      {/* Modern PC Tower */}
      

      {/* Modern gaming chair */}
      

      

      

      

      
        
      

      
      

      {/* Floating decorative elements */}
      
      
      
      

      {/* Social links panel on right wall - improved visibility */}
      
        
          
            
          
          {/* Border glow */}
          
            
            
          
          
            
            
          
          
            
              
                CONNECT WITH ME
              
              
                
                  
                
                
                  
                
                
                  
                
              
            
          
        
      

      {/* Ambient colored lighting - reduced for performance */}
      
      
    
  )
}

function AboutRoom({ position, isDark = true }: { position: [number, number, number]; isDark?: boolean }) {
  const { about } = portfolioData
  const colors = isDark ? themeColors.dark : themeColors.light

  return (
    
      {/* Main About Frame */}
      
        
          {about.heading}
          {about.paragraphs.map((p, i) => (
            
              {p}
            
          ))}
        
      

      {/* Stats */}
      
        {about.stats.map((stat, i) => (
          
            
              {stat.value}
              {stat.label}
            
          
        ))}
      

      
      
    
  )
}

function SkillsRoom({ position, isDark = true }: { position: [number, number, number]; isDark?: boolean }) {
  const { skills } = portfolioData

  return (
    
      
        {skills.heading}
      

      {skills.categories.map((category, i) => {
        const xPos = i % 2 === 0 ? -3.5 : 3.5
        const yPos = i < 2 ? 2 : -0.5
        return (
          
            
              {category.title}
              
                {category.skills.map((skill, j) => (
                  
                    {skill}
                  
                ))}
              
            
          
        )
      })}

      
      
    
  )
}

function ExperienceRoom({ position, isDark = true }: { position: [number, number, number]; isDark?: boolean }) {
  const { experience } = portfolioData

  return (
    
      
        {experience.heading}
      

      {experience.items.map((item, i) => (
        
          
            
              
              {item.period}
            
            {item.title}
            {item.company}
            
              {item.description.slice(0, 3).map((desc, j) => (
                
                  • {desc}
                
              ))}
            
          
        
      ))}

      
      
    
  )
}

function ProjectsRoom({ position, isDark = true }: { position: [number, number, number]; isDark?: boolean }) {
  const { projects } = portfolioData
  const featuredProjects = projects.items.filter((p) => p.featured)

  return (
    
      
        {projects.heading}
      

      {featuredProjects.map((project, i) => (
        
          
            
              {project.title}
            
            {project.description}
            
              {project.tags.map((tag, j) => (
                
                  {tag}
                
              ))}
            
            
              
                 Code
              
              
                 Demo
              
            
          
        
      ))}

      
      
    
  )
}

function ContactRoom({ position, isDark = true }: { position: [number, number, number]; isDark?: boolean }) {
  const { contact, personal } = portfolioData

  return (
    
      
        
          {contact.heading}
          {contact.description}

          
            
              
              {personal.email}
            

            
              
                
              
              
                
              
            
          

          {personal.copyright}
        
      

      {/* Glowing orbs - reduced for performance */}
      
        
        
      

      
    
  )
}

function Scene({ currentRoom, isDark }: { currentRoom: number; isDark: boolean }) {
  const cameraRef = useRef(null)

  useEffect(() => {
    if (cameraRef.current) {
      const targetX = rooms[currentRoom].position[0]
      const animate = () => {
        if (cameraRef.current) {
          const currentX = cameraRef.current.position.x
          const diff = targetX - currentX
          if (Math.abs(diff) > 0.1) {
            cameraRef.current.position.x += diff * 0.05
            requestAnimationFrame(animate)
          } else {
            cameraRef.current.position.x = targetX
          }
        }
      }
      animate()
    }
  }, [currentRoom])

  return (
    <>
      
      

      
      

      {/* Lazy load only nearby rooms for performance */}
      {currentRoom === 0 && }
      {(currentRoom === 0 || currentRoom === 1) && }
      {(currentRoom === 1 || currentRoom === 2) && }
      {(currentRoom === 2 || currentRoom === 3) && }
      {(currentRoom === 3 || currentRoom === 4) && }
      {(currentRoom === 4 || currentRoom === 5) && }

      
    
  )
}

export function House3D() {
  const [currentRoom, setCurrentRoom] = useState(0)
  const { resolvedTheme } = useTheme()
  const [mounted, setMounted] = useState(false)

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

  const isDark = mounted ? resolvedTheme === "dark" : true

  const goToPrev = () => setCurrentRoom((prev) => Math.max(0, prev - 1))
  const goToNext = () => setCurrentRoom((prev) => Math.min(rooms.length - 1, prev + 1))

  return (
    
      

      {/* UI Overlay */}
      
        
          
            {portfolioData.personal.name}
          
        
        
      

      {/* Room Navigation */}
      
        
          

          
            {rooms.map((room, i) => {
              const Icon = room.icon
              return (
                
              )
            })}
          

          
        
      

      {/* Instructions */}
      
        
          Drag to look around • Scroll to zoom • Click rooms to navigate
        
      
    
  )
}
[V0_FILE]typescriptreact:file="components/about-section.tsx"
"use client"

import { useInView } from "@/hooks/use-in-view"
import data from "@/data/portfolio.json"

export function AboutSection() {
  const { ref, inView } = useInView({ threshold: 0.2 })

  const highlightText = (text: string) => {
    let result = text
    data.about.highlights.forEach((highlight) => {
      result = result.replace(highlight, `${highlight}`)
    })
    return result
  }

  return (
    
      
        
          
            {data.about.sectionTitle}
            {data.about.heading}
            
              {data.about.paragraphs.map((paragraph, i) => (
                
              ))}
            
          

          
            
              
              
                
                  {data.about.stats.map((stat) => (
                    
                      {stat.value}
                      {stat.label}
                    
                  ))}
                
              
            
          
        
      
    
  )
}
[V0_FILE]typescriptreact:file="components/contact-section.tsx"
"use client"

import { useInView } from "@/hooks/use-in-view"
import { Mail, Github, Linkedin, MapPin, Clock } from "lucide-react"
import data from "@/data/portfolio.json"

export function ContactSection() {
  const { ref, inView } = useInView({ threshold: 0.2 })

  return (
    
      
        
          {data.contact.sectionTitle}
          {data.contact.heading}
          {data.contact.description}
        

        
          
            
              
                
              
              
                Email
                
                  {data.personal.email}
                
              
            

            
              
                
              
              
                Availability
                {data.personal.availability}
              
            

            
              
                
              
              
                Location
                {data.personal.location}
              
            
          

          
            Find me on
            
              
                
              
              
                
              
              
                
              
            
          
        

        
          {data.personal.copyright}
        
      
    
  )
}
[V0_FILE]typescriptreact:file="components/experience-section.tsx"
"use client"

import { useInView } from "@/hooks/use-in-view"
import { Briefcase, GraduationCap } from "lucide-react"
import data from "@/data/portfolio.json"

export function ExperienceSection() {
  const { ref, inView } = useInView({ threshold: 0.1 })

  return (
    
      
        
          
            {data.experience.sectionTitle}
          
          {data.experience.heading}
        

        
          {/* Timeline line */}
          

          
            {data.experience.items.map((exp, index) => (
              
                {/* Timeline dot */}
                
                  
                

                
                  
                    
                      {exp.type === "work" ? (
                        
                      ) : (
                        
                      )}
                    
                    
                      {exp.title}
                      {exp.company}
                      {exp.period}
                    
                  
                  
                    {exp.description.map((item, i) => (
                      
                        
                        {item}
                      
                    ))}
                  
                
              
            ))}
          
        
      
    
  )
}
[V0_FILE]typescriptreact:file="components/hero-section.tsx"
"use client"

import { useEffect, useState } from "react"
import { ArrowDown } from "lucide-react"
import data from "@/data/portfolio.json"

export function HeroSection() {
  const [mounted, setMounted] = useState(false)

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

  return (
    
      {/* Animated background elements */}
      
        
        
      

      
        
          {data.personal.greeting}
        

        
          {data.personal.name}
        

        
          {data.personal.title}
        

        
          {data.personal.tagline} Specializing in{" "}
          {data.personal.specializations.map((spec, i) => (
            
              {spec}
              {i < data.personal.specializations.length - 1 &&
                (i === data.personal.specializations.length - 2 ? ", and " : ", ")}
            
          ))}
          .
        

        
          
            View Projects
          
          
            Get in Touch
          
        
      

      
        
      
    
  )
}
[V0_FILE]typescriptreact:file="components/navigation.tsx"
"use client"

import { useState, useEffect } from "react"
import { cn } from "@/lib/utils"
import { Github, Linkedin, Mail } from "lucide-react"
import { ThemeToggle } from "@/components/theme-toggle"
import data from "@/data/portfolio.json"

export function Navigation() {
  const [activeSection, setActiveSection] = useState("")
  const [scrolled, setScrolled] = useState(false)

  useEffect(() => {
    const handleScroll = () => {
      setScrolled(window.scrollY > 50)

      const sections = data.navigation.map((item) => item.href.slice(1))
      const scrollPosition = window.scrollY + 100

      for (const section of sections) {
        const element = document.getElementById(section)
        if (element) {
          const offsetTop = element.offsetTop
          const offsetHeight = element.offsetHeight
          if (scrollPosition >= offsetTop && scrollPosition < offsetTop + offsetHeight) {
            setActiveSection(section)
            break
          }
        }
      }
    }

    window.addEventListener("scroll", handleScroll)
    return () => window.removeEventListener("scroll", handleScroll)
  }, [])

  return (
    
      
        
          {data.personal.name
            .split(" ")
            .map((n) => n[0])
            .join("")}
        

        
          {data.navigation.map((item) => (
            
              
                {item.name}
              
            
          ))}
        

        
          
            
          
          
            
          
          
            
          
          
        
      
    
  )
}
[V0_FILE]typescriptreact:file="components/projects-section.tsx"
"use client"

import { useInView } from "@/hooks/use-in-view"
import { ExternalLink, Github } from "lucide-react"
import data from "@/data/portfolio.json"

const projects = [
  {
    title: "UK Payroll RTI Integration",
    description:
      "Complete RTI application supporting FPS, EPS, NVR, and EYU. HMRC-compliant XML generation and submission with error handling and validation.",
    tags: ["ERPNext", "Python", "HMRC", "XML"],
    featured: true,
    github: "#",
    demo: "#",
  },
  {
    title: "Real-Time POS Order System",
    description:
      "Node.js TCP server with MongoDB. React Native TCP client for live order updates. Kitchen and table status synchronization.",
    tags: ["Node.js", "React Native", "MongoDB", "TCP"],
    featured: true,
    github: "#",
    demo: "#",
  },
  {
    title: "Smart Sales Manager",
    description:
      "Sales dashboard with analytics, customer and order management with secure login and role-based access.",
    tags: ["Flutter", "Firebase", "Analytics"],
    featured: true,
    github: "#",
    demo: "#",
  },
  {
    title: "Delivery & Map-Based Apps",
    description: "Live order tracking using flutter_map & geolocator. Draggable sheets with markers and order lists.",
    tags: ["Flutter", "Maps", "Geolocation"],
    featured: false,
    github: "#",
    demo: "#",
  },
  {
    title: "ERPNext Customizations",
    description:
      "Advanced search and filtering logic, role-based permissions for ESS and sales users, custom list pages and navigation.",
    tags: ["ERPNext", "Frappe", "Python"],
    featured: false,
    github: "#",
    demo: "#",
  },
]

export function ProjectsSection() {
  const { ref, inView } = useInView({ threshold: 0.1 })

  return (
    
      
        
          {data.projects.sectionTitle}
          {data.projects.heading}
        

        
          {data.projects.items.map((project, index) => (
            
              
                
                  
                
                
                  
                    
                  
                  
                    
                  
                
              

              
                {project.title}
              
              {project.description}

              
                {project.tags.map((tag) => (
                  
                    {tag}
                  
                ))}
              
            
          ))}
        
      
    
  )
}
[V0_FILE]typescriptreact:file="components/skills-section.tsx"
"use client"

import { useInView } from "@/hooks/use-in-view"
import data from "@/data/portfolio.json"

export function SkillsSection() {
  const { ref, inView } = useInView({ threshold: 0.1 })

  return (
    
      
        
          {data.skills.sectionTitle}
          {data.skills.heading}
        

        
          {data.skills.categories.map((category, categoryIndex) => (
            
              {category.title}
              
                {category.skills.map((skill) => (
                  
                    
                    {skill}
                  
                ))}
              
            
          ))}
        
      
    
  )
}
[V0_FILE]typescriptreact:file="components/theme-provider.tsx"
'use client'

import * as React from 'react'
import {
  ThemeProvider as NextThemesProvider,
  type ThemeProviderProps,
} from 'next-themes'

export function ThemeProvider({ children, ...props }: ThemeProviderProps) {
  return {children}
}
[V0_FILE]typescriptreact:file="components/theme-toggle.tsx"
"use client"

import { Moon, Sun } from "lucide-react"
import { useTheme } from "next-themes"
import { useEffect, useState } from "react"
import { Button } from "@/components/ui/button"

export function ThemeToggle() {
  const { theme, setTheme } = useTheme()
  const [mounted, setMounted] = useState(false)

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

  if (!mounted) {
    return (
      
    )
  }

  return (
    
  )
}
[V0_FILE]typescriptreact:file="components/ui/button.tsx"
import * as React from 'react'
import { Slot } from '@radix-ui/react-slot'
import { cva, type VariantProps } from 'class-variance-authority'

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

const buttonVariants = cva(
  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
  {
    variants: {
      variant: {
        default: 'bg-primary text-primary-foreground hover:bg-primary/90',
        destructive:
          'bg-destructive text-white hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60',
        outline:
          'border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50',
        secondary:
          'bg-secondary text-secondary-foreground hover:bg-secondary/80',
        ghost:
          'hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50',
        link: 'text-primary underline-offset-4 hover:underline',
      },
      size: {
        default: 'h-9 px-4 py-2 has-[>svg]:px-3',
        sm: 'h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5',
        lg: 'h-10 rounded-md px-6 has-[>svg]:px-4',
        icon: 'size-9',
        'icon-sm': 'size-8',
        'icon-lg': 'size-10',
      },
    },
    defaultVariants: {
      variant: 'default',
      size: 'default',
    },
  },
)

function Button({
  className,
  variant,
  size,
  asChild = false,
  ...props
}: React.ComponentProps<'button'> &
  VariantProps & {
    asChild?: boolean
  }) {
  const Comp = asChild ? Slot : 'button'

  return (
    
  )
}

export { Button, buttonVariants }
[V0_FILE]json:file="data/portfolio.json"
{
  "personal": {
    "name": "Muhammad Saad",
    "title": "Software Engineer",
    "greeting": "Hello, I'm",
    "tagline": "I build accessible, pixel-perfect digital experiences.",
    "specializations": ["ERPNext", "Flutter", "React Native", "Backend Integrations"],
    "email": "muhammadsaadsafdar2005@gmail.com",
    "github": "https://github.com/saadsafda",
    "linkedin": "https://linkedin.com/in/muhammad-saad2005/",
    "location": "Available for Remote Work",
    "availability": "Open to morning opportunities",
    "copyright": "© 2025 Muhammad Saad. All rights reserved."
  },
  "navigation": [
    { "name": "About", "href": "#about" },
    { "name": "Skills", "href": "#skills" },
    { "name": "Experience", "href": "#experience" },
    { "name": "Projects", "href": "#projects" },
    { "name": "Contact", "href": "#contact" }
  ],
  "about": {
    "sectionTitle": "About Me",
    "heading": "Building real-world business solutions",
    "paragraphs": [
      "I am a software engineer with strong hands-on experience in ERPNext/Frappe development, mobile applications, and system integrations.",
      "I work on real-world business solutions including payroll systems, HMRC RTI integrations, POS real-time systems, and data-driven mobile applications.",
      "I prefer clean architecture, scalable solutions, and practical problem-solving."
    ],
    "highlights": ["clean architecture", "scalable solutions", "practical problem-solving"],
    "stats": [
      { "value": "5+", "label": "Years Experience" },
      { "value": "20+", "label": "Projects Completed" },
      { "value": "10+", "label": "Technologies" },
      { "value": "100%", "label": "Client Satisfaction" }
    ]
  },
  "skills": {
    "sectionTitle": "Skills",
    "heading": "Technologies I Work With",
    "categories": [
      {
        "title": "Backend & ERP",
        "skills": [
          "ERPNext / Frappe Framework",
          "Python",
          "HMRC RTI (FPS, EPS, NVR, EYU)",
          "UK Payroll Systems",
          "REST APIs & Webhooks"
        ]
      },
      {
        "title": "Mobile Development",
        "skills": ["Flutter", "React Native", "Socket.IO & TCP", "Maps & Location Tracking", "Background Services"]
      },
      {
        "title": "Frontend",
        "skills": ["React.js", "HTMX", "Data Tables & Forms", "Responsive Design", "UI/UX Implementation"]
      },
      {
        "title": "Databases & Tools",
        "skills": ["MySQL / MariaDB", "MongoDB", "Git", "Postman", "Windows & macOS"]
      }
    ]
  },
  "experience": {
    "sectionTitle": "Experience",
    "heading": "My Professional Journey",
    "items": [
      {
        "type": "work",
        "title": "Software Engineer",
        "company": "Private Company",
        "period": "Present",
        "description": [
          "Developed and customized ERPNext modules for HR, Payroll, Sales, and Inventory",
          "Built a complete UK Payroll RTI solution integrated with HMRC",
          "Designed Postman collections for RTI testing (TPVS, ETS, LTS)",
          "Implemented permission logic, advanced filtering, and custom workflows in Frappe"
        ]
      },
      {
        "type": "education",
        "title": "Computer Science Student",
        "company": "University of Karachi",
        "period": "Ongoing",
        "description": ["Studying computer science fundamentals", "Building practical projects alongside coursework"]
      }
    ]
  },
  "projects": {
    "sectionTitle": "Projects",
    "heading": "Featured Work",
    "items": [
      {
        "title": "UK Payroll RTI Integration",
        "description": "Complete RTI application supporting FPS, EPS, NVR, and EYU. HMRC-compliant XML generation and submission with error handling and validation.",
        "tags": ["ERPNext", "Python", "HMRC", "XML"],
        "featured": true,
        "github": "#",
        "demo": "#"
      },
      {
        "title": "Real-Time POS Order System",
        "description": "Node.js TCP server with MongoDB. React Native TCP client for live order updates. Kitchen and table status synchronization.",
        "tags": ["Node.js", "React Native", "MongoDB", "TCP"],
        "featured": true,
        "github": "#",
        "demo": "#"
      },
      {
        "title": "Smart Sales Manager",
        "description": "Sales dashboard with analytics, customer and order management with secure login and role-based access.",
        "tags": ["Flutter", "Firebase", "Analytics"],
        "featured": true,
        "github": "#",
        "demo": "#"
      },
      {
        "title": "Delivery & Map-Based Apps",
        "description": "Live order tracking using flutter_map & geolocator. Draggable sheets with markers and order lists.",
        "tags": ["Flutter", "Maps", "Geolocation"],
        "featured": false,
        "github": "#",
        "demo": "#"
      },
      {
        "title": "ERPNext Customizations",
        "description": "Advanced search and filtering logic, role-based permissions for ESS and sales users, custom list pages and navigation.",
        "tags": ["ERPNext", "Frappe", "Python"],
        "featured": false,
        "github": "#",
        "demo": "#"
      }
    ]
  },
  "contact": {
    "sectionTitle": "Contact",
    "heading": "Let's Work Together",
    "description": "I'm currently open to freelance and contract-based work. If you have a project in mind, let's talk!"
  }
}
[V0_FILE]typescript:file="hooks/use-in-view.ts"
"use client"

import { useEffect, useRef, useState } from "react"

interface UseInViewOptions {
  threshold?: number
  rootMargin?: string
}

export function useInView({ threshold = 0.1, rootMargin = "0px" }: UseInViewOptions = {}) {
  const ref = useRef(null)
  const [inView, setInView] = useState(false)

  useEffect(() => {
    const element = ref.current
    if (!element) return

    const observer = new IntersectionObserver(
      ([entry]) => {
        if (entry.isIntersecting) {
          setInView(true)
        }
      },
      { threshold, rootMargin },
    )

    observer.observe(element)

    return () => {
      observer.unobserve(element)
    }
  }, [threshold, rootMargin])

  return { ref, inView }
}
[V0_FILE]typescript:file="lib/utils.ts"
import { clsx, type ClassValue } from 'clsx'
import { twMerge } from 'tailwind-merge'

export function cn(...inputs: ClassValue[]) {
  return twMerge(clsx(inputs))
}
[V0_FILE]javascript:file="next.config.mjs"
/** @type {import('next').NextConfig} */
const nextConfig = {
  typescript: {
    ignoreBuildErrors: true,
  },
  images: {
    unoptimized: true,
  },
  // Performance optimizations
  compiler: {
    removeConsole: process.env.NODE_ENV === 'production',
  },
  swcMinify: true,
  reactStrictMode: true,
  poweredByHeader: false,
}

export default nextConfig
[V0_FILE]json:file="package.json"
{
  "name": "my-v0-project",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "build": "next build",
    "dev": "next dev",
    "lint": "eslint .",
    "start": "next start"
  },
  "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",
    "@react-three/drei": "10.7.7",
    "@react-three/fiber": "9.4.2",
    "@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",
    "expo": "latest",
    "expo-asset": "latest",
    "expo-file-system": "latest",
    "expo-gl": "latest",
    "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-native": "latest",
    "react-resizable-panels": "^2.1.7",
    "recharts": "2.15.4",
    "sonner": "^1.7.4",
    "tailwind-merge": "^3.3.1",
    "tailwindcss-animate": "^1.0.7",
    "three": "latest",
    "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]javascript:file="postcss.config.mjs"
/** @type {import('postcss-load-config').Config} */
const config = {
  plugins: {
    '@tailwindcss/postcss': {},
  },
}

export default config
[V0_FILE]css:file="styles/globals.css"
@import 'tailwindcss';
@import 'tw-animate-css';

@custom-variant dark (&:is(.dark *));

:root {
  --background: oklch(1 0 0);
  --foreground: oklch(0.145 0 0);
  --card: oklch(1 0 0);
  --card-foreground: oklch(0.145 0 0);
  --popover: oklch(1 0 0);
  --popover-foreground: oklch(0.145 0 0);
  --primary: oklch(0.205 0 0);
  --primary-foreground: oklch(0.985 0 0);
  --secondary: oklch(0.97 0 0);
  --secondary-foreground: oklch(0.205 0 0);
  --muted: oklch(0.97 0 0);
  --muted-foreground: oklch(0.556 0 0);
  --accent: oklch(0.97 0 0);
  --accent-foreground: oklch(0.205 0 0);
  --destructive: oklch(0.577 0.245 27.325);
  --destructive-foreground: oklch(0.577 0.245 27.325);
  --border: oklch(0.922 0 0);
  --input: oklch(0.922 0 0);
  --ring: oklch(0.708 0 0);
  --chart-1: oklch(0.646 0.222 41.116);
  --chart-2: oklch(0.6 0.118 184.704);
  --chart-3: oklch(0.398 0.07 227.392);
  --chart-4: oklch(0.828 0.189 84.429);
  --chart-5: oklch(0.769 0.188 70.08);
  --radius: 0.625rem;
  --sidebar: oklch(0.985 0 0);
  --sidebar-foreground: oklch(0.145 0 0);
  --sidebar-primary: oklch(0.205 0 0);
  --sidebar-primary-foreground: oklch(0.985 0 0);
  --sidebar-accent: oklch(0.97 0 0);
  --sidebar-accent-foreground: oklch(0.205 0 0);
  --sidebar-border: oklch(0.922 0 0);
  --sidebar-ring: oklch(0.708 0 0);
}

.dark {
  --background: oklch(0.145 0 0);
  --foreground: oklch(0.985 0 0);
  --card: oklch(0.145 0 0);
  --card-foreground: oklch(0.985 0 0);
  --popover: oklch(0.145 0 0);
  --popover-foreground: oklch(0.985 0 0);
  --primary: oklch(0.985 0 0);
  --primary-foreground: oklch(0.205 0 0);
  --secondary: oklch(0.269 0 0);
  --secondary-foreground: oklch(0.985 0 0);
  --muted: oklch(0.269 0 0);
  --muted-foreground: oklch(0.708 0 0);
  --accent: oklch(0.269 0 0);
  --accent-foreground: oklch(0.985 0 0);
  --destructive: oklch(0.396 0.141 25.723);
  --destructive-foreground: oklch(0.637 0.237 25.331);
  --border: oklch(0.269 0 0);
  --input: oklch(0.269 0 0);
  --ring: oklch(0.439 0 0);
  --chart-1: oklch(0.488 0.243 264.376);
  --chart-2: oklch(0.696 0.17 162.48);
  --chart-3: oklch(0.769 0.188 70.08);
  --chart-4: oklch(0.627 0.265 303.9);
  --chart-5: oklch(0.645 0.246 16.439);
  --sidebar: oklch(0.205 0 0);
  --sidebar-foreground: oklch(0.985 0 0);
  --sidebar-primary: oklch(0.488 0.243 264.376);
  --sidebar-primary-foreground: oklch(0.985 0 0);
  --sidebar-accent: oklch(0.269 0 0);
  --sidebar-accent-foreground: oklch(0.985 0 0);
  --sidebar-border: oklch(0.269 0 0);
  --sidebar-ring: oklch(0.439 0 0);
}

@theme inline {
  --font-sans: 'Geist', 'Geist Fallback';
  --font-mono: 'Geist Mono', 'Geist Mono Fallback';
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --color-card: var(--card);
  --color-card-foreground: var(--card-foreground);
  --color-popover: var(--popover);
  --color-popover-foreground: var(--popover-foreground);
  --color-primary: var(--primary);
  --color-primary-foreground: var(--primary-foreground);
  --color-secondary: var(--secondary);
  --color-secondary-foreground: var(--secondary-foreground);
  --color-muted: var(--muted);
  --color-muted-foreground: var(--muted-foreground);
  --color-accent: var(--accent);
  --color-accent-foreground: var(--accent-foreground);
  --color-destructive: var(--destructive);
  --color-destructive-foreground: var(--destructive-foreground);
  --color-border: var(--border);
  --color-input: var(--input);
  --color-ring: var(--ring);
  --color-chart-1: var(--chart-1);
  --color-chart-2: var(--chart-2);
  --color-chart-3: var(--chart-3);
  --color-chart-4: var(--chart-4);
  --color-chart-5: var(--chart-5);
  --radius-sm: calc(var(--radius) - 4px);
  --radius-md: calc(var(--radius) - 2px);
  --radius-lg: var(--radius);
  --radius-xl: calc(var(--radius) + 4px);
  --color-sidebar: var(--sidebar);
  --color-sidebar-foreground: var(--sidebar-foreground);
  --color-sidebar-primary: var(--sidebar-primary);
  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
  --color-sidebar-accent: var(--sidebar-accent);
  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
  --color-sidebar-border: var(--sidebar-border);
  --color-sidebar-ring: var(--sidebar-ring);
}

@layer base {
  * {
    @apply border-border outline-ring/50;
  }
  body {
    @apply bg-background text-foreground;
  }
}
[V0_FILE]json:file="tsconfig.json"
{
  "compilerOptions": {
    "lib": [
      "dom",
      "dom.iterable",
      "esnext"
    ],
    "allowJs": true,
    "target": "ES6",
    "skipLibCheck": true,
    "strict": true,
    "noEmit": true,
    "esModuleInterop": true,
    "module": "esnext",
    "moduleResolution": "bundler",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "jsx": "react-jsx",
    "incremental": true,
    "plugins": [
      {
        "name": "next"
      }
    ],
    "paths": {
      "@/*": [
        "./*"
      ]
    }
  },
  "include": [
    "next-env.d.ts",
    "**/*.ts",
    "**/*.tsx",
    ".next/types/**/*.ts",
    ".next/dev/types/**/*.ts"
  ],
  "exclude": [
    "node_modules"
  ]
}
[V0_FILE]png:file="public/apple-icon.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_w2srCgwuAT9g7jumdF85uwQqPCyJ/IbCKqe8aOyKCr3C9s15usz/public/apple-icon.png"
[V0_FILE]png:file="public/icon-dark-32x32.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_w2srCgwuAT9g7jumdF85uwQqPCyJ/_NLAIkeVwoL6vEzK2uSXmZ/public/icon-dark-32x32.png"
[V0_FILE]png:file="public/icon-light-32x32.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_w2srCgwuAT9g7jumdF85uwQqPCyJ/DVnRdScnZe8NA9byc6_b4H/public/icon-light-32x32.png"
[V0_FILE]xml:file="public/icon.svg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_w2srCgwuAT9g7jumdF85uwQqPCyJ/l2-w3jDSPuRqpmK6lDq3GH/public/icon.svg"
[V0_FILE]png:file="public/placeholder-logo.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_w2srCgwuAT9g7jumdF85uwQqPCyJ/1uv3SMJqY6_jxcFCTgTEak/public/placeholder-logo.png"
[V0_FILE]xml:file="public/placeholder-logo.svg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_w2srCgwuAT9g7jumdF85uwQqPCyJ/XB_XF8ESrwbAjotfOd5Wmb/public/placeholder-logo.svg"
[V0_FILE]jpg:file="public/placeholder-user.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_w2srCgwuAT9g7jumdF85uwQqPCyJ/ONejAluG3EJATcwwA61bXn/public/placeholder-user.jpg"
[V0_FILE]jpg:file="public/placeholder.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_w2srCgwuAT9g7jumdF85uwQqPCyJ/BlrBc_c6JuPtjsBHFMcNJn/public/placeholder.jpg"
[V0_FILE]xml:file="public/placeholder.svg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_w2srCgwuAT9g7jumdF85uwQqPCyJ/J0QvC3Vjlpi92ZtRdLC4Mx/public/placeholder.svg"