[V0_FILE]typescriptreact:file="app/globals.css" isEdit="true" isQuickEdit="true" isMerged="true" @tailwind base; @tailwind components; @tailwind utilities; @layer base { :root { --background: 0 0% 98%; --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 10% 3.9%; --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; } h1, h2, h3, h4, h5, h6 { @apply font-playfair font-bold; } } @layer components { .heading-xl { @apply text-7xl md:text-9xl font-bold tracking-tight; } .heading-lg { @apply text-5xl md:text-6xl font-bold; } .heading-md { @apply text-3xl md:text-4xl font-medium; } .body-lg { @apply text-xl leading-relaxed; } .body-md { @apply text-lg leading-relaxed; } .container-custom { @apply max-w-6xl mx-auto px-4 sm:px-6 lg:px-8; } .section-spacing { @apply py-16 md:py-24; } .link-underline { @apply relative inline-block; } .link-underline::after { content: ""; @apply absolute w-0 h-0.5 bg-current left-0 -bottom-1 transition-all duration-300; } .link-underline:hover::after { @apply w-full; } } [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: { fontFamily: { sans: ["var(--font-inter)"], playfair: ["var(--font-playfair)"], }, 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="lib/utils.ts" 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/blog/page.tsx" isMerged="true" import Link from "next/link" import Image from "next/image" import { Button } from "@/components/ui/button" // Mock blog data const blogPosts = [ { id: 1, title: "Typography in Web Design: Best Practices", excerpt: "Learn how to use typography effectively to create beautiful and readable web experiences.", date: "March 1, 2025", category: "Design", image: "/placeholder.svg?height=400&width=600", slug: "typography-in-web-design", }, { id: 2, title: "Building Responsive Layouts with CSS Grid", excerpt: "A comprehensive guide to creating flexible and responsive layouts using CSS Grid.", date: "February 15, 2025", category: "Development", image: "/placeholder.svg?height=400&width=600", slug: "responsive-layouts-css-grid", }, { id: 3, title: "The Future of JavaScript: What's Coming in 2025", excerpt: "Exploring the upcoming features and trends in JavaScript that will shape web development.", date: "February 1, 2025", category: "Development", image: "/placeholder.svg?height=400&width=600", slug: "future-of-javascript-2025", }, { id: 4, title: "Optimizing Web Performance: A Case Study", excerpt: "How I improved loading times by 70% on a client project through strategic optimizations.", date: "January 20, 2025", category: "Performance", image: "/placeholder.svg?height=400&width=600", slug: "web-performance-case-study", }, { id: 5, title: "Designing for Accessibility: Beyond the Basics", excerpt: "Taking your accessibility knowledge to the next level with advanced techniques and considerations.", date: "January 5, 2025", category: "Accessibility", image: "/placeholder.svg?height=400&width=600", slug: "designing-for-accessibility", }, { id: 6, title: "From Figma to Next.js: A Designer's Journey", excerpt: "My personal experience transitioning from design to development and lessons learned along the way.", date: "December 15, 2024", category: "Career", image: "/placeholder.svg?height=400&width=600", slug: "figma-to-nextjs-journey", }, ] export default function BlogPage() { return (

Blog

Thoughts, insights, and perspectives on design, development, and the digital landscape.

{/* Featured Post */}

{blogPosts[0].category} • {blogPosts[0].date}

{blogPosts[0].title}

{blogPosts[0].excerpt}

{/* Blog Post Grid */}

{blogPosts.slice(1).map((post) => (

{post.category} • {post.date}

{post.title}

{post.excerpt}

))}

) } [V0_FILE]typescriptreact:file="app/blog/[slug]/page.tsx" isMerged="true" import Link from "next/link" import Image from "next/image" import { ArrowLeft } from "lucide-react" import { Button } from "@/components/ui/button" // This would typically come from a CMS or database const getBlogPost = (slug: string) => { return { title: "Typography in Web Design: Best Practices", date: "March 1, 2025", author: "John Doe", category: "Design", image: "/placeholder.svg?height=600&width=1200", content: `

Typography is one of the most important elements of web design. It's not just about choosing a nice font; it's about creating a hierarchy, establishing rhythm, and ensuring readability across all devices.

