[V0_FILE]typescriptreact:file="app/layout.tsx" import "./globals.css" import { Inter } from "next/font/google" import type React from "react" import { ThemeProvider } from "@/components/theme-provider" import { ModeToggle } from "@/components/mode-toggle" const inter = Inter({ subsets: ["latin"] }) export const metadata = { title: "Usman Zafar - MERN Stack Developer", description: "Portfolio of Usman Zafar, a MERN Stack Developer specializing in full-stack web applications.", } export default function RootLayout({ children, }: { children: React.ReactNode }) { return (

{children} ) } [V0_FILE]typescriptreact:file="app/page.tsx" import Hero from "./components/Hero" import About from "./components/About" import Experience from "./components/Experience" import Skills from "./components/Skills" import Services from "./components/Services" import Education from "./components/Education" import Contact from "./components/Contact" import FloatingNav from "./components/floating-nav" export default function Home() { return (

) } [V0_FILE]typescriptreact:file="app/components/Header.tsx" "use client" import { useState, useEffect } from "react" import { useTheme } from "next-themes" export default function Header() { const [mounted, setMounted] = useState(false) const [isVisible, setIsVisible] = useState(true) const [lastScrollY, setLastScrollY] = useState(0) const [activeSection, setActiveSection] = useState("home") const { theme } = useTheme() useEffect(() => setMounted(true), []) useEffect(() => { const handleScroll = () => { const currentScrollY = window.scrollY setIsVisible(currentScrollY < lastScrollY || currentScrollY < 100) setLastScrollY(currentScrollY) } const handleIntersection = (entries: IntersectionObserverEntry[]) => { entries.forEach((entry) => { if (entry.isIntersecting) { setActiveSection(entry.target.id) } }) } window.addEventListener("scroll", handleScroll) const observer = new IntersectionObserver(handleIntersection, { threshold: 0.3, }) document.querySelectorAll("section[id]").forEach((section) => { observer.observe(section) }) return () => { window.removeEventListener("scroll", handleScroll) observer.disconnect() } }, [lastScrollY]) if (!mounted) return null const scrollToSection = (sectionId: string) => { const element = document.getElementById(sectionId) if (element) { const offset = 80 // Height of the header const elementPosition = element.getBoundingClientRect().top const offsetPosition = elementPosition + window.pageYOffset - offset window.scrollTo({ top: offsetPosition, behavior: "smooth", }) } } return (

) } [V0_FILE]typescriptreact:file="app/components/Hero.tsx" "use client" import Image from "next/image" import { GitlabIcon as GitHub, Linkedin, Mail, ArrowDown } from "lucide-react" import { motion } from "framer-motion" const CodePattern = () => ( ) export default function Hero() { return (

{/* Programming-themed Background */}

{/* Animated Gradient */}

Usman Zafar

MERN Stack Developer

Crafting exceptional digital experiences with modern web technologies. Specialized in building scalable full-stack applications using MongoDB, Express.js, React, and Node.js.

document.getElementById("about")?.scrollIntoView({ behavior: "smooth" })} className="inline-flex items-center gap-2 px-6 py-3 bg-gradient-to-r from-blue-600 to-purple-600 text-white rounded-full hover:from-blue-700 hover:to-purple-700 transition-all duration-300 shadow-lg hover:shadow-xl" whileHover={{ scale: 1.05 }} whileTap={{ scale: 0.95 }} > Learn More

{/* Decorative Elements */}

) } [V0_FILE]typescriptreact:file="app/components/About.tsx" "use client" import { motion } from "framer-motion" import { Code, Database, Server, Zap } from "lucide-react" import Image from "next/image" export default function About() { const skills = [ { icon:

, title: "Frontend", description: "React, Next.js, Redux" },
    { icon: , title: "Backend", description: "Node.js, Express, Fastify" },
    { icon: , title: "Database", description: "MongoDB, Mongoose" },
    { icon: , title: "Performance", description: "Optimization, Caching" },
  ]

  return (
    
      
        
          About Me
        
        
          
            
              As a passionate MERN Stack Developer, I specialize in building robust and scalable web applications. With
              a strong foundation in MongoDB, Express.js, React, and Node.js, I create seamless full-stack solutions
              that deliver exceptional user experiences.
            
            
              My expertise extends to modern frameworks like Next.js and state management tools like Redux. I'm
              committed to writing clean, efficient code and staying up-to-date with the latest industry trends to
              deliver cutting-edge solutions for my clients.
            
          
          
            {skills.map((skill, index) => (
              
                {skill.icon}
                {skill.title}
                {skill.description}
              
            ))}
          
        
      
      
        
      
    
  )
}

