[V0_FILE]typescriptreact:file="components/accident-type-card.tsx" isMerged="true" import Image from "next/image" import Link from "next/link" interface AccidentTypeCardProps { title: string imageSrc: string href: string } export function AccidentTypeCard({ title, imageSrc, href }: AccidentTypeCardProps) { return ( {title}

{title}

) } [V0_FILE]typescriptreact:file="components/case-result-card.tsx" isMerged="true" interface CaseResultCardProps { amount: string } export function CaseResultCard({ amount }: CaseResultCardProps) { return (

{amount}

) } [V0_FILE]typescriptreact:file="app/api/contact/route.ts" isMerged="true" import { NextResponse } from "next/server" export async function POST(request: Request) { try { const data = await request.json() // Validate required fields const requiredFields = ["fullName", "email", "phone", "caseDetails"] for (const field of requiredFields) { if (!data[field]) { return NextResponse.json({ error: `${field} is required` }, { status: 400 }) } } // In a real implementation, you would: // 1. Send data to CRM or email service // 2. Store in database // 3. Send confirmation email // For demo purposes, we'll just return success return NextResponse.json({ success: true, message: "Your case evaluation request has been received. We'll contact you shortly.", }) } catch (error) { console.error("Error processing contact form:", error) return NextResponse.json({ error: "Failed to process your request. Please try again." }, { status: 500 }) } } [V0_FILE]typescriptreact:file="components/toaster.tsx" isMerged="true" "use client" import { Toast, ToastClose, ToastDescription, ToastProvider, ToastTitle, ToastViewport } from "@/components/ui/toast" import { useToast } from "@/components/ui/use-toast" export function Toaster() { const { toasts } = useToast() return ( {toasts.map(({ id, title, description, action, ...props }) => (

{title && {title}} {description && {description}}

{action} ))} ) } [V0_FILE]typescriptreact:file="tailwind.config.js" isMerged="true" /** @type {import('tailwindcss').Config} */ module.exports = { darkMode: ["class"], content: [ "./pages/**/*.{ts,tsx}", "./components/**/*.{ts,tsx}", "./app/**/*.{ts,tsx}", "./src/**/*.{ts,tsx}", "*.{js,ts,jsx,tsx,mdx}", ], theme: { container: { center: true, padding: "2rem", screens: { "2xl": "1400px", }, }, extend: { colors: { border: "hsl(var(--border))", input: "hsl(var(--input))", ring: "hsl(var(--ring))", background: "hsl(var(--background))", foreground: "hsl(var(--foreground))", primary: { DEFAULT: "hsl(var(--primary))", foreground: "hsl(var(--primary-foreground))", }, secondary: { DEFAULT: "hsl(var(--secondary))", foreground: "hsl(var(--secondary-foreground))", }, destructive: { DEFAULT: "hsl(var(--destructive))", foreground: "hsl(var(--destructive-foreground))", }, muted: { DEFAULT: "hsl(var(--muted))", foreground: "hsl(var(--muted-foreground))", }, accent: { DEFAULT: "hsl(var(--accent))", foreground: "hsl(var(--accent-foreground))", }, popover: { DEFAULT: "hsl(var(--popover))", foreground: "hsl(var(--popover-foreground))", }, card: { DEFAULT: "hsl(var(--card))", foreground: "hsl(var(--card-foreground))", }, }, borderRadius: { lg: "var(--radius)", md: "calc(var(--radius) - 2px)", sm: "calc(var(--radius) - 4px)", }, keyframes: { "accordion-down": { from: { height: 0 }, to: { height: "var(--radix-accordion-content-height)" }, }, "accordion-up": { from: { height: "var(--radix-accordion-content-height)" }, to: { height: 0 }, }, }, animation: { "accordion-down": "accordion-down 0.2s ease-out", "accordion-up": "accordion-up 0.2s ease-out", }, }, }, plugins: [require("tailwindcss-animate")], } [V0_FILE]typescriptreact:file="app/page.tsx" isEdit="true" isMerged="true" "use client" import { useRef } from "react" import { motion, useScroll, useTransform } from "framer-motion" import Image from "next/image" import Link from "next/link" import { ArrowRight, ExternalLink, Github, Linkedin, Mail, Download } from "lucide-react" import { Button } from "@/components/ui/button" import { ProjectCard } from "@/components/project-card" import { SkillBar } from "@/components/skill-bar" import { ContactForm } from "@/components/contact-form" import { AnimatedCounter } from "@/components/animated-counter" import { AnimatedText } from "@/components/animated-text" import { CursorFollower } from "@/components/cursor-follower" import { ExperienceTimeline } from "@/components/experience-timeline" import { ProjectFilter } from "@/components/project-filter" import { ScrollToTop } from "@/components/scroll-to-top" import { projects } from "@/data/projects" import { skills } from "@/data/skills" export default function Home() { const ref = useRef(null) const { scrollYProgress } = useScroll({ target: ref, offset: ["start start", "end start"], }) const y = useTransform(scrollYProgress, [0, 1], ["0%", "40%"]) const opacity = useTransform(scrollYProgress, [0, 0.5], [1, 0]) return (

{/* Hero Section */}

Crafting engaging digital experiences through creative code, thoughtful design, and smooth animations.

{/* About Section */}

About Me

I'm a passionate developer and designer with a focus on creating beautiful, functional, and accessible web experiences. With a background in both design and development, I bridge the gap between aesthetics and functionality.

My Journey

With over 5 years of experience in web development and design, I've worked on a variety of projects from small business websites to large-scale applications. My approach combines technical expertise with creative problem-solving to deliver solutions that not only look great but also perform exceptionally well.

I'm passionate about creating accessible, user-friendly interfaces that provide seamless experiences across all devices. When I'm not coding, you can find me exploring new design trends, contributing to open-source projects, or experimenting with new technologies.

+

Years Experience

+

Projects Completed

+

Happy Clients

+

Awards Won

{/* Experience Section */}

Work Experience

My professional journey in the tech industry, showcasing my roles and responsibilities at various companies.

{/* Skills Section */}

My Skills

I've developed expertise in various technologies and design principles, allowing me to create comprehensive solutions for web projects.

{skills.slice(0, 4).map((skill, index) => ( ))}

{skills.slice(4, 8).map((skill, index) => ( ))}

{/* Projects Section */}

Featured Projects

A selection of my recent work showcasing my skills in design, development, and animation.

{projects.map((project, index) => ( ))}

{/* Testimonials Section */}

Client Testimonials

What clients and colleagues have to say about working with me.

{[...Array(5)].map((_, i) => ( ★ ))}

"An exceptional developer who consistently delivers high-quality work. Their attention to detail and creative problem-solving skills made our project a success."

Sarah Johnson

CEO, TechStart Inc.

{[...Array(5)].map((_, i) => ( ★ ))}

"Working with this developer was a pleasure. They understood our vision immediately and transformed it into a beautiful, functional website that exceeded our expectations."

Michael Chen

Marketing Director, Innovate Solutions

{[...Array(5)].map((_, i) => ( ★ ))}

"Not only is their technical skill impressive, but their communication and project management made the entire process smooth and stress-free. I highly recommend their services."

Emily Rodriguez

Founder, Design Collective

{/* Contact Section */}

Get in Touch

Have a project in mind or want to discuss potential collaborations? I'd love to hear from you!

Contact Information

Email

hello@example.com

linkedin.com/in/username

GitHub

github.com/username

Let's Connect

I'm always open to discussing new projects, creative ideas, or opportunities to be part of your vision.

Send Me a Message

) } [V0_FILE]typescriptreact:file="components/service-card.tsx" isMerged="true" import Link from "next/link" import { ArrowRight, Building, Box, Layout, MessageSquare, Monitor, Palette, type LucideIcon } from "lucide-react" interface ServiceCardProps { title: string description: string icon: string href: string } export function ServiceCard({ title, description, icon, href }: ServiceCardProps) { const IconComponent = getIcon(icon) return (

{title}

{description}

Learn More

) } function getIcon(iconName: string): LucideIcon { switch (iconName) { case "Building": return Building case "Box": return Box case "Layout": return Layout case "MessageSquare": return MessageSquare case "Monitor": return Monitor case "Palette": return Palette default: return Layout } } [V0_FILE]typescriptreact:file="components/contact-form.tsx" isEdit="true" 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 { useToast } from "@/components/ui/use-toast" import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from "@/components/ui/form" 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 function ContactForm() { const { toast } = useToast() const [isSubmitting, setIsSubmitting] = useState(false) const form = useForm>({ resolver: zodResolver(formSchema), defaultValues: { name: "", email: "", subject: "", message: "", }, }) async function onSubmit(values: z.infer) { setIsSubmitting(true) try { // In a real app, you would send the data to your API here await new Promise((resolve) => setTimeout(resolve, 1500)) toast({ title: "Message sent!", description: "Thank you for your message. I'll get back to you soon.", }) form.reset() } catch (error) { toast({ title: "Error", description: "There was a problem sending your message. Please try again.", variant: "destructive", }) } finally { setIsSubmitting(false) } } return (

( Name )} /> ( Email )} />

( Subject )} /> ( Message

</motion.div>
              </FormControl>
              <FormMessage />
            </FormItem>
          )}
        />

