[V0_FILE]typescriptreact:file="components/project-card.tsx" isMerged="true" import Image from "next/image" import { Github, ExternalLink } from "lucide-react" interface ProjectCardProps { title: string description: string technologies: string[] imageUrl: string githubUrl: string liveUrl: string } export default function ProjectCard({ title, description, technologies, imageUrl, githubUrl, liveUrl, }: ProjectCardProps) { return (

{title}

{description}

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

Source Live Demo

) } [V0_FILE]typescriptreact:file="components/experience-item.tsx" isMerged="true" interface ExperienceItemProps { title: string company: string period: string description: string technologies: string[] } export default function ExperienceItem({ title, company, period, description, technologies }: ExperienceItemProps) { return (

{title}

{company} • {period}

{description}

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

) } [V0_FILE]typescriptreact:file="components/contact-form.tsx" isMerged="true" "use client" import type React from "react" import { useState } from "react" import { Send } from "lucide-react" export default function ContactForm() { const [formData, setFormData] = useState({ name: "", email: "", message: "", }) const [isSubmitting, setIsSubmitting] = useState(false) const [submitStatus, setSubmitStatus] = useState(null) const handleChange = (e: React.ChangeEvent) => { const { name, value } = e.target setFormData((prev) => ({ ...prev, [name]: value })) } const handleSubmit = async (e: React.FormEvent) => { e.preventDefault() setIsSubmitting(true) setSubmitStatus(null) // Simulate form submission try { // In a real application, you would send the form data to your backend await new Promise((resolve) => setTimeout(resolve, 1500)) setSubmitStatus("success") setFormData({ name: "", email: "", message: "" }) } catch (error) { setSubmitStatus("error") } finally { setIsSubmitting(false) } } return ( ) } [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 { ThemeProvider } from "@/components/theme-provider" const inter = Inter({ subsets: ["latin"] }) export const metadata: Metadata = { title: "John Doe | Full Stack Developer", description: "Personal portfolio website showcasing my skills, projects, and experience as a Full Stack Developer.", } export default function RootLayout({ children, }: Readonly<{ children: React.ReactNode }>) { return ( {children} ) } [V0_FILE]css:file="app/globals.css" isFixed="true" isEdit="true" isQuickEdit="true" isMerged="true" @tailwind base; @tailwind components; @tailwind utilities; :root { --foreground-rgb: 0, 0, 0; --background-rgb: 255, 255, 255; } .dark { --foreground-rgb: 255, 255, 255; --background-rgb: 10, 10, 10; } body { color: rgb(var(--foreground-rgb)); background: rgb(var(--background-rgb)); } html { scroll-behavior: smooth; } body { font-family: Arial, Helvetica, sans-serif; } @layer utilities { .text-balance { text-wrap: balance; } } @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%; --chart-1: 12 76% 61%; --chart-2: 173 58% 39%; --chart-3: 197 37% 24%; --chart-4: 43 74% 66%; --chart-5: 27 87% 67%; --radius: 0.5rem; --sidebar-background: 0 0% 98%; --sidebar-foreground: 240 5.3% 26.1%; --sidebar-primary: 240 5.9% 10%; --sidebar-primary-foreground: 0 0% 98%; --sidebar-accent: 240 4.8% 95.9%; --sidebar-accent-foreground: 240 5.9% 10%; --sidebar-border: 220 13% 91%; --sidebar-ring: 217.2 91.2% 59.8%; } .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%; --chart-1: 220 70% 50%; --chart-2: 160 60% 45%; --chart-3: 30 80% 55%; --chart-4: 280 65% 60%; --chart-5: 340 75% 55%; --sidebar-background: 240 5.9% 10%; --sidebar-foreground: 240 4.8% 95.9%; --sidebar-primary: 224.3 76.3% 48%; --sidebar-primary-foreground: 0 0% 100%; --sidebar-accent: 240 3.7% 15.9%; --sidebar-accent-foreground: 240 4.8% 95.9%; --sidebar-border: 240 3.7% 15.9%; --sidebar-ring: 217.2 91.2% 59.8%; } } @layer base { * { @apply border-border; } body { @apply bg-background text-foreground; } } [V0_FILE]typescript:file="tailwind.config.ts" isFixed="true" isQuickEdit="true" isMerged="true" import type { Config } from "tailwindcss" const config: Config = { darkMode: ["class"], content: [ "./pages/**/*.{js,ts,jsx,tsx,mdx}", "./components/**/*.{js,ts,jsx,tsx,mdx}", "./app/**/*.{js,ts,jsx,tsx,mdx}", "*.{js,ts,jsx,tsx,mdx}", ], theme: { 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))", }, blue: { 50: "#eff6ff", 100: "#dbeafe", 200: "#bfdbfe", 300: "#93c5fd", 400: "#60a5fa", 500: "#3b82f6", 600: "#2563eb", 700: "#1d4ed8", 800: "#1e40af", 900: "#1e3a8a", }, }, borderRadius: { lg: "var(--radius)", md: "calc(var(--radius) - 2px)", sm: "calc(var(--radius) - 4px)", }, fontFamily: { sans: ["Inter", "ui-sans-serif", "system-ui", "-apple-system", "sans-serif"], }, animation: { "fade-in": "fade-in 0.5s ease-in-out", "slide-up": "slide-up 0.5s ease-out", }, keyframes: { "fade-in": { "0%": { opacity: "0" }, "100%": { opacity: "1" }, }, "slide-up": { "0%": { transform: "translateY(20px)", opacity: "0" }, "100%": { transform: "translateY(0)", opacity: "1" }, }, }, }, }, plugins: [require("tailwindcss-animate")], } export default config [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 {children} } [V0_FILE]typescriptreact:file="components/skill-badge.tsx" isEdit="true" isQuickEdit="true" import { SiReact, SiNextdotjs, SiTypescript, SiJavascript, SiNodedotjs, SiExpress, SiMongodb, SiPostgresql, SiTailwindcss, SiHtml5, SiCss3, SiGit, SiGithub, SiDocker, } from "react-icons/si" import { Cloud } from "lucide-react" interface SkillBadgeProps { name: string icon: string } export default function SkillBadge({ name, icon }: SkillBadgeProps) { const getIcon = () => { switch (icon.toLowerCase()) { case "react": return case "nextjs": return case "typescript": return case "javascript": return case "nodejs": return case "express": return case "mongodb": return case "postgresql": return case "tailwind": return case "html": return case "css": return case "git": return case "github": return case "docker": return case "aws": return default: return null } } return (

{getIcon()}

{name}

) } [V0_FILE]typescriptreact:file="app/page.tsx" isEdit="true" isQuickEdit="true" import Image from "next/image" import Link from "next/link" import { Github, Linkedin, Mail, ArrowRight } from "lucide-react" import ProjectCard from "@/components/project-card" import SkillBadge from "@/components/skill-badge" import ExperienceItem from "@/components/experience-item" import ContactForm from "@/components/contact-form" export default function Home() { return (

{/* Navigation */} {/* Hero Section */}

Hi, I'm John Doe
Full Stack Developer

I build exceptional and accessible digital experiences for the web. Focused on creating products that are inclusive, performant, and delightful.

View Projects Contact Me

{/* Skills Section */}

Skills & Technologies

I've worked with a variety of technologies in the web development world. Here are some of my technical skills:

{/* Projects Section */}

Featured Projects

Here are some of my recent projects. Each project reflects my passion for building intuitive and impactful web applications.

{/* Experience Section */}

Work Experience

My professional journey in the tech industry, where I've contributed to various projects and collaborated with talented teams.

{/* Contact Section */}

Get In Touch

Have a project in mind or want to discuss potential opportunities? Feel free to reach out!

Contact Information

Email

hello@example.com

linkedin.com/in/johndoe

GitHub

github.com/johndoe

{/* Footer */}

) }

{title}

{title}

Hi, I'm John Doe Full Stack Developer

Skills & Technologies

Featured Projects

Work Experience

Get In Touch

Contact Information

Email

LinkedIn

GitHub

Hi, I'm John Doe
Full Stack Developer

About

Tags

Share

About

Tags

Share

More from shaam

More Templates Like This

About

Tags

Share

About

Tags

Share

More from shaam

More Templates Like This