[V0_FILE]typescriptreact:file="app/page.tsx" isQuickEdit="true" isMerged="true" import Header from "@/components/header" import PersonalInfo from "@/components/personal-info" import WorkExperience from "@/components/work-experience" import Education from "@/components/education" import Skills from "@/components/skills" import Projects from "@/components/projects" import Achievements from "@/components/achievements" export default function Home() { return (

) } [V0_FILE]typescriptreact:file="components/education.tsx" isMerged="true" export default function Education() { const education = [ { degree: "Bachelor of Technology in Computer Science", school: "Jaypee University of Engineering and Technology, Guna", date: "August 2022 - June 2026", location: "Guna, Madhya Pradesh India", }, ] return (

Education

{education.map((edu, index) => (

{edu.degree}

{edu.school}

{edu.date}

{edu.location}

))}

) } [V0_FILE]typescriptreact:file="components/mouse-move-effect.tsx" isMerged="true" "use client" import { useEffect, useState } from "react" export default function MouseMoveEffect() { const [mousePosition, setMousePosition] = useState({ x: 0, y: 0 }) useEffect(() => { const handleMouseMove = (event: MouseEvent) => { setMousePosition({ x: event.clientX, y: event.clientY }) } window.addEventListener("mousemove", handleMouseMove) return () => { window.removeEventListener("mousemove", handleMouseMove) } }, []) return (

) } [V0_FILE]typescriptreact:file="app/layout.tsx" isFixed="true" isQuickEdit="true" isMerged="true" import "./globals.css" import { Inter } from "next/font/google" import type { Metadata } from "next" import MouseMoveEffect from "@/components/mouse-move-effect" import type React from "react" // Added import for React const inter = Inter({ subsets: ["latin"] }) export const metadata: Metadata = { title: "Dhruv Jain - Full Stack Developer | Next.js, React, AWS Expert", description: "Full Stack Developer specializing in Next.js, React, and AWS. Experience in building scalable web applications and automated deployment systems.", keywords: "Dhruv Jain, Full Stack Developer, Next.js, React, AWS, Docker, TypeScript", openGraph: { title: "Dhruv Jain - Full Stack Developer", description: "Full Stack Developer specializing in Next.js, React, and AWS", images: [ "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/WhatsApp%20Image%202025-01-30%20at%2015.08.21-pB4C5a6z7h2cUNgrtOAlbafxNHrBLT.jpeg", ], }, } export default function RootLayout({ children, }: { children: React.ReactNode }) { return ( {children} ) } [V0_FILE]typescriptreact:file="components/achievements.tsx" isMerged="true" export default function Achievements() { const achievements = [ "Solely managed the invitation and coordination of the chief guest for the University tech fest, successfully securing a prominent YouTuber with 500K+ subscribers.", "Organized 10+ technical and non-technical events in the University.", "GDSC JUET – Coordinated and led technical initiatives, workshops, and community engagement activities.", ] return (

Academic Achievements & Extra-Curricular