The Importance of Typography

Good typography can make the difference between a user staying on your site or leaving. It affects readability, user experience, and even how your brand is perceived.

When designing for the web, consider these key factors:

Readability across devices
Appropriate font pairings
Hierarchy and visual flow
Consistent spacing and rhythm
Accessibility considerations

Choosing the Right Fonts

When selecting fonts for your web project, consider both aesthetics and functionality. A beautiful font that's difficult to read defeats the purpose of good typography.

"Typography is what language looks like." — Ellen Lupton

For body text, prioritize readability over style. Sans-serif fonts like Inter, Roboto, and Open Sans work well for body copy on screens. For headings, you have more freedom to use decorative or serif fonts that reflect your brand's personality.

Creating Hierarchy

Typographic hierarchy guides users through your content, helping them understand what's most important and how information is organized.

Use size, weight, color, and spacing to create clear distinctions between different levels of content. A well-structured hierarchy makes your content more scannable and digestible.

`, relatedPosts: [ { id: 2, title: "Building Responsive Layouts with CSS Grid", slug: "responsive-layouts-css-grid", image: "/placeholder.svg?height=200&width=300", }, { id: 5, title: "Designing for Accessibility: Beyond the Basics", slug: "designing-for-accessibility", image: "/placeholder.svg?height=200&width=300", }, ], } } export default function BlogPostPage({ params }: { params: { slug: string } }) { const post = getBlogPost(params.slug) return (

{/* Back Button */}

{/* Post Header */}

{post.category} • {post.date}

{post.title}

By {post.author}

{/* Featured Image */}

{/* Post Content */}

{/* Author Bio */}

About {post.author}

Full Stack Developer with a passion for typography and user experience. Writing about web development, design, and the intersection of technology and creativity.

{/* Related Posts */}

{post.relatedPosts.map((relatedPost) => (

{relatedPost.title}

))}

) } [V0_FILE]typescriptreact:file="app/projects/[slug]/page.tsx" isMerged="true" import Link from "next/link" import Image from "next/image" import { ArrowLeft, ExternalLink, Github } from "lucide-react" import { Button } from "@/components/ui/button" // This would typically come from a CMS or database const getProject = (slug: string) => { return { title: "Typography Portfolio", client: "Personal Project", year: "2025", role: "Full Stack Developer", description: "A minimalist portfolio website for a typography designer, featuring a clean layout and beautiful typography.", challenge: "The main challenge was to create a website that showcased the designer's work while also demonstrating typography principles in action. The design needed to be minimal yet impactful, with a focus on readability and visual hierarchy.", solution: "I developed a custom Next.js application with a focus on typography and whitespace. The site features carefully selected font pairings, a responsive layout, and subtle animations that enhance the user experience without distracting from the content.", technologies: ["Next.js", "Tailwind CSS", "Framer Motion", "Vercel"], featuredImage: "/placeholder.svg?height=800&width=1600", gallery: [ "/placeholder.svg?height=600&width=800", "/placeholder.svg?height=600&width=800", "/placeholder.svg?height=600&width=800", ], liveUrl: "https://example.com", githubUrl: "https://github.com/johndoe/typography-portfolio", nextProject: { title: "E-commerce Platform", slug: "ecommerce-platform", }, } } export default function ProjectPage({ params }: { params: { slug: string } }) { const project = getProject(params.slug) return (

{/* Back Button */}

{/* Project Header */}

{project.title}

{project.description}

{project.liveUrl && ( )} {project.githubUrl && ( )}

{/* Featured Image */}

{/* Project Details */}

Project Details

Client

{project.client}

Year

{project.year}

Role

{project.role}

Technologies

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

The Challenge

{project.challenge}

The Solution

{project.solution}

{/* Project Gallery */}

Project Gallery

{project.gallery.map((image, index) => (

))}

{/* Next Project */} {project.nextProject && (

Next Project

{project.nextProject.title}

)}

) } [V0_FILE]typescriptreact:file="components/theme/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 {children} } [V0_FILE]typescriptreact:file="components/theme/theme-toggle.tsx" "use client" import { Moon, Sun } from "lucide-react" import { useTheme } from "next-themes" import { Button } from "@/components/ui/button" import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@/components/ui/dropdown-menu" export function ThemeToggle() { const { setTheme, theme } = useTheme() return ( setTheme("light")}>Light setTheme("dark")}>Dark setTheme("system")}>System ) } [V0_FILE]typescriptreact:file="app/layout.tsx" isEdit="true" import type React from "react" import type { Metadata } from "next" import { Inter, Playfair_Display } from "next/font/google" import "./globals.css" import { Navigation } from "@/components/layout/navigation" import { Footer } from "@/components/layout/footer" import { ThemeProvider } from "@/components/theme/theme-provider" const inter = Inter({ subsets: ["latin"], variable: "--font-inter", }) const playfair = Playfair_Display({ subsets: ["latin"], variable: "--font-playfair", }) export const metadata: Metadata = { title: "John Doe | Full Stack Developer", description: "Portfolio of John Doe, a Full Stack Developer specializing in React, Next.js, and Node.js", } export default function RootLayout({ children, }: Readonly<{ children: React.ReactNode }>) { return (

{children}

) } [V0_FILE]typescriptreact:file="components/layout/navigation.tsx" isEdit="true" "use client" import Link from "next/link" import { usePathname } from "next/navigation" import { Menu, X } from "lucide-react" import { useState } from "react" import { Button } from "@/components/ui/button" import { cn } from "@/lib/utils" import { ThemeToggle } from "@/components/theme/theme-toggle" export function Navigation() { const [isMenuOpen, setIsMenuOpen] = useState(false) const pathname = usePathname() const routes = [ { name: "Home", path: "/" }, { name: "Projects", path: "/projects" }, { name: "Workshops", path: "/workshops" }, { name: "Blog", path: "/blog" }, { name: "Contact", path: "/#contact" }, ] return (

JohnDoe {/* Desktop Navigation */} {/* Mobile Menu Button */}

{/* Mobile Navigation */} {isMenuOpen && (

)}

) } [V0_FILE]typescriptreact:file="components/layout/footer.tsx" isEdit="true" import Link from "next/link" import { Github, Linkedin, Mail, Twitter } from "lucide-react" export function Footer() { return ( ) } [V0_FILE]typescriptreact:file="app/page.tsx" isEdit="true" import Link from "next/link" import Image from "next/image" import { ArrowRight, Calendar, Github, Linkedin, Mail, Twitter, Users } from "lucide-react" import { Button } from "@/components/ui/button" import { Badge } from "@/components/ui/badge" import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card" // Mock workshops data const workshops = [ { id: 1, title: "Advanced React Patterns", description: "Learn advanced React patterns and techniques to build scalable applications.", date: "April 15, 2025", time: "10:00 AM - 2:00 PM", location: "Online", image: "/placeholder.svg?height=300&width=500", status: "Upcoming", slug: "advanced-react-patterns", }, { id: 2, title: "TypeScript for JavaScript Developers", description: "A comprehensive introduction to TypeScript for experienced JavaScript developers.", date: "May 10, 2025", time: "9:00 AM - 12:00 PM", location: "Tech Hub, San Francisco", image: "/placeholder.svg?height=300&width=500", status: "Upcoming", slug: "typescript-for-javascript-developers", }, { id: 3, title: "Building with Next.js", description: "Explore the features of Next.js and learn how to build performant web applications.", date: "March 5, 2025", time: "1:00 PM - 5:00 PM", location: "Online", image: "/placeholder.svg?height=300&width=500", status: "Past", slug: "building-with-nextjs", }, ] export default function HomePage() { return (

{/* Hero Section */}

Hello, I'm

John Doe

Full Stack Developer

I create beautiful, functional websites and applications with a focus on typography and user experience.

{/* About Section */}

About 01

I'm a passionate developer with over 5 years of experience building web applications. I specialize in React, Next.js, and Node.js, creating responsive and accessible websites.

When I'm not coding, you can find me hiking, reading, or experimenting with new technologies. I believe in clean, minimal design that puts the focus on content and user experience.

I also regularly conduct{" "} workshops and training sessions {" "} for developers looking to level up their skills in modern web technologies.

{/* Featured Projects Section */}

Featured Projects 02

View All Projects

{[1, 2, 3].map((project) => (

0{project}

Project {project}

A detailed description of this project, including the problem it solves, the technologies used, and the challenges overcome during development.

))}

{/* Workshops Section */}

Workshops 03

View All Workshops

{workshops.map((workshop) => (

{workshop.status}

{workshop.title} {workshop.description}

{workshop.date}

{workshop.location}

))}

{/* Skills Section */}

Skills 04

{["React", "Next.js", "TypeScript", "Node.js", "Tailwind CSS", "GraphQL", "MongoDB", "AWS"].map( (skill, index) => (

{(index + 1).toString().padStart(2, "0")} {skill}

), )}

{/* Recent Blog Posts */}

Get In Touch 06

I'm always open to new opportunities and collaborations. Feel free to reach out!

john.doe@example.com linkedin.com/in/johndoe github.com/johndoe twitter.com/johndoe

) } [V0_FILE]typescriptreact:file="app/workshops/page.tsx" import Link from "next/link" import Image from "next/image" import { Calendar, Clock, MapPin, Users } from "lucide-react" import { Button } from "@/components/ui/button" import { Badge } from "@/components/ui/badge" import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card" // Mock workshops data const workshops = [ { id: 1, title: "Advanced React Patterns", description: "Learn advanced React patterns and techniques to build scalable applications. This workshop covers component composition, render props, custom hooks, and state management strategies.", date: "April 15, 2025", time: "10:00 AM - 2:00 PM", duration: "4 hours", location: "Online", capacity: "30 participants", price: "$149", image: "/placeholder.svg?height=400&width=800", status: "Upcoming", slug: "advanced-react-patterns", testimonials: [ { name: "Sarah Johnson", role: "Frontend Developer", company: "TechCorp", quote: "This workshop completely changed how I approach component design. Highly recommended!", }, ], }, { id: 2, title: "TypeScript for JavaScript Developers", description: "A comprehensive introduction to TypeScript for experienced JavaScript developers. Learn how to leverage TypeScript's type system to write more robust and maintainable code.", date: "May 10, 2025", time: "9:00 AM - 12:00 PM", duration: "3 hours", location: "Tech Hub, San Francisco", capacity: "25 participants", price: "$129", image: "/placeholder.svg?height=400&width=800", status: "Upcoming", slug: "typescript-for-javascript-developers", testimonials: [ { name: "Michael Chen", role: "Senior Developer", company: "StartupX", quote: "The perfect balance of theory and practice. I'm now confidently using TypeScript in all my projects.", }, ], }, { id: 3, title: "Building with Next.js", description: "Explore the features of Next.js and learn how to build performant web applications. This workshop covers routing, data fetching, server components, and deployment strategies.", date: "March 5, 2025", time: "1:00 PM - 5:00 PM", duration: "4 hours", location: "Online", capacity: "35 participants", price: "$149", image: "/placeholder.svg?height=400&width=800", status: "Past", slug: "building-with-nextjs", testimonials: [ { name: "Alex Rivera", role: "Product Manager", company: "DevStudio", quote: "The Next.js workshop gave our team the knowledge we needed to migrate our application and improve performance significantly.", }, ], }, { id: 4, title: "Responsive Web Design Masterclass", description: "Master the art of responsive web design and create websites that look great on any device. This workshop covers CSS Grid, Flexbox, media queries, and responsive typography.", date: "February 20, 2025", time: "10:00 AM - 3:00 PM", duration: "5 hours", location: "Design Center, New York", capacity: "20 participants", price: "$179", image: "/placeholder.svg?height=400&width=800", status: "Past", slug: "responsive-web-design-masterclass", testimonials: [ { name: "Emily Wong", role: "UI Designer", company: "CreativeAgency", quote: "This workshop bridged the gap between design and implementation for me. I now have a much better understanding of responsive design principles.", }, ], }, { id: 5, title: "State Management in React", description: "Explore different state management solutions in React and learn when to use each approach. This workshop covers Context API, Redux, Zustand, and Jotai.", date: "January 15, 2025", time: "9:00 AM - 1:00 PM", duration: "4 hours", location: "Online", capacity: "30 participants", price: "$149", image: "/placeholder.svg?height=400&width=800", status: "Past", slug: "state-management-react", testimonials: [ { name: "David Kim", role: "Frontend Engineer", company: "TechInnovate", quote: "The comparisons between different state management libraries were incredibly valuable. I now have a clear strategy for my applications.", }, ], }, ] export default function WorkshopsPage() { // Separate upcoming and past workshops const upcomingWorkshops = workshops.filter((workshop) => workshop.status === "Upcoming") const pastWorkshops = workshops.filter((workshop) => workshop.status === "Past") return (

Workshops

Hands-on learning experiences to help you master modern web development technologies and techniques.

{/* Upcoming Workshops */}

Upcoming Workshops 01

{upcomingWorkshops.map((workshop) => (

Upcoming

{workshop.title} {workshop.description}

{workshop.date}

{workshop.time} ({workshop.duration})

{workshop.location}

{workshop.capacity}

{workshop.price}

))}

{/* Past Workshops */}

Past Workshops 02

{pastWorkshops.map((workshop) => (

Past

{workshop.title} {workshop.description}

{workshop.date}

{workshop.location}

))}

{/* Testimonials */}

What Participants Say

{workshops.flatMap((workshop) => workshop.testimonials.map((testimonial, index) => (

"{testimonial.quote}"

{testimonial.name}

{testimonial.role}, {testimonial.company}

)), )}

{/* CTA */}

Want a Custom Workshop?

I also offer tailored workshops for teams and organizations. Get in touch to discuss your specific needs and goals.

) } [V0_FILE]typescriptreact:file="app/workshops/[slug]/page.tsx" import Link from "next/link" import Image from "next/image" import { ArrowLeft, Calendar, Clock, MapPin, Users } from "lucide-react" import { Button } from "@/components/ui/button" import { Badge } from "@/components/ui/badge" // This would typically come from a CMS or database const getWorkshop = (slug: string) => { return { title: "Advanced React Patterns", description: "Learn advanced React patterns and techniques to build scalable applications.", longDescription: `

