[V0_FILE]typescriptreact:file="components/header.tsx" isEdit="true" isMerged="true" "use client" import { useState, useEffect } from "react" import Link from "next/link" import { usePathname } from "next/navigation" import { ModeToggle } from "@/components/mode-toggle" import { Button } from "@/components/ui/button" import { Menu, X } from "lucide-react" import { motion, AnimatePresence } from "framer-motion" import { cn } from "@/lib/utils" export default function Header() { const pathname = usePathname() const [isScrolled, setIsScrolled] = useState(false) const [mobileMenuOpen, setMobileMenuOpen] = useState(false) useEffect(() => { const handleScroll = () => { setIsScrolled(window.scrollY > 10) } window.addEventListener("scroll", handleScroll) return () => window.removeEventListener("scroll", handleScroll) }, []) const navItems = [ { name: "Home", href: "#" }, { name: "Skills", href: "#skills" }, { name: "Experience", href: "#experience" }, { name: "Projects", href: "#projects" }, { name: "Publications", href: "#publications" }, { name: "Education", href: "#education" }, { name: "Contact", href: "#contact" }, ] return (
Shaquille Williams
AI Engineer & Community Builder
{mobileMenuOpen && (
{navItems.map((item, index) => ( setMobileMenuOpen(false)} > {item.name} ))}
)}
) } [V0_FILE]typescriptreact:file="components/mode-toggle.tsx" isEdit="true" isQuickEdit="true" isMerged="true" "use client" import { Moon, Sun } from "lucide-react" import { useTheme } from "next-themes" import { Button } from "@/components/ui/button" import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@/components/ui/dropdown-menu" export function ModeToggle() { const { setTheme, theme } = useTheme() return ( setTheme("light")} className="cursor-pointer"> Light setTheme("dark")} className="cursor-pointer"> Dark setTheme("system")} className="cursor-pointer"> 💻 System ) } [V0_FILE]typescriptreact:file="components/skills.tsx" isEdit="true" isMerged="true" "use client" import { useState, useEffect, useRef } from "react" import { Search, Laptop, Code, Cpu, Database, Cloud, BookOpen, PenToolIcon as Tool, Heart, Microscope, } from "lucide-react" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { motion, AnimatePresence } from "framer-motion" import { cn } from "@/lib/utils" import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip" type SkillLevel = "All" | "Expert" | "Advanced" | "Intermediate" // Skill data const skillCategories = [ { icon: , title: "Machine Learning & AI", skills: [ { name: "Computer Vision", level: "Advanced", color: "blue", years: 3 }, { name: "Reinforcement Learning", level: "Advanced", color: "blue", years: 3 }, { name: "MLOps", level: "Intermediate", color: "blue", years: 1.5 }, { name: "Deep Learning", level: "Expert", color: "green", years: 5 }, { name: "NLP", level: "Expert", color: "green", years: 4.5 }, { name: "Voice Cloning", level: "Advanced", color: "blue", years: 2.5 }, { name: "Generative AI", level: "Advanced", color: "green", years: 3 }, ], }, { icon:
,
    title: "Programming & Development",
    skills: [
      { name: "Python", level: "Expert", color: "blue", years: 6 },
      { name: "C++", level: "Advanced", color: "blue", years: 4 },
      { name: "JavaScript/TypeScript", level: "Expert", color: "blue", years: 5 },
      { name: "SQL", level: "Advanced", color: "blue", years: 4 },
      { name: "R", level: "Intermediate", color: "blue", years: 2 },
      { name: "MATLAB", level: "Intermediate", color: "yellow", years: 2 },
      { name: "Julia", level: "Intermediate", color: "yellow", years: 1.5 },
    ],
  },
  {
    icon: ,
    title: "AI Frameworks & Tools",
    skills: [
      { name: "PyTorch", level: "Expert", color: "green", years: 5 },
      { name: "TensorFlow", level: "Expert", color: "green", years: 5 },
      { name: "Scikit-learn", level: "Expert", color: "green", years: 6 },
      { name: "Hugging Face", level: "Advanced", color: "green", years: 3 },
      { name: "CUDA", level: "Advanced", color: "blue", years: 3 },
      { name: "TensorRT", level: "Intermediate", color: "blue", years: 2 },
      { name: "MLflow", level: "Advanced", color: "blue", years: 3 },
    ],
  },
  {
    icon: ,
    title: "Data Science & Analytics",
    skills: [
      { name: "Data Mining", level: "Advanced", color: "blue", years: 4 },
      { name: "Business Intelligence", level: "Intermediate", color: "blue", years: 2 },
      { name: "Big Data Processing", level: "Advanced", color: "blue", years: 3 },
      { name: "Pandas", level: "Expert", color: "blue", years: 5 },
      { name: "Tableau", level: "Intermediate", color: "blue", years: 2 },
      { name: "Data Visualization", level: "Advanced", color: "green", years: 4 },
      { name: "Predictive Modeling", level: "Expert", color: "green", years: 5 },
    ],
  },
  {
    icon: ,
    title: "Cloud & Infrastructure",
    skills: [
      { name: "GCP", level: "Advanced", color: "blue", years: 3 },
      { name: "Kubernetes", level: "Advanced", color: "blue", years: 3 },
      { name: "CI/CD", level: "Intermediate", color: "blue", years: 2 },
      { name: "Microservices", level: "Intermediate", color: "blue", years: 2 },
      { name: "DevOps", level: "Intermediate", color: 'blue", years:  color: "blue', years: 2 },
      { name: "DevOps", level: "Intermediate", color: "blue", years: 2 },
      { name: "AWS", level: "Advanced", color: "blue", years: 4 },
      { name: "Docker", level: "Expert", color: "blue", years: 4 },
    ],
  },
  {
    icon: ,
    title: "Research & Analysis",
    skills: [
      { name: "Grant Writing", level: "Advanced", color: "blue", years: 3 },
      { name: "Peer Review", level: "Advanced", color: "blue", years: 4 },
      { name: "Research Methods", level: "Expert", color: "green", years: 5 },
      { name: "Experimental Design", level: "Advanced", color: "green", years: 4 },
      { name: "Scientific Writing", level: "Expert", color: "green", years: 5 },
    ],
  },
  {
    icon: ,
    title: "Tools & Technologies",
    skills: [
      { name: "SolidWorks", level: "Intermediate", color: "blue", years: 2 },
      { name: "AutoCAD", level: "Intermediate", color: "blue", years: 2 },
      { name: "Arduino", level: "Intermediate", color: "blue", years: 3 },
      { name: "Git/GitHub", level: "Expert", color: "green", years: 5 },
      { name: "Linux/Unix", level: "Advanced", color: "green", years: 4 },
      { name: "Raspberry Pi", level: "Intermediate", color: "green", years: 3 },
    ],
  },
  {
    icon: ,
    title: "Soft Skills",
    skills: [
      { name: "Technical Writing", level: "Expert", color: "green", years: 6 },
      { name: "Public Speaking", level: "Advanced", color: "green", years: 4 },
      { name: "Project Management", level: "Advanced", color: "green", years: 5 },
      { name: "Team Leadership", level: "Expert", color: "green", years: 5 },
      { name: "Mentoring", level: "Expert", color: "green", years: 4 },
      { name: "Problem Solving", level: "Expert", color: "green", years: 6 },
      { name: "Critical Thinking", level: "Expert", color: "green", years: 6 },
    ],
  },
  {
    icon: ,
    title: "Physics & Mathematics",
    skills: [
      { name: "Complex Analysis", level: "Advanced", color: "blue", years: 4 },
      { name: "Group Theory", level: "Advanced", color: "blue", years: 3 },
      { name: "Quantum Mechanics", level: "Advanced", color: "blue", years: 4 },
      { name: "Statistical Mechanics", level: "Advanced", color: "blue", years: 4 },
      { name: "Mathematical Physics", level: "Advanced", color: "blue", years: 4 },
      { name: "Differential Equations", level: "Expert", color: "green", years: 5 },
      { name: "Linear Algebra", level: "Expert", color: "green", years: 5 },
    ],
  },
]

export default function Skills() {
  const [searchQuery, setSearchQuery] = useState("")
  const [selectedLevel, setSelectedLevel] = useState("All")
  const [hoveredSkill, setHoveredSkill] = useState(null)
  const [isSearchFocused, setIsSearchFocused] = useState(false)
  const searchRef = useRef(null)

  // Handle keyboard shortcut for search
  useEffect(() => {
    const handleKeyDown = (e: KeyboardEvent) => {
      // Ctrl+K or Cmd+K to focus search
      if ((e.ctrlKey || e.metaKey) && e.key === "k") {
        e.preventDefault()
        searchRef.current?.focus()
      }
    }

    window.addEventListener("keydown", handleKeyDown)
    return () => window.removeEventListener("keydown", handleKeyDown)
  }, [])

  return (
    
      
        Technical Skills
        
          A comprehensive overview of my technical expertise across various domains, from machine learning and AI to
          software development and research.
        
      

      
        
          
           setSearchQuery(e.target.value)}
            onFocus={() => setIsSearchFocused(true)}
            onBlur={() => setIsSearchFocused(false)}
          />
        

        
          
          
          
          
        
      

      
        
          {skillCategories.map((category, categoryIndex) => {
            // Filter skills based on search and level
            const filteredSkills = category.skills.filter((skill) => {
              const matchesSearch = skill.name.toLowerCase().includes(searchQuery.toLowerCase())
              const matchesLevel = selectedLevel === "All" || skill.level === selectedLevel
              return matchesSearch && matchesLevel
            })

            // Skip rendering if no skills match the filters
            if (filteredSkills.length === 0) return null

            return (
              
                
                  
                    {category.icon}
                  
                  {category.title}
                

                
                  
                    {filteredSkills.map((skill, skillIndex) => (
                       setHoveredSkill(skill.name)}
                        onHoverEnd={() => setHoveredSkill(null)}
                      >
                        
                          
                            
                              {skill.name}
                            
                          
                          
                            
                              {skill.name}
                              
                                {skill.level} • {skill.years} {skill.years === 1 ? "year" : "years"}
                              
                            
                          
                        
                      
                    ))}
                  
                
              
            )
          })}
        
      

      
        
          Expert
          4+ years
        
        
          Advanced
          2-4 years
        
        
          Intermediate
          1-2 years
        
      
    
  )
}

[V0_FILE]typescriptreact:file="components/experience.tsx" isMerged="true"
import { Calendar, Building, Trophy, Cpu } from "lucide-react"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"

export default function Experience() {
  return (
    
      Professional Journey

      
        

        
      
    
  )
}

interface ExperienceCardProps {
  title: string
  company: string
  period: string
  achievements: string[]
  technologies: string[]
  impact: {
    title: string
    description: string
    metrics: {
      value: string
      label: string
    }[]
  }
  bgColor: string
}

function ExperienceCard({ title, company, period, achievements, technologies, impact, bgColor }: ExperienceCardProps) {
  return (
    
      
        {title}
        
          
            
            {company}
          
          
            
            {period}
          
        
      
      
        
          
            
              
              Key Achievements
            
            
              {achievements.map((achievement, index) => (
                
                  •
                  {achievement}
                
              ))}
            
          

          
            
              
              Technologies & Skills
            
            
              {technologies.map((tech, index) => (
                
                  {tech}
                
              ))}
            

            {impact.title && (
              <>
                {impact.title}
                {impact.description}

                
                  {impact.metrics.map((metric, index) => (
                    
                      {metric.value}
                      {metric.label}
                    
                  ))}
                
              
            )}
          
        
      
    
  )
}

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

import { useState } from "react"
import { Github, ExternalLink, Code, Star, Search, X, Calendar, Users } from "lucide-react"
import { Card } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from "@/components/ui/dialog"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { ScrollArea } from "@/components/ui/scroll-area"
import { motion, AnimatePresence } from "framer-motion"
import Image from "next/image"
import { useToast } from "@/components/ui/use-toast"

// Project data
const projects = [
  {
    id: 1,
    title: "Voice Cloning & Audio Processing Suite",
    category: "Audio Processing & AI",
    description:
      "Comprehensive audio processing system including real-time voice cloning, multilingual transcription, and speaker diarization.",
    technologies: ["TensorFlow TTS", "PyTorch", "Whisper", "FastAPI", "React"],
    difficulty: 5,
    completed: "2023",
    teamSize: 3,
    featured: true,
    demoUrl: "#",
    githubUrl: "#",
    images: [
      "/placeholder.svg?height=400&width=600",
      "/placeholder.svg?height=400&width=600",
      "/placeholder.svg?height=400&width=600",
    ],
    details:
      "A comprehensive voice cloning system that allows for real-time audio processing with minimal latency. The system uses state-of-the-art deep learning models to generate natural-sounding speech that matches the target voice.",
  },
  {
    id: 2,
    title: "DALL-E 2 PyTorch Implementation",
    category: "Generative AI",
    description: "Open-source implementation of OpenAI's DALL-E 2 image generation model using PyTorch.",
    technologies: ["PyTorch", "CUDA", "Docker"],
    difficulty: 5,
    completed: "2023-03-01",
    teamSize: 2,
    featured: false,
    demoUrl: "#",
    githubUrl: "#",
    images: ["/placeholder.svg?height=400&width=600", "/placeholder.svg?height=400&width=600"],
    details:
      "A PyTorch implementation of the DALL-E 2 architecture for generating high-quality images from text descriptions. The project includes optimizations for CUDA acceleration and containerization with Docker.",
  },
  {
    id: 3,
    title: "Multi-Agent RL Environment",
    category: "Reinforcement Learning",
    description: "A flexible environment for training and evaluating multi-agent reinforcement learning algorithms.",
    technologies: ["Python", "TensorFlow", "OpenAI Gym"],
    difficulty: 4,
    completed: "2023-01-20",
    teamSize: 2,
    featured: false,
    demoUrl: "#",
    githubUrl: "#",
    images: ["/placeholder.svg?height=400&width=600"],
    details:
      "A customizable environment for developing and testing multi-agent reinforcement learning algorithms. The system supports various reward structures, observation spaces, and agent interactions.",
  },
  {
    id: 4,
    title: "Community Grant Management System",
    category: "Full-Stack Development",
    description: "Web application for managing community grant applications, reviews, and distributions.",
    technologies: ["Next.js", "PostgreSQL", "AWS", "TypeScript"],
    difficulty: 3,
    completed: "2022-11-15",
    teamSize: 2,
    featured: false,
    demoUrl: "#",
    githubUrl: "#",
    images: ["/placeholder.svg?height=400&width=600"],
    details:
      "A full-stack web application that streamlines the process of managing community grants from application to distribution. The system includes features for application submission, review workflows, and financial tracking.",
  },
  {
    id: 5,
    title: "Wikipedia Connection Finder",
    category: "Network Analysis",
    description: "Tool for finding the shortest path between any two Wikipedia articles through hyperlinks.",
    technologies: ["Python", "NetworkX", "Flask"],
    difficulty: 3,
    completed: "2022-08-10",
    teamSize: 1,
    featured: false,
    demoUrl: "#",
    githubUrl: "#",
    images: ["/placeholder.svg?height=400&width=600"],
    details:
      "An application that analyzes the network structure of Wikipedia to find the shortest path between any two articles. The tool uses graph theory algorithms to navigate through the complex web of hyperlinks.",
  },
  {
    id: 6,
    title: "NYC Education Analytics",
    category: "Data Science",
    description: "Data analysis and visualization platform for NYC public school performance metrics.",
    technologies: ["Python", "Pandas", "Scikit-learn", "Tableau"],
    difficulty: 4,
    completed: "2022-05-22",
    teamSize: 4,
    featured: false,
    demoUrl: "#",
    githubUrl: "#",
    images: ["/placeholder.svg?height=400&width=600"],
    details:
      "A comprehensive data analysis platform that processes and visualizes performance metrics from NYC public schools. The system includes predictive models for identifying at-risk students and schools that need additional resources.",
  },
]

// Filter types
type CategoryFilter = string | null
type DifficultyFilter = number | null
type TeamSizeFilter = number | null

export default function Projects() {
  const [searchQuery, setSearchQuery] = useState("")
  const [categoryFilter, setCategoryFilter] = useState(null)
  const [difficultyFilter, setDifficultyFilter] = useState(null)
  const [teamSizeFilter, setTeamSizeFilter] = useState(null)
  const [selectedProject, setSelectedProject] = useState<(typeof projects)[0] | null>(null)
  const [isDialogOpen, setIsDialogOpen] = useState(false)
  const { toast } = useToast()

  const featuredProject = projects.find((project) => project.featured)

  // Filter projects based on search and filters
  const filteredProjects = projects.filter((project) => {
    const matchesSearch =
      project.title.toLowerCase().includes(searchQuery.toLowerCase()) ||
      project.description.toLowerCase().includes(searchQuery.toLowerCase()) ||
      project.technologies.some((tech) => tech.toLowerCase().includes(searchQuery.toLowerCase()))

    const matchesCategory = !categoryFilter || project.category === categoryFilter
    const matchesDifficulty = !difficultyFilter || project.difficulty === difficultyFilter
    const matchesTeamSize = !teamSizeFilter || project.teamSize === teamSizeFilter

    return matchesSearch && matchesCategory && matchesDifficulty && matchesTeamSize
  })

  // Get unique categories for filter
  const categories = Array.from(new Set(projects.map((project) => project.category)))

  // Reset all filters
  const resetFilters = () => {
    setSearchQuery("")
    setCategoryFilter(null)
    setDifficultyFilter(null)
    setTeamSizeFilter(null)
  }

  // Handle demo click
  const handleDemoClick = (url: string) => {
    toast({
      title: "Demo Link",
      description: "Opening demo in a new tab...",
      duration: 3000,
    })
    window.open(url, "_blank")
  }

  return (
    
      
        Projects
        
          Explore my portfolio of AI, machine learning, and software development projects. Each project demonstrates
          different skills and technologies.
        
      

      {featuredProject && (
        
          
            Featured Project
          

          
            
              
                
                  
                  
                    
                      {featuredProject.category}
                      {featuredProject.title}
                    
                  
                

                
                  {featuredProject.description}

                  
                    {featuredProject.technologies.map((tech, index) => (
                      
                        {tech}
                      
                    ))}
                  

                  
                    
                      
                      Completed: {featuredProject.completed}
                    
                    
                      
                      Team Size: {featuredProject.teamSize}
                    
                    
                      
                      
                        {Array.from({ length: 5 }).map((_, i) => (
                          
                        ))}
                      
                    
                  

                  
                    
                    
                    
                  

                

              

            
          
        

      )}

      
        
          
            
             setSearchQuery(e.target.value)}
            />
          

          
            

            

            
          
        

        {filteredProjects.length === 0 ? (
          
            No projects match your filters. Try adjusting your search criteria.
            
          
        ) : (
          
            
              {filteredProjects
                .filter((p) => !p.featured)
                .map((project, index) => (
                  
                    
                      {project.category}
                      {project.title}
                      {project.description}

                      
                        {project.technologies.slice(0, 3).map((tech, i) => (
                          
                            {tech}
                          
                        ))}
                        {project.technologies.length > 3 && (
                          
                            +{project.technologies.length - 3} more
                          
                        )}
                      

                      
                        
                          {Array.from({ length: 5 }).map((_, i) => (
                            
                          ))}
                        
                        Team: {project.teamSize}
                      

                      
                    
                  
                ))}
            
          
        )}
      

      
        
          {selectedProject && (
            
              
                
                  
                    {selectedProject.category}
                    {selectedProject.title}
                    {selectedProject.description}
                  
                  
                    {Array.from({ length: 5 }).map((_, i) => (
                      
                    ))}
                  
                
              

              
                
                  Overview
                  Gallery
                  Interactive Demo
                

                
                  
                    
                      
                        Project Details
                        {selectedProject.details}

                        Technologies
                        
                          {selectedProject.technologies.map((tech, index) => (
                            
                              {tech}
                            
                          ))}
                        

                        
                          
                          
                        
                      

                      
                        Project Info
                        
                          
                            Completed
                            {selectedProject.completed}
                          
                          
                            Team Size
                            {selectedProject.teamSize} people
                          
                          
                            Difficulty
                            
                              {Array.from({ length: 5 }).map((_, i) => (
                                
                              ))}
                            
                          
                        
                      
                    
                  

                  
                    
                      {selectedProject.images.map((image, index) => (
                        
                          
                        
                      ))}
                    
                  

                  
                    
                      
                        Interactive Demo
                        
                          Experience the project firsthand with our interactive demo.
                        
                        
                      
                    
                  
                
              
            
          )}
        
      
    

  )
}

[V0_FILE]typescriptreact:file="components/case-studies.tsx" isEdit="true" isMerged="true"
"use client"

import { useState } from "react"
import { ArrowRight, Code, ChevronRight, BarChart, Clock } from "lucide-react"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
import { Button } from "@/components/ui/button"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { motion } from "framer-motion"
import { cn } from "@/lib/utils"

// Case study data
const caseStudies = [
  {
    id: 1,
    title: "Optimizing Voice Cloning for Real-Time Applications",
    icon: ,
    description: "An in-depth look at the challenges and solutions in developing a real-time voice cloning system.",
    metrics: [
      { value: "75%", label: "Performance Improvement" },
      { value: "60%", label: "Model Size Reduction" },
      { value: "80ms", label: "Latency Decrease" },
    ],
    timeline: [
      { phase: "Research", duration: "2 months" },
      { phase: "Development", duration: "4 months" },
      { phase: "Optimization", duration: "2 months" },
    ],
    technologies: ["PyTorch", "CUDA", "TensorRT"],
    bgColor: "from-blue-900/50 to-purple-900/50",
    details: {
      overview:
        "This case study explores the optimization techniques used to make voice cloning technology viable for real-time applications. By reducing model size and improving inference speed, we were able to achieve near-instantaneous voice cloning with minimal quality loss.",
      challenges: [
        "Large model size (>500MB) made deployment difficult",
        "High inference latency (>300ms) prevented real-time use",
        "Quality degradation when applying standard optimization techniques",
      ],
      solutions: [
        "Applied knowledge distillation to create smaller student models",
        "Implemented TensorRT for optimized inference",
        "Developed custom quantization scheme to preserve voice quality",
      ],
      results:
        "The optimized system achieved a 75% improvement in performance while reducing the model size by 60%. The latency decreased from 300ms to 80ms, making real-time voice cloning possible for the first time.",
    },
  },
  {
    id: 2,
    title: "Scaling Machine Learning Infrastructure",
    icon: ,
    description:
      "How we designed and implemented a scalable ML infrastructure to support thousands of models in production.",
    metrics: [
      { value: "10x", label: "Deployment Speed" },
      { value: "40%", label: "Cost Reduction" },
      { value: "5000/day", label: "Model Throughput" },
    ],
    timeline: [
      { phase: "Planning", duration: "1 month" },
      { phase: "Implementation", duration: "3 months" },
      { phase: "Testing", duration: "2 months" },
    ],
    technologies: ["Kubernetes", "MLflow", "Apache Airflow"],
    bgColor: "from-green-900/50 to-teal-900/50",
    details: {
      overview:
        "This case study details the architecture and implementation of a scalable machine learning infrastructure capable of supporting thousands of models in production. The system was designed to handle high throughput while maintaining cost efficiency.",
      challenges: [
        "Slow deployment process taking days to move models to production",
        "High infrastructure costs due to inefficient resource utilization",
        "Limited throughput capacity preventing scaling to meet demand",
      ],
      solutions: [
        "Implemented Kubernetes for container orchestration and auto-scaling",
        "Developed MLflow integration for model versioning and tracking",
        "Created Apache Airflow pipelines for automated deployment workflows",
      ],
      results:
        "The new infrastructure increased deployment speed by 10x, reduced costs by 40%, and enabled a throughput of 5000 model predictions per day. The system now supports over 100 different models in production with minimal operational overhead.",
    },
  },
]

export default function CaseStudies() {
  const [expandedCaseStudy, setExpandedCaseStudy] = useState(null)

  const toggleExpand = (id: number) => {
    setExpandedCaseStudy(expandedCaseStudy === id ? null : id)
  }

  return (
    
      
        Case Studies
        
          Detailed examinations of complex technical challenges and their solutions. These case studies showcase
          problem-solving approaches and technical implementation details.
        
      

      
        {caseStudies.map((study, index) => (
          
            
              
                
                  {study.icon}
                  {study.title}
                
                {study.description}
              

              
                
                  {expandedCaseStudy !== study.id && (
                    <>
                      
                        
                          
                          Key Metrics
                        
                        
                          {study.metrics.map((metric, i) => (
                            
                              {metric.value}
                              {metric.label}
                            
                          ))}
                        
                      

                      
                        
                          
                            
                            Timeline
                          
                          
                            {study.technologies.map((tech, i) => (
                              
                                {tech}
                              
                            ))}
                          
                        

                        
                          {study.timeline.map((item, i) => (
                            
                              {item.phase}
                              {item.duration}
                            
                          ))}
                        
                      
                    
                  )}

                  {expandedCaseStudy === study.id && (
                    
                      
                        Overview
                        Details
                        Team
                      

                      
                        {study.details.overview}

                        
                          {study.metrics.map((metric, i) => (
                            
                              {metric.value}
                              {metric.label}
                            
                          ))}
                        

                        
                          {study.technologies.map((tech, i) => (
                            
                              {tech}
                            
                          ))}
                        
                      

                      
                        
                          Challenges
                          
                            {study.details.challenges.map((challenge, i) => (
                              
                                
                                {challenge}
                              
                            ))}
                          
                        

                        
                          Solutions
                          
                            {study.details.solutions.map((solution, i) => (
                              
                                
                                {solution}
                              
                            ))}
                          
                        

                        
                          Results
                          {study.details.results}
                        

                        
                          Timeline
                          
                            {study.timeline.map((item, i) => (
                              
                                
                                  {item.phase}
                                  {item.duration}
                                
                              
                            ))}
                          
                        
                      

                      
                        
                          Team information coming soon.
                        
                      
                    
                  )}
                

                
                  
                
              
            
          
        ))}
      
    
  )
}

[V0_FILE]typescriptreact:file="components/footer.tsx" isMerged="true"
import { Github, Linkedin, Mail, Twitter } from "lucide-react"
import { Button } from "@/components/ui/button"

export default function Footer() {
  return (
    
      
        
          
            Shaquille Williams
            AI Engineer & Community Builder
          

          
            
            
            
            
          
        

        
          © {new Date().getFullYear()} Shaquille Williams. All rights reserved.
        
      
    
  )
}

[V0_FILE]typescriptreact:file="components/floating-nav.tsx" isMerged="true"
"use client"

import type React from "react"

import { useState, useEffect } from "react"
import { motion, AnimatePresence } from "framer-motion"
import { Home, Code, Briefcase, GraduationCap, Book, Send, Menu, X, ChevronUp } from "lucide-react"
import { Button } from "@/components/ui/button"
import { cn } from "@/lib/utils"
import { useToast } from "@/components/ui/use-toast"

interface NavItem {
  name: string
  href: string
  icon: React.ReactNode
}

const navItems: NavItem[] = [
  { name: "Home", href: "#", icon:  },
  { name: "Skills", href: "#skills", icon:  },
  { name: "Experience", href: "#experience", icon:  },
  { name: "Projects", href: "#projects", icon:  },
  { name: "Education", href: "#education", icon:  },
  { name: "Publications", href: "#publications", icon:  },
  { name: "Contact", href: "#contact", icon:  },
]

export default function FloatingNav() {
  const [activeSection, setActiveSection] = useState("")
  const [isVisible, setIsVisible] = useState(false)
  const [showBackToTop, setShowBackToTop] = useState(false)
  const [isOpen, setIsOpen] = useState(false)
  const { toast } = useToast()

  useEffect(() => {
    const handleScroll = () => {
      // Show nav after scrolling down a bit
      if (window.scrollY > 300) {
        setIsVisible(true)
      } else {
        setIsVisible(false)
      }

      // Show back to top button after scrolling down further
      if (window.scrollY > 800) {
        setShowBackToTop(true)
      } else {
        setShowBackToTop(false)
      }

      // Determine active section
      const sections = navItems.map((item) => item.href.slice(1)).filter(Boolean)

      const currentSection = sections.reduce((current, section) => {
        const element = document.getElementById(section)
        if (element) {
          const rect = element.getBoundingClientRect()
          // Consider a section active if it's in the top half of the viewport
          if (rect.top <= window.innerHeight / 2 && rect.bottom >= 0) {
            return section
          }
        }
        return current
      }, "")

      setActiveSection(currentSection)
    }

    window.addEventListener("scroll", handleScroll)
    // Initial check
    handleScroll()

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

  const handleItemClick = (e: React.MouseEvent, href: string) => {
    e.preventDefault()
    const element = document.querySelector(href)
    if (element) {
      element.scrollIntoView({ behavior: "smooth" })
      setIsOpen(false) // Close mobile menu on click
    } else {
      toast({
        title: "Section not found",
        description: `The section "${href}" could not be found on the page.`,
        variant: "destructive",
      })
    }
  }

  return (
    <>
      {/* Desktop floating navigation */}
      
        {isVisible && (
          
            
              
                {navItems.map((item) => (
                   handleItemClick(e, item.href)}
                    className={cn(
                      "relative px-4 py-2 rounded-full flex items-center gap-2 transition-all duration-300",
                      activeSection === item.href.slice(1)
                        ? "text-white bg-primary"
                        : "text-muted-foreground hover:text-foreground hover:bg-accent",
                    )}
                  >
                    {item.icon}
                    {item.name}

                    {activeSection === item.href.slice(1) && (
                      
                    )}
                  
                ))}
              
            
          
        )}
      

      {/* Mobile floating navigation button */}
      
        {isVisible && (
          
            
          
        )}
      

      {/* Mobile navigation menu */}
      
        {isOpen && (
          
            
              {navItems.map((item) => (
                 handleItemClick(e, item.href)}
                  className={cn(
                    "px-3 py-2 rounded-md flex items-center gap-3 transition-all duration-200",
                    activeSection === item.href.slice(1)
                      ? "bg-primary/10 text-primary"
                      : "hover:bg-accent text-muted-foreground hover:text-foreground",
                  )}
                >
                  {item.icon}
                  {item.name}
                
              ))}
            
          
        )}
      

      {/* Back to top button */}
      
        {showBackToTop && (
          
            
          
        )}
      
    
  )
}

[V0_FILE]typescriptreact:file="components/skills-chart.tsx" isMerged="true"
"use client"

import { useState, useRef, useEffect } from "react"
import { motion, AnimatePresence } from "framer-motion"
import { Card, CardContent } from "@/components/ui/card"
import { Radar, RadarChart, PolarGrid, PolarAngleAxis, PolarRadiusAxis, ResponsiveContainer, Tooltip } from "recharts"
import { cn } from "@/lib/utils"

interface SkillLevel {
  area: string
  value: number
  fullMark: number
}

interface SkillGroup {
  name: string
  skills: SkillLevel[]
  color: string
}

const skillsData: SkillGroup[] = [
  {
    name: "Machine Learning",
    color: "#8b5cf6",
    skills: [
      { area: "Deep Learning", value: 90, fullMark: 100 },
      { area: "NLP", value: 85, fullMark: 100 },
      { area: "Computer Vision", value: 75, fullMark: 100 },
      { area: "Reinforcement Learning", value: 70, fullMark: 100 },
      { area: "MLOps", value: 60, fullMark: 100 },
      { area: "Generative AI", value: 80, fullMark: 100 },
    ],
  },
  {
    name: "Programming",
    color: "#3b82f6",
    skills: [
      { area: "Python", value: 95, fullMark: 100 },
      { area: "JavaScript/TypeScript", value: 90, fullMark: 100 },
      { area: "C++", value: 75, fullMark: 100 },
      { area: "SQL", value: 80, fullMark: 100 },
      { area: "R", value: 60, fullMark: 100 },
      { area: "MATLAB", value: 50, fullMark: 100 },
    ],
  },
  {
    name: "Frameworks",
    color: "#10b981",
    skills: [
      { area: "PyTorch", value: 90, fullMark: 100 },
      { area: "TensorFlow", value: 85, fullMark: 100 },
      { area: "React", value: 80, fullMark: 100 },
      { area: "Node.js", value: 75, fullMark: 100 },
      { area: "Scikit-learn", value: 95, fullMark: 100 },
      { area: "Hugging Face", value: 80, fullMark: 100 },
    ],
  },
  {
    name: "Infrastructure",
    color: "#f59e0b",
    skills: [
      { area: "Docker", value: 85, fullMark: 100 },
      { area: "Kubernetes", value: 75, fullMark: 100 },
      { area: "AWS", value: 80, fullMark: 100 },
      { area: "GCP", value: 70, fullMark: 100 },
      { area: "CI/CD", value: 60, fullMark: 100 },
      { area: "Microservices", value: 70, fullMark: 100 },
    ],
  },
]

export default function SkillsChart() {
  const [selectedSkillGroup, setSelectedSkillGroup] = useState(skillsData[0])
  const [isInView, setIsInView] = useState(false)
  const chartRef = useRef(null)

  useEffect(() => {
    const observer = new IntersectionObserver(
      (entries) => {
        if (entries[0].isIntersecting) {
          setIsInView(true)
        }
      },
      { threshold: 0.2 },
    )

    if (chartRef.current) {
      observer.observe(chartRef.current)
    }

    return () => {
      if (chartRef.current) {
        observer.unobserve(chartRef.current)
      }
    }
  }, [])

  const CustomTooltip = ({ active, payload }: any) => {
    if (active && payload && payload.length) {
      return (
        
          {payload[0].payload.area}
          {`Proficiency: ${payload[0].value}%`}
        
      )
    }
    return null
  }

  return (
    
      
        {skillsData.map((group) => (
           setSelectedSkillGroup(group)}
            whileHover={{ scale: 1.05 }}
            whileTap={{ scale: 0.98 }}
          >
            {group.name}
          
        ))}
      

      
        
          
            
              
                
                  
                  
                  
                  } />
                  
                
              
            
          
        
      

      
        Click on a category to view different skill groups. Hover over the chart for specific proficiency levels.
      
    
  )
}

[V0_FILE]typescriptreact:file="components/interactive-timeline.tsx" isMerged="true"
"use client"

import { useState, useRef, useEffect } from "react"
import { motion, AnimatePresence, useInView } from "framer-motion"
import { Badge } from "@/components/ui/badge"
import { Building, Calendar, ChevronDown, ChevronRight, Clock, MapPin, Award } from "lucide-react"
import { cn } from "@/lib/utils"

interface TimelineEvent {
  id: string
  title: string
  company: string
  location: string
  period: string
  description: string
  achievements: string[]
  skills: string[]
  color: string
  logo?: string
}

const timelineData: TimelineEvent[] = [
  {
    id: "rfc",
    title: "Technical Program Director",
    company: "Rose from Concrete",
    location: "Brooklyn, NY",
    period: "January 2021 - Present",
    description:
      "Leading technical initiatives and community programs across Brooklyn, developing and implementing ML models for assessing program impact and reach.",
    achievements: [
      "Forged strategic partnerships with 40+ community centers across Brooklyn",
      "Developed predictive models with Python and Scikit-learn impacting 20,000+ NYC residents",
      "Led implementation of community-focused programs using AWS Lambda and Docker",
      "Designed decentralized energy solutions and AI-powered monitoring tools",
    ],
    skills: ["Python", "Machine Learning", "AWS", "Docker", "GCP", "Community Development"],
    color: "bg-gradient-to-r from-indigo-600 to-purple-600",
  },
  {
    id: "success-academy",
    title: "Lead AP Physics Teacher",
    company: "Success Academy High School of the Liberal Arts",
    location: "New York, NY",
    period: "July 2019 - 2022",
    description:
      "Led physics education initiatives, applying data analysis to optimize teaching strategies for over 150 students while managing a team of 13 teachers.",
    achievements: [
      "Applied advanced data analysis to optimize lesson plans for 150+ students",
      "Awarded the 'Teacher Excellence Award' for instructional strategies",
      "Led a team of 13 teachers, fostering collaborative learning environment",
    ],
    skills: ["Leadership", "Data Analysis", "Education", "Team Management", "Curriculum Development"],
    color: "bg-gradient-to-r from-green-600 to-emerald-600",
  },
  {
    id: "research-assistant",
    title: "Research Assistant",
    company: "City College of New York",
    location: "New York, NY",
    period: "2017 - 2019",
    description:
      "Conducted physics research focused on computational modeling of complex systems and data analysis of experimental results.",
    achievements: [
      "Published research on computational physics models in peer-reviewed journals",
      "Developed custom analysis algorithms for experimental data processing",
      "Presented findings at 3 national physics conferences",
    ],
    skills: ["Python", "Data Analysis", "Research", "Scientific Computing", "Physics"],
    color: "bg-gradient-to-r from-blue-600 to-cyan-600",
  },
]

