[V0_FILE]typescriptreact:file="app/page.tsx" import { Button } from "@/components/ui/button" import { Github, Linkedin, Mail, Twitter } from "lucide-react" import Link from "next/link" import ContactForm from "./components/contact-form" import ProjectCard from "./components/project-card" import TechStack from "./components/tech-stack" export default function Page() { return (

John.dev

Full Stack Developer

Building digital experiences with modern technologies. Focused on creating elegant solutions to complex problems.

Projects

Tech Stack

Get in Touch

) } [V0_FILE]typescriptreact:file="app/components/project-card.tsx" 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" 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" "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"
"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" isQuickEdit="true"
import { ThemeProvider } from "@/components/theme-provider"
import { cn } from "@/lib/utils"
import type { Metadata } from "next"
import { Inter } from "next/font/google"
import "./globals.css"
import type React from "react" // Import React

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

export const metadata: Metadata = {
  title: "John.dev - Full Stack Developer",
  description: "Full stack developer portfolio showcasing projects and skills",
}

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="en" suppressHydrationWarning>
      <body className={cn("min-h-screen bg-background font-sans antialiased", inter.className)}>
        <ThemeProvider attribute="class" defaultTheme="system" enableSystem disableTransitionOnChange>
          {children}
        </ThemeProvider>
      </body>
    </html>
  )
}

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

import { ThemeProvider as NextThemesProvider } from "next-themes"
import type { ThemeProviderProps } from "next-themes"

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

[V0_FILE]typescriptreact:file="components/theme-toggle.tsx"
"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>
  )
}
</article></body></html>