<motion.div whileHover={{ scale: 1.03 }} whileTap={{ scale: 0.97 }}>
          <Button type="submit" disabled={isSubmitting} className="w-full">
            {isSubmitting ? (
              <span className="flex items-center">
                <svg
                  className="animate-spin -ml-1 mr-2 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>
                Sending...
              </span>
            ) : (
              "Send Message"
            )}
          </Button>
        </motion.div>
      </form>
    </Form>
  )
}

[V0_FILE]typescriptreact:file="app/layout.tsx" isEdit="true" isMerged="true"
import type React from "react"
import type { Metadata } from "next"
import { Inter } from "next/font/google"
import "./globals.css"
import { Navbar } from "@/components/navbar"
import { Footer } from "@/components/footer"
import { ThemeProvider } from "@/components/theme-provider"
import { Toaster } from "@/components/ui/toaster"

const inter = Inter({
  subsets: ["latin"],
  variable: "--font-inter",
})

export const metadata: Metadata = {
  title: "DevPortfolio | Creative Developer & Designer",
  description:
    "Portfolio of a creative developer and designer specializing in building engaging digital experiences with modern web technologies.",
  keywords: ["developer", "designer", "portfolio", "web development", "frontend", "UI/UX", "React", "Next.js"],
  authors: [{ name: "Developer Name" }],
  creator: "Developer Name",
  openGraph: {
    type: "website",
    locale: "en_US",
    url: "https://www.example.com/",
    title: "DevPortfolio | Creative Developer & Designer",
    description:
      "Portfolio of a creative developer and designer specializing in building engaging digital experiences with modern web technologies.",
    siteName: "DevPortfolio",
    images: [
      {
        url: "/og-image.jpg",
        width: 1200,
        height: 630,
        alt: "DevPortfolio Preview",
      },
    ],
  },
  twitter: {
    card: "summary_large_image",
    title: "DevPortfolio | Creative Developer & Designer",
    description:
      "Portfolio of a creative developer and designer specializing in building engaging digital experiences with modern web technologies.",
    creator: "@username",
    images: ["/og-image.jpg"],
  },
}

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode
}>) {
  return (
    <html lang="en" className="scroll-smooth" suppressHydrationWarning>
      <body className={`${inter.variable} font-sans antialiased`}>
        <ThemeProvider attribute="class" defaultTheme="system" enableSystem>
          <Navbar />
          {children}
          <Footer />
          <Toaster />
        </ThemeProvider>
      </body>
    </html>
  )
}

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

import { useState, useEffect } from "react"
import Link from "next/link"
import { motion, AnimatePresence } from "framer-motion"
import { Menu, X } from "lucide-react"
import { Button } from "@/components/ui/button"
import { ThemeToggle } from "@/components/theme-toggle"