export default function InteractiveTimeline() {
  const [expandedEvent, setExpandedEvent] = useState(null)
  const [activeEventIndex, setActiveEventIndex] = useState(0)
  const containerRef = useRef(null)
  const isInView = useInView(containerRef, { once: false, amount: 0.2 })

  const toggleExpand = (id: string) => {
    setExpandedEvent(expandedEvent === id ? null : id)
  }

  // Auto rotate featured event every 5 seconds
  useEffect(() => {
    if (!expandedEvent) {
      const interval = setInterval(() => {
        setActiveEventIndex((prev) => (prev + 1) % timelineData.length)
      }, 5000)
      return () => clearInterval(interval)
    }
  }, [expandedEvent])

  return (
    
      
        
          
            
            
              
                
                  
                    Featured Experience
                  
                  {timelineData[activeEventIndex].title}
                  
                    
                      
                      {timelineData[activeEventIndex].company}
                    
                    
                      
                      {timelineData[activeEventIndex].location}
                    
                    
                      
                      {timelineData[activeEventIndex].period}
                    
                  
                
                
                  {timelineData.map((_, index) => (
                    
              
              {timelineData[activeEventIndex].description}
              
                {timelineData[activeEventIndex].skills.map((skill, index) => (
                  
                    {skill}
                  
                ))}
              
            
          
        
      

      
        {timelineData.map((event, index) => (
          
             toggleExpand(event.id)}
            >
              

              
                
                  
                    {event.title}
                    
                      {expandedEvent === event.id ? (
                        
                      ) : (
                        
                      )}
                    
                  
                  
                    
                      
                      {event.company}
                    
                    
                      
                      {event.period}
                    
                  
                
              

              
                {expandedEvent === event.id && (
                  
                    
                      
                        
                          
                            
                            Key Achievements
                          
                          
                            {event.achievements.map((achievement, i) => (
                              {achievement}
                            ))}
                          
                        
                        
                          {event.skills.map((skill, i) => (
                            
                              {skill}
                            
                          ))}
                        
                      
                    
                  
                )}
              
            
          
        ))}
      
    
  )
}

[V0_FILE]typescriptreact:file="components/project-showcase.tsx" isMerged="true"
"use client"

import { useState, useRef, useEffect } from "react"
import { motion, AnimatePresence, useScroll, useTransform } from "framer-motion"
import Image from "next/image"
import { Badge } from "@/components/ui/badge"
import { Button } from "@/components/ui/button"
import { ExternalLink, Github, ChevronLeft, ChevronRight } from "lucide-react"
import { useToast } from "@/components/ui/use-toast"
import { cn } from "@/lib/utils"

// Project data
const featuredProjects = [
  {
    id: 1,
    title: "Voice Cloning & Audio Processing Suite",
    description:
      "Comprehensive audio processing system including real-time voice cloning, multilingual transcription, and speaker diarization.",
    longDescription:
      "A state-of-the-art voice cloning system that allows for real-time audio processing with minimal latency. The system uses deep learning models to generate natural-sounding speech that matches the target voice with unprecedented accuracy and emotional range.",
    technologies: ["TensorFlow TTS", "PyTorch", "Whisper", "FastAPI", "React"],
    imageUrl: "/placeholder.svg?height=600&width=800",
    demoUrl: "#",
    githubUrl: "#",
    color: "from-blue-600 to-violet-600",
  },
  {
    id: 2,
    title: "DALL-E 2 PyTorch Implementation",
    description:
      "Open-source implementation of OpenAI's DALL-E 2 image generation model using PyTorch with CUDA optimization.",
    longDescription:
      "A PyTorch implementation of the DALL-E 2 architecture for generating high-quality images from text descriptions. The project includes optimizations for CUDA acceleration and containerization with Docker for easy deployment and scaling.",
    technologies: ["PyTorch", "CUDA", "Docker", "HuggingFace Transformers", "Python"],
    imageUrl: "/placeholder.svg?height=600&width=800",
    demoUrl: "#",
    githubUrl: "#",
    color: "from-pink-600 to-orange-600",
  },
  {
    id: 3,
    title: "Community Grant Management System",
    description:
      "Web application for managing community grant applications, reviews, and distributions with advanced analytics.",
    longDescription:
      "A full-stack web application that streamlines the process of managing community grants from application to distribution. The system includes features for application submission, review workflows, financial tracking, and impact measurement dashboards.",
    technologies: ["Next.js", "PostgreSQL", "AWS", "TypeScript", "Prisma"],
    imageUrl: "/placeholder.svg?height=600&width=800",
    demoUrl: "#",
    githubUrl: "#",
    color: "from-green-600 to-emerald-600",
  },
]

export default function ProjectShowcase() {
  const [currentProject, setCurrentProject] = useState(0)
  const [direction, setDirection] = useState(0)
  const [isHovered, setIsHovered] = useState(false)
  const containerRef = useRef(null)
  const { toast } = useToast()

  const { scrollYProgress } = useScroll({
    target: containerRef,
    offset: ["start end", "end start"],
  })

  const opacity = useTransform(scrollYProgress, [0, 0.2, 0.8, 1], [0, 1, 1, 0])
  const scale = useTransform(scrollYProgress, [0, 0.2, 0.8, 1], [0.8, 1, 1, 0.8])

  const handleNext = () => {
    setDirection(1)
    setCurrentProject((prev) => (prev + 1) % featuredProjects.length)
  }

  const handlePrev = () => {
    setDirection(-1)
    setCurrentProject((prev) => (prev - 1 + featuredProjects.length) % featuredProjects.length)
  }

  const handleDotClick = (index: number) => {
    setDirection(index > currentProject ? 1 : -1)
    setCurrentProject(index)
  }

  const handleDemoClick = (url: string) => {
    toast({
      title: "Demo Link",
      description: "Opening demo in a new tab...",
      duration: 3000,
    })
    window.open(url, "_blank")
  }

  // Auto-rotate projects every 5 seconds
  useEffect(() => {
    if (isHovered) return

    const interval = setInterval(() => {
      handleNext()
    }, 5000)

    return () => clearInterval(interval)
  }, [isHovered])

  const project = featuredProjects[currentProject]

  return (
     setIsHovered(true)}
      onMouseLeave={() => setIsHovered(false)}
    >
      

      
         0 ? 1000 : -1000,
            opacity: 0,
          }}
          animate={{
            x: 0,
            opacity: 1,
            transition: {
              x: { type: "spring", stiffness: 300, damping: 30 },
              opacity: { duration: 0.2 },
            },
          }}
          exit={{
            x: direction > 0 ? -1000 : 1000,
            opacity: 0,
            transition: {
              x: { type: "spring", stiffness: 300, damping: 30 },
              opacity: { duration: 0.2 },
            },
          }}
          className="relative w-full aspect-[16/9]"
        >
          

          

          
            
              Featured Project
            
            {project.title}
            {project.longDescription}

            
              {project.technologies.map((tech, index) => (
                
                  {tech}
                
              ))}
            

            
              

              
            
          
        
      

      {/* Navigation controls */}
      

      

      {/* Progress dots */}
      
        {featuredProjects.map((_, index) => (
          
    
  )
}

[V0_FILE]typescriptreact:file="components/contact-form.tsx" isMerged="true"
"use client"

import { useState } from "react"
import { motion } from "framer-motion"
import { z } from "zod"
import { zodResolver } from "@hookform/resolvers/zod"
import { useForm } from "react-hook-form"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Textarea } from "@/components/ui/textarea"
import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from "@/components/ui/form"
import { useToast } from "@/components/ui/use-toast"
import { Send, CheckCircle, Mail, Phone, MapPin } from "lucide-react"

// Form validation schema
const formSchema = z.object({
  name: z.string().min(2, {
    message: "Name must be at least 2 characters.",
  }),
  email: z.string().email({
    message: "Please enter a valid email address.",
  }),
  subject: z.string().min(5, {
    message: "Subject must be at least 5 characters.",
  }),
  message: z.string().min(10, {
    message: "Message must be at least 10 characters.",
  }),
})

export default function ContactForm() {
  const { toast } = useToast()
  const [isSubmitting, setIsSubmitting] = useState(false)
  const [isSubmitted, setIsSubmitted] = useState(false)

  // Initialize form
  const form = useForm>({
    resolver: zodResolver(formSchema),
    defaultValues: {
      name: "",
      email: "",
      subject: "",
      message: "",
    },
  })

  // Handle form submission
  function onSubmit(values: z.infer) {
    setIsSubmitting(true)

    // Simulate API call
    setTimeout(() => {
      console.log(values)
      setIsSubmitting(false)
      setIsSubmitted(true)

      toast({
        title: "Message sent!",
        description: "Thank you for your message. I'll get back to you soon.",
      })
    }, 1500)
  }

  return (
    
      
        Get in Touch
        
          Have a question or want to work together? Fill out the form and I'll get back to you as soon as possible.
        

        
          
            
              
            
            
              Email
              shaq.williams.ai@gmail.com
            
          

          
            
              
            
            
              Phone
              (917) 831-2482
            
          

          
            
              
            
            
              Location
              New York, NY
            
          
        
      

      
        {isSubmitted ? (
          
            
              
            
            Message Sent!
            
              Thank you for reaching out. I'll get back to you as soon as possible.
            
            
          
        ) : (
          
            
               (
                  
                    Name
                    
                      
                    
                    
                  
                )}
              />

               (
                  
                    Email
                    
                      
                    
                    
                  
                )}
              />

               (
                  
                    Subject
                    
                      
                    
                    
                  
                )}
              />

               (
                  
                    Message
                    
                                          </FormControl>
                    <FormMessage />
                  </FormItem>
                )}
              />

              <Button type="submit" className="w-full" disabled={isSubmitting}>
                {isSubmitting ? (
                  <span className="flex items-center gap-2">
                    <svg
                      className="animate-spin -ml-1 mr-2 h-4 w-4 text-white"
                      xmlns="http://www.w3.org/2000/svg"
                      fill="none"
                      viewBox="0 0 24 24"
                    >
                      <circle
                        className="opacity-25"
                        cx="12"
                        cy="12"
                        r="10"
                        stroke="currentColor"
                        strokeWidth="4"
                      ></circle>
                      <path
                        className="opacity-75"
                        fill="currentColor"
                        d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
                      ></path>
                    </svg>
                    Sending...
                  </span>
                ) : (
                  <span className="flex items-center gap-2">
                    Send Message
                    <Send className="h-4 w-4" />
                  </span>
                )}
              </Button>
            </form>
          </Form>
        )}
      </motion.div>
    </div>
  )
}

[V0_FILE]typescriptreact:file="components/ui/progress.tsx" isEdit="true" isQuickEdit="true" isMerged="true"
"use client"

import * as React from "react"
import * as ProgressPrimitive from "@radix-ui/react-progress"

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

const Progress = React.forwardRef<
  React.ElementRef<typeof ProgressPrimitive.Root>,
  React.ComponentPropsWithoutRef<typeof ProgressPrimitive.Root> & {
    indicatorClassName?: string
  }
>(({ className, value, indicatorClassName, ...props }, ref) => (
  <ProgressPrimitive.Root
    ref={ref}
    className={cn("relative h-4 w-full overflow-hidden rounded-full bg-secondary", className)}
    {...props}
  >
    <ProgressPrimitive.Indicator
      className={cn("h-full w-full flex-1 bg-primary transition-all", indicatorClassName)}
      style={{ transform: `translateX(-${100 - (value || 0)}%)` }}
    />
  </ProgressPrimitive.Root>
))
Progress.displayName = ProgressPrimitive.Root.displayName

export { Progress }

[V0_FILE]typescriptreact:file="components/scroll-progress.tsx" isMerged="true"
"use client"

import { useEffect, useState } from "react"
import { motion, useScroll, useSpring } from "framer-motion"

export default function ScrollProgress() {
  const [isVisible, setIsVisible] = useState(false)
  const { scrollYProgress } = useScroll()

  // Smooth out the scroll progress
  const scaleX = useSpring(scrollYProgress, {
    stiffness: 100,
    damping: 30,
    restDelta: 0.001,
  })

  useEffect(() => {
    const handleScroll = () => {
      // Only show after scrolling a bit
      setIsVisible(window.scrollY > 100)
    }

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

  if (!isVisible) return null

  return <motion.div className="progress-bar fixed top-0 left-0 right-0 h-[3px] bg-primary z-50" style={{ scaleX }} />
}

[V0_FILE]typescriptreact:file="components/ui/form.tsx" isMerged="true"
"use client"

import * as React from "react"
import type * as LabelPrimitive from "@radix-ui/react-label"
import { Slot } from "@radix-ui/react-slot"
import {
  Controller,
  type ControllerProps,
  type FieldPath,
  type FieldValues,
  FormProvider,
  useFormContext,
} from "react-hook-form"

import { cn } from "@/lib/utils"
import { Label } from "@/components/ui/label"

const Form = FormProvider

type FormFieldContextValue<
  TFieldValues extends FieldValues = FieldValues,
  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
> = {
  name: TName
}

const FormFieldContext = React.createContext<FormFieldContextValue>({} as FormFieldContextValue)

const FormField = <
  TFieldValues extends FieldValues = FieldValues,
  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
>({
  ...props
}: ControllerProps<TFieldValues, TName>) => {
  return (
    <FormFieldContext.Provider value={{ name: props.name }}>
      <Controller {...props} />
    </FormFieldContext.Provider>
  )
}

const useFormField = () => {
  const fieldContext = React.useContext(FormFieldContext)
  const itemContext = React.useContext(FormItemContext)
  const { getFieldState, formState } = useFormContext()

  const fieldState = getFieldState(fieldContext.name, formState)

  if (!fieldContext) {
    throw new Error("useFormField should be used within <FormField>")
  }

  const { id } = itemContext

  return {
    id,
    name: fieldContext.name,
    formItemId: `${id}-form-item`,
    formDescriptionId: `${id}-form-item-description`,
    formMessageId: `${id}-form-item-message`,
    ...fieldState,
  }
}

type FormItemContextValue = {
  id: string
}

const FormItemContext = React.createContext<FormItemContextValue>({} as FormItemContextValue)

const FormItem = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
  ({ className, ...props }, ref) => {
    const id = React.useId()

    return (
      <FormItemContext.Provider value={{ id }}>
        <div ref={ref} className={cn("space-y-2", className)} {...props} />
      </FormItemContext.Provider>
    )
  },
)
FormItem.displayName = "FormItem"

const FormLabel = React.forwardRef<
  React.ElementRef<typeof LabelPrimitive.Root>,
  React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root>
>(({ className, ...props }, ref) => {
  const { error, formItemId } = useFormField()

  return <Label ref={ref} className={cn(error && "text-destructive", className)} htmlFor={formItemId} {...props} />
})
FormLabel.displayName = "FormLabel"

const FormControl = React.forwardRef<React.ElementRef<typeof Slot>, React.ComponentPropsWithoutRef<typeof Slot>>(
  ({ ...props }, ref) => {
    const { error, formItemId, formDescriptionId, formMessageId } = useFormField()

    return (
      <Slot
        ref={ref}
        id={formItemId}
        aria-describedby={!error ? `${formDescriptionId}` : `${formDescriptionId} ${formMessageId}`}
        aria-invalid={!!error}
        {...props}
      />
    )
  },
)
FormControl.displayName = "FormControl"

const FormDescription = React.forwardRef<HTMLParagraphElement, React.HTMLAttributes<HTMLParagraphElement>>(
  ({ className, ...props }, ref) => {
    const { formDescriptionId } = useFormField()

    return <p ref={ref} id={formDescriptionId} className={cn("text-sm text-muted-foreground", className)} {...props} />
  },
)
FormDescription.displayName = "FormDescription"

const FormMessage = React.forwardRef<HTMLParagraphElement, React.HTMLAttributes<HTMLParagraphElement>>(
  ({ className, children, ...props }, ref) => {
    const { error, formMessageId } = useFormField()
    const body = error ? String(error?.message) : children

    if (!body) {
      return null
    }

    return (
      <p ref={ref} id={formMessageId} className={cn("text-sm font-medium text-destructive", className)} {...props}>
        {body}
      </p>
    )
  },
)
FormMessage.displayName = "FormMessage"

export { useFormField, Form, FormItem, FormLabel, FormControl, FormDescription, FormMessage, FormField }

[V0_FILE]typescriptreact:file="components/ui/textarea.tsx" isMerged="true"
import * as React from "react"

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

export interface TextareaProps extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {}

const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(({ className, ...props }, ref) => {
  return (
    <textarea
      className={cn(
        "flex min-h-[80px] w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
        className,
      )}
      ref={ref}
      {...props}
    />
  )
})
Textarea.displayName = "Textarea"

export { Textarea }

[V0_FILE]typescriptreact:file="components/ui/label.tsx" isMerged="true"
"use client"

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

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

const labelVariants = cva("text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70")

const Label = React.forwardRef<
  React.ElementRef<typeof LabelPrimitive.Root>,
  React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root> & VariantProps<typeof labelVariants>
>(({ className, ...props }, ref) => (
  <LabelPrimitive.Root ref={ref} className={cn(labelVariants(), className)} {...props} />
))
Label.displayName = LabelPrimitive.Root.displayName

export { Label }

[V0_FILE]typescriptreact:file="components/testimonials.tsx" isMerged="true"
"use client"

import { useState, useEffect, useRef } from "react"
import { motion, AnimatePresence } from "framer-motion"
import { Card, CardContent } from "@/components/ui/card"
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
import { Button } from "@/components/ui/button"
import { ChevronLeft, ChevronRight, Quote } from "lucide-react"
import { cn } from "@/lib/utils"

// Testimonial data
const testimonials = [
  {
    id: 1,
    content:
      "Shaquille's expertise in AI and machine learning transformed our project. His ability to explain complex concepts in simple terms made collaboration seamless.",
    author: "Dr. Sarah Johnson",
    role: "Research Director, TechLabs",
    avatar: "/placeholder.svg?height=100&width=100",
    company: "TechLabs",
    rating: 5,
  },
  {
    id: 2,
    content:
      "Working with Shaquille on our community education initiative was incredible. His technical knowledge combined with his passion for education created a program that truly made an impact.",
    author: "Marcus Chen",
    role: "Executive Director, NYC Education Fund",
    avatar: "/placeholder.svg?height=100&width=100",
    company: "NYC Education Fund",
    rating: 5,
  },
  {
    id: 3,
    content:
      "Shaquille developed a custom ML solution that increased our operational efficiency by 40%. His attention to detail and commitment to excellence is unmatched.",
    author: "Priya Patel",
    role: "CTO, DataSphere",
    avatar: "/placeholder.svg?height=100&width=100",
    company: "DataSphere",
    rating: 5,
  },
  {
    id: 4,
    content:
      "As a teaching colleague, I've witnessed Shaquille's extraordinary ability to inspire students. His innovative approach to STEM education has set a new standard in our institution.",
    author: "James Wilson",
    role: "Department Chair, Success Academy",
    avatar: "/placeholder.svg?height=100&width=100",
    company: "Success Academy",
    rating: 5,
  },
]

export default function Testimonials() {
  const [currentIndex, setCurrentIndex] = useState(0)
  const [direction, setDirection] = useState(0)
  const [isPaused, setIsPaused] = useState(false)
  const intervalRef = useRef<NodeJS.Timeout | null>(null)

  const handleNext = () => {
    setDirection(1)
    setCurrentIndex((prev) => (prev + 1) % testimonials.length)
  }

  const handlePrev = () => {
    setDirection(-1)
    setCurrentIndex((prev) => (prev - 1 + testimonials.length) % testimonials.length)
  }

  const handleDotClick = (index: number) => {
    setDirection(index > currentIndex ? 1 : -1)
    setCurrentIndex(index)
  }

  // Auto-rotate testimonials
  useEffect(() => {
    if (isPaused) return

    intervalRef.current = setInterval(() => {
      handleNext()
    }, 8000)

    return () => {
      if (intervalRef.current) {
        clearInterval(intervalRef.current)
      }
    }
  }, [currentIndex, isPaused])

  return (
    <section className="py-12">
      <h2 className="text-3xl font-bold text-center mb-4">Client Testimonials</h2>
      <p className="text-muted-foreground text-center max-w-2xl mx-auto mb-12">
        Hear what clients and colleagues have to say about working with me.
      </p>

      <div
        className="relative max-w-4xl mx-auto px-4"
        onMouseEnter={() => setIsPaused(true)}
        onMouseLeave={() => setIsPaused(false)}
      >
        <AnimatePresence mode="wait" initial={false} custom={direction}>
          <motion.div
            key={testimonials[currentIndex].id}
            custom={direction}
            initial={{
              opacity: 0,
              x: direction > 0 ? 100 : -100,
            }}
            animate={{
              opacity: 1,
              x: 0,
              transition: {
                x: { type: "spring", stiffness: 300, damping: 30 },
                opacity: { duration: 0.2 },
              },
            }}
            exit={{
              opacity: 0,
              x: direction > 0 ? -100 : 100,
              transition: {
                x: { type: "spring", stiffness: 300, damping: 30 },
                opacity: { duration: 0.2 },
              },
            }}
            className="w-full"
          >
            <Card className="border-none bg-gradient-to-br from-primary/5 to-primary/10 shadow-lg">
              <CardContent className="p-8">
                <div className="flex flex-col md:flex-row gap-8 items-center">
                  <div className="flex-shrink-0">
                    <div className="relative">
                      <Avatar className="h-24 w-24 border-4 border-background">
                        <AvatarImage src={testimonials[currentIndex].avatar} alt={testimonials[currentIndex].author} />
                        <AvatarFallback>
                          {testimonials[currentIndex].author
                            .split(" ")
                            .map((n) => n[0])
                            .join("")}
                        </AvatarFallback>
                      </Avatar>
                      <div className="absolute -bottom-2 -right-2 bg-primary text-primary-foreground rounded-full p-1.5">
                        <Quote className="h-4 w-4" />
                      </div>
                    </div>
                  </div>

                  <div className="flex-1">
                    <div className="mb-4">
                      {Array.from({ length: 5 }).map((_, i) => (
                        <span key={i} className="text-yellow-500 text-lg">
                          {i < testimonials[currentIndex].rating ? "★" : "☆"}
                        </span>
                      ))}
                    </div>

                    <blockquote className="text-lg md:text-xl italic mb-6 relative">
                      <span className="text-primary text-4xl absolute -top-4 -left-2 opacity-20">"</span>
                      {testimonials[currentIndex].content}
                      <span className="text-primary text-4xl absolute -bottom-10 -right-2 opacity-20">"</span>
                    </blockquote>

                    <div>
                      <div className="font-semibold">{testimonials[currentIndex].author}</div>
                      <div className="text-sm text-muted-foreground flex flex-wrap items-center gap-2">
                        <span>{testimonials[currentIndex].role}</span>
                        <span className="h-1 w-1 rounded-full bg-muted-foreground"></span>
                        <span>{testimonials[currentIndex].company}</span>
                      </div>
                    </div>
                  </div>
                </div>
              </CardContent>
            </Card>
          </motion.div>
        </AnimatePresence>

        {/* Navigation controls */}
        <div className="flex justify-between mt-6">
          <Button
            variant="outline"
            size="icon"
            onClick={handlePrev}
            className="rounded-full"
            aria-label="Previous testimonial"
          >
            <ChevronLeft className="h-4 w-4" />
          </Button>

          <div className="flex items-center gap-2">
            {testimonials.map((_, index) => (
              <button
                key={index}
                onClick={() => handleDotClick(index)}
                className={cn(
                  "w-2 h-2 rounded-full transition-all duration-300",
                  index === currentIndex ? "bg-primary w-4" : "bg-muted hover:bg-primary/50",
                )}
                aria-label={`Go to testimonial ${index + 1}`}
              />
            ))}
          </div>

          <Button
            variant="outline"
            size="icon"
            onClick={handleNext}
            className="rounded-full"
            aria-label="Next testimonial"
          >
            <ChevronRight className="h-4 w-4" />
          </Button>
        </div>
      </div>
    </section>
  )
}

[V0_FILE]typescriptreact:file="components/blog-preview.tsx" isMerged="true"
"use client"

import { useState } from "react"
import { motion } from "framer-motion"
import { Card, CardContent, CardFooter } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
import { Button } from "@/components/ui/button"
import { ArrowRight, Calendar, Clock, Eye } from "lucide-react"
import Image from "next/image"
import { useToast } from "@/components/ui/use-toast"
import { cn } from "@/lib/utils"

// Blog post data
const blogPosts = [
  {
    id: 1,
    title: "Optimizing Voice Cloning Models for Edge Devices",
    excerpt:
      "Explore techniques for reducing the computational requirements of voice cloning models to run efficiently on resource-constrained edge devices.",
    coverImage: "/placeholder.svg?height=400&width=600",
    date: "March 15, 2025",
    readTime: "8 min read",
    views: 1243,
    categories: ["AI", "Edge Computing"],
    featured: true,
  },
  {
    id: 2,
    title: "Building Community-Centered AI Solutions",
    excerpt:
      "How to develop AI applications that address real community needs through participatory design and continuous feedback loops.",
    coverImage: "/placeholder.svg?height=400&width=600",
    date: "February 28, 2025",
    readTime: "6 min read",
    views: 987,
    categories: ["Community", "AI Ethics"],
    featured: false,
  },
  {
    id: 3,
    title: "The Future of MLOps: Trends and Best Practices",
    excerpt:
      "An overview of emerging trends in MLOps and recommendations for implementing robust machine learning pipelines.",
    coverImage: "/placeholder.svg?height=400&width=600",
    date: "February 10, 2025",
    readTime: "10 min read",
    views: 1567,
    categories: ["MLOps", "DevOps"],
    featured: false,
  },
  {
    id: 4,
    title: "Democratizing AI Education: Lessons Learned",
    excerpt:
      "Insights from developing and implementing AI curriculum for underrepresented communities and educational institutions.",
    coverImage: "/placeholder.svg?height=400&width=600",
    date: "January 22, 2025",
    readTime: "7 min read",
    views: 842,
    categories: ["Education", "Diversity"],
    featured: false,
  },
]

export default function BlogPreview() {
  const [hoveredPost, setHoveredPost] = useState<number | null>(null)
  const { toast } = useToast()

  const featuredPost = blogPosts.find((post) => post.featured)
  const regularPosts = blogPosts.filter((post) => !post.featured)

  const handleReadMore = (id: number) => {
    toast({
      title: "Blog Post",
      description: "This would navigate to the full blog post in a real implementation.",
      duration: 3000,
    })
  }

  return (
    <section className="py-12">
      <h2 className="text-3xl font-bold text-center mb-4">Latest Articles</h2>
      <p className="text-muted-foreground text-center max-w-2xl mx-auto mb-12">
        Thoughts, insights, and perspectives on AI, technology, and community building.
      </p>

      <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
        {featuredPost && (
          <motion.div
            className="md:col-span-3 mb-6"
            initial={{ opacity: 0, y: 20 }}
            whileInView={{ opacity: 1, y: 0 }}
            viewport={{ once: true }}
            transition={{ duration: 0.5 }}
          >
            <Card
              className="overflow-hidden border-none shadow-lg bg-gradient-to-br from-primary/5 to-primary/10"
              onMouseEnter={() => setHoveredPost(featuredPost.id)}
              onMouseLeave={() => setHoveredPost(null)}
            >
              <div className="grid md:grid-cols-2 gap-0">
                <div className="relative aspect-video md:aspect-auto overflow-hidden">
                  <Image
                    src={featuredPost.coverImage || "/placeholder.svg"}
                    alt={featuredPost.title}
                    fill
                    className={cn(
                      "object-cover transition-transform duration-500",
                      hoveredPost === featuredPost.id ? "scale-110" : "scale-100",
                    )}
                  />
                  <div className="absolute top-4 left-4">
                    <Badge className="bg-primary text-primary-foreground">Featured</Badge>
                  </div>
                </div>

                <CardContent className="p-6 flex flex-col justify-between">
                  <div>
                    <div className="flex flex-wrap gap-2 mb-3">
                      {featuredPost.categories.map((category, index) => (
                        <Badge key={index} variant="outline">
                          {category}
                        </Badge>
                      ))}
                    </div>

                    <h3 className="text-xl font-bold mb-3">{featuredPost.title}</h3>
                    <p className="text-muted-foreground mb-4">{featuredPost.excerpt}</p>
                  </div>

                  <div>
                    <div className="flex flex-wrap items-center gap-x-4 gap-y-2 text-sm text-muted-foreground mb-4">
                      <div className="flex items-center gap-1">
                        <Calendar className="h-4 w-4" />
                        <span>{featuredPost.date}</span>
                      </div>
                      <div className="flex items-center gap-1">
                        <Clock className="h-4 w-4" />
                        <span>{featuredPost.readTime}</span>
                      </div>
                      <div className="flex items-center gap-1">
                        <Eye className="h-4 w-4" />
                        <span>{featuredPost.views.toLocaleString()} views</span>
                      </div>
                    </div>

                    <Button
                      variant="default"
                      className="w-full gap-2 group"
                      onClick={() => handleReadMore(featuredPost.id)}
                    >
                      Read Article
                      <ArrowRight className="h-4 w-4 transition-transform group-hover:translate-x-1" />
                    </Button>
                  </div>
                </CardContent>
              </div>
            </Card>
          </motion.div>
        )}

        {regularPosts.map((post, index) => (
          <motion.div
            key={post.id}
            initial={{ opacity: 0, y: 20 }}
            whileInView={{ opacity: 1, y: 0 }}
            viewport={{ once: true }}
            transition={{ duration: 0.5, delay: index * 0.1 }}
          >
            <Card
              className="overflow-hidden h-full flex flex-col border-none shadow-md hover:shadow-lg transition-shadow duration-300"
              onMouseEnter={() => setHoveredPost(post.id)}
              onMouseLeave={() => setHoveredPost(null)}
            >
              <div className="relative aspect-video overflow-hidden">
                <Image
                  src={post.coverImage || "/placeholder.svg"}
                  alt={post.title}
                  fill
                  className={cn(
                    "object-cover transition-transform duration-500",
                    hoveredPost === post.id ? "scale-110" : "scale-100",
                  )}
                />
              </div>

              <CardContent className="p-5 flex-1">
                <div className="flex flex-wrap gap-2 mb-3">
                  {post.categories.map((category, index) => (
                    <Badge key={index} variant="outline" className="text-xs">
                      {category}
                    </Badge>
                  ))}
                </div>

                <h3 className="font-bold mb-2">{post.title}</h3>
                <p className="text-muted-foreground text-sm line-clamp-3">{post.excerpt}</p>
              </CardContent>

              <CardFooter className="p-5 pt-0 flex justify-between items-center">
                <div className="flex items-center gap-2 text-xs text-muted-foreground">
                  <Calendar className="h-3 w-3" />
                  <span>{post.date}</span>
                </div>

                <Button
                  variant="ghost"
                  size="sm"
                  className="gap-1 p-0 h-auto hover:bg-transparent hover:text-primary"
                  onClick={() => handleReadMore(post.id)}
                >
                  <span>Read more</span>
                  <ArrowRight className="h-3 w-3" />
                </Button>
              </CardFooter>
            </Card>
          </motion.div>
        ))}
      </div>

      <div className="flex justify-center mt-8">
        <Button variant="outline" className="gap-2">
          View All Articles
          <ArrowRight className="h-4 w-4" />
        </Button>
      </div>
    </section>
  )
}

[V0_FILE]typescriptreact:file="components/ui/section-container.tsx" isMerged="true"
import type React from "react"
import { cn } from "@/lib/utils"

interface SectionContainerProps {
  id?: string
  className?: string
  children: React.ReactNode
  fullWidth?: boolean
  as?: React.ElementType
  style?: React.CSSProperties
}

export function SectionContainer({
  id,
  className,
  children,
  fullWidth = false,
  as: Component = "section",
  style,
  ...props
}: SectionContainerProps & React.HTMLAttributes<HTMLElement>) {
  return (
    <Component
      id={id}
      className={cn("py-16 md:py-24", fullWidth ? "w-full" : "container mx-auto px-4", className)}
      style={style}
      {...props}
    >
      {children}
    </Component>
  )
}

interface SectionHeaderProps {
  title: string
  subtitle?: string
  align?: "left" | "center" | "right"
  titleClassName?: string
  subtitleClassName?: string
  decorative?: boolean
}

export function SectionHeader({
  title,
  subtitle,
  align = "center",
  titleClassName,
  subtitleClassName,
  decorative = true,
}: SectionHeaderProps) {
  return (
    <div className={cn("mb-12", `text-${align}`)}>
      <h2 className={cn("text-3xl md:text-4xl font-bold relative inline-block", titleClassName)}>
        {title}
        {decorative && (
          <span className="absolute -bottom-2 left-0 w-full h-1 bg-gradient-to-r from-primary/80 to-primary/20 rounded-full" />
        )}
      </h2>
      {subtitle && <p className={cn("mt-4 text-muted-foreground max-w-2xl mx-auto", subtitleClassName)}>{subtitle}</p>}
    </div>
  )
}

[V0_FILE]typescriptreact:file="components/ui/animated-gradient-background.tsx" isMerged="true"
"use client"

import type React from "react"

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

interface AnimatedGradientBackgroundProps {
  className?: string
  colors?: string[]
  speed?: number
  blur?: number
  children?: React.ReactNode
}

export function AnimatedGradientBackground({
  className,
  colors = ["#3b82f6", "#8b5cf6", "#ec4899"],
  speed = 10,
  blur = 100,
  children,
}: AnimatedGradientBackgroundProps) {
  const canvasRef = useRef<HTMLCanvasElement>(null)

  useEffect(() => {
    const canvas = canvasRef.current
    if (!canvas) return

    const ctx = canvas.getContext("2d")
    if (!ctx) return

    let width = (canvas.width = window.innerWidth)
    let height = (canvas.height = window.innerHeight)

    // Create gradient points
    const points = colors.map((color, i) => ({
      x: Math.random() * width,
      y: Math.random() * height,
      vx: ((Math.random() - 0.5) * speed) / 10,
      vy: ((Math.random() - 0.5) * speed) / 10,
      radius: Math.min(width, height) * (0.2 + Math.random() * 0.3),
      color,
    }))

    const handleResize = () => {
      width = canvas.width = window.innerWidth
      height = canvas.height = window.innerHeight
    }

    window.addEventListener("resize", handleResize)

    const animate = () => {
      // Clear canvas
      ctx.clearRect(0, 0, width, height)

      // Update points position
      points.forEach((point) => {
        point.x += point.vx
        point.y += point.vy

        // Bounce off edges
        if (point.x < 0 || point.x > width) point.vx *= -1
        if (point.y < 0 || point.y > height) point.vy *= -1
      })

      // Create gradient
      const gradient = ctx.createRadialGradient(
        width / 2,
        height / 2,
        0,
        width / 2,
        height / 2,
        Math.max(width, height) / 1.5,
      )

      // Add color stops
      gradient.addColorStop(0, "#00000000")
      gradient.addColorStop(1, "#00000000")

      // Fill background
      ctx.fillStyle = gradient
      ctx.fillRect(0, 0, width, height)

      // Draw gradient blobs
      points.forEach((point) => {
        const gradient = ctx.createRadialGradient(point.x, point.y, 0, point.x, point.y, point.radius)

        gradient.addColorStop(0, point.color + "40") // 25% opacity
        gradient.addColorStop(1, point.color + "00") // 0% opacity

        ctx.fillStyle = gradient
        ctx.beginPath()
        ctx.arc(point.x, point.y, point.radius, 0, Math.PI * 2)
        ctx.fill()
      })

      requestAnimationFrame(animate)
    }

    animate()

    return () => {
      window.removeEventListener("resize", handleResize)
    }
  }, [colors, speed])

  return (
    <div className={cn("relative overflow-hidden", className)}>
      <canvas ref={canvasRef} className="absolute inset-0 w-full h-full -z-10" style={{ filter: `blur(${blur}px)` }} />
      {children}
    </div>
  )
}

[V0_FILE]typescriptreact:file="components/interactive-hero.tsx" isEdit="true" isMerged="true"
"use client"

import type React from "react"

import { useRef, useEffect, useState } from "react"
import { motion, useScroll, useTransform, AnimatePresence } from "framer-motion"
import { ArrowRight, Github, Linkedin, Mail, MousePointer, ChevronDown } from "lucide-react"
import { Button } from "@/components/ui/button"
import { useToast } from "@/components/ui/use-toast"
import { CustomGradientBackground } from "@/components/custom-gradient-background"

export default function InteractiveHero() {
  const { toast } = useToast()
  const containerRef = useRef<HTMLDivElement>(null)
  const [mousePosition, setMousePosition] = useState({ x: 0, y: 0 })
  const [isHovered, setIsHovered] = useState(false)
  const [showScrollIndicator, setShowScrollIndicator] = useState(true)

  const { scrollYProgress } = useScroll({
    target: containerRef,
    offset: ["start start", "end start"],
  })

  const opacity = useTransform(scrollYProgress, [0, 0.5], [1, 0])
  const scale = useTransform(scrollYProgress, [0, 0.5], [1, 0.8])
  const y = useTransform(scrollYProgress, [0, 0.5], [0, 100])

  const handleMouseMove = (e: React.MouseEvent<HTMLDivElement>) => {
    if (!containerRef.current) return
    const rect = containerRef.current.getBoundingClientRect()
    setMousePosition({
      x: ((e.clientX - rect.left) / rect.width - 0.5) * 20,
      y: ((e.clientY - rect.top) / rect.height - 0.5) * 20,
    })
  }

  const handleContactClick = () => {
    toast({
      title: "Contact Info",
      description: "Email: shaq.williams.ai@gmail.com | Phone: (917) 831-2482",
      duration: 5000,
    })
  }

  // Hide scroll indicator on scroll
  useEffect(() => {
    const handleScroll = () => {
      if (window.scrollY > 100) {
        setShowScrollIndicator(false)
      } else {
        setShowScrollIndicator(true)
      }
    }

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

  return (
    <CustomGradientBackground className="min-h-[90vh]">
      <motion.section
        ref={containerRef}
        style={{ opacity, scale, y }}
        className="min-h-[90vh] flex flex-col items-center justify-center py-24 relative overflow-hidden"
        onMouseMove={handleMouseMove}
        onMouseEnter={() => setIsHovered(true)}
        onMouseLeave={() => setIsHovered(false)}
      >
        {/* Interactive hover effect */}
        {isHovered && (
          <motion.div
            className="absolute inset-0 -z-5"
            initial={{ opacity: 0 }}
            animate={{ opacity: 1 }}
            exit={{ opacity: 0 }}
          >
            <motion.div
              className="absolute bg-blue-500/10 rounded-full blur-3xl"
              style={{
                left: `calc(50% + ${mousePosition.x * 2}px)`,
                top: `calc(50% + ${mousePosition.y * 2}px)`,
                width: "300px",
                height: "300px",
                x: "-50%",
                y: "-50%",
              }}
              transition={{ type: "spring", stiffness: 150, damping: 15 }}
            />
          </motion.div>
        )}

        <div className="container mx-auto px-4 z-10">
          <motion.div initial={{ opacity: 0, y: 20 }} animate={{ opacity: 1, y: 0 }} transition={{ duration: 0.7 }}>
            <motion.h1
              className="text-5xl md:text-7xl font-bold tracking-tight mb-6 text-center"
              animate={{
                textShadow: isHovered ? "0 0 15px rgba(255,255,255,0.5)" : "0 0 0px rgba(255,255,255,0)",
              }}
              transition={{ duration: 0.3 }}
            >
              <motion.span
                className="bg-clip-text text-transparent bg-gradient-to-r from-white to-gray-400 inline-block"
                animate={{ x: mousePosition.x * 0.05, y: mousePosition.y * 0.05 }}
                transition={{ type: "spring", stiffness: 150, damping: 15 }}
              >
                Shaquille Williams
              </motion.span>
            </motion.h1>
          </motion.div>

          <motion.div
            initial={{ opacity: 0 }}
            animate={{ opacity: 1 }}
            transition={{ duration: 0.5, delay: 0.3 }}
            className="text-muted-foreground mb-8 flex items-center justify-center gap-2 text-center"
          >
            <Mail className="h-4 w-4" />
            <span>shaq.williams.ai@gmail.com</span>
            <span className="mx-2">|</span>
            <span>(917) 831-2482</span>
          </motion.div>

          <motion.p
            initial={{ opacity: 0, y: 20 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.5, delay: 0.6 }}
            className="max-w-3xl text-lg md:text-xl mb-12 leading-relaxed text-center mx-auto"
          >
            <TypewriterEffect
              text="Senior Software Engineer, AI Specialist, and Community Organizer specializing in machine learning, generative AI, cybersecurity, and STEM education."
              highlightTerms={["AI", "machine learning", "generative AI", "cybersecurity", "STEM"]}
            />
          </motion.p>

          <motion.div
            initial={{ opacity: 0, y: 20 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.5, delay: 0.9 }}
            className="flex flex-col sm:flex-row gap-4 mb-12 justify-center"
          >
            <Button size="lg" className="group relative overflow-hidden">
              <span className="relative z-10">View Projects</span>
              <span className="absolute inset-0 bg-gradient-to-r from-blue-600 to-purple-600 opacity-0 group-hover:opacity-100 transition-opacity duration-300" />
              <ArrowRight className="ml-2 h-4 w-4 transition-transform group-hover:translate-x-1 relative z-10" />
            </Button>
            <Button
              size="lg"
              variant="outline"
              onClick={handleContactClick}
              className="group relative overflow-hidden border-primary/50"
            >
              <span className="relative z-10">Contact Me</span>
              <span className="absolute inset-0 bg-gradient-to-r from-blue-500/10 to-purple-500/10 opacity-0 group-hover:opacity-100 transition-opacity duration-300" />
            </Button>
          </motion.div>

          <motion.div
            initial={{ opacity: 0 }}
            animate={{ opacity: 1 }}
            transition={{ duration: 0.5, delay: 1.2 }}
            className="flex gap-4 justify-center"
          >
            <SocialButton icon={<Github className="h-5 w-5" />} url="https://github.com" label="GitHub" />
            <SocialButton icon={<Linkedin className="h-5 w-5" />} url="https://linkedin.com" label="LinkedIn" />
          </motion.div>
        </div>

        {/* Scroll indicator */}
        <AnimatePresence>
          {showScrollIndicator && (
            <motion.div
              initial={{ opacity: 0, y: 10 }}
              animate={{ opacity: 1, y: 0 }}
              exit={{ opacity: 0, y: -10 }}
              transition={{ duration: 0.3 }}
              className="absolute bottom-8 left-1/2 transform -translate-x-1/2 flex flex-col items-center"
            >
              <motion.p
                className="text-sm text-muted-foreground mb-2"
                animate={{ y: [0, 5, 0] }}
                transition={{ repeat: Number.POSITIVE_INFINITY, duration: 1.5 }}
              >
                Scroll to explore
              </motion.p>
              <motion.div animate={{ y: [0, 5, 0] }} transition={{ repeat: Number.POSITIVE_INFINITY, duration: 1.5 }}>
                <ChevronDown className="h-5 w-5 text-muted-foreground" />
              </motion.div>
            </motion.div>
          )}
        </AnimatePresence>

        {/* Interactive cursor */}
        <AnimatePresence>
          {isHovered && (
            <motion.div
              initial={{ opacity: 0, scale: 0.5 }}
              animate={{
                opacity: 1,
                scale: 1,
                x: mousePosition.x * 2,
                y: mousePosition.y * 2,
              }}
              exit={{ opacity: 0, scale: 0.5 }}
              className="hidden md:block pointer-events-none fixed w-6 h-6 rounded-full border border-primary z-50 mix-blend-difference"
              style={{ left: "50%", top: "50%" }}
              transition={{ type: "spring", stiffness: 150, damping: 15 }}
            >
              <MousePointer className="h-3 w-3 absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 text-primary" />
            </motion.div>
          )}
        </AnimatePresence>
      </motion.section>
    </CustomGradientBackground>
  )
}

interface SocialButtonProps {
  icon: React.ReactNode
  url: string
  label: string
}

function SocialButton({ icon, url, label }: SocialButtonProps) {
  return (
    <Button variant="ghost" size="icon" asChild className="relative overflow-hidden group">
      <a
        href={url}
        target="_blank"
        rel="noopener noreferrer"
        aria-label={label}
        className="transition-transform duration-300 group-hover:scale-110"
      >
        {icon}
        <span className="absolute inset-0 rounded-full bg-primary/10 scale-0 opacity-0 group-hover:scale-100 group-hover:opacity-100 transition-all duration-300 ease-out"></span>
      </a>
    </Button>
  )
}

interface TypewriterEffectProps {
  text: string
  highlightTerms?: string[]
}

function TypewriterEffect({ text, highlightTerms = [] }: TypewriterEffectProps) {
  const [displayedText, setDisplayedText] = useState("")

  useEffect(() => {
    let i = 0
    const interval = setInterval(() => {
      if (i < text.length) {
        setDisplayedText((prev) => prev + text.charAt(i))
        i++
      } else {
        clearInterval(interval)
      }
    }, 30)

    return () => clearInterval(interval)
  }, [text])

  // If no highlighted terms or typing is still in progress, just return the text
  if (highlightTerms.length === 0 || displayedText.length < text.length) {
    return (
      <span>
        {displayedText}
        <span className="animate-pulse">|</span>
      </span>
    )
  }

  // If typing is complete and we have terms to highlight, process the text
  let processedText = displayedText

  // Replace each term with a highlighted version
  highlightTerms.forEach((term) => {
    const regex = new RegExp(`(${term})`, "gi")
    processedText = processedText.replace(regex, '<span class="text-primary font-semibold">$1</span>')
  })

  return <span dangerouslySetInnerHTML={{ __html: processedText }} />
}

[V0_FILE]typescriptreact:file="components/publications.tsx" isEdit="true" isQuickEdit="true" isMerged="true"
import { Book, Presentation } from "lucide-react"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"

export default function Publications() {
  return (
    <section id="publications" className="py-12">
      <h2 className="text-3xl font-bold text-center mb-8">Publications & Contributions</h2>

      <div className="grid md:grid-cols-2 gap-8">
        <div>
          <div className="flex items-center gap-2 mb-6">
            <Book className="h-5 w-5" />
            <h3 className="text-xl font-semibold">Publications</h3>
          </div>

          <div className="space-y-4">
            <PublicationCard
              title="Mastering Kubernetes (Third Edition)"
              type="Book"
              description="A comprehensive guide to container orchestration with Kubernetes, focusing on scalable ML deployments and community-oriented infrastructure."
              date="2023"
              link="#"
            />

            <PublicationCard
              title="Machine Learning for Cybersecurity Cookbook"
              type="Book"
              description="Practical recipes for implementing machine learning in cybersecurity applications, with a focus on ethical hacking and security for social justice initiatives."
              date="2022"
              link="#"
              journal="O'Reilly Media"
            />

            <PublicationCard
              title="Efficient Voice Cloning with Reduced Computational Resources"
              type="Journal"
              description="Novel techniques for optimizing voice synthesis models for edge devices and resource-constrained environments."
              date="2022"
              link="#"
              journal="IEEE Transactions on Audio Processing"
            />

            <PublicationCard
              title="Community-Centered AI: Bridging Technology and Social Impact"
              type="Conference Paper"
              description="Framework for developing AI solutions with direct community involvement and feedback loops for social change applications."
              date="2021"
              link="#"
              conference="NeurIPS Workshop on AI for Social Good"
            />
          </div>
        </div>

        <div>
          <div className="flex items-center gap-2 mb-6">
            <Presentation className="h-5 w-5" />
            <h3 className="text-xl font-semibold">Workshops & Talks</h3>
          </div>

          <div className="space-y-4">
            <WorkshopCard
              title="GraphNR Workshop 2023"
              venue="Network Analysis Conference"
              description="Hands-on workshop on combining graph neural networks with social network analysis for community mapping and resource allocation."
              date="October 2023"
            />

            <WorkshopCard
              title="Hacktivism & Digital Tools for Social Change"
              venue="Social Justice Tech Summit"
              description="Workshop on ethical hacking, secure communication, and digital privacy tools for activists and community organizers."
              date="August 2023"
            />

            <WorkshopCard
              title="Democratizing AI Education"
              venue="STEM Education Summit"
              description="Keynote on creating accessible AI curriculum for underrepresented communities and educational institutions."
              date="May 2023"
            />

            <WorkshopCard
              title="MLOps for Community Organizations"
              venue="Tech for Social Impact Conference"
              description="Workshop on implementing lightweight ML pipelines for resource-constrained organizations and activist networks."
              date="February 2022"
            />
          </div>
        </div>
      </div>
    </section>
  )
}

interface PublicationCardProps {
  title: string
  type: string
  description: string
  date: string
  link: string
  journal?: string
  conference?: string
}

function PublicationCard({ title, type, description, date, link, journal, conference }: PublicationCardProps) {
  return (
    <Card>
      <CardHeader className="pb-2">
        <div className="flex justify-between items-start">
          <CardTitle className="text-lg">{title}</CardTitle>
          <Badge>{type}</Badge>
        </div>
        {journal && <div className="text-sm text-muted-foreground">{journal}</div>}
        {conference && <div className="text-sm text-muted-foreground">{conference}</div>}
      </CardHeader>
      <CardContent>
        <p className="text-sm mb-3">{description}</p>
        <div className="flex justify-between items-center">
          <div className="text-sm text-muted-foreground">{date}</div>
          <a href={link} className="text-sm text-primary hover:underline">
            Read Paper
          </a>
        </div>
      </CardContent>
    </Card>
  )
}

interface WorkshopCardProps {
  title: string
  venue: string
  description: string
  date: string
}

function WorkshopCard({ title, venue, description, date }: WorkshopCardProps) {
  return (
    <Card>
      <CardHeader className="pb-2">
        <div className="flex justify-between items-start">
          <CardTitle className="text-lg">{title}</CardTitle>
          <Badge variant="outline">{venue}</Badge>
        </div>
      </CardHeader>
      <CardContent>
        <p className="text-sm mb-3">{description}</p>
        <div className="text-sm text-muted-foreground">{date}</div>
      </CardContent>
    </Card>
  )
}

[V0_FILE]typescriptreact:file="components/education.tsx" isEdit="true" isQuickEdit="true" isMerged="true"
import type React from "react"
import { BookOpen, GraduationCap, Trophy, CheckCircle } from "lucide-react"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Progress } from "@/components/ui/progress"

export default function Education() {
  return (
    <section id="education" className="py-12">
      <h2 className="text-3xl font-bold text-center mb-12">Education</h2>

      <Card className="bg-gradient-to-r from-indigo-950 to-purple-950 border-none">
        <CardHeader className="pb-2">
          <div className="flex items-center gap-2">
            <GraduationCap className="h-5 w-5" />
            <CardTitle>Bachelor of Science in Physics</CardTitle>
          </div>
          <div className="flex justify-between items-center mt-2">
            <div className="text-muted-foreground">City College of New York</div>
            <div>2015 - 2019</div>
          </div>
          <div className="text-muted-foreground">New York, New York</div>
          <div className="text-muted-foreground">GPA: 3.8</div>
          <div className="text-muted-foreground mt-1">
            Relevant Coursework: Machine Learning, Data Structures, Computational Physics, Network Science, Data
            Visualization
          </div>
        </CardHeader>
        <CardContent>
          <div className="grid md:grid-cols-2 gap-8 mt-4">
            <div>
              <h3 className="text-lg font-semibold mb-4">Key Coursework</h3>
              <div className="grid grid-cols-2 gap-4">
                <CourseItem name="Machine Learning" grade="A" />
                <CourseItem name="Data Structures" grade="A" />
                <CourseItem name="Computational Physics" grade="A" />
                <CourseItem name="Network Science" grade="A" />
                <CourseItem name="Data Visualization" grade="A" />
                <CourseItem name="Quantum Mechanics" grade="A" />
                <CourseItem name="Statistical Mechanics" grade="A" />
                <CourseItem name="Mathematical Physics" grade="A" />
                <CourseItem name="Differential Equations" grade="A" />
                <CourseItem name="Linear Algebra" grade="A" />
              </div>
            </div>

            <div>
              <h3 className="text-lg font-semibold mb-4">Key Achievements</h3>
              <div className="space-y-6">
                <AchievementItem
                  icon={<Trophy className="h-5 w-5" />}
                  title="Research Excellence"
                  description="Applied advanced data analysis techniques to physics research projects"
                />
                <AchievementItem
                  icon={<CheckCircle className="h-5 w-5" />}
                  title="Technical Innovation"
                  description="Developed computational models for complex physical systems"
                />
                <AchievementItem
                  icon={<BookOpen className="h-5 w-5" />}
                  title="Academic Leadership"
                  description="Led physics study groups and mentored junior students"
                />
              </div>
            </div>
          </div>

          <div className="mt-8">
            <h3 className="text-lg font-semibold mb-4">Skills Developed</h3>
            <div className="space-y-4">
              <SkillProgressItem name="Scientific Computing" value={90} />
              <SkillProgressItem name="Data Analysis" value={85} />
              <SkillProgressItem name="Mathematical Modeling" value={80} />
              <SkillProgressItem name="Research Methods" value={95} />
            </div>
          </div>
        </CardContent>
      </Card>
    </section>
  )
}

interface CourseItemProps {
  name: string
  grade: string
}

function CourseItem({ name, grade }: CourseItemProps) {
  return (
    <div className="flex justify-between items-center">
      <div>{name}</div>
      <div className="bg-white text-black w-6 h-6 rounded-full flex items-center justify-center text-xs font-bold">
        {grade}
      </div>
    </div>
  )
}

interface AchievementItemProps {
  icon: React.ReactNode
  title: string
  description: string
}

function AchievementItem({ icon, title, description }: AchievementItemProps) {
  return (
    <div className="bg-black/20 rounded-lg p-4">
      <div className="flex items-center gap-2 mb-2">
        {icon}
        <h4 className="font-medium">{title}</h4>
      </div>
      <p className="text-sm text-muted-foreground">{description}</p>
    </div>
  )
}

interface SkillProgressItemProps {
  name: string
  value: number
}

function SkillProgressItem({ name, value }: SkillProgressItemProps) {
  return (
    <div>
      <div className="flex justify-between items-center mb-1">
        <div>{name}</div>
        <div>{value}%</div>
      </div>
      <Progress value={value} className="h-2" />
    </div>
  )
}

[V0_FILE]typescriptreact:file="components/ui/scroll-reveal.tsx" isEdit="true" isMerged="true"
"use client"

import type React from "react"

import { useRef, useEffect, useState, memo } from "react"
import { motion } from "framer-motion"
import { cn } from "@/lib/utils"
import { useIsClient } from "@/hooks/use-is-client"

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

export const ScrollReveal = memo(function ScrollReveal({
  children,
  className,
  direction = "up",
  delay = 0,
  duration = 0.5,
  threshold = 0.1,
  once = true,
}: ScrollRevealProps) {
  const ref = useRef<HTMLDivElement>(null)
  const [isVisible, setIsVisible] = useState(false)
  const isClient = useIsClient()

  // Only run on client-side
  useEffect(() => {
    if (!isClient || !ref.current) return

    let observer: IntersectionObserver | null = null

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

      if (ref.current) {
        observer.observe(ref.current)
      }
    } catch (error) {
      console.error("Error setting up IntersectionObserver:", error)
      // Fallback: just show the content
      setIsVisible(true)
    }

    return () => {
      if (observer && ref.current) {
        observer.unobserve(ref.current)
      }
    }
  }, [isClient, once, threshold])

  // Define animation variants based on direction
  const variants = {
    hidden: {
      opacity: 0,
      x: direction === "left" ? -50 : direction === "right" ? 50 : 0,
      y: direction === "up" ? 50 : direction === "down" ? -50 : 0,
    },
    visible: {
      opacity: 1,
      x: 0,
      y: 0,
      transition: {
        duration,
        delay,
        ease: "easeOut",
      },
    },
  }

  // If not yet client-side, render without animation
  if (!isClient) {
    return <div className={className}>{children}</div>
  }

  return (
    <motion.div
      ref={ref}
      className={className}
      initial="hidden"
      animate={isVisible ? "visible" : "hidden"}
      variants={variants}
    >
      {children}
    </motion.div>
  )
})

interface StaggeredContainerProps {
  children: React.ReactNode
  className?: string
  staggerDelay?: number
  childrenDelay?: number
  threshold?: number
  once?: boolean
}

export const StaggeredContainer = memo(function StaggeredContainer({
  children,
  className,
  staggerDelay = 0.1,
  childrenDelay = 0,
  threshold = 0.1,
  once = true,
}: StaggeredContainerProps) {
  const ref = useRef<HTMLDivElement>(null)
  const [isVisible, setIsVisible] = useState(false)
  const isClient = useIsClient()

  useEffect(() => {
    if (!isClient || !ref.current) return

    let observer: IntersectionObserver | null = null

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

      if (ref.current) {
        observer.observe(ref.current)
      }
    } catch (error) {
      console.error("Error setting up IntersectionObserver:", error)
      // Fallback: just show the content
      setIsVisible(true)
    }

    return () => {
      if (observer && ref.current) {
        observer.unobserve(ref.current)
      }
    }
  }, [isClient, once, threshold])

  const containerVariants = {
    hidden: {},
    visible: {
      transition: {
        staggerChildren: staggerDelay,
        delayChildren: childrenDelay,
      },
    },
  }

  // If not yet mounted, render without animation
  if (!isClient) {
    return <div className={cn("flex flex-col", className)}>{children}</div>
  }

  return (
    <motion.div
      ref={ref}
      className={cn("flex flex-col", className)}
      initial="hidden"
      animate={isVisible ? "visible" : "hidden"}
      variants={containerVariants}
    >
      {children}
    </motion.div>
  )
})