[V0_FILE]typescriptreact:file="app/components/Experience.tsx"
"use client"

import { Briefcase, Calendar, MapPin, Globe } from "lucide-react"
import Image from "next/image"
import { motion } from "framer-motion"
import AnimatedSectionHeader from "./AnimatedSectionHeader"

export default function Experience() {
  const experiences = [
    {
      company: "Freelance",
      location: "Remote",
      period: "2024 - Present",
      role: "MERN Stack Developer",
      responsibilities: [
        "Developing custom web applications for international clients",
        "Building responsive and scalable frontend interfaces with React",
        "Implementing secure backend systems with Node.js and Express",
        "Creating RESTful APIs and managing MongoDB databases",
        "Collaborating with clients to deliver high-quality solutions",
      ],
    },
    {
      company: "Salaba Fasteners",
      location: "Saudi Arabia (Hybrid)",
      period: "2024 - Present",
      role: "MERN Stack Developer",
      responsibilities: [
        "Developed full-fledged ERP system using MERN stack",
        "Designed and implemented RESTful APIs",
        "Created responsive interfaces with React.js and Redux",
        "Implemented secure authentication systems",
        "Utilized WebSockets for real-time features",
      ],
    },
    {
      company: "TechVention",
      location: "Lahore, Pakistan",
      period: "2022 - 2024",
      role: "Software Engineer",
      responsibilities: [
        "Migrated codebase to Fastify with TypeScript",
        "Implemented OOP concepts for scalability",
        "Built backend REST API and OAuth",
        "Integrated third-party APIs",
        "Implemented i18n features",
      ],
    },
  ]

  return (
    
      
        
        
          {experiences.map((exp, index) => (
            
              
              
                
                  {exp.company === "Freelance" ?  : null}
                  {exp.company}
                
                
                  
                  {exp.location}
                
                
                  
                  {exp.period}
                
                
                  
                  {exp.role}
                
                
                  {exp.responsibilities.map((resp, idx) => (
                    
                      •
                      {resp}
                    
                  ))}
                
              
            
          ))}
        
      
      
        
      
    
  )
}

[V0_FILE]typescriptreact:file="app/components/Education.tsx" isFixed="true" isQuickEdit="true"
"use client"

import { GraduationCap, Calendar, Award } from "lucide-react"
import Image from "next/image"
import AnimatedSectionHeader from "./AnimatedSectionHeader"
import { motion } from "framer-motion"

export default function Education() {
  const education = [
    {
      degree: "Bachelor's Degree in Computer Science",
      institution: "GC University Faisalabad",
      period: "2018 – 2022",
      achievements: [
        "Graduated with honors",
        "Specialized in Web Technologies and Artificial Intelligence",
        "Completed capstone project on 'Intelligent Web Application for Healthcare'",
      ],
    },
  ]

  return (
    
      
        
        
          {education.map((edu, index) => (
            
              
              
                
                  
                  {edu.degree}
                
                {edu.institution}
                
                  
                  {edu.period}
                
                
                  
                  Key Achievements:
                
                
                  {edu.achievements.map((achievement, idx) => (
                    
                      {achievement}
                    
                  ))}
                
              
            
          ))}
        
      
      
        
      
    
  )
}

[V0_FILE]typescriptreact:file="app/components/Contact.tsx"
"use client"

import { useState } from "react"
import { motion } from "framer-motion"
import { Mail, MapPin, Phone, Send, Loader2 } from "lucide-react"
import Image from "next/image"
import { useForm } from "react-hook-form"
import { zodResolver } from "@hookform/resolvers/zod"
import * as z from "zod"

