[V0_FILE]typescriptreact:file="app/page.tsx" isEdit="true" isQuickEdit="true" isMerged="true" import { Button } from "@/components/ui/button" import { Linkedin, Mail, Dribbble, Instagram, Twitter } from "lucide-react" import Link from "next/link" export default function Page() { return (

princemirxcle

PRODUCT
DESIGNER &
ART DIRECTOR

GOT THAT COOL
IDEA?

I'm open to new opportunities and would love to hear
from you.

) } function ProjectCard({ title, description }: { title: string; description: string }) { return (

{title}

{description}

) } [V0_FILE]typescriptreact:file="app/components/project-card.tsx" isMerged="true" import { Card, CardContent, CardFooter } from "@/components/ui/card" import { Github } from "lucide-react" import Image from "next/image" import Link from "next/link" interface ProjectCardProps { title: string description: string image: string link: string tags: string[] } export default function ProjectCard({ title, description, image, link, tags }: ProjectCardProps) { return (

{title}

{description}

{tags.map((tag) => ( {tag} ))}

View on GitHub ) } [V0_FILE]typescriptreact:file="app/components/tech-stack.tsx" isMerged="true" import { Card } from "@/components/ui/card" const technologies = [ { category: "Frontend", skills: ["React", "Next.js", "TypeScript", "TailwindCSS", "Redux", "GraphQL"], }, { category: "Backend", skills: ["Node.js", "Express", "Python", "Django", "PostgreSQL", "MongoDB"], }, { category: "DevOps", skills: ["Docker", "AWS", "CI/CD", "Git", "Linux", "Nginx"], }, { category: "Tools", skills: ["VS Code", "Postman", "Figma", "Jest", "GitHub", "Vercel"], }, ] export default function TechStack() { return (

{technologies.map((tech) => (

{tech.category}

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

))}

) } [V0_FILE]typescriptreact:file="app/components/contact-form.tsx" isMerged="true" "use client" import { Button } from "@/components/ui/button" import { Card } from "@/components/ui/card" import { Input } from "@/components/ui/input" import { Textarea } from "@/components/ui/textarea" import { useState } from "react" import { submitContactForm } from "../actions" export default function ContactForm() { const [pending, setPending] = useState(false) const [message, setMessage] = useState("") async function handleSubmit(formData: FormData) { setPending(true) try { const response = await submitContactForm(formData) setMessage(response.message) } catch (error) { setMessage("Something went wrong. Please try again.") } finally { setPending(false) } } return (

Name

Message

</div>
        <Button type="submit" className="w-full" disabled={pending}>
          {pending ? "Sending..." : "Send Message"}
        </Button>
        {message && <p className="text-sm text-center mt-4 text-muted-foreground">{message}</p>}
      </form>
    </Card>
  )
}

[V0_FILE]typescriptreact:file="app/actions.ts" isMerged="true"
"use server"

export async function submitContactForm(formData: FormData) {
  // Simulate a delay
  await new Promise((resolve) => setTimeout(resolve, 1000))

const name = formData.get("name")
  const email = formData.get("email")
  const message = formData.get("message")

// Here you would typically send an email or save to a database
  console.log("Form submission:", { name, email, message })

return {
    message: "Thanks for your message! I'll get back to you soon.",
  }
}

[V0_FILE]typescriptreact:file="app/layout.tsx" isFixed="true" isEdit="true" isQuickEdit="true" isMerged="true"
import { cn } from "@/lib/utils"
import type { Metadata } from "next"
import { Inter } from "next/font/google"
import "./globals.css"
import type React from "react" // Added import for React

const inter = Inter({ subsets: ["latin"] })

export const metadata: Metadata = {
  title: "Prince Mirxcle - Product Designer & Art Director",
  description: "Product designer and art director crafting digital experiences",
}

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="en" className="dark">
      <body className={cn("min-h-screen bg-black font-sans antialiased", inter.className)}>{children}</body>
    </html>
  )
}

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

import { Moon, Sun } from "lucide-react"
import { useTheme } from "next-themes"

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

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

return (
    <Button variant="ghost" size="icon" onClick={() => setTheme(theme === "light" ? "dark" : "light")}>
      <Sun className="h-[1.2rem] w-[1.2rem] rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" />
      <Moon className="absolute h-[1.2rem] w-[1.2rem] rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" />
      <span className="sr-only">Toggle theme</span>
    </Button>
  )
}

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

@layer base {
  :root {
    --background: 0 0% 100%;
    --foreground: 0 0% 3.9%;

--card: 0 0% 100%;
    --card-foreground: 0 0% 3.9%;

--popover: 0 0% 100%;
    --popover-foreground: 0 0% 3.9%;

--primary: 0 0% 9%;
    --primary-foreground: 0 0% 98%;

--secondary: 0 0% 96.1%;
    --secondary-foreground: 0 0% 9%;

--muted: 0 0% 96.1%;
    --muted-foreground: 0 0% 45.1%;

--accent: 0 0% 96.1%;
    --accent-foreground: 0 0% 9%;

--destructive: 0 84.2% 60.2%;
    --destructive-foreground: 0 0% 98%;

--border: 0 0% 89.8%;
    --input: 0 0% 89.8%;
    --ring: 0 0% 3.9%;

--radius: 0.5rem;
  }

.dark {
    --background: 0 0% 3.9%;
    --foreground: 0 0% 98%;

--card: 0 0% 3.9%;
    --card-foreground: 0 0% 98%;

--popover: 0 0% 3.9%;
    --popover-foreground: 0 0% 98%;

--primary: 0 0% 98%;
    --primary-foreground: 0 0% 9%;

--secondary: 0 0% 14.9%;
    --secondary-foreground: 0 0% 98%;

--muted: 0 0% 14.9%;
    --muted-foreground: 0 0% 63.9%;

--accent: 0 0% 14.9%;
    --accent-foreground: 0 0% 98%;

--destructive: 0 62.8% 30.6%;
    --destructive-foreground: 0 0% 98%;

--border: 0 0% 14.9%;
    --input: 0 0% 14.9%;
    --ring: 0 0% 83.1%;
  }
}

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

[V0_FILE]typescriptreact:file="tailwind.config.js" isEdit="true" isQuickEdit="true"
/** @type {import('tailwindcss').Config} */
module.exports = {
  darkMode: ["class"],
  content: ["./pages/**/*.{ts,tsx}", "./components/**/*.{ts,tsx}", "./app/**/*.{ts,tsx}", "./src/**/*.{ts,tsx}"],
  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")],
}
</article></body></html>

PRODUCT DESIGNER & ART DIRECTOR

GOT THAT COOL IDEA?

{title}

{title}

{tech.category}

PRODUCT
DESIGNER &
ART DIRECTOR

GOT THAT COOL
IDEA?

About

About