export const StaggerItem = memo(function StaggerItem({
  children,
  className,
  direction = "up",
  duration = 0.5,
}: {
  children: React.ReactNode
  className?: string
  direction?: "up" | "down" | "left" | "right"
  duration?: number
}) {
  const itemVariants = {
    hidden: {
      opacity: 0,
      x: direction === "left" ? -20 : direction === "right" ? 20 : 0,
      y: direction === "up" ? 20 : direction === "down" ? -20 : 0,
    },
    visible: {
      opacity: 1,
      x: 0,
      y: 0,
      transition: {
        duration,
        ease: "easeOut",
      },
    },
  }

  return (
    <motion.div className={className} variants={itemVariants}>
      {children}
    </motion.div>
  )
})

[V0_FILE]typescriptreact:file="components/redesigned-skills.tsx" isEdit="true" isQuickEdit="true" isMerged="true"
"use client"

import { useState, useEffect } from "react"
import { motion } from "framer-motion"
import { SectionContainer, SectionHeader } from "@/components/ui/section-container"
import { ScrollReveal, StaggeredContainer, StaggerItem } from "@/components/ui/scroll-reveal"
import { Tabs, TabsList, TabsTrigger, TabsContent } from "@/components/ui/tabs"
import { Card, CardContent } from "@/components/ui/card"
import { Progress } from "@/components/ui/progress"
import { Badge } from "@/components/ui/badge"
import { cn } from "@/lib/utils"
import dynamic from "next/dynamic"
import {
  Code,
  Cpu,
  Database,
  Cloud,
  BookOpen,
  PenToolIcon as Tool,
  Microscope,
  Laptop,
  BarChart3,
  Globe,
  MessageSquare,
  Shield,
  Zap,
  Briefcase,
  Loader2,
} from "lucide-react"

// Dynamically import the 3D globe component with no SSR
const SkillsGlobe = dynamic(() => import("@/components/3d-skills-globe"), {
  ssr: false,
  loading: () => (
    <div className="w-full h-[500px] flex items-center justify-center">
      <Loader2 className="h-8 w-8 animate-spin text-primary" />
      <span className="ml-2">Loading 3D Globe...</span>
    </div>
  ),
})

// Skill categories with icons
const skillCategories = [
  {
    id: "ml-ai",
    name: "Machine Learning & AI",
    icon: <Laptop className="h-5 w-5" />,
    color: "from-blue-500 to-indigo-500",
  },
  {
    id: "audio",
    name: "Audio & Voice Tech",
    icon: <Zap className="h-5 w-5" />,
    color: "from-purple-500 to-violet-500",
  },
  {
    id: "programming",
    name: "Programming",
    icon: <Code className="h-5 w-5" />,
    color: "from-emerald-500 to-green-500",
  },
  {
    id: "frameworks",
    name: "AI Frameworks",
    icon: <Cpu className="h-5 w-5" />,
    color: "from-purple-500 to-violet-500",
  },
  {
    id: "data",
    name: "Data Science",
    icon: <Database className="h-5 w-5" />,
    color: "from-amber-500 to-yellow-500",
  },
  {
    id: "network",
    name: "Network Analysis",
    icon: <Globe className="h-5 w-5" />,
    color: "from-cyan-500 to-blue-500",
  },
  {
    id: "cloud",
    name: "Cloud & DevOps",
    icon: <Cloud className="h-5 w-5" />,
    color: "from-sky-500 to-blue-500",
  },
  {
    id: "chatbots",
    name: "Chatbots & AI",
    icon: <MessageSquare className="h-5 w-5" />,
    color: "from-green-500 to-emerald-500",
  },
  {
    id: "security",
    name: "Cybersecurity",
    icon: <Shield className="h-5 w-5" />,
    color: "from-red-500 to-rose-500",
  },
  {
    id: "research",
    name: "Research",
    icon: <BookOpen className="h-5 w-5" />,
    color: "from-rose-500 to-pink-500",
  },
  {
    id: "tools",
    name: "Tools",
    icon: <Tool className="h-5 w-5" />,
    color: "from-orange-500 to-amber-500",
  },
  {
    id: "transferable",
    name: "Transferable Skills",
    icon: <Briefcase className="h-5 w-5" />,
    color: "from-indigo-500 to-blue-500",
  },
  {
    id: "math",
    name: "Mathematics",
    icon: <Microscope className="h-5 w-5" />,
    color: "from-cyan-500 to-teal-500",
  },
]

// Skill data
const skillsData = {
  "ml-ai": [
    { name: "Deep Learning", level: 90 },
    { name: "NLP", level: 85 },
    { name: "Computer Vision", level: 85 },
    { name: "Reinforcement Learning", level: 80 },
    { name: "MLOps", level: 75 },
    { name: "Generative AI", level: 90 },
    { name: "Voice Cloning", level: 85 },
    { name: "GANs", level: 90 },
    { name: "Transformers", level: 85 },
    { name: "Object Detection", level: 80 },
  ],
  audio: [
    { name: "Real-time Voice Cloning", level: 90 },
    { name: "One-Shot Voice Cloning", level: 85 },
    { name: "TensorFlow TTS", level: 90 },
    { name: "Speaker Diarization", level: 85 },
    { name: "Whisper Transcription", level: 90 },
    { name: "Audio Processing", level: 85 },
    { name: "Audiobook Generation", level: 80 },
    { name: "Real-time Audio Adjustments", level: 75 },
  ],
  programming: [
    { name: "Python", level: 95 },
    { name: "JavaScript/TypeScript", level: 90 },
    { name: "C++", level: 75 },
    { name: "SQL", level: 80 },
    { name: "R", level: 60 },
    { name: "MATLAB", level: 50 },
    { name: "Julia", level: 55 },
    { name: "Go", level: 65 },
    { name: "Java", level: 70 },
  ],
  frameworks: [
    { name: "PyTorch", level: 90 },
    { name: "TensorFlow", level: 85 },
    { name: "Scikit-learn", level: 95 },
    { name: "Hugging Face", level: 90 },
    { name: "CUDA", level: 75 },
    { name: "TensorRT", level: 65 },
    { name: "MLflow", level: 70 },
    { name: "React", level: 80 },
    { name: "Node.js", level: 75 },
    { name: "Flask", level: 85 },
    { name: "Django", level: 80 },
  ],
  data: [
    { name: "Data Mining", level: 85 },
    { name: "Business Intelligence", level: 70 },
    { name: "Big Data Processing", level: 80 },
    { name: "Pandas", level: 95 },
    { name: "Tableau", level: 70 },
    { name: "Data Visualization", level: 85 },
    { name: "Predictive Modeling", level: 90 },
    { name: "Text Analysis", level: 85 },
    { name: "Sentiment Analysis", level: 80 },
    { name: "Social Media Analysis", level: 75 },
  ],
  network: [
    { name: "Social Network Analysis", level: 85 },
    { name: "Graph Analytics", level: 80 },
    { name: "Community Detection", level: 75 },
    { name: "Network Visualization", level: 80 },
    { name: "Friend Recommendation Systems", level: 85 },
    { name: "Topic Connection Analysis", level: 80 },
    { name: "NetworkX", level: 90 },
  ],
  cloud: [
    { name: "AWS", level: 85 },
    { name: "GCP", level: 75 },
    { name: "Docker", level: 90 },
    { name: "Kubernetes", level: 85 },
    { name: "CI/CD", level: 80 },
    { name: "Microservices", level: 75 },
    { name: "DevOps", level: 80 },
    { name: "Terraform", level: 70 },
    { name: "Jenkins", level: 65 },
    { name: "AWS Lambda", level: 85 },
  ],
  chatbots: [
    { name: "Emotion-Aware Chatbots", level: 85 },
    { name: "NLP Integration", level: 90 },
    { name: "Conversational AI", level: 85 },
    { name: "Rule-Based Systems", level: 80 },
    { name: "Sentiment Tracking", level: 85 },
    { name: "Topic Tracking", level: 80 },
    { name: "Customer Service Automation", level: 75 },
  ],
  security: [
    { name: "Vulnerability Detection", level: 80 },
    { name: "IoT Security", level: 75 },
    { name: "ML for Cybersecurity", level: 85 },
    { name: "Ethical Hacking", level: 70 },
    { name: "Security Tools Development", level: 80 },
    { name: "RF Security", level: 65 },
    { name: "Web Security", level: 75 },
  ],
  research: [
    { name: "Grant Writing", level: 75 },
    { name: "Peer Review", level: 80 },
    { name: "Research Methods", level: 90 },
    { name: "Experimental Design", level: 85 },
    { name: "Scientific Writing", level: 90 },
    { name: "Literature Review", level: 85 },
    { name: "Academic Publishing", level: 75 },
  ],
  tools: [
    { name: "Git/GitHub", level: 95 },
    { name: "Linux/Unix", level: 85 },
    { name: "SolidWorks", level: 60 },
    { name: "AutoCAD", level: 55 },
    { name: "Arduino", level: 70 },
    { name: "Raspberry Pi", level: 75 },
    { name: "Jupyter Notebooks", level: 95 },
    { name: "VS Code", level: 90 },
    { name: "Scrapy", level: 85 },
    { name: "Selenium", level: 80 },
  ],
  transferable: [
    { name: "Project Management", level: 90 },
    { name: "Technical Documentation", level: 85 },
    { name: "Data-Driven Decision Making", level: 90 },
    { name: "Innovation & Problem-Solving", level: 95 },
    { name: "Collaboration", level: 90 },
    { name: "Communication", level: 85 },
    { name: "Leadership", level: 90 },
    { name: "Time Management", level: 85 },
  ],
  math: [
    { name: "Linear Algebra", level: 95 },
    { name: "Differential Equations", level: 90 },
    { name: "Complex Analysis", level: 80 },
    { name: "Group Theory", level: 75 },
    { name: "Quantum Mechanics", level: 85 },
    { name: "Statistical Mechanics", level: 85 },
    { name: "Mathematical Physics", level: 80 },
    { name: "Statistics", level: 90 },
    { name: "Probability Theory", level: 85 },
  ],
}

export default function RedesignedSkills() {
  const [activeCategory, setActiveCategory] = useState("ml-ai")
  const [visualizationType, setVisualizationType] = useState<"chart" | "globe">("chart")
  const [isMounted, setIsMounted] = useState(false)

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

  return (
    <SectionContainer id="skills" className="bg-gradient-to-b from-background to-background/95">
      <SectionHeader
        title="Technical Skills"
        subtitle="A comprehensive overview of my technical expertise across various domains, from machine learning and AI to software development and research."
      />

      <ScrollReveal>
        <Tabs defaultValue="ml-ai" onValueChange={setActiveCategory} className="w-full">
          <TabsList className="flex flex-wrap justify-center gap-2 mb-8 bg-transparent">
            {skillCategories.map((category) => (
              <TabsTrigger
                key={category.id}
                value={category.id}
                className={cn(
                  "px-4 py-2 rounded-full text-sm font-medium transition-all data-[state=active]:shadow-lg",
                  activeCategory === category.id
                    ? `bg-gradient-to-r ${category.color} text-white`
                    : "bg-muted hover:bg-muted/80",
                )}
              >
                <div className="flex items-center gap-2">
                  {category.icon}
                  <span>{category.name}</span>
                </div>
              </TabsTrigger>
            ))}
          </TabsList>

          <div className="flex justify-center mb-8">
            <div className="bg-muted rounded-full p-1 flex">
              <button
                onClick={() => setVisualizationType("chart")}
                className={cn(
                  "px-4 py-2 rounded-full text-sm font-medium transition-all flex items-center gap-2",
                  visualizationType === "chart" ? "bg-primary text-primary-foreground shadow-sm" : "hover:bg-muted/80",
                )}
              >
                <BarChart3 className="h-4 w-4" />
                <span>Chart View</span>
              </button>
              <button
                onClick={() => setVisualizationType("globe")}
                className={cn(
                  "px-4 py-2 rounded-full text-sm font-medium transition-all flex items-center gap-2",
                  visualizationType === "globe" ? "bg-primary text-primary-foreground shadow-sm" : "hover:bg-muted/80",
                )}
              >
                <Globe className="h-4 w-4" />
                <span>3D Globe</span>
              </button>
            </div>
          </div>

          {skillCategories.map((category) => (
            <TabsContent key={category.id} value={category.id} className="mt-0">
              <Card className="border-none bg-gradient-to-br from-background/50 to-background/30 backdrop-blur-sm">
                <CardContent className="p-6">
                  {visualizationType === "chart" ? (
                    <StaggeredContainer className="grid md:grid-cols-2 gap-8">
                      {/* Left column - Skill bars */}
                      <div>
                        <h3 className="text-xl font-semibold mb-6 flex items-center gap-2">
                          {category.icon}
                          <span>{category.name} Proficiency</span>
                        </h3>

                        <div className="space-y-6">
                          {skillsData[category.id as keyof typeof skillsData].map((skill, index) => (
                            <StaggerItem key={skill.name} className="space-y-2">
                              <div className="flex justify-between items-center">
                                <span className="font-medium">{skill.name}</span>
                                <Badge
                                  className={cn(
                                    "px-2 py-0.5 text-xs",
                                    skill.level >= 90
                                      ? "bg-green-500/20 text-green-500 border-green-500/30"
                                      : skill.level >= 75
                                        ? "bg-blue-500/20 text-blue-500 border-blue-500/30"
                                        : "bg-amber-500/20 text-amber-500 border-amber-500/30",
                                  )}
                                >
                                  {skill.level}%
                                </Badge>
                              </div>
                              <Progress value={skill.level} className="h-2" />
                            </StaggerItem>
                          ))}
                        </div>
                      </div>

                      {/* Right column - Skill visualization */}
                      <div className="flex items-center justify-center">
                        {isMounted && (
                          <SkillVisualization
                            category={category}
                            skills={skillsData[category.id as keyof typeof skillsData]}
                          />
                        )}
                      </div>
                    </StaggeredContainer>
                  ) : (
                    <div className="flex justify-center">{isMounted && <SkillsGlobe />}</div>
                  )}
                </CardContent>
              </Card>
            </TabsContent>
          ))}
        </Tabs>
      </ScrollReveal>

      <div className="mt-12 text-center">
        <ScrollReveal>
          <p className="text-muted-foreground">
            These skills represent my technical expertise developed over years of professional experience and continuous
            learning.
            <br />
            I'm constantly expanding my knowledge and staying up-to-date with the latest advancements in AI and
            technology.
          </p>
        </ScrollReveal>
      </div>
    </SectionContainer>
  )
}

interface SkillVisualizationProps {
  category: (typeof skillCategories)[0]
  skills: { name: string; level: number }[]
}