{achievement}

) } [V0_FILE]javascript: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}"], 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))", }, linkedin: "#0077b5", github: "#333", linktree: "#39E09B", call: "#25D366", mail: "#EA4335", }, 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="app/globals.css" isQuickEdit="true" isMerged="true" @tailwind base; @tailwind components; @tailwind utilities; @layer base { :root { --background: 0 0% 100%; --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: 221.2 83.2% 53.3%; --primary-foreground: 210 40% 98%; --secondary: 210 40% 96.1%; --secondary-foreground: 222.2 47.4% 11.2%; --muted: 210 40% 96.1%; --muted-foreground: 215.4 16.3% 46.9%; --accent: 210 40% 96.1%; --accent-foreground: 222.2 47.4% 11.2%; --destructive: 0 84.2% 60.2%; --destructive-foreground: 210 40% 98%; --border: 214.3 31.8% 91.4%; --input: 214.3 31.8% 91.4%; --ring: 221.2 83.2% 53.3%; --radius: 0.75rem; } .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: 217.2 91.2% 59.8%; --primary-foreground: 222.2 47.4% 11.2%; --secondary: 217.2 32.6% 17.5%; --secondary-foreground: 210 40% 98%; --muted: 217.2 32.6% 17.5%; --muted-foreground: 215 20.2% 65.1%; --accent: 217.2 32.6% 17.5%; --accent-foreground: 210 40% 98%; --destructive: 0 62.8% 30.6%; --destructive-foreground: 210 40% 98%; --border: 217.2 32.6% 17.5%; --input: 217.2 32.6% 17.5%; --ring: 224.3 76.3% 48%; } } @layer base { * { @apply border-border; } body { @apply bg-background text-foreground; } html, body { @apply overflow-x-hidden; } } [V0_FILE]typescriptreact:file="components/work-experience.tsx" isFixed="true" isEdit="true" isQuickEdit="true" isMerged="true" import { Button } from "@/components/ui/button" import { ExternalLink } from "lucide-react" export default function WorkExperience() { const experiences = [ { company: "Seagull Ventures Pvt. Ltd.", title: "Full Stack Developer Intern", date: "May 2025 - July 2025", location: "Bhopal, Madhya Pradesh, India", responsibilities: [ "Built and maintained internal web tools using MERN stack and CodeIgniter 3, reducing manual tracking workload by 40%.", "Architected responsive admin panels and dashboards that boosted internal team efficiency by 30%.", "Integrated REST APIs and refactored backend queries, resulting in a 25% performance gain.", "Technologies: React.js, Node.js, Express, MongoDB, PHP, CodeIgniter 3, MySQL, Git", ], }, { company: "Gold gums", title: "Fullstack Developer", date: "Dec 2024 - Jan 2025", location: "Sagour, Madhya Pradesh, India", liveLink: "https://www.goldgums.in/", responsibilities: [ "Designed and developed a fully functional website for an industrial adhesive manufacturer using Next.js and TypeScript.", "Engineered a high-performance, SEO-optimized frontend with Tailwind CSS, ensuring a seamless user experience.", "Leveraged Docker for efficient deployment and scalability, maintaining a streamlined development workflow.", ], }, { company: "VR-Estate", title: "Frontend Developer", date: "Jan 2025 - Feb 2025", location: "Lucknow, Uttar Pradesh, India", liveLink: "https://thevrestate.com", responsibilities: [ "Enhanced the frontend using Next.js and Tailwind CSS, improving performance and responsiveness.", "Redesigned the UI/UX in Figma, implementing a modern and intuitive design.", "Collaborated with the backend team to integrate RESTful APIs and real-time updates.", ], }, ] return (

Work Experience

{experiences.map((exp, index) => (

{exp.company}

{exp.title}

{exp.date}

{exp.location}

{resp}

{exp.liveLink && ( )}

))}

) } [V0_FILE]typescriptreact:file="components/mobile-nav.tsx" isEdit="true" isMerged="true" "use client" import { useState } from "react" import { Menu, Mail, Phone, Linkedin, Github, LinkIcon, Download } from "lucide-react" import { Button } from "@/components/ui/button" import { Sheet, SheetContent, SheetHeader, SheetTitle, SheetTrigger } from "@/components/ui/sheet" export default function MobileNav() { const [open, setOpen] = useState(false) const navItems = [ { name: "Experience", href: "#experience" }, { name: "Education", href: "#education" }, { name: "Projects", href: "#projects" }, { name: "Skills", href: "#skills" }, { name: "Blog", href: "https://blog.csedhruv.online", external: true }, ] const handleDownload = () => { const link = document.createElement("a") link.href = "/resume.pdf" link.download = "Dhruv_Jain_Resume.pdf" document.body.appendChild(link) link.click() document.body.removeChild(link) } return ( Menu ) } [V0_FILE]jpg:file="public/images/20251205-140818.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/20251205_140818-5jVW5G9LsGSEC2Gf015kZYtTqGEwvd.jpg" isMerged="true" [V0_FILE]json:file="package.json" isMerged="true" { "name": "my-v0-project", "version": "0.1.0", "private": true, "scripts": { "dev": "next dev", "build": "next build", "start": "next start", "lint": "eslint ." }, "dependencies": { "@hookform/resolvers": "^3.10.0", "@radix-ui/react-accordion": "1.2.2", "@radix-ui/react-alert-dialog": "1.1.4", "@radix-ui/react-aspect-ratio": "1.1.1", "@radix-ui/react-avatar": "1.1.2", "@radix-ui/react-checkbox": "1.1.3", "@radix-ui/react-collapsible": "1.1.2", "@radix-ui/react-context-menu": "2.2.4", "@radix-ui/react-dialog": "1.1.4", "@radix-ui/react-dropdown-menu": "2.1.4", "@radix-ui/react-hover-card": "1.1.4", "@radix-ui/react-label": "2.1.1", "@radix-ui/react-menubar": "1.1.4", "@radix-ui/react-navigation-menu": "1.2.3", "@radix-ui/react-popover": "1.1.4", "@radix-ui/react-progress": "1.1.1", "@radix-ui/react-radio-group": "1.2.2", "@radix-ui/react-scroll-area": "1.2.2", "@radix-ui/react-select": "2.1.4", "@radix-ui/react-separator": "1.1.1", "@radix-ui/react-slider": "1.2.2", "@radix-ui/react-slot": "1.1.1", "@radix-ui/react-switch": "1.1.2", "@radix-ui/react-tabs": "1.1.2", "@radix-ui/react-toast": "1.2.4", "@radix-ui/react-toggle": "1.1.1", "@radix-ui/react-toggle-group": "1.1.1", "@radix-ui/react-tooltip": "1.1.6", "@vercel/analytics": "1.3.1", "autoprefixer": "^10.4.20", "class-variance-authority": "^0.7.1", "clsx": "^2.1.1", "cmdk": "1.0.4", "date-fns": "4.1.0", "embla-carousel-react": "8.5.1", "input-otp": "1.4.1", "lucide-react": "^0.454.0", "next": "15.5.9", "next-themes": "^0.4.6", "react": "19.2.0", "react-day-picker": "9.8.0", "react-dom": "19.2.0", "react-hook-form": "^7.60.0", "react-resizable-panels": "^2.1.7", "recharts": "2.15.4", "sonner": "^1.7.4", "tailwind-merge": "^3.3.1", "tailwindcss-animate": "^1.0.7", "vaul": "^1.1.2", "zod": "3.25.76", "react-icons": "5.5.0" }, "devDependencies": { "@types/node": "^22", "@types/react": "^19", "@types/react-dom": "^19", "postcss": "^8.5", "tailwindcss": "^3.4.17", "typescript": "^5" } } [V0_FILE]jpg:file="public/images/20251205-140839.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/20251205_140839-AoS7VoPCRsKukBKh2RCQOS2ijAgcQP.jpg" isMerged="true" [V0_FILE]typescriptreact:file="components/skills.tsx" isMerged="true" import { SiJavascript, SiTypescript, SiReact, SiNextdotjs, SiNodedotjs, SiMongodb, SiMysql, SiPrisma, SiTailwindcss, SiBootstrap, SiGit, SiDocker, SiRedis, SiCplusplus, SiC, SiHtml5, SiExpress, SiPython, SiPostgresql, SiGithub, SiJenkins, SiKubernetes, } from "react-icons/si" import { FaJava, FaCss3Alt, FaAws } from "react-icons/fa6" const skillsConfig = [ { name: "JavaScript", icon: SiJavascript, color: "#F7DF1E" }, { name: "TypeScript", icon: SiTypescript, color: "#3178C6" }, { name: "React", icon: SiReact, color: "#61DAFB" }, { name: "Next.js", icon: SiNextdotjs, color: "#ffffff", background: "#000000" }, { name: "HTML", icon: SiHtml5, color: "#E34F26" }, { name: "CSS", icon: FaCss3Alt, color: "#1572B6" }, { name: "Express", icon: SiExpress, color: "#ffffff", background: "#000000" }, { name: "Java", icon: FaJava, color: "#007396" }, { name: "Python", icon: SiPython, color: "#3776AB" }, { name: "C++", icon: SiCplusplus, color: "#00599C" }, { name: "C", icon: SiC, color: "#A8B9CC" }, { name: "MySQL", icon: SiMysql, color: "#4479A1" }, { name: "Prisma", icon: SiPrisma, color: "#2D3748" }, { name: "MongoDB", icon: SiMongodb, color: "#47A248" }, { name: "PostgreSQL", icon: SiPostgresql, color: "#336791" }, { name: "Tailwind", icon: SiTailwindcss, color: "#06B6D4" }, { name: "Bootstrap", icon: SiBootstrap, color: "#7952B3" }, { name: "Git", icon: SiGit, color: "#F05032" }, { name: "GitHub", icon: SiGithub, color: "#ffffff", background: "#000000" }, { name: "Node.js", icon: SiNodedotjs, color: "#339933" }, { name: "Docker", icon: SiDocker, color: "#2496ED" }, { name: "Redis", icon: SiRedis, color: "#DC382D" }, { name: "AWS", icon: FaAws, color: "#FF9900" }, { name: "Jenkins", icon: SiJenkins, color: "#D33833" }, { name: "Kubernetes", icon: SiKubernetes, color: "#326CE5" }, ] export default function Skills() { return (

Technical Skills

{skillsConfig.map((skill) => (

{skill.name}

))}

) } [V0_FILE]typescriptreact:file="components/personal-info.tsx" "use client" import { Mail, Phone, Linkedin, Github, Link, BookOpen } from "lucide-react" import Image from "next/image" export default function PersonalInfo() { return (

Dhruv Jain

Full Stack Developer & DevOps Engineer

LinkedIn GitHub Blog Linktree

+91 8962085375 dhruvgoldgums@gmail.com

) } [V0_FILE]typescriptreact:file="components/projects.tsx" "use client" import { useState } from "react" import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogTrigger } from "@/components/ui/dialog" import { Button } from "@/components/ui/button" import { Play, Github, ExternalLink, FileText } from "lucide-react" export default function Projects() { const [selectedVideo, setSelectedVideo] = useState("") const projects = [ { name: "AI Educator", description: "AI-powered interview tool that improved student mock interview success rates by 30%", technologies: ["Next.js", "React", "TypeScript", "AWS Polly", "AssemblyAI", "Convex"], link: "https://github.com/HindzStark/Ai-interviewer", liveLink: "https://educator.csedhruv.online/", highlights: [ "Real-time voice transcription and NLP-based feedback", "Persistent session tracking and analytics with Convex", "Scalable and accessible UI with Next.js and Tailwind CSS", "Reduced user dropout during sessions by 20%", ], }, { name: "Automated Jenkins Flask App", description: "Multi-agent Jenkins pipeline to automate build and deployment for Flask–MySQL app", technologies: ["Jenkins", "Docker", "GitHub", "AWS", "Flask"], link: "https://github.com/HindzStark/jenkins-flask-app", highlights: [ "Agent-1 builds distroless Docker image and pushes to DockerHub", "Agent-2 pulls and deploys via Docker Compose", "GitHub Webhooks for automatic builds, reducing manual effort by 90%", "Email notifications on failure for rapid issue detection", ], }, { name: "DEPLOYER", description: "Automated deployment platform with custom subdomain support", technologies: ["AWS", "Docker", "Node.js", "Next.js", "TypeScript", "Redis"], link: "https://github.com/HindzStark/Deployer", videoUrl: "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/Deployer-recording-yUoK3SFVuFbbHWU49znf3RZKsGvJXk.mp4", highlights: [ "AWS services integration (ECS, ECR, S3)", "Real-time log streaming with Redis", "Custom subdomain deployment", "User-friendly deployment interface", ], }, { name: "Dyslexia Detection", description: "AI-powered handwriting analysis for dyslexia detection", technologies: ["Python", "React", "Neural Networks", "Image Processing"], link: "https://github.com/ShrivastavaAditya7/Dyslexia_Detection_app_with_react", liveLink: "https://react-front-dyslexia-latest.onrender.com/", highlights: [ "Neural network-based analysis", "Real-time handwriting processing", "Intuitive result visualization", ], }, { name: "Bookstore", description: "Full-stack e-commerce platform for books", technologies: ["MongoDB", "Express.js", "React", "Node.js"], link: "https://github.com/HindzStark/Bookstore", liveLink: "https://book.csedhruv.online/", highlights: [ "RESTful API architecture", "User authentication system", "Shopping cart functionality", "Responsive design", ], }, ] return (

Featured Projects

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

{project.name}

{project.liveLink && ( )}

{project.description}

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

{highlight}

{project.videoUrl && ( )}

))}

) } [V0_FILE]typescriptreact:file="components/header.tsx" export default function Header() { return (

Dhruv Jain

) }