const formSchema = z.object({
  name: z.string().min(2, "Name must be at least 2 characters"),
  email: z.string().email("Please enter a valid email address"),
  subject: z.string().min(5, "Subject must be at least 5 characters"),
  message: z.string().min(10, "Message must be at least 10 characters"),
})

type FormData = z.infer

export default function Contact() {
  const [isSubmitting, setIsSubmitting] = useState(false)
  const [submitSuccess, setSubmitSuccess] = useState(false)

  const {
    register,
    handleSubmit,
    reset,
    formState: { errors },
  } = useForm({
    resolver: zodResolver(formSchema),
  })

  const onSubmit = async (data: FormData) => {
    setIsSubmitting(true)
    try {
      // Here you would typically send the form data to your backend
      await new Promise((resolve) => setTimeout(resolve, 1000)) // Simulate API call
      setSubmitSuccess(true)
      reset()
      setTimeout(() => setSubmitSuccess(false), 3000)
    } catch (error) {
      console.error("Error submitting form:", error)
    } finally {
      setIsSubmitting(false)
    }
  }

  return (
    
      
        
          Get in Touch
        
        
          
            
              Contact Information
              
                
                  
                  musmanzafar53@gmail.com
                
                
                  
                  +92-305-5356766
                
                
                  
                  Lahore, Pakistan
                
              
            
          
          
            
              
                
                  
                    Name
                  
                  
                  {errors.name && {errors.name.message}}
                
                
                  
                    Email
                  
                  
                  {errors.email && {errors.email.message}}
                
              
              
                
                  Subject
                
                
                {errors.subject && {errors.subject.message}}
              
              
                
                  Message
                
                
                {errors.message && {errors.message.message}}
              
              
                
              
              {submitSuccess && (
                
                  Message sent successfully!
                
              )}
            
          
        
      
      
        
      
    
  )
}

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

html {
  scroll-behavior: smooth;
}

body {
  @apply text-gray-800 dark:text-gray-200 bg-white dark:bg-gray-900 transition-colors duration-300;
}

@layer utilities {
  .animate-gradient-x {
    animation: gradient-x 15s ease infinite;
  }

  @keyframes gradient-x {
    0%,
    100% {
      background-position: 0% 50%;
    }
    50% {
      background-position: 100% 50%;
    }
  }
}

@layer base {
  :root {
    --background: 0 0% 100%;
    --foreground: 222.2 84% 4.9%;

    --muted: 210 40% 96.1%;
    --muted-foreground: 215.4 16.3% 46.9%;

    --popover: 0 0% 100%;
    --popover-foreground: 222.2 84% 4.9%;

    --card: 0 0% 100%;
    --card-foreground: 222.2 84% 4.9%;

    --border: 214.3 31.8% 91.4%;
    --input: 214.3 31.8% 91.4%;

    --primary: 222.2 47.4% 11.2%;
    --primary-foreground: 210 40% 98%;

    --secondary: 210 40% 96.1%;
    --secondary-foreground: 222.2 47.4% 11.2%;

    --accent: 210 40% 96.1%;
    --accent-foreground: 222.2 47.4% 11.2%;

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

    --ring: 215 20.2% 65.1%;

    --radius: 0.5rem;
  }

  .dark {
    --background: 222.2 84% 4.9%;
    --foreground: 210 40% 98%;

    --muted: 217.2 32.6% 17.5%;
    --muted-foreground: 215 20.2% 65.1%;

    --popover: 222.2 84% 4.9%;
    --popover-foreground: 210 40% 98%;

    --card: 222.2 84% 4.9%;
    --card-foreground: 210 40% 98%;

    --border: 217.2 32.6% 17.5%;
    --input: 217.2 32.6% 17.5%;

    --primary: 210 40% 98%;
    --primary-foreground: 222.2 47.4% 11.2%;

    --secondary: 217.2 32.6% 17.5%;
    --secondary-foreground: 210 40% 98%;

    --accent: 217.2 32.6% 17.5%;
    --accent-foreground: 210 40% 98%;

    --destructive: 0 62.8% 30.6%;
    --destructive-foreground: 0 85.7% 97.3%;

    --ring: 217.2 32.6% 17.5%;
  }
}

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