function SkillVisualization({ category, skills }: SkillVisualizationProps) {
  // Helper function to safely extract colors from gradient string
  const getColorFromGradient = (gradientString: string, position: "from" | "to") => {
    // Default colors in case parsing fails
    const defaultColors = {
      from: "#3b82f6", // blue-500
      to: "#6366f1", // indigo-500
    }

    try {
      // Find the part that starts with 'from-' or 'to-'
      const parts = gradientString.split(" ")
      const colorPart = parts.find((part) => part.startsWith(position + "-"))

      if (!colorPart) return defaultColors[position]

      // Extract the color name (e.g., 'blue-500' from 'from-blue-500')
      const colorName = colorPart.replace(position + "-", "")

      // Map color names to actual hex values
      // This is a simplified mapping - you might want to expand this
      const colorMap: Record<string, string> = {
        "blue-500": "#3b82f6",
        "indigo-500": "#6366f1",
        "purple-500": "#8b5cf6",
        "violet-500": "#8b5cf6",
        "emerald-500": "#10b981",
        "green-500": "#22c55e",
        "amber-500": "#f59e0b",
        "yellow-500": "#eab308",
        "sky-500": "#0ea5e9",
        "rose-500": "#f43f5e",
        "pink-500": "#ec4899",
        "orange-500": "#f97316",
        "cyan-500": "#06b6d4",
        "teal-500": "#14b8a6",
        "red-500": "#ef4444",
      }

      return colorMap[colorName] || defaultColors[position]
    } catch (error) {
      console.error("Error parsing gradient color:", error)
      return defaultColors[position]
    }
  }

  // Create a radar chart visualization
  const numSkills = skills.length
  const angleStep = (Math.PI * 2) / numSkills

  // Calculate coordinates for each skill point
  const skillPoints = skills.map((skill, i) => {
    const angle = i * angleStep - Math.PI / 2 // Start from top
    const radius = (skill.level / 100) * 120 // Scale to fit in container
    return {
      x: 150 + radius * Math.cos(angle),
      y: 150 + radius * Math.sin(angle),
      name: skill.name,
      level: skill.level,
    }
  })

  // Create polygon points string
  const polygonPoints = skillPoints.map((point) => `${point.x},${point.y}`).join(" ")

  return (
    <div className="relative w-[300px] h-[300px]">
      <svg width="300" height="300" viewBox="0 0 300 300">
        {/* Background circles */}
        {[25, 50, 75, 100].map((level) => (
          <circle
            key={level}
            cx="150"
            cy="150"
            r={(level / 100) * 120}
            fill="none"
            stroke="currentColor"
            strokeOpacity="0.1"
            strokeWidth="1"
          />
        ))}

        {/* Axis lines */}
        {Array.from({ length: numSkills }).map((_, i) => {
          const angle = i * angleStep - Math.PI / 2
          const x2 = 150 + 120 * Math.cos(angle)
          const y2 = 150 + 120 * Math.sin(angle)
          return (
            <line key={i} x1="150" y1="150" x2={x2} y2={y2} stroke="currentColor" strokeOpacity="0.1" strokeWidth="1" />
          )
        })}

        {/* Skill polygon */}
        <motion.polygon
          points={polygonPoints}
          fill={`url(#gradient-${category.id})`}
          fillOpacity="0.3"
          stroke={`url(#gradient-${category.id})`}
          strokeWidth="2"
          initial={{ opacity: 0, scale: 0.8 }}
          animate={{ opacity: 1, scale: 1 }}
          transition={{ duration: 0.5 }}
        />

        {/* Gradient definition */}
        <defs>
          <linearGradient id={`gradient-${category.id}`} x1="0%" y1="0%" x2="100%" y2="100%">
            {/* Extract colors safely from the gradient string */}
            <stop offset="0%" stopColor={getColorFromGradient(category.color, "from")} />
            <stop offset="100%" stopColor={getColorFromGradient(category.color, "to")} />
          </linearGradient>
        </defs>

        {/* Skill points */}
        {skillPoints.map((point, i) => (
          <motion.circle
            key={i}
            cx={point.x}
            cy={point.y}
            r="4"
            fill="white"
            stroke={`url(#gradient-${category.id})`}
            strokeWidth="2"
            initial={{ opacity: 0, scale: 0 }}
            animate={{ opacity: 1, scale: 1 }}
            transition={{ duration: 0.3, delay: i * 0.05 }}
          />
        ))}

        {/* Skill labels */}
        {skillPoints.map((point, i) => {
          const angle = i * angleStep - Math.PI / 2
          const labelRadius = 135
          const labelX = 150 + labelRadius * Math.cos(angle)
          const labelY = 150 + labelRadius * Math.sin(angle)

          // Adjust text anchor based on position
          const textAnchor =
            angle > -Math.PI / 4 && angle < Math.PI / 4
              ? "start"
              : angle > (Math.PI * 3) / 4 || angle < (-Math.PI * 3) / 4
                ? "end"
                : "middle"

          // Adjust vertical alignment
          const dy =
            angle > Math.PI / 4 && angle < (Math.PI * 3) / 4
              ? "0.8em"
              : angle > (-Math.PI * 3) / 4 && angle < -Math.PI / 4
                ? "-0.5em"
                : "0.3em"

          return (
            <motion.text
              key={i}
              x={labelX}
              y={labelY}
              textAnchor={textAnchor}
              dy={dy}
              fontSize="10"
              fill="currentColor"
              fillOpacity="0.7"
              initial={{ opacity: 0 }}
              animate={{ opacity: 1 }}
              transition={{ duration: 0.3, delay: i * 0.05 + 0.3 }}
            >
              {point.name}
            </motion.text>
          )
        })}
      </svg>
    </div>
  )
}

[V0_FILE]typescriptreact:file="app/not-found.tsx" isEdit="true" isMerged="true"
export default function NotFound() {
  return (
    <div className="min-h-screen flex flex-col items-center justify-center text-center p-4">
      <h1 className="text-4xl font-bold mb-4">404 - Page Not Found</h1>
      <p className="text-muted-foreground mb-8 max-w-md mx-auto">
        Sorry, the page you are looking for does not exist or has been moved.
      </p>
      <a
        href="/"
        className="px-4 py-2 bg-primary text-primary-foreground rounded-md hover:bg-primary/90 transition-colors"
      >
        Return Home
      </a>
    </div>
  )
}

[V0_FILE]typescriptreact:file="components/ui/skeleton.tsx" isMerged="true"
import type React from "react"
import { cn } from "@/lib/utils"

interface SkeletonProps {
  className?: string
  variant?: "default" | "card" | "text" | "circular" | "rectangular"
  count?: number
  gap?: number
}

export function Skeleton({
  className,
  variant = "default",
  count = 1,
  gap = 4,
  ...props
}: SkeletonProps & React.HTMLAttributes<HTMLDivElement>) {
  const renderSkeleton = () => {
    switch (variant) {
      case "card":
        return <div className={cn("rounded-lg bg-muted/60 animate-pulse", className)} {...props} />
      case "text":
        return <div className={cn("h-4 w-full rounded-md bg-muted/60 animate-pulse", className)} {...props} />
      case "circular":
        return <div className={cn("rounded-full bg-muted/60 animate-pulse", className)} {...props} />
      case "rectangular":
        return <div className={cn("rounded-md bg-muted/60 animate-pulse", className)} {...props} />
      default:
        return <div className={cn("h-5 w-full rounded-md bg-muted/60 animate-pulse", className)} {...props} />
    }
  }

  if (count === 1) {
    return renderSkeleton()
  }

  return (
    <div className={`space-y-${gap}`}>
      {Array.from({ length: count }).map((_, i) => (
        <div key={i}>{renderSkeleton()}</div>
      ))}
    </div>
  )
}

[V0_FILE]typescriptreact:file="components/skeletons/hero-skeleton.tsx" isMerged="true"
import { Skeleton } from "@/components/ui/skeleton"

export function HeroSkeleton() {
  return (
    <div className="min-h-screen flex items-center">
      <div className="container mx-auto px-4 py-16 md:py-24 grid md:grid-cols-2 gap-12 items-center">
        <div className="order-2 md:order-1">
          <Skeleton className="h-8 w-32 mb-4" />
          <Skeleton className="h-16 w-full max-w-md mb-6" />
          <Skeleton className="h-12 w-full max-w-lg mb-8" />

          <div className="flex flex-wrap gap-3 mb-8">
            <Skeleton className="h-8 w-32" />
            <Skeleton className="h-8 w-32" />
            <Skeleton className="h-8 w-32" />
            <Skeleton className="h-8 w-32" />
          </div>

          <div className="flex flex-col sm:flex-row gap-4 mb-8">
            <Skeleton className="h-12 w-40" />
            <Skeleton className="h-12 w-40" />
          </div>

          <div className="flex gap-4">
            <Skeleton className="h-10 w-10 rounded-full" />
            <Skeleton className="h-10 w-10 rounded-full" />
            <Skeleton className="h-10 w-10 rounded-full" />
          </div>
        </div>

        <div className="order-1 md:order-2 flex justify-center">
          <Skeleton className="w-64 h-64 md:w-80 md:h-80 rounded-full" />
        </div>
      </div>
    </div>
  )
}

[V0_FILE]typescriptreact:file="components/skeletons/about-skeleton.tsx" isMerged="true"
import { Skeleton } from "@/components/ui/skeleton"

export function AboutSkeleton() {
  return (
    <div className="py-16 md:py-24">
      <div className="container mx-auto px-4">
        <div className="flex flex-col items-center mb-12">
          <Skeleton className="h-10 w-64 mb-4" />
          <Skeleton className="h-5 w-full max-w-2xl" />
        </div>

        <div className="grid md:grid-cols-2 gap-12 items-center">
          <div className="relative">
            <Skeleton className="aspect-[3/4] w-full rounded-lg" />
          </div>

          <div>
            <Skeleton className="h-8 w-3/4 mb-4" />
            <Skeleton className="h-4 w-full mb-2" variant="text" count={4} gap={2} />
            <Skeleton className="h-4 w-full mb-6" variant="text" count={4} gap={2} />

            <div className="flex flex-wrap gap-3 mb-8">
              <Skeleton className="h-8 w-32" />
              <Skeleton className="h-8 w-32" />
              <Skeleton className="h-8 w-32" />
            </div>

            <div className="flex gap-4">
              <Skeleton className="h-10 w-40" />
              <Skeleton className="h-10 w-40" />
            </div>
          </div>
        </div>
      </div>
    </div>
  )
}

[V0_FILE]typescriptreact:file="components/skeletons/skills-skeleton.tsx" isMerged="true"
import { Skeleton } from "@/components/ui/skeleton"

export function SkillsSkeleton() {
  return (
    <div className="py-16 md:py-24 bg-gradient-to-b from-background to-background/95">
      <div className="container mx-auto px-4">
        <div className="flex flex-col items-center mb-12">
          <Skeleton className="h-10 w-64 mb-4" />
          <Skeleton className="h-5 w-full max-w-2xl" />
        </div>

        <div className="flex flex-wrap justify-center gap-2 mb-8">
          {Array.from({ length: 6 }).map((_, i) => (
            <Skeleton key={i} className="h-10 w-32 rounded-full" />
          ))}
        </div>

        <div className="flex justify-center mb-8">
          <Skeleton className="h-10 w-64 rounded-full" />
        </div>

        <Skeleton className="w-full h-[500px] rounded-xl" variant="card" />

        <div className="mt-12 text-center">
          <Skeleton className="h-4 w-full max-w-2xl mx-auto" variant="text" count={2} gap={2} />
        </div>
      </div>
    </div>
  )
}

[V0_FILE]typescriptreact:file="components/skeletons/experience-skeleton.tsx" isMerged="true"
import { Skeleton } from "@/components/ui/skeleton"

export function ExperienceSkeleton() {
  return (
    <div className="py-16 md:py-24 bg-gradient-to-b from-background/95 to-background">
      <div className="container mx-auto px-4">
        <div className="flex flex-col items-center mb-12">
          <Skeleton className="h-10 w-64 mb-4" />
          <Skeleton className="h-5 w-full max-w-2xl" />
        </div>

        <div className="flex justify-center gap-2 mb-8">
          <Skeleton className="h-10 w-32 rounded-full" />
          <Skeleton className="h-10 w-40 rounded-full" />
          <Skeleton className="h-10 w-40 rounded-full" />
        </div>

        <div className="space-y-6">
          {Array.from({ length: 3 }).map((_, i) => (
            <Skeleton key={i} className="w-full h-64 rounded-xl" variant="card" />
          ))}
        </div>
      </div>
    </div>
  )
}

[V0_FILE]typescriptreact:file="components/skeletons/projects-skeleton.tsx" isMerged="true"
import { Skeleton } from "@/components/ui/skeleton"

export function ProjectsSkeleton() {
  return (
    <div className="py-16 md:py-24 relative">
      <div className="container mx-auto px-4">
        <div className="flex flex-col items-center mb-12">
          <Skeleton className="h-10 w-64 mb-4" />
          <Skeleton className="h-5 w-full max-w-2xl" />
        </div>

        <div className="mb-16">
          <div className="flex items-center gap-2 justify-center mb-6">
            <Skeleton className="h-6 w-40" />
          </div>

          <Skeleton className="w-full aspect-[16/9] rounded-xl mb-4" variant="card" />
        </div>

        <div className="flex flex-wrap justify-center gap-2 mb-8">
          {Array.from({ length: 8 }).map((_, i) => (
            <Skeleton key={i} className="h-10 w-32 rounded-full" />
          ))}
        </div>

        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
          {Array.from({ length: 6 }).map((_, i) => (
            <Skeleton key={i} className="aspect-[3/4] rounded-xl" variant="card" />
          ))}
        </div>
      </div>
    </div>
  )
}

[V0_FILE]typescriptreact:file="components/skeletons/case-studies-skeleton.tsx" isMerged="true"
import { Skeleton } from "@/components/ui/skeleton"

export function CaseStudiesSkeleton() {
  return (
    <div className="py-16 md:py-24">
      <div className="container mx-auto px-4">
        <div className="flex flex-col items-center mb-12">
          <Skeleton className="h-10 w-64 mb-4" />
          <Skeleton className="h-5 w-full max-w-2xl" />
        </div>

        <div className="space-y-8">
          {Array.from({ length: 2 }).map((_, i) => (
            <Skeleton key={i} className="w-full h-80 rounded-xl" variant="card" />
          ))}
        </div>
      </div>
    </div>
  )
}

[V0_FILE]typescriptreact:file="components/progressive-loading-provider.tsx" isMerged="true"
"use client"

import type React from "react"
import { createContext, useContext, useState, useEffect } from "react"

type SectionName =
  | "hero"
  | "about"
  | "skills"
  | "experience"
  | "projects"
  | "caseStudies"
  | "education"
  | "publications"
  | "testimonials"
  | "blog"
  | "contact"

interface ProgressiveLoadingContextType {
  loadedSections: Record<SectionName, boolean>
  setLoaded: (section: SectionName) => void
  isLoading: boolean
  progress: number
}

const ProgressiveLoadingContext = createContext<ProgressiveLoadingContextType | undefined>(undefined)

export function ProgressiveLoadingProvider({ children }: { children: React.ReactNode }) {
  const [loadedSections, setLoadedSections] = useState<Record<SectionName, boolean>>({
    hero: false,
    about: false,
    skills: false,
    experience: false,
    projects: false,
    caseStudies: false,
    education: false,
    publications: false,
    testimonials: false,
    blog: false,
    contact: false,
  })

  const [progress, setProgress] = useState(0)
  const [isLoading, setIsLoading] = useState(true)

  const setLoaded = (section: SectionName) => {
    setLoadedSections((prev) => ({ ...prev, [section]: true }))
  }

  // Calculate loading progress
  useEffect(() => {
    const totalSections = Object.keys(loadedSections).length
    const loadedCount = Object.values(loadedSections).filter(Boolean).length
    const newProgress = Math.round((loadedCount / totalSections) * 100)

    setProgress(newProgress)

    if (newProgress === 100) {
      // Add a small delay before setting loading to false
      const timer = setTimeout(() => {
        setIsLoading(false)
      }, 500)

      return () => clearTimeout(timer)
    }
  }, [loadedSections])

  // Simulate initial loading of critical sections
  useEffect(() => {
    // Prioritize loading the hero section
    const timer1 = setTimeout(() => setLoaded("hero"), 300)
    const timer2 = setTimeout(() => setLoaded("about"), 600)

    return () => {
      clearTimeout(timer1)
      clearTimeout(timer2)
    }
  }, [])

  return (
    <ProgressiveLoadingContext.Provider value={{ loadedSections, setLoaded, isLoading, progress }}>
      {children}
    </ProgressiveLoadingContext.Provider>
  )
}

export function useProgressiveLoading() {
  const context = useContext(ProgressiveLoadingContext)
  if (context === undefined) {
    throw new Error("useProgressiveLoading must be used within a ProgressiveLoadingProvider")
  }
  return context
}

[V0_FILE]typescriptreact:file="components/loading-progress.tsx" isMerged="true"
"use client"

import { useProgressiveLoading } from "@/components/progressive-loading-provider"
import { motion, AnimatePresence } from "framer-motion"

export function LoadingProgress() {
  const { isLoading, progress } = useProgressiveLoading()

  return (
    <AnimatePresence>
      {isLoading && (
        <motion.div
          className="fixed inset-0 z-50 flex flex-col items-center justify-center bg-background"
          initial={{ opacity: 1 }}
          exit={{ opacity: 0 }}
          transition={{ duration: 0.5 }}
        >
          <div className="w-64 h-1 bg-muted rounded-full overflow-hidden mb-4">
            <motion.div
              className="h-full bg-primary"
              initial={{ width: 0 }}
              animate={{ width: `${progress}%` }}
              transition={{ duration: 0.3 }}
            />
          </div>
          <div className="text-sm text-muted-foreground">Loading portfolio... {progress}%</div>
        </motion.div>
      )}
    </AnimatePresence>
  )
}

[V0_FILE]typescriptreact:file="components/section-wrapper.tsx" isMerged="true"
"use client"

import type React from "react"

import { useEffect, useState } from "react"
import { useInView } from "framer-motion"
import { useProgressiveLoading } from "@/components/progressive-loading-provider"
import { cn } from "@/lib/utils"

interface SectionWrapperProps {
  children: React.ReactNode
  sectionName: string
  className?: string
  skeletonComponent: React.ReactNode
  priority?: number // Lower number = higher priority
}

export function SectionWrapper({
  children,
  sectionName,
  className,
  skeletonComponent,
  priority = 5,
}: SectionWrapperProps) {
  const { loadedSections, setLoaded } = useProgressiveLoading()
  const [ref, setRef] = useState<HTMLDivElement | null>(null)
  const isInView = useInView(ref, { once: true, amount: 0.1 })
  const [shouldRender, setShouldRender] = useState(false)

  // Determine if this section should be loaded
  useEffect(() => {
    // If it's a high priority section, load it immediately
    if (priority <= 2) {
      setShouldRender(true)
      return
    }

    // Otherwise, load when in view
    if (isInView) {
      // Add a small delay for smoother transitions
      const timer = setTimeout(() => {
        setShouldRender(true)
      }, 100)

      return () => clearTimeout(timer)
    }
  }, [isInView, priority])

  // Mark section as loaded when rendered
  useEffect(() => {
    if (shouldRender && sectionName in loadedSections) {
      // Add a small delay to account for actual rendering
      const timer = setTimeout(() => {
        setLoaded(sectionName as any)
      }, 200)

      return () => clearTimeout(timer)
    }
  }, [shouldRender, sectionName, setLoaded, loadedSections])

  return (
    <div ref={setRef} className={cn(className)}>
      {shouldRender ? children : skeletonComponent}
    </div>
  )
}

[V0_FILE]typescriptreact:file="hooks/use-intersection-observer.tsx" isMerged="true"
"use client"

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

interface UseIntersectionObserverProps {
  threshold?: number
  rootMargin?: string
  once?: boolean
}