export function Navbar() {
  const [isMenuOpen, setIsMenuOpen] = useState(false)
  const [isScrolled, setIsScrolled] = useState(false)
  const [activeSection, setActiveSection] = useState("home")

useEffect(() => {
    const handleScroll = () => {
      if (window.scrollY > 10) {
        setIsScrolled(true)
      } else {
        setIsScrolled(false)
      }

// Update active section based on scroll position
      const sections = ["home", "about", "experience", "skills", "projects", "testimonials", "contact"]

for (const section of sections.reverse()) {
        const element = document.getElementById(section)
        if (element) {
          const rect = element.getBoundingClientRect()
          if (rect.top <= 100) {
            setActiveSection(section)
            break
          }
        }
      }
    }

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

const closeMenu = () => {
    setIsMenuOpen(false)
  }

return (
    <header
      className={`fixed top-0 left-0 right-0 z-50 transition-all duration-300 ${
        isScrolled ? "bg-background/80 backdrop-blur-md shadow-sm py-4" : "bg-transparent py-6"
      }`}
    >
      <div className="container mx-auto px-4 sm:px-6 lg:px-8">
        <div className="flex items-center justify-between">
          <motion.div initial={{ opacity: 0, x: -20 }} animate={{ opacity: 1, x: 0 }} transition={{ duration: 0.5 }}>
            <Link href="/" className="text-2xl font-bold">
              <span className="text-primary">Dev</span>Portfolio
            </Link>
          </motion.div>

{/* Desktop Navigation */}
          <nav className="hidden md:flex items-center space-x-8">
            <motion.div
              initial={{ opacity: 0, y: -10 }}
              animate={{ opacity: 1, y: 0 }}
              transition={{ duration: 0.5, delay: 0.1 }}
            >
              <Link
                href="#about"
                className={`text-sm hover:text-primary transition-colors ${
                  activeSection === "about" ? "text-primary font-medium" : ""
                }`}
              >
                About
              </Link>
            </motion.div>
            <motion.div
              initial={{ opacity: 0, y: -10 }}
              animate={{ opacity: 1, y: 0 }}
              transition={{ duration: 0.5, delay: 0.2 }}
            >
              <Link
                href="#experience"
                className={`text-sm hover:text-primary transition-colors ${
                  activeSection === "experience" ? "text-primary font-medium" : ""
                }`}
              >
                Experience
              </Link>
            </motion.div>
            <motion.div
              initial={{ opacity: 0, y: -10 }}
              animate={{ opacity: 1, y: 0 }}
              transition={{ duration: 0.5, delay: 0.3 }}
            >
              <Link
                href="#skills"
                className={`text-sm hover:text-primary transition-colors ${
                  activeSection === "skills" ? "text-primary font-medium" : ""
                }`}
              >
                Skills
              </Link>
            </motion.div>
            <motion.div
              initial={{ opacity: 0, y: -10 }}
              animate={{ opacity: 1, y: 0 }}
              transition={{ duration: 0.5, delay: 0.4 }}
            >
              <Link
                href="#projects"
                className={`text-sm hover:text-primary transition-colors ${
                  activeSection === "projects" ? "text-primary font-medium" : ""
                }`}
              >
                Projects
              </Link>
            </motion.div>
            <motion.div
              initial={{ opacity: 0, y: -10 }}
              animate={{ opacity: 1, y: 0 }}
              transition={{ duration: 0.5, delay: 0.5 }}
            >
              <Link
                href="#contact"
                className={`text-sm hover:text-primary transition-colors ${
                  activeSection === "contact" ? "text-primary font-medium" : ""
                }`}
              >
                Contact
              </Link>
            </motion.div>
            <motion.div
              initial={{ opacity: 0, y: -10 }}
              animate={{ opacity: 1, y: 0 }}
              transition={{ duration: 0.5, delay: 0.6 }}
            >
              <ThemeToggle />
            </motion.div>
            <motion.div
              initial={{ opacity: 0, y: -10 }}
              animate={{ opacity: 1, y: 0 }}
              transition={{ duration: 0.5, delay: 0.7 }}
              whileHover={{ scale: 1.05 }}
              whileTap={{ scale: 0.95 }}
            >
              <Button asChild>
                <Link href="#contact">Hire Me</Link>
              </Button>
            </motion.div>
          </nav>

{/* Mobile Menu Button */}
          <div className="md:hidden flex items-center space-x-4">
            <ThemeToggle />
            <button className="focus:outline-none" onClick={() => setIsMenuOpen(!isMenuOpen)} aria-label="Toggle menu">
              {isMenuOpen ? <X className="h-6 w-6" /> : <Menu className="h-6 w-6" />}
            </button>
          </div>
        </div>
      </div>

{/* Mobile Navigation */}
      <AnimatePresence>
        {isMenuOpen && (
          <motion.div
            initial={{ opacity: 0, height: 0 }}
            animate={{ opacity: 1, height: "auto" }}
            exit={{ opacity: 0, height: 0 }}
            transition={{ duration: 0.3 }}
            className="md:hidden absolute top-full left-0 right-0 bg-background/95 backdrop-blur-md shadow-md"
          >
            <nav className="container mx-auto px-4 py-6 flex flex-col space-y-4">
              <Link
                href="#about"
                className={`text-foreground text-sm hover:text-primary transition-colors py-2 ${
                  activeSection === "about" ? "text-primary font-medium" : ""
                }`}
                onClick={closeMenu}
              >
                About
              </Link>
              <Link
                href="#experience"
                className={`text-foreground text-sm hover:text-primary transition-colors py-2 ${
                  activeSection === "experience" ? "text-primary font-medium" : ""
                }`}
                onClick={closeMenu}
              >
                Experience
              </Link>
              <Link
                href="#skills"
                className={`text-foreground text-sm hover:text-primary transition-colors py-2 ${
                  activeSection === "skills" ? "text-primary font-medium" : ""
                }`}
                onClick={closeMenu}
              >
                Skills
              </Link>
              <Link
                href="#projects"
                className={`text-foreground text-sm hover:text-primary transition-colors py-2 ${
                  activeSection === "projects" ? "text-primary font-medium" : ""
                }`}
                onClick={closeMenu}
              >
                Projects
              </Link>
              <Link
                href="#testimonials"
                className={`text-foreground text-sm hover:text-primary transition-colors py-2 ${
                  activeSection === "testimonials" ? "text-primary font-medium" : ""
                }`}
                onClick={closeMenu}
              >
                Testimonials
              </Link>
              <Link
                href="#contact"
                className={`text-foreground text-sm hover:text-primary transition-colors py-2 ${
                  activeSection === "contact" ? "text-primary font-medium" : ""
                }`}
                onClick={closeMenu}
              >
                Contact
              </Link>
              <Button asChild className="w-full" onClick={closeMenu}>
                <Link href="#contact">Hire Me</Link>
              </Button>
            </nav>
          </motion.div>
        )}
      </AnimatePresence>
    </header>
  )
}

[V0_FILE]typescriptreact:file="components/footer.tsx" isEdit="true" isMerged="true"
import Link from "next/link"
import { Github, Linkedin, Mail } from "lucide-react"

export function Footer() {
  return (
    <footer className="bg-muted/50 py-12 border-t">
      <div className="container mx-auto px-4 sm:px-6 lg:px-8">
        <div className="grid grid-cols-1 md:grid-cols-4 gap-8">
          <div className="md:col-span-2">
            <Link href="/" className="text-2xl font-bold mb-4 inline-block">
              <span className="text-primary">Dev</span>Portfolio
            </Link>
            <p className="text-muted-foreground max-w-md mb-6">
              A creative developer and designer focused on building engaging digital experiences through thoughtful
              design and clean code.
            </p>
            <div className="flex space-x-4">
              <Link
                href="https://github.com"
                target="_blank"
                rel="noopener noreferrer"
                className="text-muted-foreground hover:text-foreground transition-colors"
                aria-label="GitHub"
              >
                <Github className="h-5 w-5" />
              </Link>
              <Link
                href="https://linkedin.com"
                target="_blank"
                rel="noopener noreferrer"
                className="text-muted-foreground hover:text-foreground transition-colors"
                aria-label="LinkedIn"
              >
                <Linkedin className="h-5 w-5" />
              </Link>
              <Link
                href="mailto:hello@example.com"
                className="text-muted-foreground hover:text-foreground transition-colors"
                aria-label="Email"
              >
                <Mail className="h-5 w-5" />
              </Link>
            </div>
          </div>

<div>
            <h3 className="text-sm font-medium uppercase tracking-wider mb-4">Navigation</h3>
            <ul className="space-y-2">
              <li>
                <Link href="#about" className="text-muted-foreground hover:text-foreground transition-colors">
                  About
                </Link>
              </li>
              <li>
                <Link href="#experience" className="text-muted-foreground hover:text-foreground transition-colors">
                  Experience
                </Link>
              </li>
              <li>
                <Link href="#skills" className="text-muted-foreground hover:text-foreground transition-colors">
                  Skills
                </Link>
              </li>
              <li>
                <Link href="#projects" className="text-muted-foreground hover:text-foreground transition-colors">
                  Projects
                </Link>
              </li>
              <li>
                <Link href="#contact" className="text-muted-foreground hover:text-foreground transition-colors">
                  Contact
                </Link>
              </li>
            </ul>
          </div>

<div>
            <h3 className="text-sm font-medium uppercase tracking-wider mb-4">Services</h3>
            <ul className="space-y-2">
              <li>
                <Link href="#" className="text-muted-foreground hover:text-foreground transition-colors">
                  Web Development
                </Link>
              </li>
              <li>
                <Link href="#" className="text-muted-foreground hover:text-foreground transition-colors">
                  UI/UX Design
                </Link>
              </li>
              <li>
                <Link href="#" className="text-muted-foreground hover:text-foreground transition-colors">
                  Frontend Development
                </Link>
              </li>
              <li>
                <Link href="#" className="text-muted-foreground hover:text-foreground transition-colors">
                  Responsive Design
                </Link>
              </li>
              <li>
                <Link href="#" className="text-muted-foreground hover:text-foreground transition-colors">
                  Animation & Interaction
                </Link>
              </li>
            </ul>
          </div>
        </div>

<div className="border-t border-border mt-12 pt-8 flex flex-col md:flex-row justify-between items-center">
          <p className="text-muted-foreground text-sm">
            © {new Date().getFullYear()} DevPortfolio. All rights reserved.
          </p>
          <div className="flex space-x-6 mt-4 md:mt-0">
            <Link href="#" className="text-muted-foreground hover:text-foreground transition-colors text-sm">
              Privacy Policy
            </Link>
            <Link href="#" className="text-muted-foreground hover:text-foreground transition-colors text-sm">
              Terms of Service
            </Link>
          </div>
        </div>
      </div>
    </footer>
  )
}

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

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

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

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

/* Custom styles */
html {
  scroll-behavior: smooth;
}

/* Hide scrollbar for Chrome, Safari and Opera */
::-webkit-scrollbar {
  display: none;
}

/* Hide scrollbar for IE, Edge and Firefox */
html {
  -ms-overflow-style: none; /* IE and Edge */
  scrollbar-width: none; /* Firefox */
}

/* Smooth transitions */
a,
button {
  @apply transition-all duration-200;
}

/* Custom cursor styles */
@media (min-width: 768px) {
  body {
    cursor: none;
  }

a,
  button,
  input,
  textarea,
  [role="button"] {
    cursor: none !important;
  }
}

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

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

const buttonVariants = cva(
  "inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
  {
    variants: {
      variant: {
        default: "bg-primary text-primary-foreground hover:bg-primary/90",
        destructive: "bg-destructive text-destructive-foreground hover:bg-destructive/90",
        outline: "border border-input bg-background hover:bg-accent hover:text-accent-foreground",
        secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80",
        ghost: "hover:bg-accent hover:text-accent-foreground",
        link: "text-primary underline-offset-4 hover:underline",
      },
      size: {
        default: "h-10 px-4 py-2",
        sm: "h-9 rounded-md px-3",
        lg: "h-11 rounded-md px-8",
        icon: "h-10 w-10",
      },
    },
    defaultVariants: {
      variant: "default",
      size: "default",
    },
  },
)

export interface ButtonProps
  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
    VariantProps<typeof buttonVariants> {
  asChild?: boolean
}

const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
  ({ className, variant, size, asChild = false, ...props }, ref) => {
    const Comp = asChild ? Slot : "button"
    return <Comp className={cn(buttonVariants({ variant, size, className }))} ref={ref} {...props} />
  },
)
Button.displayName = "Button"

export { Button, buttonVariants }

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

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

export interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {}

const Input = React.forwardRef<HTMLInputElement, InputProps>(({ className, type, ...props }, ref) => {
  return (
    <input
      type={type}
      className={cn(
        "flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium 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}
    />
  )
})
Input.displayName = "Input"

export { Input }

[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/toast.tsx" isMerged="true"
"use client"

import * as React from "react"
import * as ToastPrimitives from "@radix-ui/react-toast"
import { cva, type VariantProps } from "class-variance-authority"
import { X } from "lucide-react"

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

const ToastProvider = ToastPrimitives.Provider

const ToastViewport = React.forwardRef<
  React.ElementRef<typeof ToastPrimitives.Viewport>,
  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Viewport>
>(({ className, ...props }, ref) => (
  <ToastPrimitives.Viewport
    ref={ref}
    className={cn(
      "fixed top-0 z-[100] flex max-h-screen w-full flex-col-reverse p-4 sm:bottom-0 sm:right-0 sm:top-auto sm:flex-col md:max-w-[420px]",
      className,
    )}
    {...props}
  />
))
ToastViewport.displayName = ToastPrimitives.Viewport.displayName

const toastVariants = cva(
  "group pointer-events-auto relative flex w-full items-center justify-between space-x-4 overflow-hidden rounded-md border p-6 pr-8 shadow-lg transition-all data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-[var(--radix-toast-swipe-end-x)] data-[swipe=move]:translate-x-[var(--radix-toast-swipe-move-x)] data-[swipe=move]:transition-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[swipe=end]:animate-out data-[state=closed]:fade-out-80 data-[state=closed]:slide-out-to-right-full data-[state=open]:slide-in-from-top-full data-[state=open]:sm:slide-in-from-bottom-full",
  {
    variants: {
      variant: {
        default: "border bg-background text-foreground",
        destructive: "destructive group border-destructive bg-destructive text-destructive-foreground",
      },
    },
    defaultVariants: {
      variant: "default",
    },
  },
)

const Toast = React.forwardRef<
  React.ElementRef<typeof ToastPrimitives.Root>,
  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Root> & VariantProps<typeof toastVariants>
>(({ className, variant, ...props }, ref) => {
  return <ToastPrimitives.Root ref={ref} className={cn(toastVariants({ variant }), className)} {...props} />
})
Toast.displayName = ToastPrimitives.Root.displayName

const ToastAction = React.forwardRef<
  React.ElementRef<typeof ToastPrimitives.Action>,
  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Action>
>(({ className, ...props }, ref) => (
  <ToastPrimitives.Action
    ref={ref}
    className={cn(
      "inline-flex h-8 shrink-0 items-center justify-center rounded-md border bg-transparent px-3 text-sm font-medium ring-offset-background transition-colors hover:bg-secondary focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 group-[.destructive]:border-muted/40 group-[.destructive]:hover:border-destructive/30 group-[.destructive]:hover:bg-destructive group-[.destructive]:hover:text-destructive-foreground group-[.destructive]:focus:ring-destructive",
      className,
    )}
    {...props}
  />
))
ToastAction.displayName = ToastPrimitives.Action.displayName

const ToastClose = React.forwardRef<
  React.ElementRef<typeof ToastPrimitives.Close>,
  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Close>
>(({ className, ...props }, ref) => (
  <ToastPrimitives.Close
    ref={ref}
    className={cn(
      "absolute right-2 top-2 rounded-md p-1 text-foreground/50 opacity-0 transition-opacity hover:text-foreground focus:opacity-100 focus:outline-none focus:ring-2 group-hover:opacity-100 group-[.destructive]:text-red-300 group-[.destructive]:hover:text-red-50 group-[.destructive]:focus:ring-red-400 group-[.destructive]:focus:ring-offset-red-600",
      className,
    )}
    toast-close=""
    {...props}
  >
    <X className="h-4 w-4" />
  </ToastPrimitives.Close>
))
ToastClose.displayName = ToastPrimitives.Close.displayName

const ToastTitle = React.forwardRef<
  React.ElementRef<typeof ToastPrimitives.Title>,
  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Title>
>(({ className, ...props }, ref) => (
  <ToastPrimitives.Title ref={ref} className={cn("text-sm font-semibold", className)} {...props} />
))
ToastTitle.displayName = ToastPrimitives.Title.displayName

const ToastDescription = React.forwardRef<
  React.ElementRef<typeof ToastPrimitives.Description>,
  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Description>
>(({ className, ...props }, ref) => (
  <ToastPrimitives.Description ref={ref} className={cn("text-sm opacity-90", className)} {...props} />
))
ToastDescription.displayName = ToastPrimitives.Description.displayName

type ToastProps = React.ComponentPropsWithoutRef<typeof Toast>

type ToastActionElement = React.ReactElement<typeof ToastAction>

export {
  type ToastProps,
  type ToastActionElement,
  ToastProvider,
  ToastViewport,
  Toast,
  ToastTitle,
  ToastDescription,
  ToastClose,
  ToastAction,
}

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

import { Toast, ToastClose, ToastDescription, ToastProvider, ToastTitle, ToastViewport } from "@/components/ui/toast"
import { useToast } from "@/components/ui/use-toast"

export function Toaster() {
  const { toasts } = useToast()

return (
    <ToastProvider>
      {toasts.map(({ id, title, description, action, ...props }) => (
        <Toast key={id} {...props}>
          <div className="grid gap-1">
            {title && <ToastTitle>{title}</ToastTitle>}
            {description && <ToastDescription>{description}</ToastDescription>}
          </div>
          {action}
          <ToastClose />
        </Toast>
      ))}
      <ToastViewport />
    </ToastProvider>
  )
}

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

import * as React from "react"

import type { ToastActionElement, ToastProps } from "@/components/ui/toast"

const TOAST_LIMIT = 1
const TOAST_REMOVE_DELAY = 1000000

type ToasterToast = ToastProps & {
  id: string
  title?: React.ReactNode
  description?: React.ReactNode
  action?: ToastActionElement
}

const actionTypes = {
  ADD_TOAST: "ADD_TOAST",
  UPDATE_TOAST: "UPDATE_TOAST",
  DISMISS_TOAST: "DISMISS_TOAST",
  REMOVE_TOAST: "REMOVE_TOAST",
} as const

let count = 0

function genId() {
  count = (count + 1) % Number.MAX_VALUE
  return count.toString()
}

type ActionType = typeof actionTypes

type Action =
  | {
      type: ActionType["ADD_TOAST"]
      toast: ToasterToast
    }
  | {
      type: ActionType["UPDATE_TOAST"]
      toast: Partial<ToasterToast>
    }
  | {
      type: ActionType["DISMISS_TOAST"]
      toastId?: string
    }
  | {
      type: ActionType["REMOVE_TOAST"]
      toastId?: string
    }

interface State {
  toasts: ToasterToast[]
}

const toastTimeouts = new Map<string, ReturnType<typeof setTimeout>>()

const reducer = (state: State, action: Action): State => {
  switch (action.type) {
    case actionTypes.ADD_TOAST:
      return {
        ...state,
        toasts: [action.toast, ...state.toasts].slice(0, TOAST_LIMIT),
      }

case actionTypes.UPDATE_TOAST:
      return {
        ...state,
        toasts: state.toasts.map((t) => (t.id === action.toast.id ? { ...t, ...action.toast } : t)),
      }

case actionTypes.DISMISS_TOAST: {
      const { toastId } = action

if (toastId) {
        toastTimeouts.set(
          toastId,
          setTimeout(() => {
            toastTimeouts.delete(toastId)
            dispatch({
              type: actionTypes.REMOVE_TOAST,
              toastId,
            })
          }, TOAST_REMOVE_DELAY),
        )
      }

return {
        ...state,
        toasts: state.toasts.map((t) =>
          t.id === toastId || toastId === undefined
            ? {
                ...t,
                open: false,
              }
            : t,
        ),
      }
    }
    case actionTypes.REMOVE_TOAST:
      if (action.toastId === undefined) {
        return {
          ...state,
          toasts: [],
        }
      }
      return {
        ...state,
        toasts: state.toasts.filter((t) => t.id !== action.toastId),
      }
  }
}

const listeners: Array<(state: State) => void> = []

let memoryState: State = { toasts: [] }

function dispatch(action: Action) {
  memoryState = reducer(memoryState, action)
  listeners.forEach((listener) => {
    listener(memoryState)
  })
}

type Toast = Omit<ToasterToast, "id">

function toast({ ...props }: Toast) {
  const id = genId()

const update = (props: ToasterToast) =>
    dispatch({
      type: actionTypes.UPDATE_TOAST,
      toast: { ...props, id },
    })
  const dismiss = () => dispatch({ type: actionTypes.DISMISS_TOAST, toastId: id })

dispatch({
    type: actionTypes.ADD_TOAST,
    toast: {
      ...props,
      id,
      open: true,
      onOpenChange: (open) => {
        if (!open) dismiss()
      },
    },
  })

return {
    id: id,
    dismiss,
    update,
  }
}

function useToast() {
  const [state, setState] = React.useState<State>(memoryState)

React.useEffect(() => {
    listeners.push(setState)
    return () => {
      const index = listeners.indexOf(setState)
      if (index > -1) {
        listeners.splice(index, 1)
      }
    }
  }, [state])

return {
    ...state,
    toast,
    dismiss: (toastId?: string) => dispatch({ type: actionTypes.DISMISS_TOAST, toastId }),
  }
}

export { useToast, toast }

[V0_FILE]typescriptreact:file="lib/utils.ts" isEdit="true" isMerged="true"
import { type ClassValue, clsx } from "clsx"
import { twMerge } from "tailwind-merge"

export function cn(...inputs: ClassValue[]) {
  return twMerge(clsx(inputs))
}

[V0_FILE]typescriptreact:file="app/portfolio/[slug]/page.tsx" isMerged="true"
import Image from "next/image"
import Link from "next/link"
import { ArrowLeft } from "lucide-react"

import { Button } from "@/components/ui/button"

interface ProjectPageProps {
  params: {
    slug: string
  }
}

export default function ProjectPage({ params }: ProjectPageProps) {
  // In a real app, you would fetch project data based on the slug
  const project = {
    title: "Luminance Residence",
    category: "Interior Design",
    description:
      "A modern residential project that balances minimalism with warmth, creating a sophisticated living environment that reflects the client's lifestyle and aesthetic preferences.",
    client: "Private Client",
    location: "New York, NY",
    year: "2023",
    services: ["Interior Design", "Furniture Selection", "Lighting Design"],
    images: [
      "/placeholder.svg?height=800&width=1200",
      "/placeholder.svg?height=800&width=1200",
      "/placeholder.svg?height=800&width=1200",
    ],
  }

return (
    <main className="pt-24 pb-16">
      <div className="container mx-auto px-4 sm:px-6 lg:px-8">
        <Button asChild variant="ghost" className="mb-8 pl-0 hover:bg-transparent">
          <Link href="/portfolio" className="flex items-center text-gray-600 hover:text-black">
            <ArrowLeft className="mr-2 h-4 w-4" />
            Back to Portfolio
          </Link>
        </Button>

<div className="grid grid-cols-1 lg:grid-cols-3 gap-12">
          <div className="lg:col-span-2">
            <h1 className="text-3xl md:text-4xl font-light mb-4 tracking-tight">{project.title}</h1>
            <p className="text-gray-600 mb-8">{project.category}</p>
            <p className="text-gray-800 mb-8 leading-relaxed">{project.description}</p>
          </div>

<div className="bg-gray-50 p-6">
            <h2 className="text-xl font-medium mb-6">Project Details</h2>
            <div className="space-y-4">
              <div>
                <p className="text-sm text-gray-600">Client</p>
                <p className="font-medium">{project.client}</p>
              </div>
              <div>
                <p className="text-sm text-gray-600">Location</p>
                <p className="font-medium">{project.location}</p>
              </div>
              <div>
                <p className="text-sm text-gray-600">Year</p>
                <p className="font-medium">{project.year}</p>
              </div>
              <div>
                <p className="text-sm text-gray-600">Services</p>
                <ul className="list-disc list-inside">
                  {project.services.map((service, index) => (
                    <li key={index} className="font-medium">
                      {service}
                    </li>
                  ))}
                </ul>
              </div>
            </div>
          </div>
        </div>

<div className="mt-16 space-y-12">
          {project.images.map((image, index) => (
            <div key={index} className="relative h-[600px] w-full">
              <Image
                src={image || "/placeholder.svg"}
                alt={`${project.title} - Image ${index + 1}`}
                fill
                className="object-cover"
              />
            </div>
          ))}
        </div>

<div className="mt-16 text-center">
          <h2 className="text-2xl font-light mb-8">Interested in working with us?</h2>
          <Button asChild size="lg" className="rounded-none px-8 bg-black hover:bg-gray-800">
            <Link href="#contact">Get in Touch</Link>
          </Button>
        </div>
      </div>
    </main>
  )
}

[V0_FILE]typescriptreact:file="app/services/page.tsx" isMerged="true"
import { ServiceCard } from "@/components/service-card"

export default function ServicesPage() {
  return (
    <main className="pt-24 pb-16">
      <div className="container mx-auto px-4 sm:px-6 lg:px-8">
        <div className="max-w-3xl mx-auto text-center mb-16">
          <h1 className="text-3xl md:text-4xl font-light mb-6 tracking-tight">
            Our <span className="font-medium">Services</span>
          </h1>
          <p className="text-gray-600 leading-relaxed">
            We offer a comprehensive suite of design services, each delivered with the same unwavering commitment to
            excellence and attention to detail.
          </p>
        </div>

<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
          <ServiceCard
            title="Interior Design"
            description="Creating harmonious, functional spaces that reflect our clients' unique identities and elevate everyday experiences."
            icon="Layout"
            href="/services/interior-design"
          />
          <ServiceCard
            title="Architecture"
            description="Designing structures that seamlessly blend form and function, creating buildings that inspire and endure."
            icon="Building"
            href="/services/architecture"
          />
          <ServiceCard
            title="Brand Identity"
            description="Crafting distinctive visual identities that communicate the essence of a brand and foster meaningful connections."
            icon="Palette"
            href="/services/brand-identity"
          />
          <ServiceCard
            title="Product Design"
            description="Developing innovative, user-centered products that combine aesthetic appeal with practical functionality."
            icon="Box"
            href="/services/product-design"
          />
          <ServiceCard
            title="Digital Design"
            description="Creating intuitive, engaging digital experiences that seamlessly guide users and elevate brand presence."
            icon="Monitor"
            href="/services/digital-design"
          />
          <ServiceCard
            title="Consultation"
            description="Providing expert guidance and strategic insights to help clients navigate complex design challenges."
            icon="MessageSquare"
            href="/services/consultation"
          />
        </div>
      </div>
    </main>
  )
}

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

import { useEffect, useRef, useState } from "react"
import { useInView } from "framer-motion"

interface AnimatedCounterProps {
  from: number
  to: number
  duration?: number
}

export function AnimatedCounter({ from, to, duration = 2 }: AnimatedCounterProps) {
  const [count, setCount] = useState(from)
  const ref = useRef<HTMLSpanElement>(null)
  const isInView = useInView(ref, { once: true })
  const frameRate = 1000 / 60
  const totalFrames = Math.round(duration * 60)

useEffect(() => {
    if (isInView) {
      let frame = 0

const counter = setInterval(() => {
        frame++
        const progress = frame / totalFrames
        const currentCount = Math.round(from + (to - from) * progress)

if (frame === totalFrames) {
          clearInterval(counter)
          setCount(to)
        } else {
          setCount(currentCount)
        }
      }, frameRate)

return () => clearInterval(counter)
    }
  }, [from, to, totalFrames, frameRate, isInView])

return <span ref={ref}>{count}</span>
}

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

import { motion } from "framer-motion"

interface AnimatedTextProps {
  text: string
}

export function AnimatedText({ text }: AnimatedTextProps) {
  // Split text into an array of words
  const words = text.split(" ")

// Variants for container of words
  const container = {
    hidden: { opacity: 0 },
    visible: (i = 1) => ({
      opacity: 1,
      transition: { staggerChildren: 0.12, delayChildren: 0.04 * i },
    }),
  }

// Variants for each word
  const child = {
    visible: {
      opacity: 1,
      y: 0,
      transition: {
        type: "spring",
        damping: 12,
        stiffness: 100,
      },
    },
    hidden: {
      opacity: 0,
      y: 20,
      transition: {
        type: "spring",
        damping: 12,
        stiffness: 100,
      },
    },
  }

return (
    <motion.div
      style={{ overflow: "hidden", display: "flex", flexWrap: "wrap" }}
      variants={container}
      initial="hidden"
      animate="visible"
    >
      {words.map((word, index) => (
        <motion.span key={index} variants={child} style={{ marginRight: "0.25em", display: "inline-block" }}>
          {word}
        </motion.span>
      ))}
    </motion.div>
  )
}

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

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

export function CursorFollower() {
  const [mousePosition, setMousePosition] = useState({ x: 0, y: 0 })
  const [isVisible, setIsVisible] = useState(false)

useEffect(() => {
    // Only show custom cursor on desktop
    if (window.innerWidth > 768) {
      setIsVisible(true)

const handleMouseMove = (e: MouseEvent) => {
        setMousePosition({ x: e.clientX, y: e.clientY })
      }

window.addEventListener("mousemove", handleMouseMove)

return () => {
        window.removeEventListener("mousemove", handleMouseMove)
      }
    }
  }, [])

if (!isVisible) return null

return (
    <>
      <motion.div
        className="fixed top-0 left-0 w-6 h-6 rounded-full border-2 border-primary z-50 pointer-events-none"
        animate={{
          x: mousePosition.x - 12,
          y: mousePosition.y - 12,
        }}
        transition={{
          type: "spring",
          damping: 25,
          stiffness: 300,
          mass: 0.5,
        }}
      />
      <motion.div
        className="fixed top-0 left-0 w-2 h-2 bg-primary rounded-full z-50 pointer-events-none"
        animate={{
          x: mousePosition.x - 4,
          y: mousePosition.y - 4,
        }}
      />
    </>
  )
}

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

import { useRef } from "react"
import { motion, useInView } from "framer-motion"

interface SkillBarProps {
  name: string
  percentage: number
  delay?: number
}

export function SkillBar({ name, percentage, delay = 0 }: SkillBarProps) {
  const ref = useRef(null)
  const isInView = useInView(ref, { once: true })

return (
    <div ref={ref} className="space-y-2">
      <div className="flex justify-between items-center">
        <h3 className="font-medium">{name}</h3>
        <span className="text-sm text-muted-foreground">{percentage}%</span>
      </div>
      <div className="h-2 w-full bg-muted rounded-full overflow-hidden">
        <motion.div
          className="h-full bg-primary rounded-full"
          initial={{ width: 0 }}
          animate={isInView ? { width: `${percentage}%` } : { width: 0 }}
          transition={{ duration: 1, delay, ease: "easeOut" }}
        />
      </div>
    </div>
  )
}

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

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

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

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

if (!mounted) {
    return null
  }

return (
    <Button
      variant="outline"
      size="icon"
      onClick={() => setTheme(theme === "dark" ? "light" : "dark")}
      aria-label="Toggle theme"
    >
      <motion.div
        animate={{ rotate: theme === "dark" ? 0 : 180 }}
        transition={{ duration: 0.5, type: "spring" }}
        className="relative h-5 w-5"
      >
        <motion.div
          animate={{ opacity: theme === "dark" ? 1 : 0 }}
          transition={{ duration: 0.25 }}
          className="absolute inset-0"
        >
          <Moon className="h-5 w-5" />
        </motion.div>
        <motion.div
          animate={{ opacity: theme === "light" ? 1 : 0 }}
          transition={{ duration: 0.25 }}
          className="absolute inset-0"
        >
          <Sun className="h-5 w-5" />
        </motion.div>
      </motion.div>
    </Button>
  )
}

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

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

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

import { motion } from "framer-motion"
import { Briefcase } from "lucide-react"

export function ExperienceTimeline() {
  const experiences = [
    {
      id: 1,
      role: "Senior Frontend Developer",
      company: "Tech Innovations Inc.",
      period: "2021 - Present",
      description:
        "Lead the frontend development team in creating responsive, accessible web applications using React and Next.js. Implemented performance optimizations resulting in a 40% improvement in load times.",
      technologies: ["React", "Next.js", "TypeScript", "Tailwind CSS", "Framer Motion"],
    },
    {
      id: 2,
      role: "UI/UX Developer",
      company: "Creative Solutions Agency",
      period: "2019 - 2021",
      description:
        "Designed and developed user interfaces for various client projects. Collaborated with designers to implement pixel-perfect, responsive designs with smooth animations and interactions.",
      technologies: ["JavaScript", "React", "SCSS", "Figma", "GSAP"],
    },
    {
      id: 3,
      role: "Web Developer",
      company: "Digital Craft Studio",
      period: "2017 - 2019",
      description:
        "Developed and maintained websites for small to medium-sized businesses. Implemented responsive designs and ensured cross-browser compatibility and accessibility compliance.",
      technologies: ["HTML", "CSS", "JavaScript", "WordPress", "PHP"],
    },
  ]

return (
    <div className="relative">
      {/* Vertical line */}
      <div className="absolute left-0 md:left-1/2 transform md:-translate-x-1/2 top-0 bottom-0 w-0.5 bg-border" />

{experiences.map((exp, index) => (
        <motion.div
          key={exp.id}
          initial={{ opacity: 0, y: 50 }}
          whileInView={{ opacity: 1, y: 0 }}
          viewport={{ once: true, margin: "-100px" }}
          transition={{ duration: 0.5, delay: index * 0.2 }}
          className={`relative flex flex-col md:flex-row gap-8 mb-12 ${index % 2 === 0 ? "md:flex-row-reverse" : ""}`}
        >
          {/* Timeline dot */}
          <div className="absolute left-0 md:left-1/2 transform -translate-x-1/2 w-10 h-10 rounded-full bg-background border-2 border-primary flex items-center justify-center">
            <Briefcase className="h-5 w-5 text-primary" />
          </div>

{/* Content */}
          <div className={`md:w-1/2 ${index % 2 === 0 ? "md:pr-16 text-right" : "md:pl-16"} pl-16 md:pl-0`}>
            <div className="bg-card p-6 rounded-lg shadow-sm border">
              <h3 className="text-xl font-bold">{exp.role}</h3>
              <p className="text-primary font-medium">{exp.company}</p>
              <p className="text-sm text-muted-foreground mb-4">{exp.period}</p>
              <p className="text-muted-foreground mb-4">{exp.description}</p>
              <div className="flex flex-wrap gap-2 justify-start">
                {exp.technologies.map((tech) => (
                  <span key={tech} className="text-xs px-2 py-1 bg-muted rounded-full text-muted-foreground">
                    {tech}
                  </span>
                ))}
              </div>
            </div>
          </div>

{/* Empty div for layout */}
          <div className="md:w-1/2" />
        </motion.div>
      ))}
    </div>
  )
}

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

import { useState, useEffect } from "react"
import { motion, AnimatePresence } from "framer-motion"
import { ArrowUp } from "lucide-react"
import { Button } from "@/components/ui/button"

export function ScrollToTop() {
  const [isVisible, setIsVisible] = useState(false)

useEffect(() => {
    const toggleVisibility = () => {
      if (window.scrollY > 500) {
        setIsVisible(true)
      } else {
        setIsVisible(false)
      }
    }

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

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

return (
    <AnimatePresence>
      {isVisible && (
        <motion.div
          className="fixed bottom-8 right-8 z-50"
          initial={{ opacity: 0, scale: 0.5 }}
          animate={{ opacity: 1, scale: 1 }}
          exit={{ opacity: 0, scale: 0.5 }}
          transition={{ duration: 0.3 }}
        >
          <Button size="icon" onClick={scrollToTop} aria-label="Scroll to top" className="rounded-full shadow-md">
            <ArrowUp className="h-5 w-5" />
          </Button>
        </motion.div>
      )}
    </AnimatePresence>
  )
}

[V0_FILE]typescriptreact:file="data/projects.ts" isMerged="true"
export const projects = [
  {
    id: 1,
    title: "E-Commerce Platform",
    description:
      "A modern e-commerce platform with advanced filtering, animations, and a seamless checkout experience.",
    tags: ["Next.js", "TypeScript", "Tailwind CSS", "Framer Motion"],
    imageSrc: "/placeholder.svg?height=600&width=800",
    link: "https://example.com/ecommerce",
    githubLink: "https://github.com/username/ecommerce",
    category: "web",
  },
  {
    id: 2,
    title: "Portfolio Website",
    description: "A creative portfolio for a photographer with immersive galleries and smooth transitions.",
    tags: ["React", "GSAP", "Styled Components"],
    imageSrc: "/placeholder.svg?height=600&width=800",
    link: "https://example.com/portfolio",
    githubLink: "https://github.com/username/portfolio",
    category: "web",
  },
  {
    id: 3,
    title: "Dashboard UI",
    description: "An intuitive admin dashboard with data visualization, dark mode, and responsive design.",
    tags: ["Next.js", "Chart.js", "Tailwind CSS"],
    imageSrc: "/placeholder.svg?height=600&width=800",
    link: "https://example.com/dashboard",
    githubLink: "https://github.com/username/dashboard",
    category: "ui",
  },
  {
    id: 4,
    title: "Mobile App UI",
    description: "UI/UX design and prototype for a fitness tracking mobile application with animations.",
    tags: ["Figma", "Prototyping", "UI/UX"],
    imageSrc: "/placeholder.svg?height=600&width=800",
    link: "https://example.com/fitness-app",
    category: "mobile",
  },
  {
    id: 5,
    title: "Marketing Website",
    description: "A high-converting landing page with interactive elements and optimized performance.",
    tags: ["HTML", "CSS", "JavaScript", "GSAP"],
    imageSrc: "/placeholder.svg?height=600&width=800",
    link: "https://example.com/marketing",
    githubLink: "https://github.com/username/marketing",
    category: "web",
  },
  {
    id: 6,
    title: "Web Application",
    description: "A full-featured web application with authentication, real-time updates, and animations.",
    tags: ["React", "Firebase", "Tailwind CSS", "Framer Motion"],
    imageSrc: "/placeholder.svg?height=600&width=800",
    link: "https://example.com/webapp",
    githubLink: "https://github.com/username/webapp",
    category: "web",
  },
]

[V0_FILE]typescriptreact:file="data/skills.ts" isMerged="true"
export const skills = [
  {
    name: "React / Next.js",
    percentage: 90,
  },
  {
    name: "JavaScript / TypeScript",
    percentage: 85,
  },
  {
    name: "HTML / CSS",
    percentage: 95,
  },
  {
    name: "Tailwind CSS",
    percentage: 90,
  },
  {
    name: "UI/UX Design",
    percentage: 80,
  },
  {
    name: "Animation / Motion",
    percentage: 85,
  },
  {
    name: "Responsive Design",
    percentage: 95,
  },
  {
    name: "Accessibility",
    percentage: 85,
  },
]

[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/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="app/portfolio/page.tsx" isEdit="true"
"use client"

import { ProjectCard } from "@/components/project-card"
import { ProjectFilter } from "@/components/project-filter"
import { projects } from "@/data/projects"

export default function PortfolioPage() {
  return (
    <main className="pt-24 pb-16">
      <div className="container mx-auto px-4 sm:px-6 lg:px-8">
        <div className="max-w-3xl mx-auto text-center mb-16">
          <h1 className="text-3xl md:text-4xl font-bold mb-6 tracking-tight">
            My <span className="text-primary">Portfolio</span>
          </h1>
          <p className="text-muted-foreground mb-8 leading-relaxed">
            A curated selection of my recent work showcasing my skills in design, development, and animation.
          </p>

<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
          {projects &&
            projects.map((project, index) => (
              <ProjectCard
                key={project.id}
                title={project.title}
                description={project.description}
                tags={project.tags}
                imageSrc={project.imageSrc}
                link={project.link}
                githubLink={project.githubLink}
                delay={0.1 * (index + 1)}
              />
            ))}
        </div>
      </div>
    </main>
  )
}

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

import { useState } from "react"
import { motion } from "framer-motion"
import { Button } from "@/components/ui/button"

export function ProjectFilter() {
  const [activeFilter, setActiveFilter] = useState("all")

const filters = [
    { id: "all", label: "All" },
    { id: "web", label: "Web Development" },
    { id: "ui", label: "UI/UX Design" },
    { id: "mobile", label: "Mobile" },
  ]

return (
    <div className="flex flex-wrap justify-center gap-2 mb-8">
      {filters &&
        filters.map((filter) => (
          <motion.div key={filter.id} whileHover={{ scale: 1.05 }} whileTap={{ scale: 0.95 }}>
            <Button
              variant={activeFilter === filter.id ? "default" : "outline"}
              size="sm"
              onClick={() => setActiveFilter(filter.id)}
              className="rounded-full"
            >
              {filter.label}
            </Button>
          </motion.div>
        ))}
    </div>
  )
}

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

import Image from "next/image"
import Link from "next/link"
import { motion } from "framer-motion"
import { ExternalLink, Github } from "lucide-react"
import { Button } from "@/components/ui/button"

interface ProjectCardProps {
  title: string
  description: string
  tags: string[]
  imageSrc: string
  link: string
  githubLink?: string
  delay?: number
}

export function ProjectCard({
  title,
  description,
  tags = [], // Provide default empty array
  imageSrc,
  link,
  githubLink,
  delay = 0,
}: ProjectCardProps) {
  return (
    <motion.div
      initial={{ opacity: 0, y: 20 }}
      whileInView={{ opacity: 1, y: 0 }}
      viewport={{ once: true, margin: "-100px" }}
      transition={{ duration: 0.5, delay }}
    >
      <motion.div
        whileHover={{ y: -10 }}
        transition={{ type: "spring", stiffness: 300 }}
        className="group bg-card rounded-lg overflow-hidden shadow-sm border border-border h-full flex flex-col"
      >
        <div className="relative h-48 w-full overflow-hidden">
          <Image
            src={imageSrc || "/placeholder.svg"}
            alt={title || "Project"}
            fill
            className="object-cover transition-transform duration-500 group-hover:scale-105"
          />
          <div className="absolute inset-0 bg-black/0 group-hover:bg-black/20 transition-colors duration-300" />
        </div>
        <div className="p-6 flex-grow flex flex-col">
          <h3 className="text-xl font-bold mb-2">{title || "Untitled Project"}</h3>
          <p className="text-muted-foreground mb-4 flex-grow">{description || "No description available"}</p>
          <div className="flex flex-wrap gap-2 mb-4">
            {tags &&
              tags.map((tag, index) => (
                <span key={index} className="text-xs px-2 py-1 bg-muted rounded-full text-muted-foreground">
                  {tag}
                </span>
              ))}
          </div>
          <div className="flex gap-2 mt-auto">
            {link && (
              <Button asChild size="sm" variant="outline" className="flex-1">
                <Link
                  href={link}
                  target="_blank"
                  rel="noopener noreferrer"
                  className="flex items-center justify-center"
                >
                  Live Demo
                  <ExternalLink className="ml-2 h-4 w-4" />
                </Link>
              </Button>
            )}
            {githubLink && (
              <Button asChild size="sm" variant="outline" className="flex-1">
                <Link
                  href={githubLink}
                  target="_blank"
                  rel="noopener noreferrer"
                  className="flex items-center justify-center"
                >
                  Code
                  <Github className="ml-2 h-4 w-4" />
                </Link>
              </Button>
            )}
          </div>
        </div>
      </motion.div>
    </motion.div>
  )
}

[V0_FILE]typescriptreact:file="app/projects/page.tsx"
import { ProjectCard } from "@/components/project-card"
import { ProjectFilter } from "@/components/project-filter"
import { projects } from "@/data/projects"

export default function ProjectsPage() {
  return (
    <main className="pt-24 pb-16">
      <div className="container mx-auto px-4 sm:px-6 lg:px-8">
        <div className="max-w-3xl mx-auto text-center mb-16">
          <h1 className="text-3xl md:text-4xl font-bold mb-6 tracking-tight">
            All <span className="text-primary">Projects</span>
          </h1>
          <p className="text-muted-foreground mb-8 leading-relaxed">
            A comprehensive showcase of my work across various technologies and design disciplines.
          </p>

<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
          {projects && projects.length > 0 ? (
            projects.map((project, index) => (
              <ProjectCard
                key={project.id}
                title={project.title}
                description={project.description}
                tags={project.tags}
                imageSrc={project.imageSrc}
                link={project.link}
                githubLink={project.githubLink}
                delay={0.1 * (index + 1)}
              />
            ))
          ) : (
            <div className="col-span-3 text-center py-12">
              <p className="text-muted-foreground">No projects available at the moment.</p>
            </div>
          )}
        </div>
      </div>
    </main>
  )
}

[V0_FILE]json:file="package.json"
{
  "name": "developer-portfolio",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "@hookform/resolvers": "^3.3.4",
    "@radix-ui/react-label": "^2.0.2",
    "@radix-ui/react-slot": "^1.0.2",
    "@radix-ui/react-toast": "^1.1.5",
    "class-variance-authority": "^0.7.0",
    "clsx": "^2.1.0",
    "framer-motion": "^11.0.8",
    "lucide-react": "^0.344.0",
    "next": "14.1.0",
    "next-themes": "^0.2.1",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-hook-form": "^7.51.0",
    "tailwind-merge": "^2.2.1",
    "tailwindcss-animate": "^1.0.7",
    "zod": "^3.22.4"
  },
  "devDependencies": {
    "@types/node": "^20.11.24",
    "@types/react": "^18.2.61",
    "@types/react-dom": "^18.2.19",
    "autoprefixer": "^10.4.18",
    "eslint": "^8.57.0",
    "eslint-config-next": "14.1.0",
    "postcss": "^8.4.35",
    "tailwindcss": "^3.4.1",
    "typescript": "^5.3.3"
  }
}
</article></body></html>

About

Tags

Share

About

Tags

Share

More from zacxxx

More Templates Like This

About

Tags

Share

About

Tags

Share

More from zacxxx

More Templates Like This