This intensive workshop is designed for intermediate to advanced React developers who want to take their skills to the next level. We'll dive deep into advanced component patterns, state management strategies, and performance optimization techniques.

Throughout the workshop, you'll work on practical exercises and real-world examples that demonstrate how to implement these patterns in your own projects.

`, date: "April 15, 2025", time: "10:00 AM - 2:00 PM", duration: "4 hours", location: "Online", capacity: "30 participants", price: "$149", image: "/placeholder.svg?height=600&width=1200", status: "Upcoming", instructor: { name: "John Doe", bio: "Full Stack Developer with over 5 years of experience building React applications. John has worked with companies like TechCorp and StartupX, helping them implement scalable frontend architectures.", image: "/placeholder.svg?height=200&width=200", }, topics: [ "Component composition patterns", "Render props and higher-order components", "Custom hooks and hook composition", "Context API and state management", "Performance optimization techniques", "Testing advanced components", ], prerequisites: [ "Intermediate knowledge of React", "Familiarity with hooks and functional components", "Basic understanding of JavaScript ES6+", ], testimonials: [ { name: "Sarah Johnson", role: "Frontend Developer", company: "TechCorp", quote: "This workshop completely changed how I approach component design. Highly recommended!", }, { name: "Michael Chen", role: "Senior Developer", company: "StartupX", quote: "The perfect balance of theory and practice. I'm now confidently using these patterns in all my projects.", }, ], relatedWorkshops: [ { title: "TypeScript for JavaScript Developers", slug: "typescript-for-javascript-developers", image: "/placeholder.svg?height=200&width=300", }, { title: "State Management in React", slug: "state-management-react", image: "/placeholder.svg?height=200&width=300", }, ], } } export default function WorkshopPage({ params }: { params: { slug: string } }) { const workshop = getWorkshop(params.slug) return (

{/* Back Button */}

{/* Workshop Header */}

{workshop.status}

{workshop.title}

{workshop.description}

{workshop.date}

{workshop.time} ({workshop.duration})

{workshop.location}

{workshop.capacity}

{workshop.price}

{workshop.status === "Upcoming" && ( )}

{/* Workshop Content */}

About This Workshop

What You'll Learn

• {topic}

Prerequisites

• {prerequisite}

Your Instructor

{workshop.instructor.name}

{workshop.instructor.bio}

{workshop.status === "Upcoming" && (

Ready to Join?

Secure your spot now. Space is limited to ensure a quality learning experience.

)}

{/* Testimonials */} {workshop.testimonials && workshop.testimonials.length > 0 && (

What Participants Say

{workshop.testimonials.map((testimonial, index) => (

"{testimonial.quote}"

{testimonial.name}

{testimonial.role}, {testimonial.company}

))}

)} {/* Related Workshops */} {workshop.relatedWorkshops && workshop.relatedWorkshops.length > 0 && (

Related Workshops

{workshop.relatedWorkshops.map((relatedWorkshop, index) => (

{relatedWorkshop.title}

))}

)}

) } [V0_FILE]typescriptreact:file="app/projects/page.tsx" isEdit="true" import Link from "next/link" import Image from "next/image" import { Button } from "@/components/ui/button" import { Github } from "lucide-react" // Mock projects data const projects = [ { id: 1, title: "Typography Portfolio", description: "A minimalist portfolio website for a typography designer, featuring a clean layout and beautiful typography.", technologies: ["Next.js", "Tailwind CSS", "Framer Motion"], image: "/placeholder.svg?height=600&width=800", slug: "typography-portfolio", type: "hosted", // hosted project }, { id: 2, title: "E-commerce Platform", description: "A full-featured e-commerce platform with product management, cart functionality, and payment processing.", technologies: ["React", "Node.js", "MongoDB", "Stripe"], image: "/placeholder.svg?height=600&width=800", slug: "ecommerce-platform", type: "hosted", // hosted project }, { id: 3, title: "Content Management System", description: "A custom CMS built for a publishing company, allowing easy content creation and management.", technologies: ["Next.js", "GraphQL", "PostgreSQL"], image: "/placeholder.svg?height=600&width=800", slug: "content-management-system", type: "hosted", // hosted project }, { id: 4, title: "Algorithm Visualizer", description: "A tool for visualizing common algorithms like sorting, pathfinding, and graph traversal algorithms.", technologies: ["JavaScript", "Canvas API", "Data Structures"], githubUrl: "https://github.com/johndoe/algorithm-visualizer", image: "/placeholder.svg?height=600&width=800", type: "github", // GitHub-only project }, { id: 5, title: "Compiler Design Project", description: "A simple compiler implementation that demonstrates lexical analysis, parsing, and code generation.", technologies: ["C++", "LLVM", "Automata Theory"], githubUrl: "https://github.com/johndoe/mini-compiler", image: "/placeholder.svg?height=600&width=800", type: "github", // GitHub-only project }, { id: 6, title: "Operating System Kernel", description: "A minimal operating system kernel implementing basic process scheduling, memory management, and file systems.", technologies: ["C", "Assembly", "OS Theory"], githubUrl: "https://github.com/johndoe/mini-os", image: "/placeholder.svg?height=600&width=800", type: "github", // GitHub-only project }, ] export default function ProjectsPage() { // Separate hosted and GitHub-only projects const hostedProjects = projects.filter((project) => project.type === "hosted") const githubProjects = projects.filter((project) => project.type === "github") return (

Projects

A showcase of my work, featuring web applications, design projects, and experiments.

{/* Hosted Projects */}

Web Projects 01

{hostedProjects.map((project, index) => (

{(index + 1).toString().padStart(2, "0")}

{project.title}

{project.description}

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

))}

{/* GitHub-only Projects */}

Deep CS Projects 02

These projects focus on computer science fundamentals and systems programming. They're available on GitHub for code review and educational purposes.

{githubProjects.map((project) => (

{project.title}

{project.description}

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

))}

) } [V0_FILE]typescriptreact:file="components/ui/badge.tsx" import type * as React from "react" import { cva, type VariantProps } from "class-variance-authority" import { cn } from "@/lib/utils" const badgeVariants = cva( "inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2", { variants: { variant: { default: "border-transparent bg-primary text-primary-foreground hover:bg-primary/80", secondary: "border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80", destructive: "border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80", outline: "text-foreground", }, }, defaultVariants: { variant: "default", }, }, ) export interface BadgeProps extends React.HTMLAttributes, VariantProps {} function Badge({ className, variant, ...props }: BadgeProps) { return

} export { Badge, badgeVariants } [V0_FILE]typescriptreact:file="components/ui/card.tsx" import * as React from "react" import { cn } from "@/lib/utils" const Card = React.forwardRef>(({ className, ...props }, ref) => (

)) Card.displayName = "Card" const CardHeader = React.forwardRef>( ({ className, ...props }, ref) => (

), ) CardHeader.displayName = "CardHeader" const CardTitle = React.forwardRef>( ({ className, ...props }, ref) => (

), ) CardTitle.displayName = "CardTitle" const CardDescription = React.forwardRef>( ({ className, ...props }, ref) => (
), ) CardDescription.displayName = "CardDescription" const CardContent = React.forwardRef>( ({ className, ...props }, ref) =>
, ) CardContent.displayName = "CardContent" const CardFooter = React.forwardRef>( ({ className, ...props }, ref) => (
), ) CardFooter.displayName = "CardFooter" export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent } [V0_FILE]typescriptreact:file="components/ui/dropdown-menu.tsx" "use client" import * as React from "react" import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu" import { Check, ChevronRight, Circle } from "lucide-react" import { cn } from "@/lib/utils" const DropdownMenu = DropdownMenuPrimitive.Root const DropdownMenuTrigger = DropdownMenuPrimitive.Trigger const DropdownMenuGroup = DropdownMenuPrimitive.Group const DropdownMenuPortal = DropdownMenuPrimitive.Portal const DropdownMenuSub = DropdownMenuPrimitive.Sub const DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup const DropdownMenuSubTrigger = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef & { inset?: boolean } >(({ className, inset, children, ...props }, ref) => ( {children} )) DropdownMenuSubTrigger.displayName = DropdownMenuPrimitive.SubTrigger.displayName const DropdownMenuSubContent = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( )) DropdownMenuSubContent.displayName = DropdownMenuPrimitive.SubContent.displayName const DropdownMenuContent = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, sideOffset = 4, ...props }, ref) => ( )) DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName const DropdownMenuItem = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef & { inset?: boolean } >(({ className, inset, ...props }, ref) => ( )) DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName const DropdownMenuCheckboxItem = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, children, checked, ...props }, ref) => ( {children} )) DropdownMenuCheckboxItem.displayName = DropdownMenuPrimitive.CheckboxItem.displayName const DropdownMenuRadioItem = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, children, ...props }, ref) => ( {children} )) DropdownMenuRadioItem.displayName = DropdownMenuPrimitive.RadioItem.displayName const DropdownMenuLabel = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef & { inset?: boolean } >(({ className, inset, ...props }, ref) => ( )) DropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName const DropdownMenuSeparator = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( )) DropdownMenuSeparator.displayName = DropdownMenuPrimitive.Separator.displayName const DropdownMenuShortcut = ({ className, ...props }: React.HTMLAttributes) => { return } DropdownMenuShortcut.displayName = "DropdownMenuShortcut" export { DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuItem, DropdownMenuCheckboxItem, DropdownMenuRadioItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuGroup, DropdownMenuPortal, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuRadioGroup, }

Blog

{blogPosts[0].title}

{post.title}

The Importance of Typography

Choosing the Right Fonts

Creating Hierarchy

{post.title}

About {post.author}

Related Articles

{relatedPost.title}

{project.title}

Project Details

Client

Year

Role

Technologies

The Challenge

The Solution

Project Gallery

{project.nextProject.title}

John Doe

Full Stack Developer

About 01

Featured Projects 02

Project {project}

Workshops 03

Skills 04

Recent Articles 05

Typography in Web Design: Best Practices

Get In Touch 06

Workshops

Upcoming Workshops 01

Past Workshops 02

What Participants Say

Want a Custom Workshop?

{workshop.title}

About This Workshop

What You'll Learn

Prerequisites

Your Instructor

Ready to Join?

What Participants Say

Related Workshops

{relatedWorkshop.title}

Projects

Web Projects 01

{project.title}

Deep CS Projects 02

{project.title}