export function useIntersectionObserver<T extends HTMLElement = HTMLDivElement>({
  threshold = 0.1,
  rootMargin = "0px",
  once = true,
}: UseIntersectionObserverProps = {}): [RefObject<T>, boolean] {
  const ref = useRef<T>(null)
  const [isIntersecting, setIsIntersecting] = useState(false)

  useEffect(() => {
    const observer = new IntersectionObserver(
      ([entry]) => {
        setIsIntersecting(entry.isIntersecting)

        // If it's intersecting and we only want to trigger once, unobserve
        if (entry.isIntersecting && once && ref.current) {
          observer.unobserve(ref.current)
        }
      },
      {
        rootMargin,
        threshold,
      },
    )

    if (ref.current) {
      observer.observe(ref.current)
    }

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

  return [ref, isIntersecting]
}

[V0_FILE]typescriptreact:file="components/error-boundary.tsx" isMerged="true"
"use client"

import React from "react"
import { Button } from "@/components/ui/button"
import { AlertTriangle } from "lucide-react"

interface ErrorBoundaryProps {
  children: React.ReactNode
  fallback?: React.ReactNode
}

interface ErrorBoundaryState {
  hasError: boolean
  error: Error | null
}

export class ErrorBoundary extends React.Component<ErrorBoundaryProps, ErrorBoundaryState> {
  constructor(props: ErrorBoundaryProps) {
    super(props)
    this.state = { hasError: false, error: null }
  }

  static getDerivedStateFromError(error: Error): ErrorBoundaryState {
    return { hasError: true, error }
  }

  componentDidCatch(error: Error, errorInfo: React.ErrorInfo): void {
    console.error("Error caught by ErrorBoundary:", error, errorInfo)
  }

  render() {
    if (this.state.hasError) {
      // You can render any custom fallback UI
      return (
        this.props.fallback || (
          <div className="flex flex-col items-center justify-center p-6 border border-destructive/20 rounded-lg bg-destructive/10 my-4">
            <AlertTriangle className="h-10 w-10 text-destructive mb-4" />
            <h3 className="text-lg font-semibold mb-2">Something went wrong</h3>
            <p className="text-muted-foreground mb-4 text-center max-w-md">
              {this.state.error?.message || "An unexpected error occurred while rendering this section"}
            </p>
            <Button variant="outline" onClick={() => this.setState({ hasError: false, error: null })}>
              Try again
            </Button>
          </div>
        )
      )
    }

    return this.props.children
  }
}

export function withErrorBoundary<P extends object>(
  Component: React.ComponentType<P>,
  fallback?: React.ReactNode,
): React.FC<P> {
  return function WithErrorBoundary(props: P) {
    return (
      <ErrorBoundary fallback={fallback}>
        <Component {...props} />
      </ErrorBoundary>
    )
  }
}

[V0_FILE]typescriptreact:file="hooks/use-is-client.tsx" isMerged="true"
"use client"

import { useState, useEffect } from "react"

export function useIsClient() {
  const [isClient, setIsClient] = useState(false)

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

  return isClient
}

[V0_FILE]typescriptreact:file="components/skills-section-wrapper.tsx" isEdit="true" isMerged="true"
"use client"

import { useState, useEffect } from "react"
import dynamic from "next/dynamic"
import { Loader2 } from "lucide-react"
import { ErrorBoundary } from "@/components/error-boundary"
import { useIsClient } from "@/hooks/use-is-client"

// Static fallback component that works server-side
function SkillsFallback() {
  return (
    <section id="skills" className="py-12">
      <h2 className="text-3xl font-bold text-center mb-4">Technical Skills</h2>
      <p className="text-muted-foreground text-center max-w-2xl mx-auto mb-12">
        A comprehensive overview of my technical expertise across various domains, from machine learning and AI to
        software development and research.
      </p>
      <div className="flex justify-center items-center py-20">
        <Loader2 className="h-8 w-8 animate-spin text-primary mr-2" />
        <span>Loading skills visualization...</span>
      </div>
    </section>
  )
}

// Dynamically import the skills component with no SSR
const RedesignedSkills = dynamic(
  () =>
    import("@/components/redesigned-skills").catch((err) => {
      console.error("Failed to load RedesignedSkills:", err)
      return () => <SkillsFallback />
    }),
  {
    ssr: false,
    loading: () => <SkillsFallback />,
  },
)

export default function SkillsSectionWrapper() {
  const isClient = useIsClient()
  const [hasError, setHasError] = useState(false)

  // Reset error state when client state changes
  useEffect(() => {
    if (isClient) {
      setHasError(false)
    }
  }, [isClient])

  if (!isClient) {
    return <SkillsFallback />
  }

  if (hasError) {
    return (
      <section id="skills" className="py-12">
        <h2 className="text-3xl font-bold text-center mb-4">Technical Skills</h2>
        <div className="flex flex-col items-center justify-center p-6 border border-destructive/20 rounded-lg bg-destructive/10 my-4 max-w-2xl mx-auto">
          <p className="text-muted-foreground mb-4">
            We encountered an issue loading the skills visualization. Please refresh the page to try again.
          </p>
        </div>
      </section>
    )
  }

  return (
    <ErrorBoundary
      fallback={
        <section id="skills" className="py-12">
          <h2 className="text-3xl font-bold text-center mb-4">Technical Skills</h2>
          <div className="flex flex-col items-center justify-center p-6 border border-destructive/20 rounded-lg bg-destructive/10 my-4 max-w-2xl mx-auto">
            <p className="text-muted-foreground mb-4">
              We encountered an issue loading the skills visualization. Please refresh the page to try again.
            </p>
          </div>
        </section>
      }
    >
      <RedesignedSkills />
    </ErrorBoundary>
  )
}

[V0_FILE]typescriptreact:file="components/3d-skills-globe.tsx" isEdit="true" isMerged="true"
"use client"

import { useRef, useEffect, useState } from "react"
import { motion } from "framer-motion"
import { Card } from "@/components/ui/card"
import { Loader2, AlertTriangle } from "lucide-react"
import { cn } from "@/lib/utils"
import { useIsClient } from "@/hooks/use-is-client"

// Skills data for the globe
const skills = [
  // Machine Learning & AI
  { name: "Deep Learning", category: "AI", level: 90 },
  { name: "NLP", category: "AI", level: 85 },
  { name: "Computer Vision", category: "AI", level: 85 },
  { name: "Reinforcement Learning", category: "AI", level: 80 },
  { name: "GANs", category: "AI", level: 90 },
  { name: "Transformers", category: "AI", level: 85 },
  { name: "Object Detection", category: "AI", level: 80 },
  // More skills...
]

// Category colors
const categoryColors: Record<string, string> = {
  Programming: "#3b82f6", // blue
  AI: "#8b5cf6", // purple
  Audio: "#ec4899", // pink
  Frameworks: "#10b981", // green
  Data: "#06b6d4", // cyan
  Network: "#f59e0b", // amber
  Cloud: "#0ea5e9", // sky
  Chatbots: "#22c55e", // green
  Security: "#ef4444", // red
  Tools: "#f97316", // orange
  Mathematics: "#14b8a6", // teal
  "Soft Skills": "#8b5cf6", // purple
}

export default function SkillsGlobe() {
  const containerRef = useRef<HTMLDivElement>(null)
  const canvasRef = useRef<HTMLCanvasElement>(null)
  const [isLoading, setIsLoading] = useState(true)
  const [hoveredSkill, setHoveredSkill] = useState<string | null>(null)
  const [selectedCategory, setSelectedCategory] = useState<string | null>(null)
  const [isGlobeInitialized, setIsGlobeInitialized] = useState(false)
  const [isError, setIsError] = useState(false)
  const isClient = useIsClient()

  // Get unique categories
  const categories = Array.from(new Set(skills.map((skill) => skill.category)))

  // Filter skills by category
  const filteredSkills = selectedCategory ? skills.filter((skill) => skill.category === selectedCategory) : skills

  useEffect(() => {
    // Only run in browser environment
    if (!isClient) return

    let animationFrameId: number
    let scene: any,
      camera: any,
      renderer: any,
      globe: any,
      raycaster: any,
      mouse: any,
      skillNodes: any[] = []

    const init = async () => {
      try {
        // Dynamically import Three.js
        const THREE = await import("three").catch((err) => {
          console.error("Failed to load Three.js:", err)
          setIsError(true)
          setIsLoading(false)
          return null
        })

        if (!THREE) return

        const { OrbitControls } = await import("three/examples/jsm/controls/OrbitControls").catch((err) => {
          console.error("Failed to load OrbitControls:", err)
          setIsError(true)
          setIsLoading(false)
          return { OrbitControls: null }
        })

        if (!OrbitControls) return

        if (!canvasRef.current || !containerRef.current) return

        // Get container dimensions
        const width = containerRef.current.clientWidth
        const height = containerRef.current.clientHeight

        // Initialize scene
        scene = new THREE.Scene()
        camera = new THREE.PerspectiveCamera(75, width / height, 0.1, 1000)
        camera.position.z = 200

        renderer = new THREE.WebGLRenderer({
          canvas: canvasRef.current,
          alpha: true,
          antialias: true,
        })
        renderer.setSize(width, height)
        renderer.setPixelRatio(window.devicePixelRatio)

        // Add orbit controls
        const controls = new OrbitControls(camera, renderer.domElement)
        controls.enableDamping = true
        controls.dampingFactor = 0.05
        controls.rotateSpeed = 0.5
        controls.enableZoom = false

        // Create globe geometry
        const globeGeometry = new THREE.SphereGeometry(80, 64, 64)
        const globeMaterial = new THREE.MeshBasicMaterial({
          color: 0x111111,
          transparent: true,
          opacity: 0.1,
          wireframe: true,
        })
        globe = new THREE.Mesh(globeGeometry, globeMaterial)
        scene.add(globe)

        // Add ambient light
        const ambientLight = new THREE.AmbientLight(0xffffff, 0.5)
        scene.add(ambientLight)

        // Add point light
        const pointLight = new THREE.PointLight(0xffffff, 1)
        pointLight.position.set(100, 100, 100)
        scene.add(pointLight)

        // Setup for raycasting (detecting mouse hover)
        raycaster = new THREE.Raycaster()
        mouse = new THREE.Vector2()

        // Create skill nodes
        skillNodes = []
        filteredSkills.forEach((skill, index) => {
          // Calculate position on sphere
          const phi = Math.acos(-1 + (2 * index) / filteredSkills.length)
          const theta = Math.sqrt(filteredSkills.length * Math.PI) * phi

          const x = Math.sin(phi) * Math.cos(theta) * 80
          const y = Math.sin(phi) * Math.sin(theta) * 80
          const z = Math.cos(phi) * 80

          // Create node geometry
          const size = (skill.level / 100) * 5 + 2
          const nodeGeometry = new THREE.SphereGeometry(size, 16, 16)

          // Get color from category
          const color = categoryColors[skill.category] || "#ffffff"
          const nodeMaterial = new THREE.MeshPhongMaterial({
            color: new THREE.Color(color),
            emissive: new THREE.Color(color),
            emissiveIntensity: 0.3,
            transparent: true,
            opacity: 0.8,
          })

          const node = new THREE.Mesh(nodeGeometry, nodeMaterial)
          node.position.set(x, y, z)
          node.userData = { skill: skill.name, category: skill.category, level: skill.level }

          scene.add(node)
          skillNodes.push(node)
        })

        // Handle window resize
        const handleResize = () => {
          if (!containerRef.current) return
          const width = containerRef.current.clientWidth
          const height = containerRef.current.clientHeight

          camera.aspect = width / height
          camera.updateProjectionMatrix()
          renderer.setSize(width, height)
        }

        window.addEventListener("resize", handleResize)

        // Handle mouse move for raycasting
        const handleMouseMove = (event: MouseEvent) => {
          if (!containerRef.current || !canvasRef.current) return

          const rect = canvasRef.current.getBoundingClientRect()
          mouse.x = ((event.clientX - rect.left) / rect.width) * 2 - 1
          mouse.y = -((event.clientY - rect.top) / rect.height) * 2 + 1

          raycaster.setFromCamera(mouse, camera)
          const intersects = raycaster.intersectObjects(skillNodes)

          if (intersects.length > 0) {
            const intersectedObject = intersects[0].object
            setHoveredSkill(intersectedObject.userData.skill)
            document.body.style.cursor = "pointer"
          } else {
            setHoveredSkill(null)
            document.body.style.cursor = "default"
          }
        }

        containerRef.current.addEventListener("mousemove", handleMouseMove)

        // Animation loop
        const animate = () => {
          animationFrameId = requestAnimationFrame(animate)

          try {
            // Rotate globe slowly
            globe.rotation.y += 0.001

            // Update skill nodes
            skillNodes.forEach((node) => {
              // Make hovered skill pulse
              if (node.userData.skill === hoveredSkill) {
                node.scale.x = 1.2 + Math.sin(Date.now() * 0.01) * 0.1
                node.scale.y = 1.2 + Math.sin(Date.now() * 0.01) * 0.1
                node.scale.z = 1.2 + Math.sin(Date.now() * 0.01) * 0.1

                // Increase emissive intensity
                if (node.material) {
                  const material = node.material as THREE.MeshPhongMaterial
                  material.emissiveIntensity = 0.8
                }
              } else {
                node.scale.set(1, 1, 1)
                if (node.material) {
                  const material = node.material as THREE.MeshPhongMaterial
                  material.emissiveIntensity = 0.3
                }
              }
            })

            controls.update()
            renderer.render(scene, camera)
          } catch (error) {
            console.error("Error in animation loop:", error)
            cancelAnimationFrame(animationFrameId)
            setIsLoading(false)
            setIsError(true)
          }
        }

        animate()
        setIsLoading(false)
        setIsGlobeInitialized(true)

        // Cleanup function
        return () => {
          window.removeEventListener("resize", handleResize)
          if (containerRef.current) {
            containerRef.current.removeEventListener("mousemove", handleMouseMove)
          }
          cancelAnimationFrame(animationFrameId)

          // Dispose of resources
          skillNodes.forEach((node) => {
            node.geometry.dispose()
            node.material.dispose()
            scene.remove(node)
          })

          globe.geometry.dispose()
          globe.material.dispose()
          scene.remove(globe)

          renderer.dispose()
        }
      } catch (error) {
        console.error("Error initializing 3D globe:", error)
        setIsLoading(false)
        setIsError(true)
      }
    }

    // Only initialize if component is mounted
    if (isClient) {
      init()
    }

    return () => {
      if (animationFrameId) {
        cancelAnimationFrame(animationFrameId)
      }
    }
  }, [hoveredSkill, selectedCategory, isClient])

  // If not client-side yet, show a simple loading state
  if (!isClient) {
    return (
      <div className="w-full">
        <div className="flex flex-wrap gap-2 justify-center mb-6">
          <button className="px-4 py-2 rounded-full text-sm font-medium bg-muted">Loading...</button>
        </div>
        <Card className="relative w-full aspect-square max-w-xl mx-auto bg-card/50 border-none overflow-hidden backdrop-blur-sm">
          <div className="w-full h-full flex items-center justify-center">
            <Loader2 className="h-8 w-8 animate-spin text-primary" />
          </div>
        </Card>
      </div>
    )
  }

  // Show a fallback grid view if 3D globe fails
  if (isError) {
    return (
      <div className="w-full">
        <div className="flex flex-wrap gap-2 justify-center mb-6">
          {["All Skills", ...categories].map((category, index) => (
            <button
              key={index}
              className={cn(
                "px-4 py-2 rounded-full text-sm font-medium transition-all",
                selectedCategory === (index === 0 ? null : category)
                  ? "bg-primary text-primary-foreground shadow-lg"
                  : "bg-muted hover:bg-muted/80",
              )}
              onClick={() => setSelectedCategory(index === 0 ? null : category)}
            >
              {category}
            </button>
          ))}
        </div>

        <Card className="relative w-full max-w-xl mx-auto bg-card/50 border-none overflow-hidden backdrop-blur-sm p-6">
          <div className="flex flex-col items-center justify-center mb-6">
            <AlertTriangle className="h-8 w-8 text-amber-500 mb-2" />
            <h3 className="text-lg font-semibold mb-1">3D Visualization Unavailable</h3>
            <p className="text-muted-foreground text-center mb-4">
              The 3D skills globe couldn't be loaded. Here's a simplified view of my skills instead.
            </p>
          </div>

          <div className="grid grid-cols-2 md:grid-cols-3 gap-3">
            {filteredSkills.map((skill, index) => (
              <div key={index} className="p-3 rounded-lg bg-primary/10 border border-primary/20">
                <div className="font-medium">{skill.name}</div>
                <div className="text-xs text-muted-foreground flex justify-between">
                  <span>{skill.category}</span>
                  <span>{skill.level}%</span>
                </div>
              </div>
            ))}
          </div>
        </Card>
      </div>
    )
  }

  return (
    <div className="w-full">
      <div className="flex flex-wrap gap-2 justify-center mb-6">
        <motion.button
          className={cn(
            "px-4 py-2 rounded-full text-sm font-medium transition-all",
            selectedCategory === null ? "bg-primary text-primary-foreground shadow-lg" : "bg-muted hover:bg-muted/80",
          )}
          onClick={() => setSelectedCategory(null)}
          whileHover={{ scale: 1.05 }}
          whileTap={{ scale: 0.98 }}
        >
          All Skills
        </motion.button>

        {categories.map((category) => (
          <motion.button
            key={category}
            className={cn(
              "px-4 py-2 rounded-full text-sm font-medium transition-all",
              selectedCategory === category
                ? "bg-primary text-primary-foreground shadow-lg"
                : "bg-muted hover:bg-muted/80",
            )}
            onClick={() => setSelectedCategory(category)}
            whileHover={{ scale: 1.05 }}
            whileTap={{ scale: 0.98 }}
            style={{
              backgroundColor: selectedCategory === category ? categoryColors[category] : undefined,
            }}
          >
            {category}
          </motion.button>
        ))}
      </div>

      <Card className="relative w-full aspect-square max-w-xl mx-auto bg-card/50 border-none overflow-hidden backdrop-blur-sm">
        <div ref={containerRef} className="w-full h-full relative">
          {isLoading && (
            <div className="absolute inset-0 flex items-center justify-center">
              <Loader2 className="h-8 w-8 animate-spin text-primary" />
              <span className="ml-2">Loading 3D Skills Globe...</span>
            </div>
          )}

          <canvas
            ref={canvasRef}
            className={cn(
              "w-full h-full transition-opacity duration-500",
              isGlobeInitialized ? "opacity-100" : "opacity-0",
            )}
          />

          {hoveredSkill && (
            <div className="absolute bottom-4 left-1/2 transform -translate-x-1/2 bg-background/80 backdrop-blur-sm px-4 py-2 rounded-lg border shadow-lg">
              <div className="font-medium">{hoveredSkill}</div>
              <div className="text-xs text-muted-foreground">
                {skills.find((s) => s.name === hoveredSkill)?.category} • Level:{" "}
                {skills.find((s) => s.name === hoveredSkill)?.level}%
              </div>
            </div>
          )}
        </div>
      </Card>

      <div className="max-w-xl mx-auto mt-4 text-center text-sm text-muted-foreground">
        {isGlobeInitialized ? (
          <>
            Hover over nodes to see skill details. Click categories to filter skills.
            <br />
            <span className="text-xs">Drag to rotate the globe and explore all skills.</span>
          </>
        ) : (
          <>View skills by category using the filters above.</>
        )}
      </div>
    </div>
  )
}

[V0_FILE]typescriptreact:file="components/custom-gradient-background.tsx" isEdit="true" isMerged="true"
"use client"
import { motion } from "framer-motion"
import { cn } from "@/lib/utils"
import type { ReactNode } from "react"
import { useIsClient } from "@/hooks/use-is-client"

interface CustomGradientBackgroundProps {
  children: ReactNode
  className?: string
}

export function CustomGradientBackground({ children, className }: CustomGradientBackgroundProps) {
  const isClient = useIsClient()

  // Don't render animations until client-side
  if (!isClient) {
    return (
      <div className={cn("relative overflow-hidden", className)}>
        <div className="absolute inset-0 bg-gradient-to-b from-blue-500/5 to-purple-500/5 -z-10" />
        {children}
      </div>
    )
  }

  return (
    <div className={cn("relative overflow-hidden", className)}>
      {/* Static gradient background */}
      <div className="absolute inset-0 bg-gradient-to-b from-blue-500/5 to-purple-500/5 -z-10" />

      {/* Animated orbs for background effect */}
      <motion.div
        className="absolute top-1/4 left-1/4 w-64 h-64 bg-blue-500/10 rounded-full blur-3xl -z-10"
        animate={{
          scale: [1, 1.2, 1],
          opacity: [0.3, 0.5, 0.3],
        }}
        transition={{
          duration: 8,
          repeat: Number.POSITIVE_INFINITY,
          ease: "easeInOut",
        }}
      />
      <motion.div
        className="absolute bottom-1/4 right-1/4 w-64 h-64 bg-purple-500/10 rounded-full blur-3xl -z-10"
        animate={{
          scale: [1, 1.2, 1],
          opacity: [0.3, 0.5, 0.3],
        }}
        transition={{
          duration: 8,
          repeat: Number.POSITIVE_INFINITY,
          ease: "easeInOut",
          delay: 2,
        }}
      />
      <motion.div
        className="absolute top-1/2 right-1/3 w-48 h-48 bg-pink-500/10 rounded-full blur-3xl -z-10"
        animate={{
          scale: [1, 1.2, 1],
          opacity: [0.2, 0.4, 0.2],
        }}
        transition={{
          duration: 10,
          repeat: Number.POSITIVE_INFINITY,
          ease: "easeInOut",
          delay: 1,
        }}
      />

      {children}
    </div>
  )
}

[V0_FILE]typescriptreact:file="components/redesigned-experience.tsx" isEdit="true" isMerged="true"
"use client"

import { useState } from "react"
import { motion, AnimatePresence } from "framer-motion"
import { SectionContainer, SectionHeader } from "@/components/ui/section-container"
import { ScrollReveal } from "@/components/ui/scroll-reveal"
import { Card, CardContent } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
import { Button } from "@/components/ui/button"
import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { cn } from "@/lib/utils"
import { ErrorBoundary } from "@/components/error-boundary"
import {
  Calendar,
  MapPin,
  Building,
  ChevronRight,
  ChevronDown,
  Award,
  Briefcase,
  GraduationCap,
  Users,
  Target,
} from "lucide-react"

// Experience data
const experiences = [
  {
    id: "rfc",
    title: "Technical Program Director",
    company: "Rose from Concrete",
    location: "Brooklyn, NY",
    period: "January 2021 - Present",
    type: "work",
    description:
      "Leading technical initiatives and community programs across Brooklyn, developing and implementing ML models for assessing program impact and reach.",
    responsibilities: [
      "Led multi-functional teams to develop AI-powered community tools, such as predictive models for social welfare programs benefiting over 20,000 NYC residents",
      "Architected a decentralized energy solution leveraging AWS Lambda, Docker, and cloud computing to enhance sustainability in underserved communities",
      "Created and deployed real-time monitoring tools to track the impact of community projects, providing data-driven insights for resource allocation",
      "Forged strategic partnerships with 40+ community centers across Brooklyn, deploying ML models to assess and optimize program reach",
    ],
    skills: ["Python", "Machine Learning", "AWS", "Docker", "GCP", "Community Development"],
    metrics: [
      { value: "40+", label: "Community Centers" },
      { value: "20,000+", label: "Residents impacted" },
      { value: "15", label: "Team Size" },
    ],
    color: "from-indigo-600 to-purple-600",
  },
  {
    id: "success-academy",
    title: "Lead AP Physics Teacher",
    company: "Success Academy High School of the Liberal Arts",
    location: "New York, NY",
    period: "July 2019 - 2022",
    type: "work",
    description:
      "Led physics education initiatives, applying data analysis to optimize teaching strategies for over 150 students while managing a team of 13 teachers.",
    responsibilities: [
      "Applied advanced data analysis and statistical techniques in Python, optimizing lesson plans for 150+ students",
      "Awarded the 'Teacher Excellence Award' for exceptional instructional strategies",
      "Led a team of 13 teachers, fostering a collaborative academic environment",
      "Developed innovative curriculum materials that improved student engagement and performance metrics",
    ],
    skills: ["Leadership", "Data Analysis", "Education", "Team Management", "Curriculum Development"],
    metrics: [
      { value: "150+", label: "Students" },
      { value: "13", label: "Team Size" },
      { value: "95%", label: "Pass Rate" },
    ],
    color: "from-green-600 to-emerald-600",
  },
  {
    id: "research-assistant",
    title: "Research Assistant",
    company: "City College of New York",
    location: "New York, NY",
    period: "2017 - 2019",
    type: "education",
    description:
      "Conducted physics research focused on computational modeling of complex systems and data analysis of experimental results.",
    responsibilities: [
      "Published research on computational physics models in peer-reviewed journals",
      "Developed custom analysis algorithms for experimental data processing",
      "Presented findings at 3 national physics conferences",
      "Collaborated with interdisciplinary teams on cutting-edge research projects",
    ],
    skills: ["Python", "Data Analysis", "Research", "Scientific Computing", "Physics"],
    metrics: [
      { value: "3", label: "Publications" },
      { value: "5", label: "Conferences" },
      { value: "2", label: "Research Grants" },
    ],
    color: "from-blue-600 to-cyan-600",
  },
]

export default function RedesignedExperience() {
  const [expandedExperience, setExpandedExperience] = useState<string | null>(null)
  const [experienceType, setExperienceType] = useState<"all" | "work" | "education">("all")

  const toggleExpand = (id: string) => {
    setExpandedExperience(expandedExperience === id ? null : id)
  }

  // Filter experiences based on type
  const filteredExperiences =
    experienceType === "all" ? experiences : experiences.filter((exp) => exp.type === experienceType)

  return (
    <SectionContainer id="experience" className="bg-gradient-to-b from-background/95 to-background">
      <SectionHeader
        title="Professional Journey"
        subtitle="My professional experiences and career highlights in AI development, education, and community building."
      />

      <ScrollReveal>
        <Tabs
          defaultValue="all"
          onValueChange={(value) => setExperienceType(value as "all" | "work" | "education")}
          className="w-full"
        >
          <div className="overflow-x-auto pb-2 no-scrollbar">
            <TabsList className="flex justify-center gap-2 mb-8 bg-transparent w-fit mx-auto">
              <TabsTrigger
                value="all"
                className={cn(
                  "px-4 py-2 rounded-full text-sm font-medium transition-all data-[state=active]:shadow-lg",
                  experienceType === "all" ? "bg-primary text-primary-foreground" : "bg-muted hover:bg-muted/80",
                )}
              >
                <div className="flex items-center gap-2">
                  <span>All Experience</span>
                </div>
              </TabsTrigger>

              <TabsTrigger
                value="work"
                className={cn(
                  "px-4 py-2 rounded-full text-sm font-medium transition-all data-[state=active]:shadow-lg",
                  experienceType === "work" ? "bg-primary text-primary-foreground" : "bg-muted hover:bg-muted/80",
                )}
              >
                <div className="flex items-center gap-2">
                  <Briefcase className="h-4 w-4" />
                  <span>Work Experience</span>
                </div>
              </TabsTrigger>

              <TabsTrigger
                value="education"
                className={cn(
                  "px-4 py-2 rounded-full text-sm font-medium transition-all data-[state=active]:shadow-lg",
                  experienceType === "education" ? "bg-primary text-primary-foreground" : "bg-muted hover:bg-muted/80",
                )}
              >
                <div className="flex items-center gap-2">
                  <GraduationCap className="h-4 w-4" />
                  <span>Education</span>
                </div>
              </TabsTrigger>
            </TabsList>
          </div>

          <div className="space-y-6">
            {filteredExperiences.map((experience, index) => (
              <ErrorBoundary key={experience.id}>
                <motion.div
                  initial={{ opacity: 0, y: 20 }}
                  animate={{ opacity: 1, y: 0 }}
                  transition={{ duration: 0.5, delay: index * 0.1 }}
                >
                  <Card
                    className={cn("overflow-hidden border-none shadow-lg", `bg-gradient-to-br ${experience.color}/10`)}
                  >
                    <CardContent className="p-0">
                      <div
                        className={cn(
                          "p-4 sm:p-6 cursor-pointer transition-all duration-300",
                          expandedExperience === experience.id ? "pb-3" : "",
                        )}
                        onClick={() => toggleExpand(experience.id)}
                      >
                        <div className="flex flex-col md:flex-row md:items-center justify-between gap-4 mb-4">
                          <div>
                            <Badge
                              className={cn(
                                "mb-2 px-3 py-1",
                                experience.type === "work"
                                  ? "bg-blue-500/20 text-blue-500 border-blue-500/30"
                                  : "bg-amber-500/20 text-amber-500 border-amber-500/30",
                              )}
                            >
                              {experience.type === "work" ? (
                                <Briefcase className="h-3 w-3 mr-1" />
                              ) : (
                                <GraduationCap className="h-3 w-3 mr-1" />
                              )}
                              {experience.type === "work" ? "Work Experience" : "Education"}
                            </Badge>
                            <h3 className="text-xl font-semibold flex items-center gap-2">
                              {experience.title}
                              <motion.div
                                animate={{ rotate: expandedExperience === experience.id ? 180 : 0 }}
                                transition={{ duration: 0.3 }}
                              >
                                {expandedExperience === experience.id ? (
                                  <ChevronDown className="h-4 w-4 text-muted-foreground" />
                                ) : (
                                  <ChevronRight className="h-4 w-4 text-muted-foreground" />
                                )}
                              </motion.div>
                            </h3>
                            <div className="flex flex-wrap items-center gap-x-4 gap-y-1 mt-1 text-muted-foreground">
                              <div className="flex items-center gap-1">
                                <Building className="h-4 w-4" />
                                <span>{experience.company}</span>
                              </div>
                              <div className="flex items-center gap-1">
                                <MapPin className="h-4 w-4" />
                                <span>{experience.location}</span>
                              </div>
                              <div className="flex items-center gap-1">
                                <Calendar className="h-4 w-4" />
                                <span>{experience.period}</span>
                              </div>
                            </div>
                          </div>
                        </div>

                        <p className="text-muted-foreground">{experience.description}</p>
                      </div>

                      <AnimatePresence>
                        {expandedExperience === experience.id && (
                          <motion.div
                            initial={{ opacity: 0, height: 0 }}
                            animate={{ opacity: 1, height: "auto" }}
                            exit={{ opacity: 0, height: 0 }}
                            transition={{ duration: 0.3 }}
                            className="overflow-hidden"
                          >
                            <div className="px-4 sm:px-6 pb-6">
                              <div className="grid grid-cols-1 lg:grid-cols-2 gap-8 pt-4 border-t">
                                <div>
                                  <h4 className="text-lg font-semibold mb-4 flex items-center gap-2">
                                    <Award className="h-5 w-5 text-primary" />
                                    Key Responsibilities
                                  </h4>
                                  <ul className="space-y-2">
                                    {experience.responsibilities.map((responsibility, i) => (
                                      <li key={i} className="flex items-start gap-2">
                                        <div className="h-5 w-5 rounded-full bg-primary/20 flex items-center justify-center mt-0.5 flex-shrink-0">
                                          <span className="text-xs text-primary">✓</span>
                                        </div>
                                        <span className="text-sm sm:text-base">{responsibility}</span>
                                      </li>
                                    ))}
                                  </ul>

                                  <div className="mt-6">
                                    <h4 className="text-lg font-semibold mb-4 flex items-center gap-2">
                                      <Users className="h-5 w-5 text-primary" />
                                      Skills Applied
                                    </h4>
                                    <div className="flex flex-wrap gap-2">
                                      {experience.skills.map((skill, i) => (
                                        <Badge key={i} variant="secondary">
                                          {skill}
                                        </Badge>
                                      ))}
                                    </div>
                                  </div>
                                </div>

                                <div>
                                  <h4 className="text-lg font-semibold mb-4 flex items-center gap-2">
                                    <Target className="h-5 w-5 text-primary" />
                                    Key Metrics & Achievements
                                  </h4>

                                  <div className="grid grid-cols-2 sm:grid-cols-3 gap-3 mb-6">
                                    {experience.metrics.map((metric, i) => (
                                      <div key={i} className="bg-primary/10 rounded-lg p-3 text-center">
                                        <div className="text-xl sm:text-2xl font-bold">{metric.value}</div>
                                        <div className="text-xs sm:text-sm text-muted-foreground">{metric.label}</div>
                                      </div>
                                    ))}
                                  </div>

                                  {experience.type === "work" && (
                                    <div className="mt-4">
                                      <Button variant="outline" className="w-full">
                                        View Reference Letter
                                      </Button>
                                    </div>
                                  )}

                                  {experience.type === "education" && (
                                    <div className="mt-4">
                                      <Button variant="outline" className="w-full">
                                        View Transcript
                                      </Button>
                                    </div>
                                  )}
                                </div>
                              </div>
                            </div>
                          </motion.div>
                        )}
                      </AnimatePresence>
                    </CardContent>
                  </Card>
                </motion.div>
              </ErrorBoundary>
            ))}
          </div>
        </Tabs>
      </ScrollReveal>
    </SectionContainer>
  )
}

[V0_FILE]typescriptreact:file="components/diagnostic-tool.tsx" isEdit="true" isMerged="true"
"use client"

import { useState, useEffect } from "react"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { AlertTriangle, CheckCircle, X, ChevronDown, ChevronUp, Activity, Cpu, Database, Zap } from "lucide-react"
import { cn } from "@/lib/utils"
import { usePerformanceMonitor } from "@/hooks/use-performance-monitor"
import { Progress } from "@/components/ui/progress"

export function DiagnosticTool() {
  const [isOpen, setIsOpen] = useState(false)
  const [activeTab, setActiveTab] = useState<"system" | "performance">("system")
  const [diagnostics, setDiagnostics] = useState<{
    browserInfo: string
    windowDefined: boolean
    documentDefined: boolean
    localStorageAvailable: boolean
    webGLSupported: boolean
    errors: string[]
    warnings: string[]
  }>({
    browserInfo: "",
    windowDefined: false,
    documentDefined: false,
    localStorageAvailable: false,
    webGLSupported: false,
    errors: [],
    warnings: [],
  })

  // Get performance metrics
  const performanceMetrics = usePerformanceMonitor(isOpen)

  useEffect(() => {
    try {
      // Collect diagnostic information
      const errors: string[] = []
      const warnings: string[] = []

      // Check if window is defined
      const windowDefined = typeof window !== "undefined"
      if (!windowDefined) {
        errors.push("Window object is not defined")
      }

      // Check if document is defined
      const documentDefined = typeof document !== "undefined"
      if (!documentDefined) {
        errors.push("Document object is not defined")
      }

      // Check localStorage availability
      let localStorageAvailable = false
      try {
        localStorageAvailable = !!window.localStorage
        window.localStorage.setItem("test", "test")
        window.localStorage.removeItem("test")
      } catch (e) {
        warnings.push("LocalStorage is not available: " + (e as Error).message)
      }

      // Get browser info
      const browserInfo = windowDefined
        ? `${navigator.userAgent} | ${window.innerWidth}x${window.innerHeight}`
        : "Unknown browser"

      // Check for WebGL support (needed for 3D)
      let webGLSupported = false
      if (windowDefined && documentDefined) {
        try {
          const canvas = document.createElement("canvas")
          const gl = canvas.getContext("webgl") || canvas.getContext("experimental-webgl")
          webGLSupported = !!gl
          if (!gl) {
            warnings.push("WebGL is not supported - 3D visualizations may not work")
          }
        } catch (e) {
          warnings.push("Error checking WebGL support: " + (e as Error).message)
        }
      }

      // Check for animation performance issues
      if (performanceMetrics.fps < 30 && performanceMetrics.fps > 0) {
        warnings.push(`Low FPS detected (${performanceMetrics.fps}). Animations may not be smooth.`)
      }

      // Check for memory issues
      if (
        performanceMetrics.memory &&
        performanceMetrics.memory.usedJSHeapSize > 0.8 * performanceMetrics.memory.jsHeapSizeLimit
      ) {
        warnings.push("High memory usage detected. This may cause performance issues.")
      }

      // Update state with diagnostic info
      setDiagnostics({
        browserInfo,
        windowDefined,
        documentDefined,
        localStorageAvailable,
        webGLSupported,
        errors,
        warnings,
      })
    } catch (error) {
      console.error("Error running diagnostics:", error)
    }
  }, [performanceMetrics.fps, performanceMetrics.memory])

  if (!diagnostics.windowDefined) {
    return null // Don't render anything server-side
  }

  // Format bytes to human-readable format
  const formatBytes = (bytes: number) => {
    if (bytes === 0) return "0 Bytes"
    const k = 1024
    const sizes = ["Bytes", "KB", "MB", "GB"]
    const i = Math.floor(Math.log(bytes) / Math.log(k))
    return Number.parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + " " + sizes[i]
  }

  return (
    <div className="fixed bottom-4 right-4 z-50">
      <Button
        variant="outline"
        size="sm"
        className={cn(
          "gap-2 shadow-lg",
          diagnostics.errors.length > 0 ? "bg-destructive text-destructive-foreground" : "bg-background",
        )}
        onClick={() => setIsOpen(!isOpen)}
      >
        {diagnostics.errors.length > 0 ? (
          <AlertTriangle className="h-4 w-4" />
        ) : diagnostics.warnings.length > 0 ? (
          <Activity className="h-4 w-4 text-amber-500" />
        ) : (
          <CheckCircle className="h-4 w-4 text-green-500" />
        )}
        Diagnostics
        {isOpen ? <ChevronDown className="h-4 w-4" /> : <ChevronUp className="h-4 w-4" />}
      </Button>

      {isOpen && (
        <Card className="absolute bottom-12 right-0 w-80 shadow-xl">
          <CardHeader className="py-3">
            <div className="flex justify-between items-center">
              <CardTitle className="text-sm">System Diagnostics</CardTitle>
              <div className="flex gap-2">
                <Button
                  variant="ghost"
                  size="sm"
                  className={cn("h-6 px-2 text-xs", activeTab === "system" ? "bg-muted" : "")}
                  onClick={() => setActiveTab("system")}
                >
                  System
                </Button>
                <Button
                  variant="ghost"
                  size="sm"
                  className={cn("h-6 px-2 text-xs", activeTab === "performance" ? "bg-muted" : "")}
                  onClick={() => setActiveTab("performance")}
                >
                  Performance
                </Button>
                <Button variant="ghost" size="sm" className="h-6 w-6 p-0" onClick={() => setIsOpen(false)}>
                  <X className="h-4 w-4" />
                </Button>
              </div>
            </div>
          </CardHeader>
          <CardContent className="text-xs space-y-3 max-h-96 overflow-y-auto">
            {activeTab === "system" ? (
              <>
                <div>
                  <div className="font-medium mb-1">Browser Info:</div>
                  <div className="text-muted-foreground break-words">{diagnostics.browserInfo}</div>
                </div>

                <div className="space-y-1">
                  <div className="font-medium">Environment Checks:</div>
                  <div className="flex items-center gap-2">
                    <div className={diagnostics.windowDefined ? "text-green-500" : "text-red-500"}>
                      {diagnostics.windowDefined ? "✓" : "✗"} Window
                    </div>
                    <div className={diagnostics.documentDefined ? "text-green-500" : "text-red-500"}>
                      {diagnostics.documentDefined ? "✓" : "✗"} Document
                    </div>
                    <div className={diagnostics.localStorageAvailable ? "text-green-500" : "text-red-500"}>
                      {diagnostics.localStorageAvailable ? "✓" : "✗"} LocalStorage
                    </div>
                  </div>
                  <div className="flex items-center gap-2">
                    <div className={diagnostics.webGLSupported ? "text-green-500" : "text-red-500"}>
                      {diagnostics.webGLSupported ? "✓" : "✗"} WebGL
                    </div>
                  </div>
                </div>

                {diagnostics.errors.length > 0 && (
                  <div>
                    <div className="font-medium text-destructive mb-1">Errors:</div>
                    <ul className="list-disc pl-4 space-y-1">
                      {diagnostics.errors.map((error, i) => (
                        <li key={i} className="text-destructive">
                          {error}
                        </li>
                      ))}
                    </ul>
                  </div>
                )}

                {diagnostics.warnings.length > 0 && (
                  <div>
                    <div className="font-medium text-amber-500 mb-1">Warnings:</div>
                    <ul className="list-disc pl-4 space-y-1">
                      {diagnostics.warnings.map((warning, i) => (
                        <li key={i} className="text-amber-500">
                          {warning}
                        </li>
                      ))}
                    </ul>
                  </div>
                )}
              </>
            ) : (
              <>
                <div className="flex items-center justify-between">
                  <div className="flex items-center gap-2">
                    <Zap className="h-4 w-4 text-amber-500" />
                    <span className="font-medium">FPS:</span>
                  </div>
                  <span
                    className={cn(
                      performanceMetrics.fps < 30
                        ? "text-red-500"
                        : performanceMetrics.fps < 50
                          ? "text-amber-500"
                          : "text-green-500",
                    )}
                  >
                    {performanceMetrics.fps.toFixed(0)}
                  </span>
                </div>
                <Progress
                  value={performanceMetrics.fps}
                  max={60}
                  className="h-1.5"
                  indicatorClassName={cn(
                    performanceMetrics.fps < 30
                      ? "bg-red-500"
                      : performanceMetrics.fps < 50
                        ? "bg-amber-500"
                        : "bg-green-500",
                  )}
                />

                {performanceMetrics.memory && (
                  <>
                    <div className="flex items-center justify-between mt-4">
                      <div className="flex items-center gap-2">
                        <Cpu className="h-4 w-4 text-blue-500" />
                        <span className="font-medium">Memory Usage:</span>
                      </div>
                      <span>
                        {formatBytes(performanceMetrics.memory.usedJSHeapSize)} /{" "}
                        {formatBytes(performanceMetrics.memory.jsHeapSizeLimit)}
                      </span>
                    </div>
                    <Progress
                      value={performanceMetrics.memory.usedJSHeapSize}
                      max={performanceMetrics.memory.jsHeapSizeLimit}
                      className="h-1.5"
                    />
                  </>
                )}

                <div className="flex items-center justify-between mt-4">
                  <div className="flex items-center gap-2">
                    <Database className="h-4 w-4 text-purple-500" />
                    <span className="font-medium">DOM Nodes:</span>
                  </div>
                  <span>{performanceMetrics.domNodes}</span>
                </div>

                <div className="space-y-1 mt-4">
                  <div className="font-medium">Timing:</div>
                  <div className="flex justify-between">
                    <span>Page Load:</span>
                    <span>{(performanceMetrics.loadTime / 1000).toFixed(2)}s</span>
                  </div>
                  <div className="flex justify-between">
                    <span>Resources:</span>
                    <span>{performanceMetrics.resourceCount}</span>
                  </div>
                  <div className="flex justify-between">
                    <span>Render Time:</span>
                    <span>{(performanceMetrics.renderTime / 1000).toFixed(2)}s</span>
                  </div>
                </div>
              </>
            )}

            <div className="pt-2 border-t flex gap-2">
              <Button variant="outline" size="sm" className="w-full text-xs" onClick={() => window.location.reload()}>
                Refresh Page
              </Button>
              <Button
                variant="outline"
                size="sm"
                className="text-xs"
                onClick={() => {
                  // Clear localStorage
                  try {
                    localStorage.clear()
                    sessionStorage.clear()
                    window.location.reload()
                  } catch (e) {
                    console.error("Failed to clear storage:", e)
                  }
                }}
              >
                Clear Cache
              </Button>
            </div>
          </CardContent>
        </Card>
      )}
    </div>
  )
}

[V0_FILE]typescriptreact:file="hooks/use-performance-monitor.tsx" isMerged="true"
"use client"

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

interface PerformanceMetrics {
  fps: number
  memory?: {
    usedJSHeapSize: number
    totalJSHeapSize: number
    jsHeapSizeLimit: number
  }
  loadTime: number
  resourceCount: number
  domNodes: number
  renderTime: number
}

export function usePerformanceMonitor(enabled = true) {
  const [metrics, setMetrics] = useState<PerformanceMetrics>({
    fps: 0,
    memory: undefined,
    loadTime: 0,
    resourceCount: 0,
    domNodes: 0,
    renderTime: 0,
  })

  const frameCountRef = useRef(0)
  const lastTimeRef = useRef(performance.now())
  const animationFrameRef = useRef<number | null>(null)
  const startTimeRef = useRef<number>(performance.now())
  const renderStartTimeRef = useRef<number>(performance.now())

  // Calculate FPS
  useEffect(() => {
    if (!enabled) return

    const calculateFPS = () => {
      const now = performance.now()
      frameCountRef.current += 1

      // Update FPS every second
      if (now - lastTimeRef.current >= 1000) {
        const fps = Math.round((frameCountRef.current * 1000) / (now - lastTimeRef.current))

        // Get memory info if available
        let memory
        if (performance && (performance as any).memory) {
          const memoryInfo = (performance as any).memory
          memory = {
            usedJSHeapSize: memoryInfo.usedJSHeapSize,
            totalJSHeapSize: memoryInfo.totalJSHeapSize,
            jsHeapSizeLimit: memoryInfo.jsHeapSizeLimit,
          }
        }

        // Count DOM nodes
        const domNodes = document.querySelectorAll("*").length

        // Count resources
        const resourceCount = performance.getEntriesByType("resource").length

        // Calculate page load time
        const loadTime = performance.now() - startTimeRef.current

        // Calculate render time (time since component mounted)
        const renderTime = performance.now() - renderStartTimeRef.current

        setMetrics({
          fps,
          memory,
          loadTime,
          resourceCount,
          domNodes,
          renderTime,
        })

        frameCountRef.current = 0
        lastTimeRef.current = now
      }

      animationFrameRef.current = requestAnimationFrame(calculateFPS)
    }

    animationFrameRef.current = requestAnimationFrame(calculateFPS)

    return () => {
      if (animationFrameRef.current) {
        cancelAnimationFrame(animationFrameRef.current)
      }
    }
  }, [enabled])

  return metrics
}

[V0_FILE]typescriptreact:file="components/ui/lazy-image.tsx" isMerged="true"
"use client"

import { useState, useEffect, useRef } from "react"
import Image, { type ImageProps } from "next/image"
import { cn } from "@/lib/utils"
import { Skeleton } from "@/components/ui/skeleton"
import { useIsClient } from "@/hooks/use-is-client"

interface LazyImageProps extends Omit<ImageProps, "onLoad" | "onError"> {
  fallbackSrc?: string
  aspectRatio?: number
  loadingColor?: string
}

export function LazyImage({
  src,
  alt,
  width,
  height,
  fallbackSrc = "/placeholder.svg",
  aspectRatio,
  className,
  loadingColor,
  ...props
}: LazyImageProps) {
  const [isLoaded, setIsLoaded] = useState(false)
  const [error, setError] = useState(false)
  const imageRef = useRef<HTMLImageElement>(null)
  const isClient = useIsClient()

  // Calculate aspect ratio for the container
  const containerStyle = aspectRatio ? { paddingBottom: `${(1 / aspectRatio) * 100}%` } : undefined

  // Check if the image is already in the browser cache
  useEffect(() => {
    if (!isClient) return

    // Reset states when src changes
    setIsLoaded(false)
    setError(false)

    // Check if image is cached
    const img = new Image()
    img.src = src as string

    // If the image is complete immediately, it's likely cached
    if (img.complete) {
      setIsLoaded(true)
    }

    return () => {
      // Clean up
      img.onload = null
      img.onerror = null
    }
  }, [src, isClient])

  // Handle intersection observer for lazy loading
  useEffect(() => {
    if (!isClient || !imageRef.current) return

    const observer = new IntersectionObserver(
      (entries) => {
        entries.forEach((entry) => {
          if (entry.isIntersecting) {
            // When the image comes into view, start loading it
            const img = entry.target as HTMLImageElement
            if (img.dataset.src) {
              img.src = img.dataset.src
              delete img.dataset.src
            }
            observer.unobserve(img)
          }
        })
      },
      { rootMargin: "200px" }, // Start loading when image is 200px from viewport
    )

    observer.observe(imageRef.current)

    return () => {
      if (imageRef.current) {
        observer.unobserve(imageRef.current)
      }
    }
  }, [isClient])

  const handleLoad = () => {
    setIsLoaded(true)
  }

  const handleError = () => {
    setError(true)
    console.error(`Failed to load image: ${src}`)
  }

  // If not client-side, render a placeholder
  if (!isClient) {
    return (
      <div className={cn("relative overflow-hidden bg-muted", className)} style={containerStyle}>
        <div className="absolute inset-0 flex items-center justify-center">
          <Skeleton className="w-full h-full" />
        </div>
      </div>
    )
  }

  return (
    <div className={cn("relative overflow-hidden", className)} style={containerStyle}>
      {!isLoaded && (
        <div className="absolute inset-0 flex items-center justify-center">
          <Skeleton className="w-full h-full" style={loadingColor ? { backgroundColor: loadingColor } : undefined} />
        </div>
      )}

      <Image
        ref={imageRef}
        src={error ? fallbackSrc : src}
        alt={alt}
        width={width}
        height={height}
        onLoad={handleLoad}
        onError={handleError}
        className={cn("transition-opacity duration-300", isLoaded ? "opacity-100" : "opacity-0")}
        {...props}
      />
    </div>
  )
}

[V0_FILE]typescriptreact:file="components/ui/safe-animation.tsx" isMerged="true"
"use client"

import type React from "react"

import { useState, useEffect, useRef } from "react"
import { motion, type MotionProps } from "framer-motion"
import { useIsClient } from "@/hooks/use-is-client"

interface SafeAnimationProps extends MotionProps {
  children: React.ReactNode
  as?: React.ElementType
  disableOnLowFPS?: boolean
  disableOnMobile?: boolean
  className?: string
}

export function SafeAnimation({
  children,
  as = "div",
  disableOnLowFPS = true,
  disableOnMobile = true,
  className,
  ...motionProps
}: SafeAnimationProps) {
  const [shouldAnimate, setShouldAnimate] = useState(true)
  const isClient = useIsClient()
  const frameCountRef = useRef(0)
  const lastTimeRef = useRef(performance.now())
  const animationFrameRef = useRef<number | null>(null)

  // Check if animations should be disabled
  useEffect(() => {
    if (!isClient) return

    // Check for mobile devices
    if (disableOnMobile) {
      const isMobile = /iPhone|iPad|iPod|Android/i.test(navigator.userAgent)
      if (isMobile) {
        setShouldAnimate(false)
        return
      }
    }

    // Check for low FPS
    if (disableOnLowFPS) {
      let lowFPSCounter = 0

      const checkFPS = () => {
        const now = performance.now()
        frameCountRef.current += 1

        // Calculate FPS every second
        if (now - lastTimeRef.current >= 1000) {
          const fps = Math.round((frameCountRef.current * 1000) / (now - lastTimeRef.current))

          // If FPS is consistently low, disable animations
          if (fps < 30) {
            lowFPSCounter += 1
            if (lowFPSCounter >= 3) {
              setShouldAnimate(false)
              if (animationFrameRef.current) {
                cancelAnimationFrame(animationFrameRef.current)
              }
              return
            }
          } else {
            lowFPSCounter = 0
          }

          frameCountRef.current = 0
          lastTimeRef.current = now
        }

        animationFrameRef.current = requestAnimationFrame(checkFPS)
      }

      animationFrameRef.current = requestAnimationFrame(checkFPS)

      return () => {
        if (animationFrameRef.current) {
          cancelAnimationFrame(animationFrameRef.current)
        }
      }
    }
  }, [isClient, disableOnLowFPS, disableOnMobile])

  // If not client-side or animations should be disabled, render without animation
  if (!isClient || !shouldAnimate) {
    const Component = as
    return <Component className={className}>{children}</Component>
  }

  // Otherwise, render with animations
  const MotionComponent = motion[as as keyof typeof motion] || motion.div

  return (
    <MotionComponent className={className} {...motionProps}>
      {children}
    </MotionComponent>
  )
}

[V0_FILE]typescriptreact:file="components/section-fallback.tsx" isMerged="true"
"use client"

import { AlertTriangle, RefreshCw } from "lucide-react"
import { Button } from "@/components/ui/button"

interface SectionFallbackProps {
  title: string
  error?: Error | null
  resetErrorBoundary?: () => void
}

export function SectionFallback({ title, error, resetErrorBoundary }: SectionFallbackProps) {
  return (
    <div className="py-12">
      <div className="container mx-auto px-4">
        <div className="flex flex-col items-center justify-center p-8 border border-destructive/20 rounded-lg bg-destructive/10 max-w-2xl mx-auto">
          <AlertTriangle className="h-12 w-12 text-destructive mb-4" />
          <h3 className="text-xl font-semibold mb-2">Failed to load {title} section</h3>
          <p className="text-muted-foreground mb-6 text-center">
            {error?.message || "An unexpected error occurred while rendering this section."}
          </p>
          {resetErrorBoundary && (
            <Button variant="outline" onClick={resetErrorBoundary} className="gap-2">
              <RefreshCw className="h-4 w-4" />
              Try again
            </Button>
          )}
        </div>
      </div>
    </div>
  )
}

[V0_FILE]typescript:file="tailwind.config.ts" isEdit="true" isMerged="true"
import type { Config } from "tailwindcss"

const config = {
  darkMode: ["class"],
  content: [
    "./pages/**/*.{ts,tsx}",
    "./components/**/*.{ts,tsx}",
    "./app/**/*.{ts,tsx}",
    "./src/**/*.{ts,tsx}",
    "*.{js,ts,jsx,tsx,mdx}",
  ],
  prefix: "",
  theme: {
    container: {
      center: true,
      padding: "2rem",
      screens: {
        "2xl": "1400px",
      },
    },
    extend: {
      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))",
        },
        // Custom color palette
        "happy-hearts": "#d6665d",
        "bite-tongue": "#dd796b",
        "copper-coin": "#dd845b",
        "golden-nugget": "#db8b40",
        "packing-paper": "#b99b61",
        succulent: "#8fa781",
        estragon: "#a7ad77",
        motherland: "#beb26c",
        luxurious: "#d4b35f",
      },
      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")],
} satisfies Config

export default config

[V0_FILE]typescriptreact:file="components/theme-provider.tsx" isEdit="true" isMerged="true"
"use client"

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

export type Theme = "light" | "dark" | "system"
export type ColorTheme = "default" | "ocean" | "forest" | "sunset" | "lavender" | "monochrome"

export interface ExtendedThemeProviderProps extends ThemeProviderProps {
  children: React.ReactNode
}

export function ThemeProvider({ children, ...props }: ExtendedThemeProviderProps) {
  const [mounted, setMounted] = React.useState(false)

  // useEffect only runs on the client, so we can safely show the UI
  React.useEffect(() => {
    setMounted(true)
  }, [])

  // Prevent hydration mismatch
  if (!mounted) {
    return <div style={{ visibility: "hidden" }}>{children}</div>
  }

  return <NextThemesProvider {...props}>{children}</NextThemesProvider>
}

