[V0_FILE]typescriptreact:file="components/Navbar.tsx" isMerged="true" "use client" import { useState, useEffect } from "react" import { Menu, X } from "lucide-react" import { motion } from "framer-motion" interface NavbarProps { activeSection: string } export default function Navbar({ activeSection }: NavbarProps) { const [isOpen, setIsOpen] = useState(false) const [scrolled, setScrolled] = useState(false) useEffect(() => { const handleScroll = () => { setScrolled(window.scrollY > 20) } window.addEventListener("scroll", handleScroll) return () => window.removeEventListener("scroll", handleScroll) }, []) const navLinks = [ { name: "Home", href: "#home" }, { name: "About", href: "#about" }, { name: "Skills", href: "#skills" }, { name: "Projects", href: "#projects" }, { name: "Contact", href: "#contact" }, ] return (

< Bharat Rathod /> {/* Desktop Navigation */} {/* Mobile Navigation Toggle */}

{/* Mobile Navigation Menu */} {isOpen && ( {navLinks.map((link) => ( setIsOpen(false)} className={`block px-4 py-2 text-sm hover:bg-[#30363d] ${ activeSection === link.href.substring(1) ? "text-[#58a6ff] bg-[#21262d]" : "text-gray-300" }`} > {link.name} ))} )}

) } [V0_FILE]typescriptreact:file="components/About.tsx" isMerged="true" "use client" import { motion } from "framer-motion" import { GraduationCap, Briefcase, Award } from "lucide-react" export default function About() { return (

About Me

Who I Am

I'm a passionate MERN Stack Developer with a strong foundation in building web applications. I specialize in creating responsive, user-friendly interfaces and robust backend systems.

With 1 year of professional experience, I've worked on various complex projects and third-party integrations. I'm constantly learning and adapting to new technologies to deliver the best solutions.

Education

Bachelor of Computer Applications (BCA)

Shree Swaminarayan College of Computer Science, Bhavnagar

Experience

MERN Stack Developer - 1 Year

Worked on complex projects and third-party integrations

Specialization

Full Stack Web Development

Building responsive and scalable web applications

) } [V0_FILE]typescriptreact:file="components/Contact.tsx" isMerged="true" "use client" import type React from "react" import { useState } from "react" import { motion } from "framer-motion" import { Send, Mail, Phone, MapPin } from "lucide-react" export default function Contact() { const [formData, setFormData] = useState({ name: "", email: "", subject: "", message: "", }) const [isSubmitting, setIsSubmitting] = useState(false) const [submitSuccess, setSubmitSuccess] = useState(false) const handleChange = (e: React.ChangeEvent) => { const { name, value } = e.target setFormData((prev) => ({ ...prev, [name]: value })) } const handleSubmit = (e: React.FormEvent) => { e.preventDefault() setIsSubmitting(true) // Simulate form submission setTimeout(() => { setIsSubmitting(false) setSubmitSuccess(true) setFormData({ name: "", email: "", subject: "", message: "" }) // Reset success message after 3 seconds setTimeout(() => { setSubmitSuccess(false) }, 3000) }, 1500) } return (

Get In Touch

Feel free to contact me for any work or suggestions. I'll get back to you as soon as possible.

Contact Information

Email

bharat@example.com

Phone

+91 98765 43210

Location

Bhavnagar, Gujarat

Follow Me On

Send Me a Message

Your Name

Your Email

Subject

Your Message

{submitSuccess && (

Your message has been sent successfully!

)}

) } [V0_FILE]typescriptreact:file="components/Footer.tsx" isMerged="true" "use client" import { motion } from "framer-motion" import { Heart } from "lucide-react" export default function Footer() { return ( ) } [V0_FILE]typescriptreact:file="app/layout.tsx" isMerged="true" import type React from "react" import "./globals.css" import { Inter } from "next/font/google" import { ThemeProvider } from "@/components/theme-provider" const inter = Inter({ subsets: ["latin"] }) export const metadata = { title: "Bharat Rathod - MERN Stack Developer", description: "Portfolio website of Bharat Rathod, MERN Stack Developer", } export default function RootLayout({ children, }: { children: React.ReactNode }) { return ( {children} ) } [V0_FILE]typescriptreact:file="tailwind.config.ts" isMerged="true" import type { Config } from "tailwindcss" const config = { darkMode: ["class"], content: [ "./pages/**/*.{ts,tsx}", "./components/**/*.{ts,tsx}", "./app/**/*.{ts,tsx}", "./src/**/*.{ts,tsx}", "*.{js,ts,jsx,tsx,mdx}", ], prefix: "", 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))", }, github: { dark: "#0d1117", darker: "#161b22", border: "#30363d", blue: "#58a6ff", green: "#7ee787", purple: "#d2a8ff", red: "#ff7b72", }, }, 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")], } satisfies Config export default config [V0_FILE]json:file="package.json" isMerged="true" { "name": "bharat-portfolio", "version": "0.1.0", "private": true, "scripts": { "dev": "next dev", "build": "next build", "start": "next start", "lint": "next lint" }, "dependencies": { "framer-motion": "^10.16.4", "lucide-react": "^0.292.0", "next": "14.0.3", "react": "^18", "react-dom": "^18", "react-type-animation": "^3.2.0" }, "devDependencies": { "@types/node": "^20", "@types/react": "^18", "@types/react-dom": "^18", "autoprefixer": "^10.0.1", "eslint": "^8", "eslint-config-next": "14.0.3", "postcss": "^8", "tailwindcss": "^3.3.0", "tailwindcss-animate": "^1.0.7", "typescript": "^5" } } [V0_FILE]typescriptreact:file="components/BackgroundAnimation.tsx" isEdit="true" "use client" import { useEffect, useRef } from "react" export default function BackgroundAnimation() { const canvasRef = useRef(null) useEffect(() => { const canvas = canvasRef.current if (!canvas) return const ctx = canvas.getContext("2d") if (!ctx) return // Set canvas dimensions const setCanvasDimensions = () => { canvas.width = window.innerWidth canvas.height = window.innerHeight } setCanvasDimensions() window.addEventListener("resize", setCanvasDimensions) // Create grid pattern similar to GitHub const gridSize = 30 const dotSize = 1 // Stars (occasional highlights) class Star { x: number y: number size: number opacity: number maxOpacity: number speed: number constructor() { this.x = Math.random() * canvas.width this.y = Math.random() * canvas.height this.size = Math.random() * 1.5 + 0.5 this.opacity = 0 this.maxOpacity = Math.random() * 0.5 + 0.2 this.speed = Math.random() * 0.02 + 0.005 } update() { this.opacity += this.speed if (this.opacity >= this.maxOpacity) { this.opacity = this.maxOpacity this.speed = -this.speed } else if (this.opacity <= 0) { this.x = Math.random() * canvas.width this.y = Math.random() * canvas.height this.opacity = 0 this.maxOpacity = Math.random() * 0.5 + 0.2 this.speed = Math.random() * 0.02 + 0.005 } } draw() { if (!ctx) return ctx.beginPath() ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2) ctx.fillStyle = `rgba(88, 166, 255, ${this.opacity})` ctx.fill() } } // Create stars const stars: Star[] = [] const numberOfStars = 50 for (let i = 0; i < numberOfStars; i++) { stars.push(new Star()) } // Animation loop function animate() { if (!ctx) return ctx.clearRect(0, 0, canvas.width, canvas.height) // Draw grid ctx.fillStyle = "rgba(48, 54, 61, 0.2)" for (let x = 0; x < canvas.width; x += gridSize) { for (let y = 0; y < canvas.height; y += gridSize) { ctx.beginPath() ctx.arc(x, y, dotSize, 0, Math.PI * 2) ctx.fill() } } // Update and draw stars for (let i = 0; i < stars.length; i++) { stars[i].update() stars[i].draw() } requestAnimationFrame(animate) } animate() return () => { window.removeEventListener("resize", setCanvasDimensions) } }, []) return