[V0_FILE]javascript:file="postcss.config.js"
module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
}

[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 {children}
}

[V0_FILE]typescriptreact:file="components/mode-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 ModeToggle() {
  const { setTheme } = useTheme()

  return (
    
      
        
      
      
         setTheme("light")}>Light
         setTheme("dark")}>Dark
         setTheme("system")}>System
      
    
  )
}

[V0_FILE]typescriptreact:file="app/components/AnimatedSectionHeader.tsx"
"use client"

import { motion } from "framer-motion"

interface AnimatedSectionHeaderProps {
  title: string
}

export default function AnimatedSectionHeader({ title }: AnimatedSectionHeaderProps) {
  return (
    
      {title}
    
  )
}

[V0_FILE]typescriptreact:file="app/components/Services.tsx"
"use client"

import { motion } from "framer-motion"
import { Code, Layout, Server, Smartphone } from "lucide-react"
import Image from "next/image"

export default function Services() {
  const services = [
    {
      icon: ,
      title: "Web Application Development",
      description: "Custom web applications built with React and Next.js, focusing on performance and user experience.",
    },
    {
      icon: ,
      title: "Backend Development",
      description: "Robust and scalable server-side solutions using Node.js, Express, and Fastify.",
    },
    {
      icon: ,
      title: "API Development",
      description:
        "RESTful and GraphQL API design and implementation for seamless data flow between client and server.",
    },
    {
      icon: ,
      title: "Responsive Design",
      description: "Mobile-first, responsive web designs that work flawlessly across all devices and screen sizes.",
    },
  ]

  return (
    
      
        
          My Services
        
        
          {services.map((service, index) => (
            
              
                {service.icon}
                {service.title}
              
              {service.description}
            
          ))}
        
      
      
        
      
    
  )
}

[V0_FILE]typescriptreact:file="utils/smoothScroll.ts"
export const smoothScrollTo = (elementId: string) => {
  const element = document.getElementById(elementId)
  if (element) {
    element.scrollIntoView({
      behavior: "smooth",
      block: "start",
    })
  }
}

[V0_FILE]typescriptreact:file="components/FloatingNav.tsx"
"use client"

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

const sections = [
  { id: "hero", label: "Home" },
  { id: "about", label: "About" },
  { id: "experience", label: "Experience" },
  { id: "skills", label: "Skills" },
  { id: "services", label: "Services" },
  { id: "education", label: "Education" },
  { id: "contact", label: "Contact" },
]

export default function FloatingNav() {
  const [activeSection, setActiveSection] = useState("hero")

  useEffect(() => {
    const observer = new IntersectionObserver(
      (entries) => {
        entries.forEach((entry) => {
          if (entry.isIntersecting) {
            setActiveSection(entry.target.id)
          }
        })
      },
      { threshold: 0.5 },
    )

    sections.forEach(({ id }) => {
      const element = document.getElementById(id)
      if (element) observer.observe(element)
    })

    return () => observer.disconnect()
  }, [])

  return (
    
      
        {sections.map(({ id, label }) => (
          
        ))}
      
    
  )
}

[V0_FILE]typescriptreact:file="app/components/floating-nav.tsx"
"use client"

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

const sections = [
  { id: "hero", label: "Home" },
  { id: "about", label: "About" },
  { id: "experience", label: "Experience" },
  { id: "skills", label: "Skills" },
  { id: "services", label: "Services" },
  { id: "education", label: "Education" },
  { id: "contact", label: "Contact" },
]

export default function FloatingNav() {
  const [activeSection, setActiveSection] = useState("hero")

  useEffect(() => {
    const observer = new IntersectionObserver(
      (entries) => {
        entries.forEach((entry) => {
          if (entry.isIntersecting) {
            setActiveSection(entry.target.id)
          }
        })
      },
      { threshold: 0.5 },
    )

    sections.forEach(({ id }) => {
      const element = document.getElementById(id)
      if (element) observer.observe(element)
    })

    return () => observer.disconnect()
  }, [])

  return (
    
      
        {sections.map(({ id, label }) => (
          
        ))}
      
    
  )
}