// Custom hook to manage both theme mode and color theme
export function useExtendedTheme() {
  // Use the useTheme hook from next-themes directly
  const { theme, setTheme, resolvedTheme } = useTheme()
  const [colorTheme, setColorTheme] = React.useState<ColorTheme>("default")

  // Initialize color theme from localStorage on mount
  React.useEffect(() => {
    // Only run on client
    if (typeof window === "undefined") return

    const savedColorTheme = localStorage.getItem("color-theme") as ColorTheme | null
    if (savedColorTheme) {
      setColorTheme(savedColorTheme)
      document.documentElement.classList.add(`theme-${savedColorTheme}`)
    }
  }, [])

  // Function to update color theme
  const updateColorTheme = React.useCallback((newColorTheme: ColorTheme) => {
    // Only run on client
    if (typeof window === "undefined") return

    // Remove all existing theme classes
    document.documentElement.classList.remove(
      "theme-default",
      "theme-ocean",
      "theme-forest",
      "theme-sunset",
      "theme-lavender",
      "theme-monochrome",
    )

    // Add the new theme class if it's not default
    if (newColorTheme !== "default") {
      document.documentElement.classList.add(`theme-${newColorTheme}`)
    }

    // Save to localStorage
    localStorage.setItem("color-theme", newColorTheme)
    setColorTheme(newColorTheme)
  }, [])

  return {
    theme: theme as Theme,
    setTheme,
    resolvedTheme: resolvedTheme as Theme,
    colorTheme,
    setColorTheme: updateColorTheme,
  }
}

[V0_FILE]typescriptreact:file="components/theme-switcher.tsx" isEdit="true" isMerged="true"
"use client"

import type React from "react"

import { useState, useEffect } from "react"
import { motion } from "framer-motion"
import { useExtendedTheme, type ColorTheme, type Theme } from "@/components/theme-provider"
import { Button } from "@/components/ui/button"
import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover"
import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { cn } from "@/lib/utils"
import { Sun, Moon, Laptop, Palette, Check } from "lucide-react"

interface ThemeOption {
  value: Theme
  label: string
  icon: React.ReactNode
}

interface ColorOption {
  value: ColorTheme
  label: string
  color: string
  darkColor: string
}

const themeOptions: ThemeOption[] = [
  {
    value: "light",
    label: "Light",
    icon: <Sun className="h-5 w-5" />,
  },
  {
    value: "dark",
    label: "Dark",
    icon: <Moon className="h-5 w-5" />,
  },
  {
    value: "system",
    label: "System",
    icon: <Laptop className="h-5 w-5" />,
  },
]

const colorOptions: ColorOption[] = [
  {
    value: "default",
    label: "Default",
    color: "from-[#d6665d] to-[#db8b40]",
    darkColor: "from-[#d6665d] to-[#db8b40]",
  },
  {
    value: "ocean",
    label: "Ocean",
    color: "from-blue-500 to-cyan-500",
    darkColor: "from-blue-600 to-cyan-600",
  },
  {
    value: "forest",
    label: "Forest",
    color: "from-green-500 to-emerald-500",
    darkColor: "from-green-600 to-emerald-600",
  },
  {
    value: "sunset",
    label: "Sunset",
    color: "from-orange-500 to-red-500",
    darkColor: "from-orange-600 to-red-600",
  },
  {
    value: "lavender",
    label: "Lavender",
    color: "from-purple-500 to-pink-500",
    darkColor: "from-purple-600 to-pink-600",
  },
  {
    value: "monochrome",
    label: "Monochrome",
    color: "from-gray-400 to-gray-600",
    darkColor: "from-gray-600 to-gray-800",
  },
]

export function ThemeSwitcher() {
  const { theme, setTheme, resolvedTheme, colorTheme, setColorTheme } = useExtendedTheme()
  const [isOpen, setIsOpen] = useState(false)
  const [activeTab, setActiveTab] = useState<"mode" | "color">("mode")
  const [mounted, setMounted] = useState(false)

  // After mounting, we can safely show the UI
  useEffect(() => {
    setMounted(true)
  }, [])

  if (!mounted) {
    return (
      <Button variant="outline" size="icon" className="relative overflow-hidden">
        <span className="sr-only">Toggle theme</span>
      </Button>
    )
  }

  const currentTheme = theme === "system" ? resolvedTheme : theme
  const isDark = currentTheme === "dark"

  return (
    <Popover open={isOpen} onOpenChange={setIsOpen}>
      <PopoverTrigger asChild>
        <Button
          variant="outline"
          size="icon"
          className="relative overflow-hidden border-border bg-background hover:bg-accent/10"
        >
          <Sun className="h-[1.2rem] w-[1.2rem] rotate-0 scale-100 transition-all duration-500 dark:-rotate-90 dark:scale-0 text-golden-nugget" />
          <Moon className="absolute h-[1.2rem] w-[1.2rem] rotate-90 scale-0 transition-all duration-500 dark:rotate-0 dark:scale-100 text-bite-tongue" />
          <span className="sr-only">Toggle theme</span>
        </Button>
      </PopoverTrigger>
      <PopoverContent align="end" className="w-[240px] p-0">
        <div className="p-1">
          <Tabs
            defaultValue="mode"
            value={activeTab}
            onValueChange={(value) => setActiveTab(value as "mode" | "color")}
          >
            <TabsList className="grid grid-cols-2">
              <TabsTrigger value="mode" className="text-xs">
                Mode
              </TabsTrigger>
              <TabsTrigger value="color" className="text-xs">
                <Palette className="h-3.5 w-3.5 mr-1" />
                Color
              </TabsTrigger>
            </TabsList>
            <div className="p-4 pt-2">
              {activeTab === "mode" ? (
                <div className="grid grid-cols-3 gap-2">
                  {themeOptions.map((option) => (
                    <Button
                      key={option.value}
                      variant="outline"
                      size="sm"
                      onClick={() => setTheme(option.value)}
                      className={cn("justify-start gap-1", theme === option.value && "border-primary bg-primary/10")}
                    >
                      {option.icon}
                      <span className="text-xs">{option.label}</span>
                    </Button>
                  ))}
                </div>
              ) : (
                <div className="grid grid-cols-3 gap-2">
                  {colorOptions.map((option) => (
                    <button
                      key={option.value}
                      onClick={() => setColorTheme(option.value)}
                      className="relative flex flex-col items-center justify-center p-1 rounded-md hover:bg-muted transition-colors"
                    >
                      <div
                        className={cn(
                          "w-8 h-8 rounded-full bg-gradient-to-br",
                          isDark ? option.darkColor : option.color,
                        )}
                      />
                      <span className="text-xs mt-1">{option.label}</span>
                      {colorTheme === option.value && (
                        <motion.div
                          initial={{ opacity: 0, scale: 0 }}
                          animate={{ opacity: 1, scale: 1 }}
                          className="absolute top-0 right-0 bg-primary text-primary-foreground rounded-full p-0.5"
                        >
                          <Check className="h-3 w-3" />
                        </motion.div>
                      )}
                    </button>
                  ))}
                </div>
              )}
            </div>
          </Tabs>
        </div>
      </PopoverContent>
    </Popover>
  )
}

[V0_FILE]typescriptreact:file="components/floating-theme-switcher.tsx" isEdit="true" isMerged="true"
"use client"

import { useState, useEffect } from "react"
import { motion, AnimatePresence } from "framer-motion"
import { useExtendedTheme, type ColorTheme } from "@/components/theme-provider"
import { Button } from "@/components/ui/button"
import { cn } from "@/lib/utils"
import { Palette, Sun, Moon, X, Check } from "lucide-react"

interface ColorOption {
  value: ColorTheme
  label: string
  color: string
  darkColor: string
}

const colorOptions: ColorOption[] = [
  {
    value: "default",
    label: "Default",
    color: "from-[#d6665d] to-[#db8b40]",
    darkColor: "from-[#d6665d] to-[#db8b40]",
  },
  {
    value: "ocean",
    label: "Ocean",
    color: "from-blue-500 to-cyan-500",
    darkColor: "from-blue-600 to-cyan-600",
  },
  {
    value: "forest",
    label: "Forest",
    color: "from-green-500 to-emerald-500",
    darkColor: "from-green-600 to-emerald-600",
  },
  {
    value: "sunset",
    label: "Sunset",
    color: "from-orange-500 to-red-500",
    darkColor: "from-orange-600 to-red-600",
  },
  {
    value: "lavender",
    label: "Lavender",
    color: "from-purple-500 to-pink-500",
    darkColor: "from-purple-600 to-pink-600",
  },
  {
    value: "monochrome",
    label: "Monochrome",
    color: "from-gray-400 to-gray-600",
    darkColor: "from-gray-600 to-gray-800",
  },
]

export function FloatingThemeSwitcher() {
  const { theme, setTheme, resolvedTheme, colorTheme, setColorTheme } = useExtendedTheme()
  const [isOpen, setIsOpen] = useState(false)
  const [mounted, setMounted] = useState(false)

  // After mounting, we can safely show the UI
  useEffect(() => {
    setMounted(true)
  }, [])

  if (!mounted) {
    return null
  }

  // Safely determine the current theme
  const currentTheme = theme === "system" ? resolvedTheme : theme
  const isDark = currentTheme === "dark"

  return (
    <div className="fixed bottom-20 right-4 z-40">
      <AnimatePresence>
        {isOpen && (
          <motion.div
            initial={{ opacity: 0, scale: 0.9, y: 10 }}
            animate={{ opacity: 1, scale: 1, y: 0 }}
            exit={{ opacity: 0, scale: 0.9, y: 10 }}
            className="mb-2 p-3 bg-background/95 backdrop-blur-md rounded-lg border shadow-lg"
          >
            <div className="flex justify-between items-center mb-2">
              <h3 className="text-sm font-medium">Theme</h3>
              <Button variant="ghost" size="sm" className="h-7 w-7 p-0" onClick={() => setIsOpen(false)}>
                <X className="h-4 w-4" />
              </Button>
            </div>

            <div className="flex gap-2 mb-3">
              <Button
                variant={isDark ? "default" : "outline"}
                size="sm"
                className="gap-1"
                onClick={() => setTheme("dark")}
              >
                <Moon className="h-3.5 w-3.5" />
                <span className="text-xs">Dark</span>
              </Button>
              <Button
                variant={!isDark ? "default" : "outline"}
                size="sm"
                className="gap-1"
                onClick={() => setTheme("light")}
              >
                <Sun className="h-3.5 w-3.5" />
                <span className="text-xs">Light</span>
              </Button>
            </div>

            <div className="grid grid-cols-3 gap-2">
              {colorOptions.map((option) => (
                <button
                  key={option.value}
                  onClick={() => setColorTheme(option.value)}
                  className="relative flex flex-col items-center justify-center p-1 rounded-md hover:bg-muted transition-colors"
                >
                  <div
                    className={cn("w-8 h-8 rounded-full bg-gradient-to-br", isDark ? option.darkColor : option.color)}
                  />
                  <span className="text-xs mt-1">{option.label}</span>
                  {colorTheme === option.value && (
                    <motion.div
                      initial={{ opacity: 0, scale: 0 }}
                      animate={{ opacity: 1, scale: 1 }}
                      className="absolute top-0 right-0 bg-primary text-primary-foreground rounded-full p-0.5"
                    >
                      <Check className="h-3 w-3" />
                    </motion.div>
                  )}
                </button>
              ))}
            </div>
          </motion.div>
        )}
      </AnimatePresence>

      <Button
        size="icon"
        className={cn(
          "h-10 w-10 rounded-full shadow-lg",
          isOpen ? "bg-primary text-primary-foreground" : "bg-background",
        )}
        onClick={() => setIsOpen(!isOpen)}
      >
        <Palette className="h-5 w-5" />
      </Button>
    </div>
  )
}

[V0_FILE]typescriptreact:file="app/page.tsx" isEdit="true" isMerged="true"
import { Suspense } from "react"
import RedesignedHero from "@/components/redesigned-hero"
import AboutSection from "@/components/about-section"
import SkillsSectionWrapper from "@/components/skills-section-wrapper"
import RedesignedExperience from "@/components/redesigned-experience"
import RedesignedProjects from "@/components/redesigned-projects"
import CaseStudies from "@/components/case-studies"
import Education from "@/components/education"
import Publications from "@/components/publications"
import Testimonials from "@/components/testimonials"
import BlogPreview from "@/components/blog-preview"
import ContactForm from "@/components/contact-form"
import EnhancedFooter from "@/components/enhanced-footer"
import FloatingNav from "@/components/floating-nav"
import ScrollProgress from "@/components/scroll-progress"
import { FloatingThemeSwitcher } from "@/components/floating-theme-switcher"
import { ErrorBoundary } from "@/components/error-boundary"
import { SectionFallback } from "@/components/section-fallback"
import { Loader2 } from "lucide-react"

// Simple loading component
function LoadingSection({ name }: { name: string }) {
  return (
    <div className="flex flex-col items-center justify-center py-20">
      <Loader2 className="h-8 w-8 animate-spin text-primary mb-4" />
      <p className="text-muted-foreground">Loading {name} section...</p>
    </div>
  )
}

export default function Home() {
  return (
    <main className="min-h-screen bg-background pt-16">
      <ScrollProgress />
      <FloatingNav />
      <FloatingThemeSwitcher />

      <ErrorBoundary fallback={<SectionFallback title="Hero" />}>
        <Suspense fallback={<LoadingSection name="Hero" />}>
          <RedesignedHero />
        </Suspense>
      </ErrorBoundary>

      <ErrorBoundary fallback={<SectionFallback title="About" />}>
        <Suspense fallback={<LoadingSection name="About" />}>
          <AboutSection />
        </Suspense>
      </ErrorBoundary>

      <ErrorBoundary fallback={<SectionFallback title="Skills" />}>
        <SkillsSectionWrapper />
      </ErrorBoundary>

      <ErrorBoundary fallback={<SectionFallback title="Experience" />}>
        <Suspense fallback={<LoadingSection name="Experience" />}>
          <RedesignedExperience />
        </Suspense>
      </ErrorBoundary>

      <ErrorBoundary fallback={<SectionFallback title="Projects" />}>
        <Suspense fallback={<LoadingSection name="Projects" />}>
          <RedesignedProjects />
        </Suspense>
      </ErrorBoundary>

      <ErrorBoundary fallback={<SectionFallback title="Case Studies" />}>
        <Suspense fallback={<LoadingSection name="Case Studies" />}>
          <CaseStudies />
        </Suspense>
      </ErrorBoundary>

      <ErrorBoundary fallback={<SectionFallback title="Education" />}>
        <Suspense fallback={<LoadingSection name="Education" />}>
          <Education />
        </Suspense>
      </ErrorBoundary>

      <ErrorBoundary fallback={<SectionFallback title="Publications" />}>
        <Suspense fallback={<LoadingSection name="Publications" />}>
          <Publications />
        </Suspense>
      </ErrorBoundary>

      <ErrorBoundary fallback={<SectionFallback title="Testimonials" />}>
        <Suspense fallback={<LoadingSection name="Testimonials" />}>
          <Testimonials />
        </Suspense>
      </ErrorBoundary>

      <ErrorBoundary fallback={<SectionFallback title="Blog" />}>
        <Suspense fallback={<LoadingSection name="Blog" />}>
          <BlogPreview />
        </Suspense>
      </ErrorBoundary>

      <ErrorBoundary fallback={<SectionFallback title="Contact" />}>
        <Suspense fallback={<LoadingSection name="Contact" />}>
          <ContactForm />
        </Suspense>
      </ErrorBoundary>

      <EnhancedFooter />
    </main>
  )
}

[V0_FILE]typescriptreact:file="components/theme-preview.tsx" isEdit="true" isMerged="true"
"use client"

import { useState, useEffect } from "react"
import { motion } from "framer-motion"
import { useExtendedTheme, type ColorTheme } from "@/components/theme-provider"
import { Button } from "@/components/ui/button"
import { Card, CardContent } from "@/components/ui/card"
import { cn } from "@/lib/utils"
import { Palette, Check } from "lucide-react"

interface ThemePreviewProps {
  className?: string
}

interface ColorOption {
  value: ColorTheme
  label: string
  color: string
  darkColor: string
}

const colorOptions: ColorOption[] = [
  {
    value: "default",
    label: "Default",
    color: "from-[#d6665d] to-[#db8b40]",
    darkColor: "from-[#d6665d] to-[#db8b40]",
  },
  {
    value: "ocean",
    label: "Ocean",
    color: "from-blue-500 to-cyan-500",
    darkColor: "from-blue-600 to-cyan-600",
  },
  {
    value: "forest",
    label: "Forest",
    color: "from-green-500 to-emerald-500",
    darkColor: "from-green-600 to-emerald-600",
  },
  {
    value: "sunset",
    label: "Sunset",
    color: "from-orange-500 to-red-500",
    darkColor: "from-orange-600 to-red-600",
  },
  {
    value: "lavender",
    label: "Lavender",
    color: "from-purple-500 to-pink-500",
    darkColor: "from-purple-600 to-pink-600",
  },
  {
    value: "monochrome",
    label: "Monochrome",
    color: "from-gray-400 to-gray-600",
    darkColor: "from-gray-600 to-gray-800",
  },
]

export function ThemePreview({ className }: ThemePreviewProps) {
  const { theme, setTheme, resolvedTheme, colorTheme, setColorTheme } = useExtendedTheme()
  const [hoveredTheme, setHoveredTheme] = useState<ColorTheme | null>(null)
  const [mounted, setMounted] = useState(false)

  // After mounting, we can safely access theme information
  useEffect(() => {
    setMounted(true)
  }, [])

  if (!mounted) {
    return (
      <Card className={cn("border-none bg-background/50 backdrop-blur-sm", className)}>
        <CardContent className="p-4">
          <div className="h-[150px] flex items-center justify-center">
            <div className="animate-pulse">Loading theme options...</div>
          </div>
        </CardContent>
      </Card>
    )
  }

  const currentTheme = theme === "system" ? resolvedTheme : theme
  const isDark = currentTheme === "dark"

  return (
    <Card className={cn("border-none bg-background/50 backdrop-blur-sm", className)}>
      <CardContent className="p-4">
        <div className="flex items-center gap-2 mb-3">
          <Palette className="h-4 w-4 text-primary" />
          <h3 className="text-sm font-medium">Theme Customization</h3>
        </div>

        <div className="flex flex-wrap gap-2 mb-3">
          <Button
            variant={isDark ? "default" : "outline"}
            size="sm"
            className="text-xs h-8"
            onClick={() => setTheme("dark")}
          >
            Dark Mode
          </Button>
          <Button
            variant={!isDark ? "default" : "outline"}
            size="sm"
            className="text-xs h-8"
            onClick={() => setTheme("light")}
          >
            Light Mode
          </Button>
        </div>

        <div className="grid grid-cols-3 gap-2">
          {colorOptions.map((option) => (
            <motion.button
              key={option.value}
              onClick={() => setColorTheme(option.value)}
              onMouseEnter={() => setHoveredTheme(option.value)}
              onMouseLeave={() => setHoveredTheme(null)}
              whileHover={{ scale: 1.05 }}
              className="relative flex flex-col items-center justify-center p-1 rounded-md hover:bg-muted transition-colors"
            >
              <div
                className={cn(
                  "w-8 h-8 rounded-full bg-gradient-to-br transition-transform duration-300",
                  isDark ? option.darkColor : option.color,
                  (hoveredTheme === option.value || colorTheme === option.value) && "scale-110",
                )}
              />
              <span className="text-xs mt-1">{option.label}</span>
              {colorTheme === option.value && (
                <motion.div
                  initial={{ opacity: 0, scale: 0 }}
                  animate={{ opacity: 1, scale: 1 }}
                  className="absolute top-0 right-0 bg-primary text-primary-foreground rounded-full p-0.5"
                >
                  <Check className="h-3 w-3" />
                </motion.div>
              )}
            </motion.button>
          ))}
        </div>
      </CardContent>
    </Card>
  )
}

[V0_FILE]typescriptreact:file="hooks/use-theme-context.tsx" isEdit="true" isMerged="true"
"use client"

import { useExtendedTheme, type Theme, type ColorTheme } from "@/components/theme-provider"
import { useEffect, useState } from "react"

export function useThemeContext() {
  const { theme, setTheme, resolvedTheme, colorTheme, setColorTheme } = useExtendedTheme()
  const [mounted, setMounted] = useState(false)
  const [themeTransitioning, setThemeTransitioning] = useState(false)

  // After mounting, we can safely access theme information
  useEffect(() => {
    setMounted(true)
  }, [])

  // Add transition effect when changing themes
  const changeTheme = (newTheme: Theme) => {
    setThemeTransitioning(true)
    setTheme(newTheme)

    // Reset transition state after animation completes
    setTimeout(() => {
      setThemeTransitioning(false)
    }, 300)
  }

  // Add transition effect when changing color themes
  const changeColorTheme = (newColorTheme: ColorTheme) => {
    setThemeTransitioning(true)
    setColorTheme(newColorTheme)

    // Reset transition state after animation completes
    setTimeout(() => {
      setThemeTransitioning(false)
    }, 300)
  }

  return {
    theme: theme as Theme,
    setTheme: changeTheme,
    resolvedTheme: resolvedTheme as Theme,
    colorTheme,
    setColorTheme: changeColorTheme,
    mounted,
    themeTransitioning,
  }
}

[V0_FILE]typescriptreact:file="components/responsive-header.tsx" isEdit="true" isMerged="true"
"use client"

import { useState, useEffect } from "react"
import Link from "next/link"
import { ThemeSwitcher } from "@/components/theme-switcher"
import { Button } from "@/components/ui/button"
import { Menu, X } from "lucide-react"
import { motion, AnimatePresence } from "framer-motion"
import { cn } from "@/lib/utils"

export default function ResponsiveHeader() {
  const [isScrolled, setIsScrolled] = useState(false)
  const [mobileMenuOpen, setMobileMenuOpen] = useState(false)
  const [isMounted, setIsMounted] = useState(false)

  // Handle scroll effect
  useEffect(() => {
    setIsMounted(true)

    const handleScroll = () => {
      setIsScrolled(window.scrollY > 10)
    }

    // Only add event listener client-side
    window.addEventListener("scroll", handleScroll)
    return () => window.removeEventListener("scroll", handleScroll)
  }, [])

  const navItems = [
    { name: "Home", href: "#" },
    { name: "Skills", href: "#skills" },
    { name: "Experience", href: "#experience" },
    { name: "Projects", href: "#projects" },
    { name: "Contact", href: "#contact" },
  ]

  // If not mounted yet, render a simpler version to avoid hydration issues
  if (!isMounted) {
    return (
      <header className="fixed top-0 left-0 right-0 z-50 bg-background/80 backdrop-blur-md border-b border-border">
        <div className="container flex h-16 items-center justify-between">
          <div className="flex items-center gap-2">
            <div className="font-bold text-xl">SW</div>
            <div className="hidden md:block">
              <div className="font-bold">Shaquille Williams</div>
              <div className="text-xs text-muted-foreground">AI Engineer & Community Builder</div>
            </div>
          </div>

          <div className="flex items-center gap-4">
            <div className="h-9 w-9"></div> {/* Placeholder for theme toggle */}
            <div className="md:hidden">
              <Button variant="ghost" size="icon">
                <Menu className="h-5 w-5" />
              </Button>
            </div>
          </div>
        </div>
      </header>
    )
  }

  return (
    <header
      className={cn(
        "fixed top-0 left-0 right-0 z-50 transition-all duration-300",
        isScrolled ? "bg-background/80 backdrop-blur-md border-b border-border" : "bg-transparent",
      )}
    >
      <div className="container flex h-16 items-center justify-between px-4">
        <motion.div
          initial={{ opacity: 0, x: -20 }}
          animate={{ opacity: 1, x: 0 }}
          transition={{ duration: 0.5 }}
          className="flex items-center gap-2"
        >
          <div className="flex items-center gap-2">
            <div className="font-bold text-xl bg-gradient-to-r from-happy-hearts to-golden-nugget text-transparent bg-clip-text">
              SW
            </div>
            <div className="hidden md:block">
              <div className="font-bold">Shaquille Williams</div>
              <div className="text-xs text-muted-foreground">AI Engineer & Community Builder</div>
            </div>
          </div>
        </motion.div>

        <nav className="hidden md:flex items-center gap-4 lg:gap-6 text-sm">
          {navItems.map((item, index) => (
            <motion.div
              key={item.name}
              initial={{ opacity: 0, y: -10 }}
              animate={{ opacity: 1, y: 0 }}
              transition={{ duration: 0.3, delay: index * 0.1 }}
            >
              <Link
                href={item.href}
                className={cn(
                  "relative transition-colors hover:text-primary",
                  "after:absolute after:bottom-[-4px] after:left-0 after:h-[2px] after:w-0 after:bg-primary after:transition-all hover:after:w-full",
                )}
              >
                {item.name}
              </Link>
            </motion.div>
          ))}
        </nav>

        <div className="flex items-center gap-2 sm:gap-4">
          <motion.div
            initial={{ opacity: 0, scale: 0.8 }}
            animate={{ opacity: 1, scale: 1 }}
            transition={{ duration: 0.3, delay: 0.7 }}
          >
            <ThemeSwitcher />
          </motion.div>

          <div className="md:hidden">
            <Button
              variant="ghost"
              size="icon"
              onClick={() => setMobileMenuOpen(!mobileMenuOpen)}
              aria-label={mobileMenuOpen ? "Close menu" : "Open menu"}
            >
              {mobileMenuOpen ? <X className="h-5 w-5" /> : <Menu className="h-5 w-5" />}
            </Button>
          </div>
        </div>
      </div>

      <AnimatePresence>
        {mobileMenuOpen && (
          <motion.div
            initial={{ opacity: 0, height: 0 }}
            animate={{ opacity: 1, height: "auto" }}
            exit={{ opacity: 0, height: 0 }}
            transition={{ duration: 0.3 }}
            className="md:hidden border-t overflow-hidden bg-background/95 backdrop-blur-md"
          >
            <div className="flex flex-col space-y-3 p-4">
              {navItems.map((item, index) => (
                <motion.div
                  key={item.name}
                  initial={{ opacity: 0, x: -10 }}
                  animate={{ opacity: 1, x: 0 }}
                  transition={{ duration: 0.3, delay: index * 0.05 }}
                >
                  <Link
                    href={item.href}
                    className="block py-2 hover:text-primary transition-colors"
                    onClick={() => setMobileMenuOpen(false)}
                  >
                    {item.name}
                  </Link>
                </motion.div>
              ))}
              <div className="pt-2 border-t border-border">
                <div className="flex items-center justify-between">
                  <span className="text-sm text-muted-foreground">Theme settings</span>
                </div>
              </div>
            </div>
          </motion.div>
        )}
      </AnimatePresence>
    </header>
  )
}

[V0_FILE]typescriptreact:file="components/ui/responsive-container.tsx" isMerged="true"
import type React from "react"
import { cn } from "@/lib/utils"

interface ResponsiveContainerProps {
  children: React.ReactNode
  className?: string
  as?: React.ElementType
  maxWidth?: "sm" | "md" | "lg" | "xl" | "2xl" | "full" | "none"
  padding?: boolean
  centered?: boolean
}

export function ResponsiveContainer({
  children,
  className,
  as: Component = "div",
  maxWidth = "xl",
  padding = true,
  centered = true,
  ...props
}: ResponsiveContainerProps & React.HTMLAttributes<HTMLElement>) {
  const maxWidthClasses = {
    sm: "max-w-screen-sm",
    md: "max-w-screen-md",
    lg: "max-w-screen-lg",
    xl: "max-w-screen-xl",
    "2xl": "max-w-screen-2xl",
    full: "max-w-full",
    none: "",
  }

  return (
    <Component
      className={cn(maxWidthClasses[maxWidth], padding && "px-4 sm:px-6 lg:px-8", centered && "mx-auto", className)}
      {...props}
    >
      {children}
    </Component>
  )
}

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

@layer base {
  :root {
    /* Light theme (default) */
    --background: 45 30% 98%;
    --foreground: 10 10% 10%;
    --card: 45 30% 98%;
    --card-foreground: 10 10% 10%;
    --popover: 45 30% 98%;
    --popover-foreground: 10 10% 10%;
    --primary: 5 57% 60%;
    --primary-foreground: 0 0% 100%;
    --secondary: 20 65% 61%;
    --secondary-foreground: 0 0% 100%;
    --accent: 100 20% 60%;
    --accent-foreground: 0 0% 100%;
    --muted: 40 30% 90%;
    --muted-foreground: 10 10% 30%;
    --destructive: 5 60% 50%;
    --destructive-foreground: 0 0% 100%;
    --border: 50 30% 90%;
    --input: 50 30% 90%;
    --ring: 45 60% 60%;
    --radius: 0.5rem;
  }

  .dark {
    /* Dark theme */
    --background: 10 10% 10%;
    --foreground: 45 30% 98%;
    --card: 10 10% 12%;
    --card-foreground: 45 30% 98%;
    --popover: 10 10% 12%;
    --popover-foreground: 45 30% 98%;
    --primary: 5 57% 60%;
    --primary-foreground: 0 0% 100%;
    --secondary: 20 65% 61%;
    --secondary-foreground: 0 0% 100%;
    --accent: 100 20% 60%;
    --accent-foreground: 0 0% 100%;
    --muted: 40 30% 20%;
    --muted-foreground: 45 30% 80%;
    --destructive: 5 60% 60%;
    --destructive-foreground: 0 0% 100%;
    --border: 50 30% 30%;
    --input: 50 30% 30%;
    --ring: 45 60% 60%;
  }

  /* Ocean theme */
  .theme-ocean {
    --background: 210 50% 98%;
    --foreground: 210 50% 10%;
    --card: 210 50% 98%;
    --card-foreground: 210 50% 10%;
    --popover: 210 50% 98%;
    --popover-foreground: 210 50% 10%;
    --primary: 210 100% 50%;
    --primary-foreground: 0 0% 100%;
    --secondary: 200 100% 60%;
    --secondary-foreground: 0 0% 100%;
    --accent: 190 90% 50%;
    --accent-foreground: 0 0% 100%;
    --muted: 210 40% 90%;
    --muted-foreground: 210 40% 30%;
    --destructive: 0 100% 50%;
    --destructive-foreground: 0 0% 100%;
    --border: 210 50% 90%;
    --input: 210 50% 90%;
    --ring: 210 100% 50%;
  }

  /* Ocean dark theme */
  .dark.theme-ocean {
    --background: 210 50% 10%;
    --foreground: 210 50% 98%;
    --card: 210 50% 12%;
    --card-foreground: 210 50% 98%;
    --popover: 210 50% 12%;
    --popover-foreground: 210 50% 98%;
    --primary: 210 100% 50%;
    --primary-foreground: 0 0% 100%;
    --secondary: 200 100% 60%;
    --secondary-foreground: 0 0% 100%;
    --accent: 190 90% 50%;
    --accent-foreground: 0 0% 100%;
    --muted: 210 40% 20%;
    --muted-foreground: 210 40% 80%;
    --destructive: 0 100% 50%;
    --destructive-foreground: 0 0% 100%;
    --border: 210 50% 30%;
    --input: 210 50% 30%;
    --ring: 210 100% 50%;
  }

  /* Forest theme */
  .theme-forest {
    --background: 120 30% 98%;
    --foreground: 120 30% 10%;
    --card: 120 30% 98%;
    --card-foreground: 120 30% 10%;
    --popover: 120 30% 98%;
    --popover-foreground: 120 30% 10%;
    --primary: 120 70% 40%;
    --primary-foreground: 0 0% 100%;
    --secondary: 150 70% 40%;
    --secondary-foreground: 0 0% 100%;
    --accent: 160 70% 40%;
    --accent-foreground: 0 0% 100%;
    --muted: 120 30% 90%;
    --muted-foreground: 120 30% 30%;
    --destructive: 0 100% 50%;
    --destructive-foreground: 0 0% 100%;
    --border: 120 30% 90%;
    --input: 120 30% 90%;
    --ring: 120 70% 40%;
  }

  /* Forest dark theme */
  .dark.theme-forest {
    --background: 120 30% 8%;
    --foreground: 120 30% 98%;
    --card: 120 30% 10%;
    --card-foreground: 120 30% 98%;
    --popover: 120 30% 10%;
    --popover-foreground: 120 30% 98%;
    --primary: 120 70% 40%;
    --primary-foreground: 0 0% 100%;
    --secondary: 150 70% 40%;
    --secondary-foreground: 0 0% 100%;
    --accent: 160 70% 40%;
    --accent-foreground: 0 0% 100%;
    --muted: 120 30% 20%;
    --muted-foreground: 120 30% 80%;
    --destructive: 0 100% 50%;
    --destructive-foreground: 0 0% 100%;
    --border: 120 30% 30%;
    --input: 120 30% 30%;
    --ring: 120 70% 40%;
  }

  /* Sunset theme */
  .theme-sunset {
    --background: 30 50% 98%;
    --foreground: 30 50% 10%;
    --card: 30 50% 98%;
    --card-foreground: 30 50% 10%;
    --popover: 30 50% 98%;
    --popover-foreground: 30 50% 10%;
    --primary: 20 100% 50%;
    --primary-foreground: 0 0% 100%;
    --secondary: 30 100% 50%;
    --secondary-foreground: 0 0% 100%;
    --accent: 10 100% 60%;
    --accent-foreground: 0 0% 100%;
    --muted: 30 50% 90%;
    --muted-foreground: 30 50% 30%;
    --destructive: 0 100% 50%;
    --destructive-foreground: 0 0% 100%;
    --border: 30 50% 90%;
    --input: 30 50% 90%;
    --ring: 20 100% 50%;
  }

  /* Sunset dark theme */
  .dark.theme-sunset {
    --background: 30 50% 10%;
    --foreground: 30 50% 98%;
    --card: 30 50% 12%;
    --card-foreground: 30 50% 98%;
    --popover: 30 50% 12%;
    --popover-foreground: 30 50% 98%;
    --primary: 20 100% 50%;
    --primary-foreground: 0 0% 100%;
    --secondary: 30 100% 50%;
    --secondary-foreground: 0 0% 100%;
    --accent: 10 100% 60%;
    --accent-foreground: 0 0% 100%;
    --muted: 30 50% 20%;
    --muted-foreground: 30 50% 80%;
    --destructive: 0 100% 50%;
    --destructive-foreground: 0 0% 100%;
    --border: 30 50% 30%;
    --input: 30 50% 30%;
    --ring: 20 100% 50%;
  }

  /* Lavender theme */
  .theme-lavender {
    --background: 270 50% 98%;
    --foreground: 270 50% 10%;
    --card: 270 50% 98%;
    --card-foreground: 270 50% 10%;
    --popover: 270 50% 98%;
    --popover-foreground: 270 50% 10%;
    --primary: 270 100% 60%;
    --primary-foreground: 0 0% 100%;
    --secondary: 290 100% 60%;
    --secondary-foreground: 0 0% 100%;
    --accent: 250 100% 60%;
    --accent-foreground: 0 0% 100%;
    --muted: 270 50% 90%;
    --muted-foreground: 270 50% 30%;
    --destructive: 0 100% 50%;
    --destructive-foreground: 0 0% 100%;
    --border: 270 50% 90%;
    --input: 270 50% 90%;
    --ring: 270 100% 60%;
  }

  /* Lavender dark theme */
  .dark.theme-lavender {
    --background: 270 50% 10%;
    --foreground: 270 50% 98%;
    --card: 270 50% 12%;
    --card-foreground: 270 50% 98%;
    --popover: 270 50% 12%;
    --popover-foreground: 270 50% 98%;
    --primary: 270 100% 60%;
    --primary-foreground: 0 0% 100%;
    --secondary: 290 100% 60%;
    --secondary-foreground: 0 0% 100%;
    --accent: 250 100% 60%;
    --accent-foreground: 0 0% 100%;
    --muted: 270 50% 20%;
    --muted-foreground: 270 50% 80%;
    --destructive: 0 100% 50%;
    --destructive-foreground: 0 0% 100%;
    --border: 270 50% 30%;
    --input: 270 50% 30%;
    --ring: 270 100% 60%;
  }

  /* Monochrome theme */
  .theme-monochrome {
    --background: 0 0% 98%;
    --foreground: 0 0% 10%;
    --card: 0 0% 98%;
    --card-foreground: 0 0% 10%;
    --popover: 0 0% 98%;
    --popover-foreground: 0 0% 10%;
    --primary: 0 0% 40%;
    --primary-foreground: 0 0% 100%;
    --secondary: 0 0% 50%;
    --secondary-foreground: 0 0% 100%;
    --accent: 0 0% 30%;
    --accent-foreground: 0 0% 100%;
    --muted: 0 0% 90%;
    --muted-foreground: 0 0% 30%;
    --destructive: 0 100% 50%;
    --destructive-foreground: 0 0% 100%;
    --border: 0 0% 90%;
    --input: 0 0% 90%;
    --ring: 0 0% 40%;
  }

  /* Monochrome dark theme */
  .dark.theme-monochrome {
    --background: 0 0% 10%;
    --foreground: 0 0% 98%;
    --card: 0 0% 12%;
    --card-foreground: 0 0% 98%;
    --popover: 0 0% 12%;
    --popover-foreground: 0 0% 98%;
    --primary: 0 0% 70%;
    --primary-foreground: 0 0% 10%;
    --secondary: 0 0% 60%;
    --secondary-foreground: 0 0% 10%;
    --accent: 0 0% 80%;
    --accent-foreground: 0 0% 10%;
    --muted: 0 0% 20%;
    --muted-foreground: 0 0% 80%;
    --destructive: 0 100% 50%;
    --destructive-foreground: 0 0% 100%;
    --border: 0 0% 30%;
    --input: 0 0% 30%;
    --ring: 0 0% 70%;
  }
}

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

  html {
    scroll-behavior: smooth;
    -webkit-tap-highlight-color: transparent;
  }

  /* Improve touch targets on mobile */
  button,
  a,
  input,
  select,
  textarea {
    @apply touch-manipulation;
  }

  /* Prevent text size adjustment on orientation change */
  html {
    -webkit-text-size-adjust: 100%;
  }
}

/* Custom animations */
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes slideUp {
  from {
    transform: translateY(20px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

@keyframes slideInRight {
  from {
    transform: translateX(20px);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes pulse {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.05);
  }
  100% {
    transform: scale(1);
  }
}

.animate-fade-in {
  animation: fadeIn 0.5s ease-out forwards;
}

.animate-slide-up {
  animation: slideUp 0.5s ease-out forwards;
}

.animate-slide-in-right {
  animation: slideInRight 0.5s ease-out forwards;
}

.animate-pulse-slow {
  animation: pulse 3s infinite;
}

/* Staggered animations */
.stagger-1 {
  animation-delay: 0.1s;
}
.stagger-2 {
  animation-delay: 0.2s;
}
.stagger-3 {
  animation-delay: 0.3s;
}
.stagger-4 {
  animation-delay: 0.4s;
}
.stagger-5 {
  animation-delay: 0.5s;
}

/* Skill tags */
.skill-tag {
  @apply px-3 py-1 text-xs rounded-md text-white transition-all duration-300 hover:scale-105;
}

.skill-tag-green {
  @apply bg-green-600 hover:bg-green-500;
}

.skill-tag-blue {
  @apply bg-blue-600 hover:bg-blue-500;
}

.skill-tag-yellow {
  @apply bg-yellow-600 hover:bg-yellow-500;
}

.skill-tag-purple {
  @apply bg-purple-600 hover:bg-purple-500;
}

.skill-tag-orange {
  @apply bg-orange-600 hover:bg-orange-500;
}

.skill-tag-red {
  @apply bg-red-600 hover:bg-red-500;
}

.skill-tag-cyan {
  @apply bg-cyan-600 hover:bg-cyan-500;
}

/* Skill level tags */
.skill-level-tag {
  @apply px-3 py-1 text-xs rounded-md transition-all duration-300;
}

.skill-level-expert {
  @apply bg-green-600 text-white;
}

.skill-level-advanced {
  @apply bg-blue-600 text-white;
}

.skill-level-intermediate {
  @apply bg-yellow-600 text-white;
}

/* Glassmorphism */
.glass {
  @apply bg-white/10 backdrop-blur-md border border-white/20;
}

.dark .glass {
  @apply bg-black/30 backdrop-blur-md border border-white/10;
}

/* Project cards */
.project-card {
  @apply relative overflow-hidden rounded-xl transition-all duration-500 hover:shadow-xl;
  background: linear-gradient(to bottom right, rgba(30, 30, 30, 0.8), rgba(15, 15, 15, 0.9));
}

.project-card:hover {
  transform: translateY(-5px);
}

.project-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(45deg, transparent 65%, rgba(255, 255, 255, 0.1) 70%, transparent 75%);
  background-size: 200% 200%;
  animation: shine 3s infinite;
  z-index: 1;
}

@keyframes shine {
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: -200% 0;
  }
}

/* Timeline styles */
.timeline-item {
  @apply relative pl-6 pb-6 border-l border-muted;
}

.timeline-item::before {
  content: "";
  position: absolute;
  width: 0.75rem;
  height: 0.75rem;
  border-radius: 9999px;
  background-color: hsl(var(--primary));
  left: -6px;
  top: 0.25rem;
}

.timeline-item:last-child {
  @apply border-l-0;
}

/* Custom scrollbar for better mobile experience */
.no-scrollbar::-webkit-scrollbar {
  display: none;
}

.no-scrollbar {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

/* Dynamic background gradients */
.gradient-text {
  @apply bg-clip-text text-transparent;
  background-image: linear-gradient(90deg, #3b82f6, #8b5cf6, #ec4899);
  background-size: 200% auto;
  animation: gradient-shift 8s ease infinite;
}

@keyframes gradient-shift {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

/* Progress bar for reading indicator */
.progress-bar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(to right, #3b82f6, #8b5cf6);
  transform-origin: 0%;
  z-index: 100;
}

/* Scroll indicator animation */
@keyframes bounce {
  0%,
  20%,
  50%,
  80%,
  100% {
    transform: translateY(0);
  }
  40% {
    transform: translateY(-10px);
  }
  60% {
    transform: translateY(-5px);
  }
}

.scroll-indicator {
  animation: bounce 2s infinite;
}

/* Cursor effects */
.cursor-dot {
  pointer-events: none;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 9999;
  width: 8px;
  height: 8px;
  background-color: white;
  border-radius: 50%;
  mix-blend-mode: difference;
  transition: transform 0.3s ease;
}

.cursor-ring {
  pointer-events: none;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 9998;
  width: 40px;
  height: 40px;
  border: 2px solid rgba(255, 255, 255, 0.5);
  border-radius: 50%;
  mix-blend-mode: difference;
  transition: all 0.3s ease;
}

/* Skeleton loading animations */
@keyframes shimmer {
  0% {
    background-position: -200% 0;
  }
  100% {
    background-position: 200% 0;
  }
}

.animate-shimmer {
  animation: shimmer 2s infinite;
  background: linear-gradient(
    to right,
    rgba(255, 255, 255, 0.05) 8%,
    rgba(255, 255, 255, 0.15) 18%,
    rgba(255, 255, 255, 0.05) 33%
  );
  background-size: 200% 100%;
}

/* Theme transition */
.theme-transition {
  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

/* Theme color indicators */
.theme-color-indicator {
  @apply w-5 h-5 rounded-full border-2 border-white/50 shadow-sm;
}

.theme-color-indicator.active {
  @apply border-primary ring-2 ring-primary/50;
}

/* Responsive font sizes */
@media (max-width: 640px) {
  h1 {
    font-size: clamp(1.75rem, 5vw, 2.25rem);
  }
  h2 {
    font-size: clamp(1.5rem, 4vw, 1.875rem);
  }
  h3 {
    font-size: clamp(1.25rem, 3.5vw, 1.5rem);
  }
  p {
    font-size: clamp(0.875rem, 3vw, 1rem);
  }
}

/* Improved container padding for mobile */
.container {
  @apply px-4 sm:px-6 lg:px-8;
}

/* Better spacing for mobile */
.section-spacing {
  @apply py-8 sm:py-12 md:py-16 lg:py-20;
}

/* Responsive grid layouts */
.responsive-grid {
  @apply grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4 sm:gap-6;
}

/* Responsive flex layouts */
.responsive-flex {
  @apply flex flex-col sm:flex-row gap-4 sm:gap-6;
}

/* With this properly defined class in a layer: */
@layer components {
  .mobile-touch-target {
    @apply min-h-[44px] min-w-[44px];
  }
}

/* Safe area insets for notched devices */
@supports (padding: max(0px)) {
  .safe-area-inset-bottom {
    padding-bottom: max(1.5rem, env(safe-area-inset-bottom));
  }

  .safe-area-inset-top {
    padding-top: max(1.5rem, env(safe-area-inset-top));
  }
}

[V0_FILE]typescriptreact:file="components/client-diagnostic-wrapper.tsx" isMerged="true"
"use client"

import dynamic from "next/dynamic"

// Dynamically import the diagnostic tool with no SSR
const DiagnosticTool = dynamic(() => import("@/components/diagnostic-tool").then((mod) => mod.DiagnosticTool), {
  ssr: false,
})

export default function ClientDiagnosticWrapper() {
  return <DiagnosticTool />
}

[V0_FILE]typescriptreact:file="app/layout.tsx" isEdit="true" isQuickEdit="true" isMerged="true"
import type React from "react"
import type { Metadata } from "next"
import { Inter } from "next/font/google"
import "./globals.css"
import { ThemeProvider } from "@/components/theme-provider"
import { Toaster } from "@/components/ui/toaster"
import ResponsiveHeader from "@/components/responsive-header"
import ClientDiagnosticWrapper from "@/components/client-diagnostic-wrapper"

const inter = Inter({
  subsets: ["latin"],
  display: "swap", // Ensure text remains visible during font loading
})

export const metadata: Metadata = {
  title: "Shaquille Williams | AI Engineer & Community Builder",
  description:
    "Portfolio of Shaquille Williams, AI Engineer and Community Builder specializing in machine learning, generative AI, and STEM education",
}

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode
}>) {
  return (
    <html lang="en" suppressHydrationWarning>
      <head>
        {/* Preload critical resources */}
        <link rel="preload" href="/placeholder.svg?height=400&width=400" as="image" />
        <link rel="preconnect" href="https://fonts.googleapis.com" />
        <link rel="preconnect" href="https://fonts.gstatic.com" crossOrigin="" />

        {/* Add preload hints for critical JavaScript */}
        <link rel="preload" href="/_next/static/chunks/framework.js" as="script" />

        {/* Add meta tags for better performance */}
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=5.0" />
        <meta httpEquiv="X-UA-Compatible" content="IE=edge" />
      </head>
      <body className={`${inter.className} theme-transition`}>
        <ThemeProvider attribute="class" defaultTheme="dark" enableSystem disableTransitionOnChange>
          <ResponsiveHeader />
          {children}
          <Toaster />
          <ClientDiagnosticWrapper />
        </ThemeProvider>
      </body>
    </html>
  )
}

[V0_FILE]typescriptreact:file="components/redesigned-hero.tsx" isEdit="true" isQuickEdit="true"
"use client"

import type React from "react"

import { useState, useEffect, useRef } from "react"
import { motion, useScroll, useTransform } from "framer-motion"
import Image from "next/image"
import { Button } from "@/components/ui/button"
import { Badge } from "@/components/ui/badge"
import { CustomGradientBackground } from "@/components/custom-gradient-background"
import { ScrollReveal } from "@/components/ui/scroll-reveal"
import { Github, Linkedin, Mail, ArrowDown, ExternalLink } from "lucide-react"
import { useToast } from "@/components/ui/use-toast"
import { useIsClient } from "@/hooks/use-is-client"

export default function RedesignedHero() {
  const { toast } = useToast()
  const containerRef = useRef<HTMLDivElement>(null)
  const [mousePosition, setMousePosition] = useState({ x: 0, y: 0 })
  const [isHovered, setIsHovered] = useState(false)
  const isClient = useIsClient()

  // Safe scroll progress - only run on client
  const { scrollYProgress } = useScroll({
    target: containerRef,
    offset: ["start start", "end start"],
  })

  const opacity = useTransform(scrollYProgress, [0, 0.5], [1, 0])
  const scale = useTransform(scrollYProgress, [0, 0.5], [1, 0.95])
  const y = useTransform(scrollYProgress, [0, 0.5], [0, 100])

  const handleMouseMove = (e: React.MouseEvent<HTMLDivElement>) => {
    if (!containerRef.current) return
    const rect = containerRef.current.getBoundingClientRect()
    setMousePosition({
      x: ((e.clientX - rect.left) / rect.width - 0.5) * 20,
      y: ((e.clientY - rect.top) / rect.height - 0.5) * 20,
    })
  }

  const handleContactClick = () => {
    toast({
      title: "Contact Info",
      description: "Email: shaq.williams.ai@gmail.com | Phone: (917) 831-2482",
      duration: 5000,
    })
  }

  const scrollToProjects = () => {
    document.getElementById("projects")?.scrollIntoView({ behavior: "smooth" })
  }

  // Typing effect for the subtitle
  const [displayedText, setDisplayedText] = useState("")
  const fullText =
    "Senior Software Engineer, AI Specialist, and Community Organizer specializing in machine learning, generative AI, cybersecurity, and STEM education."

  useEffect(() => {
    if (!isClient) return

    let i = 0
    const interval = setInterval(() => {
      if (i < fullText.length) {
        setDisplayedText((prev) => prev + fullText.charAt(i))
        i++
      } else {
        clearInterval(interval)
      }
    }, 30)

    return () => clearInterval(interval)
  }, [fullText, isClient])

  // Function to highlight specific terms in the text
  const highlightText = (text: string) => {
    const termsToHighlight = ["AI", "machine learning", "generative AI", "cybersecurity", "STEM"]
    let highlightedText = text

    termsToHighlight.forEach((term) => {
      // Use case-insensitive regex that preserves the original casing
      const regex = new RegExp(`(${term})`, "gi")
      highlightedText = highlightedText.replace(regex, (match) => {
        return `<span class="text-primary font-semibold">${match}</span>`
      })
    })

    return highlightedText
  }

  return (
    <CustomGradientBackground className="min-h-screen flex items-center">
      <motion.div
        ref={containerRef}
        style={isClient ? { opacity, scale, y } : {}}
        className="container mx-auto px-4 py-16 md:py-24 grid md:grid-cols-2 gap-8 md:gap-12 items-center"
        onMouseMove={handleMouseMove}
        onMouseEnter={() => setIsHovered(true)}
        onMouseLeave={() => setIsHovered(false)}
      >
        {/* Left column - Text content */}
        <div className="order-2 md:order-1 text-center md:text-left">
          <ScrollReveal>
            <Badge className="mb-4 px-3 py-1.5 text-sm bg-primary/20 border-primary/30 text-primary">
              Senior Software Engineer
            </Badge>
          </ScrollReveal>

          <ScrollReveal delay={0.1}>
            <h1 className="text-3xl sm:text-4xl md:text-5xl lg:text-6xl xl:text-7xl font-bold mb-4 md:mb-6 tracking-tight">
              <span className="bg-clip-text text-transparent bg-gradient-to-r from-happy-hearts to-golden-nugget">
                Shaquille Williams
              </span>
            </h1>
          </ScrollReveal>

          <ScrollReveal delay={0.2}>
            <p className="text-lg sm:text-xl md:text-2xl mb-6 md:mb-8 leading-relaxed">
              {isClient && displayedText.length === fullText.length ? (
                <span dangerouslySetInnerHTML={{ __html: highlightText(displayedText) }} />
              ) : (
                <>
                  {displayedText}
                  {isClient && <span className="animate-pulse">|</span>}
                </>
              )}
            </p>
          </ScrollReveal>

          <ScrollReveal delay={0.3}>
            <div className="flex flex-wrap gap-2 justify-center md:justify-start mb-6 md:mb-8">
              <Badge
                variant="outline"
                className="px-2 py-1 sm:px-3 sm:py-1.5 backdrop-blur-sm border-estragon/30 hover:bg-estragon/10 transition-colors"
              >
                Machine Learning
              </Badge>
              <Badge
                variant="outline"
                className="px-2 py-1 sm:px-3 sm:py-1.5 backdrop-blur-sm border-estragon/30 hover:bg-estragon/10 transition-colors"
              >
                Generative AI
              </Badge>
              <Badge
                variant="outline"
                className="px-2 py-1 sm:px-3 sm:py-1.5 backdrop-blur-sm border-white/20 hover:bg-white/10 transition-colors"
              >
                Computer Vision
              </Badge>
              <Badge
                variant="outline"
                className="px-2 py-1 sm:px-3 sm:py-1.5 backdrop-blur-sm border-white/20 hover:bg-white/10 transition-colors"
              >
                NLP
              </Badge>
            </div>
          </ScrollReveal>

          <ScrollReveal delay={0.4}>
            <div className="flex flex-col sm:flex-row gap-4 justify-center md:justify-start mb-6 md:mb-8">
              <Button
                size="lg"
                onClick={scrollToProjects}
                className="group relative overflow-hidden shadow-lg hover:shadow-happy-hearts/20 transition-all duration-300 bg-happy-hearts hover:bg-happy-hearts/90 text-white"
              >
                <span className="relative z-10">View Projects</span>
                <span className="absolute inset-0 bg-gradient-to-r from-happy-hearts to-bite-tongue opacity-0 group-hover:opacity-100 transition-opacity duration-300" />
                <ExternalLink className="ml-2 h-4 w-4 transition-transform group-hover:translate-x-1 relative z-10" />
              </Button>

              <Button
                size="lg"
                variant="outline"
                onClick={handleContactClick}
                className="group relative overflow-hidden border-copper-coin/50 hover:border-copper-coin transition-colors duration-300"
              >
                <span className="relative z-10">Contact Me</span>
                <span className="absolute inset-0 bg-gradient-to-r from-copper-coin/10 to-golden-nugget/10 opacity-0 group-hover:opacity-100 transition-opacity duration-300" />
              </Button>
            </div>
          </ScrollReveal>

          <ScrollReveal delay={0.5}>
            <div className="flex gap-4 justify-center md:justify-start">
              <Button
                variant="ghost"
                size="icon"
                asChild
                className="rounded-full hover:bg-succulent/10 transition-all duration-300 hover:scale-110"
              >
                <a
                  href="https://github.com/swilliams9772"
                  target="_blank"
                  rel="noopener noreferrer"
                  aria-label="GitHub"
                >
                  <Github className="h-5 w-5" />
                </a>
              </Button>
              <Button
                variant="ghost"
                size="icon"
                asChild
                className="rounded-full hover:bg-white/10 transition-all duration-300 hover:scale-110"
              >
                <a
                  href="https://www.linkedin.com/in/shaquille-williams-957970129"
                  target="_blank"
                  rel="noopener noreferrer"
                  aria-label="LinkedIn"
                >
                  <Linkedin className="h-5 w-5" />
                </a>
              </Button>
              <Button
                variant="ghost"
                size="icon"
                asChild
                className="rounded-full hover:bg-white/10 transition-all duration-300 hover:scale-110"
              >
                <a href="mailto:shaq.williams.ai@gmail.com" aria-label="Email">
                  <Mail className="h-5 w-5" />
                </a>
              </Button>
            </div>
          </ScrollReveal>
        </div>

        {/* Right column - Image */}
        <div className="order-1 md:order-2 flex justify-center mb-6 md:mb-0">
          <ScrollReveal direction="left">
            <motion.div
              className="relative w-48 h-48 sm:w-64 sm:h-64 md:w-72 md:h-72 lg:w-80 lg:h-80 rounded-full overflow-hidden border-4 border-white/20 shadow-2xl"
              animate={
                isClient && isHovered
                  ? {
                      x: mousePosition.x * -0.5,
                      y: mousePosition.y * -0.5,
                    }
                  : {}
              }
              transition={{ type: "spring", stiffness: 150, damping: 15 }}
              whileHover={{ scale: 1.05 }}
            >
              <Image
                src="/placeholder.svg?height=400&width=400"
                alt="Shaquille Williams"
                fill
                className="object-cover"
                priority
              />

              {/* Decorative elements */}
              <div className="absolute -top-6 -right-6 w-12 h-12 bg-blue-500/30 rounded-full blur-xl" />
              <div className="absolute -bottom-6 -left-6 w-12 h-12 bg-purple-500/30 rounded-full blur-xl" />

              {/* Add a subtle pulsing glow effect */}
              {isClient && (
                <motion.div
                  className="absolute inset-0 bg-gradient-to-r from-blue-500/20 to-purple-500/20 mix-blend-overlay"
                  animate={{
                    opacity: [0.2, 0.4, 0.2],
                  }}
                  transition={{
                    duration: 3,
                    repeat: Number.POSITIVE_INFINITY,
                    ease: "easeInOut",
                  }}
                />
              )}
            </motion.div>
          </ScrollReveal>
        </div>

        {/* Scroll indicator */}
        {isClient && (
          <div className="absolute bottom-8 left-1/2 transform -translate-x-1/2 flex flex-col items-center">
            <motion.div
              animate={{ y: [0, 10, 0] }}
              transition={{ repeat: Number.POSITIVE_INFINITY, duration: 1.5 }}
              whileHover={{ scale: 1.1 }}
            >
              <Button
                variant="ghost"
                size="icon"
                className="rounded-full border border-white/20 backdrop-blur-sm hover:bg-white/10 transition-colors"
                onClick={() => document.getElementById("about")?.scrollIntoView({ behavior: "smooth" })}
              >
                <ArrowDown className="h-4 w-4" />
              </Button>
            </motion.div>
          </div>
        )}
      </motion.div>
    </CustomGradientBackground>
  )
}

[V0_FILE]typescriptreact:file="components/enhanced-footer.tsx" isEdit="true" isQuickEdit="true"
"use client"

import type React from "react"

import { useState } from "react"
import { motion } from "framer-motion"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { useToast } from "@/components/ui/use-toast"
import { Github, Linkedin, Mail, Twitter, Send, ArrowUp, MapPin, Phone, Calendar, CheckCircle } from "lucide-react"
import { z } from "zod"
import { useForm } from "react-hook-form"
import { zodResolver } from "@hookform/resolvers/zod"
import { Form, FormControl, FormField, FormItem, FormMessage } from "@/components/ui/form"
import { ThemePreview } from "@/components/theme-preview"

// Form validation schema
const subscribeSchema = z.object({
  email: z.string().email({
    message: "Please enter a valid email address.",
  }),
})

export default function EnhancedFooter() {
  const [isSubmitting, setIsSubmitting] = useState(false)
  const { toast } = useToast()

  // Initialize form
  const form = useForm<z.infer<typeof subscribeSchema>>({
    resolver: zodResolver(subscribeSchema),
    defaultValues: {
      email: "",
    },
  })

  // Handle form submission
  function onSubmit(values: z.infer<typeof subscribeSchema>) {
    setIsSubmitting(true)

    // Simulate API call
    setTimeout(() => {
      console.log(values)
      setIsSubmitting(false)
      form.reset()

      toast({
        title: "Subscribed!",
        description: "You've been added to the newsletter.",
        action: (
          <div className="h-8 w-8 bg-green-500/20 rounded-full flex items-center justify-center">
            <CheckCircle className="h-5 w-5 text-green-500" />
          </div>
        ),
      })
    }, 1000)
  }

  const scrollToTop = () => {
    window.scrollTo({ top: 0, behavior: "smooth" })
  }

  const currentYear = new Date().getFullYear()

  return (
    <footer className="bg-gradient-to-b from-background to-background/80 border-t">
      <div className="container mx-auto px-4 py-12">
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8 mb-12">
          <div>
            <motion.div
              initial={{ opacity: 0, y: 20 }}
              whileInView={{ opacity: 1, y: 0 }}
              viewport={{ once: true }}
              transition={{ duration: 0.5 }}
            >
              <div className="font-bold text-xl mb-4">Shaquille Williams</div>
              <p className="text-muted-foreground mb-6">
                AI Engineer & Community Builder specializing in machine learning, generative AI, and STEM education.
              </p>

              <div className="flex gap-3">
                <SocialButton
                  icon={<Github className="h-5 w-5" />}
                  url="https://github.com/swilliams9772"
                  label="GitHub"
                />
                <SocialButton
                  icon={<Linkedin className="h-5 w-5" />}
                  url="https://www.linkedin.com/in/shaquille-williams-957970129"
                  label="LinkedIn"
                />
                <SocialButton icon={<Twitter className="h-5 w-5" />} url="https://twitter.com" label="Twitter" />
                <SocialButton
                  icon={<Mail className="h-5 w-5" />}
                  url="mailto:shaq.williams.ai@gmail.com"
                  label="Email"
                />
              </div>
            </motion.div>
          </div>

          <div>
            <motion.div
              initial={{ opacity: 0, y: 20 }}
              whileInView={{ opacity: 1, y: 0 }}
              viewport={{ once: true }}
              transition={{ duration: 0.5, delay: 0.1 }}
            >
              <h3 className="font-semibold mb-4">Quick Links</h3>
              <ul className="space-y-2">
                <FooterLink href="#" label="Home" />
                <FooterLink href="#skills" label="Skills" />
                <FooterLink href="#experience" label="Experience" />
                <FooterLink href="#projects" label="Projects" />
                <FooterLink href="#education" label="Education" />
                <FooterLink href="#publications" label="Publications" />
                <FooterLink href="#contact" label="Contact" />
              </ul>
            </motion.div>
          </div>

          <div>
            <motion.div
              initial={{ opacity: 0, y: 20 }}
              whileInView={{ opacity: 1, y: 0 }}
              viewport={{ once: true }}
              transition={{ duration: 0.5, delay: 0.2 }}
            >
              <h3 className="font-semibold mb-4">Contact Info</h3>
              <ul className="space-y-3">
                <li className="flex items-center gap-3 text-muted-foreground">
                  <Mail className="h-4 w-4 text-primary" />
                  <span>shaq.williams.ai@gmail.com</span>
                </li>
                <li className="flex items-center gap-3 text-muted-foreground">
                  <Phone className="h-4 w-4 text-primary" />
                  <span>(917) 831-2482</span>
                </li>
                <li className="flex items-center gap-3 text-muted-foreground">
                  <MapPin className="h-4 w-4 text-primary" />
                  <span>New York, NY</span>
                </li>
                <li className="flex items-center gap-3 text-muted-foreground">
                  <Calendar className="h-4 w-4 text-primary" />
                  <span>Available for projects</span>
                </li>
              </ul>

              {/* Add Theme Preview */}
              <div className="mt-6">
                <ThemePreview />
              </div>
            </motion.div>
          </div>

          <div>
            <motion.div
              initial={{ opacity: 0, y: 20 }}
              whileInView={{ opacity: 1, y: 0 }}
              viewport={{ once: true }}
              transition={{ duration: 0.5, delay: 0.3 }}
            >
              <h3 className="font-semibold mb-4">Newsletter</h3>
              <p className="text-muted-foreground mb-4">Subscribe to receive updates on new projects and articles.</p>

              <Form {...form}>
                <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-4">
                  <FormField
                    control={form.control}
                    name="email"
                    render={({ field }) => (
                      <FormItem>
                        <div className="flex gap-2">
                          <FormControl>
                            <Input placeholder="Your email" {...field} />
                          </FormControl>
                          <Button type="submit" size="icon" disabled={isSubmitting}>
                            {isSubmitting ? (
                              <svg
                                className="animate-spin h-4 w-4"
                                xmlns="http://www.w3.org/2000/svg"
                                fill="none"
                                viewBox="0 0 24 24"
                              >
                                <circle
                                  className="opacity-25"
                                  cx="12"
                                  cy="12"
                                  r="10"
                                  stroke="currentColor"
                                  strokeWidth="4"
                                ></circle>
                                <path
                                  className="opacity-75"
                                  fill="currentColor"
                                  d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
                                ></path>
                              </svg>
                            ) : (
                              <Send className="h-4 w-4" />
                            )}
                          </Button>
                        </div>
                        <FormMessage />
                      </FormItem>
                    )}
                  />
                </form>
              </Form>

              <p className="text-xs text-muted-foreground mt-2">I respect your privacy. Unsubscribe at any time.</p>
            </motion.div>
          </div>
        </div>

        <div className="border-t pt-6 flex flex-col md:flex-row justify-between items-center">
          <div className="text-sm text-muted-foreground mb-4 md:mb-0">
            © {currentYear} Shaquille Williams. All rights reserved.
          </div>

          <div className="flex items-center gap-4">
            <Button
              variant="outline"
              size="icon"
              className="rounded-full"
              onClick={scrollToTop}
              aria-label="Scroll to top"
            >
              <ArrowUp className="h-4 w-4" />
            </Button>
          </div>
        </div>
      </div>
    </footer>
  )
}

interface SocialButtonProps {
  icon: React.ReactNode
  url: string
  label: string
}

function SocialButton({ icon, url, label }: SocialButtonProps) {
  return (
    <Button
      variant="outline"
      size="icon"
      asChild
      className="rounded-full hover:bg-primary hover:text-primary-foreground transition-colors duration-300"
    >
      <a href={url} target="_blank" rel="noopener noreferrer" aria-label={label}>
        {icon}
      </a>
    </Button>
  )
}

interface FooterLinkProps {
  href: string
  label: string
}

function FooterLink({ href, label }: FooterLinkProps) {
  return (
    <li>
      <a
        href={href}
        className="text-muted-foreground hover:text-primary transition-colors duration-200 inline-block"
        onClick={(e) => {
          e.preventDefault()
          document.querySelector(href)?.scrollIntoView({ behavior: "smooth" })
        }}
      >
        {label}
      </a>
    </li>
  )
}

[V0_FILE]typescriptreact:file="components/about-section.tsx" isEdit="true" isQuickEdit="true"
"use client"
import { SectionContainer, SectionHeader } from "@/components/ui/section-container"
import { ScrollReveal, StaggeredContainer, StaggerItem } from "@/components/ui/scroll-reveal"
import { Card, CardContent } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Badge } from "@/components/ui/badge"
import { Download, Award, Briefcase, GraduationCap, Heart, ExternalLink } from "lucide-react"
import Image from "next/image"
import { motion } from "framer-motion"

export default function AboutSection() {
  return (
    <SectionContainer id="about" className="relative overflow-hidden">
      {/* Background decorative elements */}
      <div className="absolute top-0 right-0 w-1/3 h-1/3 bg-primary/5 rounded-full blur-3xl -z-10" />
      <div className="absolute bottom-0 left-0 w-1/3 h-1/3 bg-primary/5 rounded-full blur-3xl -z-10" />

      <SectionHeader
        title="About Me"
        subtitle="Get to know more about my background, expertise, and what drives me to create impactful AI solutions."
      />

      <div className="grid md:grid-cols-2 gap-12 items-center">
        <ScrollReveal>
          <div className="relative">
            <div className="relative z-10 rounded-lg overflow-hidden border border-white/10 shadow-xl">
              <Image
                src="/placeholder.svg?height=600&width=800"
                alt="Shaquille Williams"
                width={600}
                height={800}
                className="w-full h-auto object-cover transition-transform duration-700 hover:scale-105"
              />

              {/* Add an overlay with a subtle gradient */}
              <div className="absolute inset-0 bg-gradient-to-t from-black/50 to-transparent opacity-0 hover:opacity-100 transition-opacity duration-300 flex items-end">
                <div className="p-4 text-white">
                  <p className="font-medium">Shaquille Williams</p>
                  <p className="text-sm text-white/80">AI Engineer & Community Builder</p>
                </div>
              </div>
            </div>

            {/* Decorative elements */}
            <div className="absolute top-4 -left-4 w-full h-full border-2 border-primary/50 rounded-lg -z-10" />
            <div className="absolute -bottom-4 -right-4 w-full h-full bg-gradient-to-br from-primary/20 to-transparent rounded-lg -z-10" />

            {/* Stats cards */}
            <motion.div
              whileHover={{ y: -5, boxShadow: "0 10px 25px -5px rgba(0, 0, 0, 0.1)" }}
              className="absolute -bottom-6 -right-6 w-40 shadow-lg backdrop-blur-sm bg-background/80 border-white/10 rounded-lg overflow-hidden"
            >
              <Card className="border-none bg-transparent">
                <CardContent className="p-4">
                  <div className="flex items-center gap-2">
                    <Award className="h-5 w-5 text-primary" />
                    <div>
                      <div className="text-sm font-medium">Experience</div>
                      <div className="text-2xl font-bold">5+ Years</div>
                    </div>
                  </div>
                </CardContent>
              </Card>
            </motion.div>

            <motion.div
              whileHover={{ y: -5, boxShadow: "0 10px 25px -5px rgba(0, 0, 0, 0.1)" }}
              className="absolute -top-6 -right-6 w-40 shadow-lg backdrop-blur-sm bg-background/80 border-white/10 rounded-lg overflow-hidden"
            >
              <Card className="border-none bg-transparent">
                <CardContent className="p-4">
                  <div className="flex items-center gap-2">
                    <Briefcase className="h-5 w-5 text-primary" />
                    <div>
                      <div className="text-sm font-medium">Projects</div>
                      <div className="text-2xl font-bold">20+</div>
                    </div>
                  </div>
                </CardContent>
              </Card>
            </motion.div>
          </div>
        </ScrollReveal>

        <div>
          <StaggeredContainer>
            <StaggerItem>
              <h3 className="text-2xl font-bold mb-4">Senior Software Engineer & AI Specialist</h3>
            </StaggerItem>

            <StaggerItem>
              <p className="text-muted-foreground mb-6">
                I'm an innovative Senior Software Engineer, AI Specialist, and Community Organizer with expertise in
                machine learning, generative AI, cybersecurity, and STEM education. With a background in physics and a
                deep understanding of computational methods, I specialize in developing AI-driven, open-source tools for
                impactful, equitable social change.
              </p>
            </StaggerItem>

            <StaggerItem>
              <p className="text-muted-foreground mb-6">
                My work spans from developing cutting-edge voice cloning technology to creating community-focused
                programs that have positively impacted over 20,000 NYC residents. I'm dedicated to creating systems that
                support activist networks, educational platforms, and community-building initiatives while addressing
                systemic challenges through socially responsible technology.
              </p>
            </StaggerItem>

            <StaggerItem>
              <div className="flex flex-wrap gap-3 mb-8">
                <Badge className="px-3 py-1.5 bg-blue-500/20 text-blue-500 border-blue-500/30 hover:bg-blue-500/30 transition-colors">
                  <Briefcase className="h-3.5 w-3.5 mr-1" />
                  Technical Leadership
                </Badge>
                <Badge className="px-3 py-1.5 bg-purple-500/20 text-purple-500 border-purple-500/30 hover:bg-purple-500/30 transition-colors">
                  <GraduationCap className="h-3.5 w-3.5 mr-1" />
                  STEM Education
                </Badge>
                <Badge className="px-3 py-1.5 bg-green-500/20 text-green-500 border-green-500/30 hover:bg-green-500/30 transition-colors">
                  <Heart className="h-3.5 w-3.5 mr-1" />
                  Community Building
                </Badge>
              </div>
            </StaggerItem>

            <StaggerItem>
              <Button className="gap-2 group shadow-lg hover:shadow-primary/20 transition-all duration-300">
                <Download className="h-4 w-4 group-hover:animate-bounce" />
                Download Resume
              </Button>
              <Button variant="outline" className="ml-3 gap-2 group" asChild>
                <a
                  href="https://www.linkedin.com/in/shaquille-williams-957970129"
                  target="_blank"
                  rel="noopener noreferrer"
                >
                  <span>View LinkedIn</span>
                  <ExternalLink className="h-4 w-4 transition-transform group-hover:translate-x-1" />
                </a>
              </Button>
            </StaggerItem>
          </StaggeredContainer>
        </div>
      </div>
    </SectionContainer>
  )
}

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

import { Button } from "@/components/ui/button"
import { Badge } from "@/components/ui/badge"
import { Github, Linkedin, Mail } from "lucide-react"
import { ModeToggle } from "@/components/mode-toggle"
import { motion } from "framer-motion"

export default function Hero() {
  return (
    <section className="min-h-screen flex flex-col justify-center px-4 bg-background text-foreground">
      <div className="absolute top-4 right-4">
        <ModeToggle />
      </div>

      <motion.div initial={{ opacity: 0, y: 20 }} animate={{ opacity: 1, y: 0 }} transition={{ duration: 0.5 }}>
        <Badge variant="secondary" className="w-fit mb-8 bg-secondary text-secondary-foreground">
          Senior Software Engineer
        </Badge>

        <h1 className="text-6xl font-bold mb-6 bg-gradient-to-r from-happy-hearts to-golden-nugget bg-clip-text text-transparent">
          Shaquille Williams
        </h1>

        <p className="text-xl text-muted-foreground mb-8 max-w-2xl">
          Senior Software Engineer, AI Specialist, and Community Organizer specializing in machine learning, generative
          AI, cybersecurity, and STEM education.
        </p>

        <div className="flex flex-wrap gap-4 mb-8">
          {["Machine Learning", "Generative AI", "Computer Vision", "NLP"].map((skill) => (
            <Badge key={skill} variant="outline" className="bg-accent/10 text-accent-foreground border-accent/20">
              {skill}
            </Badge>
          ))}
        </div>

        <div className="flex flex-wrap gap-4 mb-12">
          <Button className="bg-primary text-primary-foreground hover:bg-primary/90">View Projects</Button>
          <Button variant="outline" className="border-primary/20 hover:bg-primary/10">
            Contact Me
          </Button>
        </div>

        <div className="flex gap-4">
          {[
            { icon: Github, href: "https://github.com/swilliams9772" },
            { icon: Linkedin, href: "https://www.linkedin.com/in/shaquille-williams-957970129" },
            { icon: Mail, href: "mailto:contact@example.com" },
          ].map((social, index) => (
            <Button key={index} variant="ghost" size="icon" className="hover:bg-accent/10" asChild>
              <a href={social.href} target="_blank" rel="noopener noreferrer">
                <social.icon className="h-5 w-5" />
              </a>
            </Button>
          ))}
        </div>
      </motion.div>
    </section>
  )
}

[V0_FILE]typescriptreact:file="components/redesigned-projects.tsx" isEdit="true" isQuickEdit="true"
"use client"

import { useState, useEffect } from "react"
import { motion, AnimatePresence } from "framer-motion"
import Image from "next/image"
import { SectionContainer, SectionHeader } from "@/components/ui/section-container"
import { ScrollReveal } from "@/components/ui/scroll-reveal"
import { Card, CardContent } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Badge } from "@/components/ui/badge"
import { Tabs, TabsList, TabsTrigger, TabsContent } from "@/components/ui/tabs"
import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription } from "@/components/ui/dialog"
import { useToast } from "@/components/ui/use-toast"
import { cn } from "@/lib/utils"
import { useIsClient } from "@/hooks/use-is-client"
import { ErrorBoundary } from "@/components/error-boundary"
import {
  ExternalLink,
  Github,
  Code,
  ChevronLeft,
  ChevronRight,
  Calendar,
  Users,
  Star,
  Layers,
  Cpu,
  Globe,
  Database,
  BookOpen,
  Share2,
  Shield,
  MessageSquare,
  Zap,
  Loader2,
} from "lucide-react"