[V0_FILE]typescriptreact:file="app/components/Skills.tsx"
"use client"

import { motion } from "framer-motion"
import { Code, Database, Server, Layout, GitBranch, Terminal, Layers, Cpu, Globe, Workflow } from "lucide-react"
import AnimatedSectionHeader from "./AnimatedSectionHeader"

const SkillIcon = ({ icon: Icon, color }: { icon: any; color: string }) => (
  
    
  
)

const skills = [
  {
    icon: Code,
    name: "Frontend Development",
    tech: "React.js, Next.js",
    description:
      "Building responsive and interactive user interfaces with modern React features and Next.js for optimal performance.",
    color: "text-blue-500",
  },
  {
    icon: Server,
    name: "Backend Development",
    tech: "Node.js, Express, Fastify",
    description: "Creating robust server-side applications with focus on scalability and clean architecture.",
    color: "text-green-500",
  },
  {
    icon: Database,
    name: "Database Management",
    tech: "MongoDB, Mongoose",
    description: "Designing and implementing efficient database schemas and queries for optimal data management.",
    color: "text-purple-500",
  },
  {
    icon: Layout,
    name: "UI/UX Design",
    tech: "Tailwind CSS, Material UI",
    description: "Crafting beautiful and intuitive user interfaces with modern design principles and frameworks.",
    color: "text-pink-500",
  },
  {
    icon: GitBranch,
    name: "Version Control",
    tech: "Git, GitHub",
    description: "Managing code versions efficiently with Git and collaborating effectively through GitHub.",
    color: "text-orange-500",
  },
  {
    icon: Terminal,
    name: "TypeScript",
    tech: "TypeScript, JavaScript",
    description: "Writing type-safe code for better maintainability and developer experience.",
    color: "text-yellow-500",
  },
  {
    icon: Layers,
    name: "State Management",
    tech: "Redux, Context API",
    description: "Managing complex application state with modern state management solutions.",
    color: "text-indigo-500",
  },
  {
    icon: Cpu,
    name: "API Development",
    tech: "REST, GraphQL",
    description: "Designing and implementing efficient APIs for seamless data communication.",
    color: "text-red-500",
  },
  {
    icon: Globe,
    name: "Web Performance",
    tech: "Optimization, SEO",
    description: "Optimizing web applications for speed, accessibility, and search engine visibility.",
    color: "text-teal-500",
  },
  {
    icon: Workflow,
    name: "Agile Methodologies",
    tech: "Scrum, Kanban",
    description: "Working efficiently in agile environments with focus on continuous delivery.",
    color: "text-cyan-500",
  },
]

export default function Skills() {
  return (
    
      {/* Gradient Background */}
      

      {/* Skill Illustrations */}
      
        
      

      
        
        
          {skills.map((skill, index) => (
            
              
                
                  
                  
                    
                      {skill.name}
                    
                    {skill.tech}
                  
                
                {skill.description}
              
            
          ))}
        
      
    
  )
}

[V0_FILE]javascript:file="tailwind.config.js"
/** @type {import('tailwindcss').Config} */
module.exports = {
  darkMode: ["class"],
  content: [
    "./pages/**/*.{js,ts,jsx,tsx,mdx}",
    "./components/**/*.{js,ts,jsx,tsx,mdx}",
    "./app/**/*.{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))",
        },
      },
      borderRadius: {
        lg: "var(--radius)",
        md: "calc(var(--radius) - 2px)",
        sm: "calc(var(--radius) - 4px)",
      },
    },
  },
  plugins: [require("tailwindcss-animate")],
}

Usman Zafar

MERN Stack Developer

{skill.title}

{exp.company === "Freelance" ? : null} {exp.company}

{edu.degree}

Key Achievements:

Contact Information

{service.title}

{skill.name}