// Project categories
const projectCategories = [
  { id: "all", name: "All Projects" },
  { id: "ai", name: "AI & ML", icon: <Cpu className="h-4 w-4" /> },
  { id: "audio", name: "Audio", icon: <Zap className="h-4 w-4" /> },
  { id: "web", name: "Web Dev", icon: <Globe className="h-4 w-4" /> },
  { id: "data", name: "Data Science", icon: <Database className="h-4 w-4" /> },
  { id: "network", name: "Network", icon: <Share2 className="h-4 w-4" /> },
  { id: "security", name: "Security", icon: <Shield className="h-4 w-4" /> },
  { id: "communication", name: "Communication", icon: <MessageSquare className="h-4 w-4" /> },
  { id: "research", name: "Research", icon: <BookOpen className="h-4 w-4" /> },
]

// Project data
const projects = [
  {
    id: 1,
    title: "Voice Cloning & Audio Processing Suite",
    category: "audio",
    description:
      "Comprehensive audio processing system including real-time voice cloning, multilingual transcription, and speaker diarization.",
    longDescription:
      "A state-of-the-art voice cloning system that allows for real-time and one-shot audio processing with minimal latency. The system uses deep learning models to generate natural-sounding speech that matches the target voice with unprecedented accuracy and emotional range, enabling applications in accessibility, personalized audiobooks, and more.",
    technologies: ["TensorFlow TTS", "PyTorch", "Whisper", "FastAPI", "React"],
    imageUrl: "/placeholder.svg?height=600&width=800",
    demoUrl: "#",
    githubUrl: "https://github.com/swilliams9772",
    color: "from-blue-600 to-violet-600",
    featured: true,
    completed: "2023",
    teamSize: 3,
    difficulty: 5,
    achievements: [
      "Developed one-shot voice cloning requiring only 5 seconds of audio",
      "Reduced model size by 60% while maintaining voice quality",
      "Achieved 80ms latency for real-time applications",
      "Implemented multi-speaker voice cloning with 95% accuracy",
    ],
  },
  {
    id: 2,
    title: "DALL-E 2 PyTorch Implementation",
    category: "ai",
    description: "Open-source implementation of OpenAI's DALL-E 2 image generation model using PyTorch.",
    longDescription:
      "A PyTorch implementation of the DALL-E 2 architecture for generating high-quality images from text descriptions. The project includes optimizations for CUDA acceleration and containerization with Docker for easy deployment and scaling.",
    technologies: ["PyTorch", "CUDA", "Docker", "HuggingFace", "Python"],
    imageUrl: "/placeholder.svg?height=600&width=800",
    demoUrl: "#",
    githubUrl: "https://github.com/swilliams9772",
    color: "from-purple-600 to-pink-600",
    featured: false,
    completed: "2023",
    teamSize: 2,
    difficulty: 5,
    achievements: [
      "Implemented the full DALL-E 2 architecture with PyTorch",
      "Optimized for CUDA acceleration with 40% performance improvement",
      "Created Docker containers for easy deployment",
      "Built a web interface for text-to-image generation",
    ],
  },
  {
    id: 3,
    title: "Multi-Agent RL Environment",
    category: "ai",
    description: "A flexible environment for training and evaluating multi-agent reinforcement learning algorithms.",
    longDescription:
      "A customizable environment for developing and testing multi-agent reinforcement learning algorithms. The system supports various reward structures, observation spaces, and agent interactions.",
    technologies: ["Python", "TensorFlow", "OpenAI Gym", "Ray", "Docker"],
    imageUrl: "/placeholder.svg?height=600&width=800",
    demoUrl: "#",
    githubUrl: "https://github.com/swilliams9772",
    color: "from-green-600 to-teal-600",
    featured: false,
    completed: "2023",
    teamSize: 2,
    difficulty: 4,
    achievements: [
      "Designed a flexible multi-agent environment supporting various RL algorithms",
      "Implemented custom reward structures and observation spaces",
      "Created visualization tools for agent behavior analysis",
      "Benchmarked performance against standard environments",
    ],
  },
  {
    id: 4,
    title: "Community Grant Management System",
    category: "web",
    description: "Web application for managing community grant applications, reviews, and distributions.",
    longDescription:
      "A full-stack web application that streamlines the process of managing community grants from application to distribution. The system includes features for application submission, review workflows, and financial tracking.",
    technologies: ["Next.js", "PostgreSQL", "AWS", "TypeScript", "Prisma"],
    imageUrl: "/placeholder.svg?height=600&width=800",
    demoUrl: "#",
    githubUrl: "https://github.com/swilliams9772",
    color: "from-amber-600 to-orange-600",
    featured: false,
    completed: "2022",
    teamSize: 2,
    difficulty: 3,
    achievements: [
      "Built a full-stack application with Next.js and PostgreSQL",
      "Implemented secure authentication and authorization",
      "Created a workflow system for grant application review",
      "Deployed on AWS with CI/CD pipeline",
    ],
  },
  {
    id: 5,
    title: "Wikipedia Connection Finder",
    category: "network",
    description: "Tool for finding the shortest path between any two Wikipedia articles through hyperlinks.",
    longDescription:
      "An application that analyzes the network structure of Wikipedia to find the shortest path between any two articles. The tool uses graph theory algorithms to navigate through the complex web of hyperlinks.",
    technologies: ["Python", "NetworkX", "Flask", "MongoDB", "D3.js"],
    imageUrl: "/placeholder.svg?height=600&width=800",
    demoUrl: "#",
    githubUrl: "https://github.com/swilliams9772",
    color: "from-blue-600 to-cyan-600",
    featured: false,
    completed: "2022",
    teamSize: 1,
    difficulty: 3,
    achievements: [
      "Implemented graph algorithms to find shortest paths between Wikipedia articles",
      "Created a web interface with Flask and D3.js",
      "Optimized performance for large-scale graph traversal",
      "Built a caching system with MongoDB for faster results",
    ],
  },
  {
    id: 6,
    title: "NYC Education Analytics",
    category: "data",
    description: "Data analysis and visualization platform for NYC public school performance metrics.",
    longDescription:
      "A comprehensive data analysis platform that processes and visualizes performance metrics from NYC public schools. The system includes predictive models for identifying at-risk students and schools that need additional resources.",
    technologies: ["Python", "Pandas", "Scikit-learn", "Tableau", "R"],
    imageUrl: "/placeholder.svg?height=600&width=800",
    demoUrl: "#",
    githubUrl: "https://github.com/swilliams9772",
    color: "from-indigo-600 to-blue-600",
    featured: false,
    completed: "2022",
    teamSize: 4,
    difficulty: 4,
    achievements: [
      "Analyzed NYC public school data to identify performance patterns",
      "Built predictive models for student success with Scikit-learn",
      "Created interactive visualizations with Tableau",
      "Presented findings to education stakeholders",
    ],
  },
]

export default function RedesignedProjects() {
  const [searchQuery, setSearchQuery] = useState("")
  const [selectedCategory, setSelectedCategory] = useState("all")
  const [selectedProject, setSelectedProject] = useState<(typeof projects)[0] | null>(null)
  const [currentFeaturedIndex, setCurrentFeaturedIndex] = useState(0)
  const [direction, setDirection] = useState(0)
  const [isDialogOpen, setIsDialogOpen] = useState(false)
  const [isLoading, setIsLoading] = useState(true)
  const { toast } = useToast()
  const isClient = useIsClient()

  // Get featured projects
  const featuredProjects = projects.filter((project) => project.featured)

  // Filter projects based on category
  const filteredProjects =
    selectedCategory === "all"
      ? projects.filter((project) => !project.featured)
      : projects.filter((project) => project.category === selectedCategory && !project.featured)

  const handleNext = () => {
    if (!isClient) return
    setDirection(1)
    setCurrentFeaturedIndex((prev) => (prev + 1) % featuredProjects.length)
  }

  const handlePrev = () => {
    if (!isClient) return
    setDirection(-1)
    setCurrentFeaturedIndex((prev) => (prev - 1 + featuredProjects.length) % featuredProjects.length)
  }

  const handleDemoClick = (url: string) => {
    if (!isClient) return
    toast({
      title: "Demo Link",
      description: "Opening demo in a new tab...",
      duration: 3000,
    })
    window.open(url, "_blank")
  }

  // Simulate loading delay
  useEffect(() => {
    if (isClient) {
      const timer = setTimeout(() => {
        setIsLoading(false)
      }, 500)
      return () => clearTimeout(timer)
    }
  }, [isClient])

  // If not client-side yet, show a loading state
  if (!isClient || isLoading) {
    return (
      <SectionContainer id="projects" className="relative">
        <SectionHeader
          title="Project Portfolio"
          subtitle="Explore my portfolio of AI, machine learning, and software development projects."
        />
        <div className="flex justify-center items-center py-20">
          <Loader2 className="h-8 w-8 animate-spin text-primary mr-2" />
          <span>Loading projects...</span>
        </div>
      </SectionContainer>
    )
  }

  return (
    <SectionContainer id="projects" className="relative">
      {/* Background decorative elements */}
      <div className="absolute top-0 left-0 w-1/3 h-1/3 bg-primary/5 rounded-full blur-3xl -z-10" />
      <div className="absolute bottom-0 right-0 w-1/3 h-1/3 bg-primary/5 rounded-full blur-3xl -z-10" />

      <SectionHeader
        title="Project Portfolio"
        subtitle="Explore my portfolio of AI, machine learning, and software development projects. Each project demonstrates different skills and technologies."
      />

      {featuredProjects.length > 0 && (
        <div className="mb-16">
          <ScrollReveal>
            <h3 className="text-xl font-semibold mb-6 flex items-center gap-2 justify-center">
              <Layers className="h-5 w-5 text-primary" />
              <span>Featured Projects</span>
            </h3>
          </ScrollReveal>

          <ScrollReveal>
            <div className="relative rounded-xl overflow-hidden">
              <AnimatePresence mode="wait" initial={false} custom={direction}>
                <motion.div
                  key={featuredProjects[currentFeaturedIndex].id}
                  custom={direction}
                  initial={{
                    x: direction > 0 ? 1000 : -1000,
                    opacity: 0,
                  }}
                  animate={{
                    x: 0,
                    opacity: 1,
                    transition: {
                      x: { type: "spring", stiffness: 300, damping: 30 },
                      opacity: { duration: 0.2 },
                    },
                  }}
                  exit={{
                    x: direction > 0 ? -1000 : 1000,
                    opacity: 0,
                    transition: {
                      x: { type: "spring", stiffness: 300, damping: 30 },
                      opacity: { duration: 0.2 },
                    },
                  }}
                  className="relative w-full aspect-[16/9]"
                >
                  <div className="absolute inset-0 flex flex-col md:flex-row">
                    <div className="relative w-full h-48 md:h-auto md:w-1/2">
                      <Image
                        src={featuredProjects[currentFeaturedIndex].imageUrl || "/placeholder.svg"}
                        alt={featuredProjects[currentFeaturedIndex].title}
                        fill
                        className="object-cover"
                        priority
                      />
                    </div>

                    <div
                      className={cn(
                        "w-full md:w-1/2 p-6 flex flex-col justify-center opacity-90 bg-gradient-to-r",
                        featuredProjects[currentFeaturedIndex].color,
                      )}
                    >
                      <Badge
                        variant="outline"
                        className="w-fit mb-4 bg-black/50 backdrop-blur-sm text-white border-white/20"
                      >
                        Featured Project
                      </Badge>
                      <h3 className="text-xl md:text-2xl lg:text-3xl font-bold text-white mb-2 md:mb-4">
                        {featuredProjects[currentFeaturedIndex].title}
                      </h3>
                      <p className="text-white/90 mb-4 md:mb-6 text-sm md:text-base line-clamp-3 md:line-clamp-none">
                        {featuredProjects[currentFeaturedIndex].description}
                      </p>

                      <div className="flex flex-wrap gap-2 mb-4 md:mb-6">
                        {featuredProjects[currentFeaturedIndex].technologies.slice(0, 3).map((tech, index) => (
                          <Badge
                            key={index}
                            className="bg-white/20 hover:bg-white/30 text-white border-none backdrop-blur-sm"
                          >
                            {tech}
                          </Badge>
                        ))}
                        {featuredProjects[currentFeaturedIndex].technologies.length > 3 && (
                          <Badge className="bg-white/20 hover:bg-white/30 text-white border-none backdrop-blur-sm">
                            +{featuredProjects[currentFeaturedIndex].technologies.length - 3} more
                          </Badge>
                        )}
                      </div>

                      <div className="flex flex-wrap gap-3">
                        <Button
                          className="bg-white text-black hover:bg-white/90 group text-sm"
                          onClick={() => handleDemoClick(featuredProjects[currentFeaturedIndex].demoUrl)}
                        >
                          Live Demo
                          <ExternalLink className="ml-2 h-4 w-4 transition-transform group-hover:translate-x-1" />
                        </Button>

                        <Button
                          variant="outline"
                          className="border-white text-white hover:bg-white/20 gap-2 text-sm"
                          asChild
                        >
                          <a
                            href={featuredProjects[currentFeaturedIndex].githubUrl}
                            target="_blank"
                            rel="noopener noreferrer"
                          >
                            <Github className="h-4 w-4" />
                            View Code
                          </a>
                        </Button>

                        <Button
                          variant="outline"
                          className="border-white text-white hover:bg-white/20 gap-2 text-sm"
                          onClick={() => {
                            setSelectedProject(featuredProjects[currentFeaturedIndex])
                            setIsDialogOpen(true)
                          }}
                        >
                          <Code className="h-4 w-4" />
                          Details
                        </Button>
                      </div>
                    </div>
                  </div>
                </motion.div>
              </AnimatePresence>

              {/* Navigation controls */}
              <Button
                size="icon"
                variant="ghost"
                className="absolute left-2 top-1/2 -translate-y-1/2 z-30 h-8 w-8 sm:h-10 sm:w-10 rounded-full bg-black/50 text-white hover:bg-black/70"
                onClick={handlePrev}
              >
                <ChevronLeft className="h-5 w-5" />
              </Button>

              <Button
                size="icon"
                variant="ghost"
                className="absolute right-2 top-1/2 -translate-y-1/2 z-30 h-8 w-8 sm:h-10 sm:w-10 rounded-full bg-black/50 text-white hover:bg-black/70"
                onClick={handleNext}
              >
                <ChevronRight className="h-5 w-5" />
              </Button>

              {/* Progress dots */}
              <div className="absolute bottom-2 left-1/2 -translate-x-1/2 z-30 flex items-center gap-1">
                {featuredProjects.map((_, index) => (
                  <button
                    key={index}
                    className={cn(
                      "w-2 h-2 rounded-full transition-all",
                      currentFeaturedIndex === index ? "bg-white scale-125" : "bg-white/50 hover:bg-white/80",
                    )}
                    onClick={() => {
                      setDirection(index > currentFeaturedIndex ? 1 : -1)
                      setCurrentFeaturedIndex(index)
                    }}
                    aria-label={`Go to project ${index + 1}`}
                  />
                ))}
              </div>
            </div>
          </ScrollReveal>
        </div>
      )}

      <ScrollReveal>
        <Tabs defaultValue="all" onValueChange={setSelectedCategory} className="w-full">
          <div className="overflow-x-auto pb-2 no-scrollbar">
            <TabsList className="flex justify-start gap-2 mb-8 bg-transparent w-max mx-auto">
              {projectCategories.map((category) => (
                <TabsTrigger
                  key={category.id}
                  value={category.id}
                  className={cn(
                    "px-3 py-2 rounded-full text-xs sm:text-sm font-medium transition-all data-[state=active]:shadow-lg whitespace-nowrap",
                    selectedCategory === category.id
                      ? "bg-primary text-primary-foreground"
                      : "bg-muted hover:bg-muted/80",
                  )}
                >
                  <div className="flex items-center gap-1 sm:gap-2">
                    {category.icon && category.icon}
                    <span>{category.name}</span>
                  </div>
                </TabsTrigger>
              ))}
            </TabsList>
          </div>

          <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
            <AnimatePresence>
              {filteredProjects.map((project, index) => (
                <ErrorBoundary key={project.id}>
                  <motion.div
                    initial={{ opacity: 0, y: 20 }}
                    animate={{ opacity: 1, y: 0 }}
                    exit={{ opacity: 0, scale: 0.95 }}
                    transition={{ duration: 0.5, delay: index * 0.1 }}
                  >
                    <ProjectCard
                      project={project}
                      onSelect={() => {
                        setSelectedProject(project)
                        setIsDialogOpen(true)
                      }}
                    />
                  </motion.div>
                </ErrorBoundary>
              ))}
            </AnimatePresence>
          </div>
        </Tabs>
      </ScrollReveal>

      {/* Project details dialog */}
      <Dialog open={isDialogOpen} onOpenChange={setIsDialogOpen}>
        <DialogContent className="max-w-4xl max-h-[90vh] overflow-hidden p-0 w-[95vw]">
          {selectedProject && (
            <div className="flex flex-col h-full">
              <DialogHeader className="px-4 sm:px-6 pt-4 sm:pt-6 pb-2">
                <div className="flex justify-between items-start">
                  <div>
                    <Badge className="mb-2">
                      {selectedProject.category === "ai"
                        ? "AI & Machine Learning"
                        : selectedProject.category === "web"
                          ? "Web Development"
                          : selectedProject.category === "data"
                            ? "Data Science"
                            : selectedProject.category === "audio"
                              ? "Audio & Voice Tech"
                              : "Research"}
                    </Badge>
                    <DialogTitle className="text-xl sm:text-2xl">{selectedProject.title}</DialogTitle>
                    <DialogDescription className="mt-2 text-sm">{selectedProject.description}</DialogDescription>
                  </div>
                  <div className="flex">
                    {Array.from({ length: 5 }).map((_, i) => (
                      <Star
                        key={i}
                        className={`h-4 w-4 ${i < selectedProject.difficulty ? "fill-yellow-500 text-yellow-500" : "text-muted"}`}
                      />
                    ))}
                  </div>
                </div>
              </DialogHeader>

              <Tabs defaultValue="overview" className="flex-1 overflow-hidden">
                <div className="px-4 sm:px-6 border-b">
                  <TabsList className="justify-start rounded-none bg-transparent h-10">
                    <TabsTrigger value="overview" className="text-sm">
                      Overview
                    </TabsTrigger>
                    <TabsTrigger value="details" className="text-sm">
                      Details
                    </TabsTrigger>
                    <TabsTrigger value="gallery" className="text-sm">
                      Gallery
                    </TabsTrigger>
                  </TabsList>
                </div>

                <div className="p-4 sm:p-6 overflow-y-auto max-h-[calc(90vh-200px)]">
                  <TabsContent value="overview" className="mt-0 h-full">
                    <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
                      <div className="lg:col-span-2">
                        <h4 className="text-lg font-semibold mb-3">Project Details</h4>
                        <p className="mb-6 text-sm sm:text-base">{selectedProject.longDescription}</p>

                        <h4 className="text-lg font-semibold mb-3">Key Achievements</h4>
                        <ul className="space-y-2 mb-6">
                          {selectedProject.achievements.map((achievement, i) => (
                            <li key={i} className="flex items-start gap-2">
                              <div className="h-5 w-5 rounded-full bg-primary/20 flex items-center justify-center mt-0.5 flex-shrink-0">
                                <span className="text-xs text-primary">✓</span>
                              </div>
                              <span className="text-sm sm:text-base">{achievement}</span>
                            </li>
                          ))}
                        </ul>

                        <h4 className="text-lg font-semibold mb-3">Technologies</h4>
                        <div className="flex flex-wrap gap-2 mb-6">
                          {selectedProject.technologies.map((tech, index) => (
                            <Badge key={index} variant="secondary">
                              {tech}
                            </Badge>
                          ))}
                        </div>

                        <div className="flex flex-wrap gap-3 mt-6">
                          <Button
                            variant="default"
                            className="gap-2"
                            onClick={() => handleDemoClick(selectedProject.demoUrl)}
                          >
                            <ExternalLink className="h-4 w-4" />
                            Live Demo
                          </Button>
                          <Button variant="outline" className="gap-2" asChild>
                            <a href={selectedProject.githubUrl} target="_blank" rel="noopener noreferrer">
                              <Github className="h-4 w-4" />
                              GitHub
                            </a>
                          </Button>
                        </div>
                      </div>

                      <div>
                        <h4 className="text-lg font-semibold mb-3">Project Info</h4>
                        <div className="space-y-4">
                          <div className="flex flex-col">
                            <span className="text-sm text-muted-foreground">Completed</span>
                            <span>{selectedProject.completed}</span>
                          </div>
                          <div className="flex flex-col">
                            <span className="text-sm text-muted-foreground">Team Size</span>
                            <span>{selectedProject.teamSize} people</span>
                          </div>
                          <div className="flex flex-col">
                            <span className="text-sm text-muted-foreground">Difficulty</span>
                            <div className="flex">
                              {Array.from({ length: 5 }).map((_, i) => (
                                <Star
                                  key={i}
                                  className={`h-4 w-4 ${i < selectedProject.difficulty ? "fill-yellow-500 text-yellow-500" : "text-muted"}`}
                                />
                              ))}
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </TabsContent>

                  <TabsContent value="details" className="mt-0">
                    <div className="relative aspect-video mb-6 rounded-lg overflow-hidden">
                      <Image
                        src={selectedProject.imageUrl || "/placeholder.svg"}
                        alt={selectedProject.title}
                        fill
                        className="object-cover"
                      />
                    </div>

                    <div className="space-y-6">
                      <div>
                        <h4 className="text-lg font-semibold mb-2">Project Description</h4>
                        <p className="text-sm sm:text-base">{selectedProject.longDescription}</p>
                      </div>

                      <div>
                        <h4 className="text-lg font-semibold mb-2">Implementation Details</h4>
                        <p className="text-sm sm:text-base">
                          This project was implemented using {selectedProject.technologies.join(", ")}. The development
                          process involved careful planning, iterative development, and rigorous testing to ensure
                          high-quality results.
                        </p>
                      </div>

                      <div>
                        <h4 className="text-lg font-semibold mb-2">Challenges & Solutions</h4>
                        <p className="text-sm sm:text-base">
                          During development, we encountered several challenges including performance optimization,
                          scalability concerns, and integration complexities. These were addressed through innovative
                          approaches and best practices in software engineering.
                        </p>
                      </div>
                    </div>
                  </TabsContent>

                  <TabsContent value="gallery" className="mt-0">
                    <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
                      {[1, 2, 3, 4].map((index) => (
                        <div key={index} className="overflow-hidden rounded-lg">
                          <Image
                            src={`/placeholder.svg?height=400&width=600&text=Screenshot ${index}`}
                            alt={`${selectedProject.title} screenshot ${index}`}
                            width={600}
                            height={400}
                            className="w-full h-auto object-cover transition-transform duration-500 hover:scale-110"
                          />
                        </div>
                      ))}
                    </div>
                  </TabsContent>
                </div>
              </Tabs>
            </div>
          )}
        </DialogContent>
      </Dialog>
    </SectionContainer>
  )
}

interface ProjectCardProps {
  project: (typeof projects)[0]
  onSelect: () => void
}

function ProjectCard({ project, onSelect }: ProjectCardProps) {
  const [isHovered, setIsHovered] = useState(false)
  const isClient = useIsClient()

  return (
    <Card
      className="overflow-hidden h-full flex flex-col border-none shadow-md hover:shadow-lg transition-all duration-300 group"
      onMouseEnter={() => setIsHovered(true)}
      onMouseLeave={() => setIsHovered(false)}
    >
      <div className="relative aspect-video overflow-hidden">
        <Image
          src={project.imageUrl || "/placeholder.svg"}
          alt={project.title}
          fill
          className={cn(
            "object-cover transition-transform duration-500",
            isClient && isHovered ? "scale-110" : "scale-100",
          )}
        />
        <div
          className={cn(
            "absolute inset-0 opacity-0 group-hover:opacity-80 transition-opacity duration-300 bg-gradient-to-r",
            project.color,
          )}
        />

        <div className="absolute inset-0 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity duration-300">
          <Button variant="outline" className="border-white text-white hover:bg-white/20" onClick={onSelect}>
            View Details
          </Button>
        </div>
      </div>

      <CardContent className="p-4 flex-1 flex flex-col">
        <div className="flex justify-between items-start mb-2">
          <Badge variant="outline" className="text-xs">
            {project.category === "ai"
              ? "AI & ML"
              : project.category === "web"
                ? "Web Dev"
                : project.category === "data"
                  ? "Data Science"
                  : project.category === "audio"
                    ? "Audio"
                    : "Research"}
          </Badge>
          <div className="flex">
            {Array.from({ length: 5 }).map((_, i) => (
              <Star
                key={i}
                className={`h-3 w-3 ${i < project.difficulty ? "fill-yellow-500 text-yellow-500" : "text-muted"}`}
              />
            ))}
          </div>
        </div>

        <h3 className="font-bold mb-2 line-clamp-1">{project.title}</h3>
        <p className="text-muted-foreground text-sm line-clamp-3 mb-4">{project.description}</p>

        <div className="flex flex-wrap gap-1 mb-4 mt-auto">
          {project.technologies.slice(0, 3).map((tech, i) => (
            <Badge key={i} variant="secondary" className="text-xs">
              {tech}
            </Badge>
          ))}
          {project.technologies.length > 3 && (
            <Badge variant="secondary" className="text-xs">
              +{project.technologies.length - 3} more
            </Badge>
          )}
        </div>

        <div className="flex justify-between items-center text-xs text-muted-foreground">
          <div className="flex items-center gap-1">
            <Calendar className="h-3 w-3" />
            <span>{project.completed}</span>
          </div>
          <div className="flex items-center gap-1">
            <Users className="h-3 w-3" />
            <span>Team: {project.teamSize}</span>
          </div>
        </div>
      </CardContent>
    </Card>
  )
}

[V0_FILE]typescriptreact:file="components/resume-download.tsx" isEdit="true" isQuickEdit="true"
"use client"

import type React from "react"

import { useState } from "react"
import { motion, AnimatePresence } from "framer-motion"
import { Button } from "@/components/ui/button"
import { Download, FileText, Briefcase, GraduationCap, Award, Code, Languages, X, CheckCircle } from "lucide-react"
import { useToast } from "@/components/ui/use-toast"

export default function ResumeDownload() {
  const [isPreviewOpen, setIsPreviewOpen] = useState(false)
  const [isDownloading, setIsDownloading] = useState(false)
  const { toast } = useToast()

  const handleDownload = () => {
    setIsDownloading(true)

    // Simulate download delay
    setTimeout(() => {
      setIsDownloading(false)

      toast({
        title: "Resume Downloaded",
        description: "Your resume has been downloaded successfully.",
        action: (
          <div className="h-8 w-8 bg-green-500/20 rounded-full flex items-center justify-center">
            <CheckCircle className="h-5 w-5 text-green-500" />
          </div>
        ),
      })
    }, 1500)
  }

  return (
    <div className="flex flex-col items-center">
      <div className="flex flex-col sm:flex-row gap-4 items-center">
        <Button onClick={() => setIsPreviewOpen(true)} variant="outline" className="gap-2">
          <FileText className="h-4 w-4" />
          Preview Resume
        </Button>

        <Button onClick={handleDownload} className="gap-2 relative overflow-hidden" disabled={isDownloading}>
          {isDownloading ? (
            <>
              <svg
                className="animate-spin h-4 w-4 mr-2"
                xmlns="http://www.w3.org/2000/svg"
                fill="none"
                viewBox="0 0 24 24"
              >
                <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4"></circle>
                <path
                  className="opacity-75"
                  fill="currentColor"
                  d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
                ></path>
              </svg>
              Downloading...
            </>
          ) : (
            <>
              <Download className="h-4 w-4" />
              Download Resume
            </>
          )}

          {/* Download progress animation */}
          {isDownloading && (
            <motion.div
              className="absolute bottom-0 left-0 h-1 bg-white"
              initial={{ width: 0 }}
              animate={{ width: "100%" }}
              transition={{ duration: 1.5 }}
            />
          )}
        </Button>
      </div>

      <AnimatePresence>
        {isPreviewOpen && (
          <motion.div
            initial={{ opacity: 0 }}
            animate={{ opacity: 1 }}
            exit={{ opacity: 0 }}
            className="fixed inset-0 bg-background/80 backdrop-blur-sm z-50 flex items-center justify-center p-4"
            onClick={() => setIsPreviewOpen(false)}
          >
            <motion.div
              initial={{ scale: 0.9, opacity: 0 }}
              animate={{ scale: 1, opacity: 1 }}
              exit={{ scale: 0.9, opacity: 0 }}
              transition={{ type: "spring", damping: 20, stiffness: 300 }}
              className="w-full max-w-3xl max-h-[80vh] bg-card rounded-xl shadow-xl overflow-hidden"
              onClick={(e) => e.stopPropagation()}
            >
              <div className="flex items-center justify-between p-4 border-b">
                <div className="flex items-center gap-2">
                  <FileText className="h-5 w-5 text-primary" />
                  <h3 className="font-semibold">Resume Preview</h3>
                </div>

                <Button variant="ghost" size="icon" onClick={() => setIsPreviewOpen(false)} aria-label="Close preview">
                  <X className="h-4 w-4" />
                </Button>
              </div>

              <div className="overflow-y-auto p-6 max-h-[calc(80vh-60px)]">
                <div className="space-y-8">
                  <div className="text-center mb-8">
                    <h1 className="text-2xl font-bold">Shaquille Williams</h1>
                    <p className="text-muted-foreground">AI Engineer & Community Builder</p>
                    <div className="flex justify-center gap-4 mt-2 text-sm text-muted-foreground">
                      <span>shaq.williams.ai@gmail.com</span>
                      <span>|</span>
                      <span>(917) 831-2482</span>
                      <span>|</span>
                      <span>New York, NY</span>
                      <span>|</span>
                      <a
                        href="https://www.linkedin.com/in/shaquille-williams-957970129"
                        target="_blank"
                        rel="noopener noreferrer"
                        className="hover:underline"
                      >
                        LinkedIn Profile
                      </a>
                    </div>
                  </div>

                  <ResumeSection icon={<Briefcase className="h-5 w-5 text-primary" />} title="Professional Experience">
                    <div className="space-y-4">
                      <ResumeItem
                        title="Technical Program Director"
                        organization="Rose from Concrete"
                        period="January 2021 - Present"
                        location="Brooklyn, NY"
                        description={[
                          "Forged strategic partnerships with 40+ community centers across Brooklyn, deploying ML models to assess and optimize program reach",
                          "Developed predictive models using Python, Scikit-learn, and Geopandas on GCP to impact over 20,000 NYC residents",
                          "Led implementation of community-focused programs using AWS Lambda and Docker for scalable resource management",
                        ]}
                      />

                      <ResumeItem
                        title="Lead AP Physics Teacher"
                        organization="Success Academy High School of the Liberal Arts"
                        period="July 2019 - 2022"
                        location="New York, NY"
                        description={[
                          "Applied advanced data analysis and statistical techniques in Python, optimizing lesson plans for 150+ students",
                          "Awarded the 'Teacher Excellence Award' for exceptional instructional strategies",
                          "Led a team of 13 teachers, fostering a collaborative academic environment",
                        ]}
                      />
                    </div>
                  </ResumeSection>

                  <ResumeSection icon={<GraduationCap className="h-5 w-5 text-primary" />} title="Education">
                    <ResumeItem
                      title="Bachelor of Science in Physics"
                      organization="City College of New York"
                      period="2015 - 2019"
                      location="New York, NY"
                      description={["GPA: 3.8", "Honors: Magna Cum Laude"]}
                    />
                  </ResumeSection>

                  <ResumeSection icon={<Code className="h-5 w-5 text-primary" />} title="Technical Skills">
                    <div className="grid grid-cols-2 gap-4">
                      <div>
                        <h4 className="font-medium mb-2">Programming Languages</h4>
                        <ul className="list-disc list-inside text-muted-foreground">
                          <li>Python (Expert)</li>
                          <li>JavaScript/TypeScript (Expert)</li>
                          <li>C++ (Advanced)</li>
                          <li>R (Intermediate)</li>
                          <li>SQL (Advanced)</li>
                        </ul>
                      </div>

                      <div>
                        <h4 className="font-medium mb-2">Frameworks & Tools</h4>
                        <ul className="list-disc list-inside text-muted-foreground">
                          <li>PyTorch (Expert)</li>
                          <li>TensorFlow (Expert)</li>
                          <li>Scikit-learn (Expert)</li>
                          <li>Docker (Advanced)</li>
                          <li>AWS/GCP (Advanced)</li>
                        </ul>
                      </div>
                    </div>
                  </ResumeSection>

                  <ResumeSection icon={<Award className="h-5 w-5 text-primary" />} title="Awards & Publications">
                    <ul className="space-y-2 text-muted-foreground">
                      <li>
                        <span className="font-medium text-foreground">
                          Efficient Voice Cloning with Reduced Computational Resources
                        </span>{" "}
                        - IEEE Transactions on Audio Processing, 2022
                      </li>
                      <li>
                        <span className="font-medium text-foreground">
                          Community-Centered AI: Bridging Technology and Social Impact
                        </span>{" "}
                        - NeurIPS Workshop on AI for Social Good, 2021
                      </li>
                      <li>
                        <span className="font-medium text-foreground">Teacher Excellence Award</span> - Success Academy,
                        2020
                      </li>
                    </ul>
                  </ResumeSection>

                  <ResumeSection icon={<Languages className="h-5 w-5 text-primary" />} title="Languages">
                    <div className="flex gap-4 text-muted-foreground">
                      <span>English (Native)</span>
                      <span>Spanish (Conversational)</span>
                    </div>
                  </ResumeSection>
                </div>
              </div>

              <div className="border-t p-4 flex justify-between items-center">
                <span className="text-sm text-muted-foreground">Last updated: March 2025</span>
                <Button onClick={handleDownload} className="gap-2">
                  <Download className="h-4 w-4" />
                  Download PDF
                </Button>
              </div>
            </motion.div>
          </motion.div>
        )}
      </AnimatePresence>
    </div>
  )
}

interface ResumeSectionProps {
  icon: React.ReactNode
  title: string
  children: React.ReactNode
}

function ResumeSection({ icon, title, children }: ResumeSectionProps) {
  return (
    <div>
      <div className="flex items-center gap-2 mb-4 pb-2 border-b">
        {icon}
        <h3 className="text-lg font-semibold">{title}</h3>
      </div>
      {children}
    </div>
  )
}

interface ResumeItemProps {
  title: string
  organization: string
  period: string
  location: string
  description: string[]
}

function ResumeItem({ title, organization, period, location, description }: ResumeItemProps) {
  return (
    <div>
      <div className="flex flex-col sm:flex-row sm:justify-between sm:items-center mb-2">
        <h4 className="font-medium">{title}</h4>
        <span className="text-sm text-muted-foreground">{period}</span>
      </div>
      <div className="flex flex-col sm:flex-row sm:justify-between sm:items-center mb-2">
        <span>{organization}</span>
        <span className="text-sm text-muted-foreground">{location}</span>
      </div>
      <ul className="list-disc list-inside text-muted-foreground mt-2">
        {description.map((item, index) => (
          <li key={index}>{item}</li>
        ))}
      </ul>
    </div>
  )
}
</article></body></html>
Technical Skills

{category.title}

Professional Journey

Key Achievements

Technologies & Skills

{impact.title}

Projects

{featuredProject.title}

{project.title}

Case Studies

Key Metrics

Timeline

Challenges

Solutions

Results

Timeline

{timelineData[activeEventIndex].title}

{event.title} {expandedEvent === event.id ? ( ) : ( )}

Key Achievements

{project.title}

Get in Touch

Message Sent!
