83:I[903690,["/chat-static/_next/static/immutable/chunks/04hbfmh6hbqss.js","/chat-static/_next/static/immutable/chunks/39rg-vyko_oef.js","/chat-static/_next/static/immutable/chunks/3xk_70lpaq4rr.js","/chat-static/_next/static/immutable/chunks/1sitju1_d7il0.js","/chat-static/_next/static/immutable/chunks/0sf49n39-457l.js","/chat-static/_next/static/immutable/chunks/0m1kq5rn-0ww-.js","/chat-static/_next/static/immutable/chunks/1lu-4z5bhhz4h.js","/chat-static/_next/static/immutable/chunks/1p5y_zcqvqq8d.js","/chat-static/_next/static/immutable/chunks/01baumogimg6p.js","/chat-static/_next/static/immutable/chunks/258a4ne6m_k4p.js","/chat-static/_next/static/immutable/chunks/0ko_j9ax7y6x0.js","/chat-static/_next/static/immutable/chunks/1nyef2mn0xr6l.js","/chat-static/_next/static/immutable/chunks/0wi_45vocl_-p.js","/chat-static/_next/static/immutable/chunks/0-vsrzeceac3v.js","/chat-static/_next/static/immutable/chunks/2e3p8j58j-2ac.js","/chat-static/_next/static/immutable/chunks/2ozwdzttq5i1f.js","/chat-static/_next/static/immutable/chunks/0ewqarb2bfu8h.js","/chat-static/_next/static/immutable/chunks/2ic8lww1-lsd6.js","/chat-static/_next/static/immutable/chunks/3knm8li7yvqyy.js","/chat-static/_next/static/immutable/chunks/3ishjhw9r5hu6.js","/chat-static/_next/static/immutable/chunks/219cqn3u0bpkg.js","/chat-static/_next/static/immutable/chunks/00hu8fdgh1j4v.js","/chat-static/_next/static/immutable/chunks/0xi2c3jaocjvt.js","/chat-static/_next/static/immutable/chunks/0jv8_sp12utf0.js","/chat-static/_next/static/immutable/chunks/1e462i1ma5hqc.js","/chat-static/_next/static/immutable/chunks/39g-v5gn16xpu.js","/chat-static/_next/static/immutable/chunks/3e68w17lftq23.js","/chat-static/_next/static/immutable/chunks/022gnoebsh94r.js","/chat-static/_next/static/immutable/chunks/2lb8tgn9smhmm.js","/chat-static/_next/static/immutable/chunks/1ybmqoirdq34w.js","/chat-static/_next/static/immutable/chunks/1erg8g21a3w0b.js","/chat-static/_next/static/immutable/chunks/1_qpltudrcx39.js","/chat-static/_next/static/immutable/chunks/3h0z-hp8-yi1i.js","/chat-static/_next/static/immutable/chunks/0p9rde4dp8mlf.js","/chat-static/_next/static/immutable/chunks/12iw2o65f5diw.js","/chat-static/_next/static/immutable/chunks/3fnbcspmxidog.js","/chat-static/_next/static/immutable/chunks/0qmfntxs_4897.js","/chat-static/_next/static/immutable/chunks/11jpx637g96mg.js","/chat-static/_next/static/immutable/chunks/3cyqm8u9n5jqw.js","/chat-static/_next/static/immutable/chunks/25bs_fkkq5ymp.js","/chat-static/_next/static/immutable/chunks/21e0q2tppm01j.js"],"ExplicitChatIdProvider"] 84:I[838238,["/chat-static/_next/static/immutable/chunks/04hbfmh6hbqss.js","/chat-static/_next/static/immutable/chunks/39rg-vyko_oef.js","/chat-static/_next/static/immutable/chunks/3xk_70lpaq4rr.js","/chat-static/_next/static/immutable/chunks/1sitju1_d7il0.js","/chat-static/_next/static/immutable/chunks/0sf49n39-457l.js","/chat-static/_next/static/immutable/chunks/0m1kq5rn-0ww-.js","/chat-static/_next/static/immutable/chunks/1lu-4z5bhhz4h.js","/chat-static/_next/static/immutable/chunks/1p5y_zcqvqq8d.js","/chat-static/_next/static/immutable/chunks/01baumogimg6p.js","/chat-static/_next/static/immutable/chunks/258a4ne6m_k4p.js","/chat-static/_next/static/immutable/chunks/0ko_j9ax7y6x0.js","/chat-static/_next/static/immutable/chunks/1nyef2mn0xr6l.js","/chat-static/_next/static/immutable/chunks/0wi_45vocl_-p.js","/chat-static/_next/static/immutable/chunks/0-vsrzeceac3v.js","/chat-static/_next/static/immutable/chunks/2e3p8j58j-2ac.js","/chat-static/_next/static/immutable/chunks/2ozwdzttq5i1f.js","/chat-static/_next/static/immutable/chunks/0ewqarb2bfu8h.js","/chat-static/_next/static/immutable/chunks/2ic8lww1-lsd6.js","/chat-static/_next/static/immutable/chunks/3knm8li7yvqyy.js","/chat-static/_next/static/immutable/chunks/3ishjhw9r5hu6.js","/chat-static/_next/static/immutable/chunks/219cqn3u0bpkg.js","/chat-static/_next/static/immutable/chunks/00hu8fdgh1j4v.js","/chat-static/_next/static/immutable/chunks/0xi2c3jaocjvt.js","/chat-static/_next/static/immutable/chunks/0jv8_sp12utf0.js","/chat-static/_next/static/immutable/chunks/1e462i1ma5hqc.js","/chat-static/_next/static/immutable/chunks/39g-v5gn16xpu.js","/chat-static/_next/static/immutable/chunks/3e68w17lftq23.js","/chat-static/_next/static/immutable/chunks/022gnoebsh94r.js","/chat-static/_next/static/immutable/chunks/2lb8tgn9smhmm.js","/chat-static/_next/static/immutable/chunks/1ybmqoirdq34w.js","/chat-static/_next/static/immutable/chunks/1erg8g21a3w0b.js","/chat-static/_next/static/immutable/chunks/1_qpltudrcx39.js","/chat-static/_next/static/immutable/chunks/3h0z-hp8-yi1i.js","/chat-static/_next/static/immutable/chunks/0p9rde4dp8mlf.js","/chat-static/_next/static/immutable/chunks/12iw2o65f5diw.js","/chat-static/_next/static/immutable/chunks/3fnbcspmxidog.js","/chat-static/_next/static/immutable/chunks/0qmfntxs_4897.js","/chat-static/_next/static/immutable/chunks/11jpx637g96mg.js","/chat-static/_next/static/immutable/chunks/3cyqm8u9n5jqw.js","/chat-static/_next/static/immutable/chunks/25bs_fkkq5ymp.js","/chat-static/_next/static/immutable/chunks/21e0q2tppm01j.js"],"SWRDataProvider"] 85:T4c2c5,[V0_FILE]plaintext:file=".gitignore" isMerged="true" # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. # dependencies /node_modules # next.js /.next/ /out/ # production /build # debug npm-debug.log* yarn-debug.log* yarn-error.log* .pnpm-debug.log* # env files .env* # vercel .vercel # typescript *.tsbuildinfo next-env.d.ts [V0_FILE]typescript:file="app/api/resume/route.ts" isMerged="true" import { NextResponse } from "next/server" export async function GET() { try { const resumeContent = ` NIKITESH BHADADE Web UI Developer nikiteshb@gmail.com | 09561501506 | Pune, India SUMMARY Accomplished Sr. Software Engineer with a strong background at Globant India Pvt Ltd, focusing on React.js and JavaScript. Committed to delivering pixel-perfect UIs and advancing accessibility standards. Experienced in team leadership and driving innovative solutions, resulting in enhanced user experiences and compliance with contemporary web standards. SKILLS Frontend: React.js, JavaScript, HTML5, CSS3 Styling: SASS, LESS, Bootstrap 5, Tailwind CSS, MUI CMS & Tools: Drupal, Wordpress, Figma, InVision Design: Photoshop, Illustrator Standards: Responsive web design, ADA/WCAG 2.2 AA accessibility standards Version Control: Git EXPERIENCE Sr. Software Engineer Globant India Pvt Ltd | 11/2020 – Present | Pune • Led UI/frontend team of 5 designers to develop interactive user interfaces using JavaScript, HTML5, CSS3, SASS, React, and Drupal • Delivered pixel-perfect UIs by converting PSD/Figma/InDesign designs into production web applications • Revamped legacy products to boost performance and ensured compliance with new web standards • Enhanced accessibility features/standards like WCAG 2.2 AA to meet current guidelines and improve user experience Sr. Web Designer Markets and Markets Research Pvt. Ltd | 05/2019 – 11/2020 | Pune • Created responsive web pages, integrating PSD designs to HTML and Angular 7 • Designed UIs for dynamic email templates, enhancing user experience • Restyled UI components for improved appeal and usability; managed version control with Git Web Designer Yardi Software India Pvt. Ltd | 10/2017 – 05/2019 | Pune • Executed design process for dynamic/static email templates, integrating PSD to HTML/.NET framework • Redesigned products for modern standards and ADA compliance • Enhanced accessibility features/standards like WCAG 2.2 AA to meet current guidelines • Managed frontend UI for Angular 2; resolved page issues efficiently Web Designer Circl Design India Pvt. Ltd | 04/2017 – 09/2017 | Pune • Developed website projects using HTML, CSS, WordPress • Created responsive layouts with Bootstrap, dynamic functions with JavaScript/jQuery UI Engineer Sycamore Software Solutions Pvt. Ltd | 06/2015 – 03/2017 | Pune • Developed newsletters/web projects using HTML, CSS, WordPress, Bootstrap, and JavaScript/jQuery Web Graphics Designer Valency Realty Pvt. Ltd | 07/2014 – 05/2015 | Pune • Led a team in pre-sales activities, digital and print campaigns, SEO/SMO initiatives • Designed promotional graphics for campaigns and social media EDUCATION Master of Science in Computer Science K. R. Pandav College, Nagpur University | 2012 | Nagpur Bachelor of Computer Applications (BCA) G.H. Raisoni Institute of Information Technology, Nagpur University | 2007 – 2011 | Nagpur LANGUAGES Marathi, Hindi, English INTERESTS Cricket, Photography, PC Games, Music ` // Create a simple text-based response that can be downloaded as a file const headers = new Headers() headers.set("Content-Type", "text/plain; charset=utf-8") headers.set("Content-Disposition", 'attachment; filename="Nikitesh_Bhadade_Resume.txt"') return new NextResponse(resumeContent, { status: 200, headers, }) } catch (error) { console.error("Error generating resume:", error) return NextResponse.json({ error: "Failed to generate resume" }, { status: 500 }) } } [V0_FILE]css:file="app/globals.css" isMerged="true" @import "tailwindcss"; @import "tw-animate-css"; @custom-variant dark (&:is(.dark *)); :root { /* Updated to red/burgundy palette */ --background: #f5f3f4; --foreground: #0b090a; --card: #ffffff; --card-foreground: #0b090a; --popover: #ffffff; --popover-foreground: #0b090a; --primary: #ba181b; --primary-foreground: #ffffff; --secondary: #a4161a; --secondary-foreground: #ffffff; --muted: #d3d3d3; --muted-foreground: #660708; --accent: #e5383b; --accent-foreground: #ffffff; --destructive: #e5383b; --destructive-foreground: #ffffff; --border: #d3d3d3; --input: #f5f3f4; --ring: #ba181b; --chart-1: #e5383b; --chart-2: #ba181b; --chart-3: #a4161a; --chart-4: #660708; --chart-5: #b1a7a6; --radius: 0.625rem; --sidebar: #f5f3f4; --sidebar-foreground: #0b090a; --sidebar-primary: #ba181b; --sidebar-primary-foreground: #ffffff; --sidebar-accent: #e5383b; --sidebar-accent-foreground: #ffffff; --sidebar-border: #d3d3d3; --sidebar-ring: #ba181b; } .dark { /* Dark mode colors for red/burgundy palette */ --background: #0b090a; --foreground: #f5f3f4; --card: #161a1d; --card-foreground: #f5f3f4; --popover: #161a1d; --popover-foreground: #f5f3f4; --primary: #e5383b; --primary-foreground: #0b090a; --secondary: #ba181b; --secondary-foreground: #f5f3f4; --muted: #660708; --muted-foreground: #d3d3d3; --accent: #e5383b; --accent-foreground: #0b090a; --destructive: #e5383b; --destructive-foreground: #0b090a; --border: #660708; --input: #161a1d; --ring: #e5383b; --chart-1: #e5383b; --chart-2: #ba181b; --chart-3: #a4161a; --chart-4: #660708; --chart-5: #b1a7a6; --sidebar: #161a1d; --sidebar-foreground: #f5f3f4; --sidebar-primary: #e5383b; --sidebar-primary-foreground: #0b090a; --sidebar-accent: #ba181b; --sidebar-accent-foreground: #f5f3f4; --sidebar-border: #660708; --sidebar-ring: #e5383b; } @theme inline { --font-sans: "Geist", "Geist Fallback"; --font-mono: "Geist Mono", "Geist Mono Fallback"; --color-background: var(--background); --color-foreground: var(--foreground); --color-card: var(--card); --color-card-foreground: var(--card-foreground); --color-popover: var(--popover); --color-popover-foreground: var(--popover-foreground); --color-primary: var(--primary); --color-primary-foreground: var(--primary-foreground); --color-secondary: var(--secondary); --color-secondary-foreground: var(--secondary-foreground); --color-muted: var(--muted); --color-muted-foreground: var(--muted-foreground); --color-accent: var(--accent); --color-accent-foreground: var(--accent-foreground); --color-destructive: var(--destructive); --color-destructive-foreground: var(--destructive-foreground); --color-border: var(--border); --color-input: var(--input); --color-ring: var(--ring); --color-chart-1: var(--chart-1); --color-chart-2: var(--chart-2); --color-chart-3: var(--chart-3); --color-chart-4: var(--chart-4); --color-chart-5: var(--chart-5); --radius-sm: calc(var(--radius) - 4px); --radius-md: calc(var(--radius) - 2px); --radius-lg: var(--radius); --radius-xl: calc(var(--radius) + 4px); --color-sidebar: var(--sidebar); --color-sidebar-foreground: var(--sidebar-foreground); --color-sidebar-primary: var(--sidebar-primary); --color-sidebar-primary-foreground: var(--sidebar-primary-foreground); --color-sidebar-accent: var(--sidebar-accent); --color-sidebar-accent-foreground: var(--sidebar-accent-foreground); --color-sidebar-border: var(--sidebar-border); --color-sidebar-ring: var(--sidebar-ring); } @layer base { * { @apply border-border outline-ring/50; } body { @apply bg-background text-foreground; } } html { scroll-behavior: smooth; } [V0_FILE]typescriptreact:file="app/page.tsx" isMerged="true" "use client" import { useState, useEffect } from "react" import Header from "@/components/header" import Hero from "@/components/hero" import About from "@/components/about" import Skills from "@/components/skills" import WorkProcess from "@/components/work-process" import Experience from "@/components/experience" import Contact from "@/components/contact" import Footer from "@/components/footer" export default function Home() { const [isDark, setIsDark] = useState(false) useEffect(() => { const isDarkMode = localStorage.getItem("darkMode") === "true" setIsDark(isDarkMode) if (isDarkMode) { document.documentElement.classList.add("dark") } }, []) const toggleDarkMode = () => { const newDarkMode = !isDark setIsDark(newDarkMode) localStorage.setItem("darkMode", String(newDarkMode)) if (newDarkMode) { document.documentElement.classList.add("dark") } else { document.documentElement.classList.remove("dark") } } return (

) } [V0_FILE]json:file="components.json" isMerged="true" { "$schema": "https://ui.shadcn.com/schema.json", "style": "new-york", "rsc": true, "tsx": true, "tailwind": { "config": "", "css": "app/globals.css", "baseColor": "neutral", "cssVariables": true, "prefix": "" }, "iconLibrary": "lucide", "aliases": { "components": "@/components", "utils": "@/lib/utils", "ui": "@/components/ui", "lib": "@/lib", "hooks": "@/hooks" }, "registries": { "@aceternity": "https://ui.aceternity.com/registry/{name}.json" } } [V0_FILE]typescriptreact:file="components/about.tsx" isMerged="true" "use client" import { motion } from "framer-motion" import { HoverEffect } from "./aceternity/hover-effect" import { Code2, Users, Shield, Zap, Lightbulb, BookOpen, MapPin, Mail, Phone, Clock } from "lucide-react" export default function About() { const containerVariants = { hidden: { opacity: 0 }, visible: { opacity: 1, transition: { staggerChildren: 0.2, delayChildren: 0.3, }, }, } const itemVariants = { hidden: { opacity: 0, y: 20 }, visible: { opacity: 1, y: 0, transition: { duration: 0.8, ease: "easeOut" }, }, } const highlights = [ { title: "Design to Code", description: "Converting pixel-perfect Figma/PSD designs into production-ready React applications with precision.", icon: , }, { title: "Team Leadership", description: "Led UI/frontend teams of 5+ designers, fostering collaboration and delivering high-quality interfaces.", icon: , }, { title: "Accessibility First", description: "Committed to WCAG 2.2 AA standards, ensuring inclusive experiences for all users.", icon: , }, { title: "Performance", description: "Optimizing web applications for speed, efficiency, and modern web standards compliance.", icon: , }, { title: "Creative Problem Solving", description: "Tackling complex UI challenges with innovative solutions and attention to detail.", icon: , }, { title: "Continuous Learning", description: "Staying updated with latest technologies, frameworks, and design trends in web development.", icon: , }, ] return (

About{" "} Me

I'm a passionate Sr. Software Engineer with{" "} 9.5+ years of experience in React.js, JavaScript, and design-to-code conversion. My expertise lies in transforming pixel-perfect designs into production-ready web applications while maintaining accessibility standards.

At Globant India, I am leading a UI/frontend team of 5, delivering high-quality interactive interfaces and advancing web accessibility standards. I'm committed to performance optimization, modern web standards, and creating inclusive digital experiences.

Beyond code, I'm passionate about{" "} cricket, photography, and gaming. I believe in continuous learning and staying updated with the latest technologies and design trends.

Core Expertise

Quick Info

{[ { label: "Location", value: "Pune, India", icon: }, { label: "Email", value: "nikiteshb@gmail.com", link: "mailto:nikiteshb@gmail.com", icon: , }, { label: "Phone", value: "+91 9561501506", link: "tel:+919561501506", icon: , }, { label: "Experience", value: "9.5+ Years", icon: }, ].map((item, idx) => (

{item.icon}

{item.label}

{item.link ? ( {item.value} ) : (

{item.value}

)} ))}

) } [V0_FILE]typescriptreact:file="components/aceternity/animated-card.tsx" isMerged="true" "use client" import type React from "react" import { motion } from "framer-motion" interface AnimatedCardProps { children: React.ReactNode className?: string } export const AnimatedCard: React.FC = ({ children, className = "" }) => { return ( {children} ) } [V0_FILE]typescriptreact:file="components/aceternity/animated-tooltip.tsx" isMerged="true" "use client" import { motion } from "framer-motion" import { useState } from "react" export const AnimatedTooltip = ({ items, }: { items: Array<{ id: number name: string designation: string image?: string }> }) => { const [hoveredId, setHoveredId] = useState(null) return (

{items.map((item) => ( setHoveredId(item.id)} onMouseLeave={() => setHoveredId(null)} whileHover={{ scale: 1.1 }} > {item.name.charAt(0).toUpperCase()} {hoveredId === item.id && (

{item.name}

)} ))}

) } [V0_FILE]typescriptreact:file="components/aceternity/background-beams-with-collision.tsx" isMerged="true" "use client" import type React from "react" import { useRef } from "react" import { motion } from "framer-motion" interface BeamOptions { initialX?: number translateX?: number initialY?: string translateY?: string rotate?: number className?: string duration?: number delay?: number repeatDelay?: number } interface CollisionMechanismProps { containerRef: React.RefObject parentRef: React.RefObject beamOptions?: BeamOptions } const Beam = ({ beamOptions }: { beamOptions?: BeamOptions }) => { const { initialX = 0, translateX = 0, initialY = "-200px", translateY = "1800px", rotate = 0, className = "", duration = 8, delay = 0, repeatDelay = 0, } = beamOptions || {} return ( ) } export const BackgroundBeamsWithCollision = ({ children, className = "", }: { children: React.ReactNode className?: string }) => { const containerRef = useRef(null) const parentRef = useRef(null) const beams = [ { initialX: 10, translateX: 100, initialY: "-200px", translateY: "1800px", rotate: 0, duration: 8, delay: 0, repeatDelay: 5, }, { initialX: -50, translateX: 50, initialY: "-200px", translateY: "1800px", rotate: 0, duration: 10, delay: 2, repeatDelay: 5, }, { initialX: 30, translateX: -50, initialY: "-200px", translateY: "1800px", rotate: 0, duration: 9, delay: 4, repeatDelay: 5, }, { initialX: -30, translateX: 100, initialY: "-200px", translateY: "1800px", rotate: 0, duration: 11, delay: 1, repeatDelay: 5, }, { initialX: 50, translateX: -30, initialY: "-200px", translateY: "1800px", rotate: 0, duration: 8, delay: 3, repeatDelay: 5, }, ] return (

{children}

) } [V0_FILE]typescriptreact:file="components/aceternity/beams.tsx" isMerged="true" "use client" import { motion } from "framer-motion" export const Beams = ({ className = "" }: { className?: string }) => { return ( ) } [V0_FILE]typescriptreact:file="components/aceternity/bento-grid.tsx" isMerged="true" "use client" import { cn } from "@/lib/utils" import type React from "react" export const BentoGrid = ({ className, children, }: { className?: string children?: React.ReactNode }) => { return (

{children}

) } export const BentoGridItem = ({ className, title, description, header, icon, }: { className?: string title?: string | React.ReactNode description?: string | React.ReactNode header?: React.ReactNode icon?: React.ReactNode }) => { return (

{header}

{icon}

{title}

{description}

) } [V0_FILE]typescriptreact:file="components/aceternity/card-stack.tsx" isMerged="true" "use client" import type React from "react" import { useEffect, useState } from "react" import { motion } from "framer-motion" type Card = { id: number name: string designation: string content: React.ReactNode } export const CardStack = ({ items, offset = 10, scaleFactor = 0.06, }: { items: Card[] offset?: number scaleFactor?: number }) => { const CARD_OFFSET = offset const SCALE_FACTOR = scaleFactor const [cards, setCards] = useState(items) useEffect(() => { const interval = setInterval(() => { setCards((prevCards) => { const newArray = [...prevCards] newArray.unshift(newArray.pop()!) return newArray }) }, 5000) return () => clearInterval(interval) }, []) return (

{cards.map((card, index) => (

{card.content}

{card.name}

{card.designation}

))}

) } [V0_FILE]typescriptreact:file="components/aceternity/floating-navbar.tsx" isMerged="true" "use client" import type React from "react" import { useState } from "react" import { motion } from "framer-motion" import { cn } from "@/lib/utils" interface NavItem { name: string link: string icon?: React.ReactNode } interface FloatingNavbarProps { navItems: NavItem[] className?: string } export const FloatingNavbar: React.FC = ({ navItems, className }) => { const [visible, setVisible] = useState(true) return ( {navItems.map((item, idx) => ( {item.icon} {item.name} ))} ) } [V0_FILE]typescriptreact:file="components/aceternity/grid.tsx" isMerged="true" "use client" export const Grid = ({ className = "" }: { className?: string }) => { return ( ) } [V0_FILE]typescriptreact:file="components/aceternity/hover-effect.tsx" isMerged="true" "use client" import { motion } from "framer-motion" import type { ReactNode } from "react" export const HoverEffect = ({ items, className, }: { items: Array<{ title: string description: string icon?: ReactNode }> className?: string }) => { return (

{items.map((item, idx) => (

{item.icon &&

{item.icon}

}

{item.title}

{item.description}

))}

) } [V0_FILE]typescriptreact:file="components/aceternity/spotlight.tsx" isMerged="true" "use client" import type React from "react" interface SpotlightProps { className?: string fill?: string } export const Spotlight: React.FC = ({ className = "", fill = "white" }) => { return ( ) } [V0_FILE]typescriptreact:file="components/animated-card.tsx" isMerged="true" "use client" import type React from "react" import { motion } from "framer-motion" interface AnimatedCardProps { children: React.ReactNode className?: string } export const AnimatedCard: React.FC = ({ children, className = "" }) => { return ( {children} ) } [V0_FILE]typescriptreact:file="components/animated-tooltip.tsx" isMerged="true" "use client" import { motion } from "framer-motion" import { useState } from "react" export const AnimatedTooltip = ({ items, }: { items: Array<{ id: number name: string designation: string image?: string }> }) => { const [hoveredId, setHoveredId] = useState(null) return (

{items.map((item) => ( setHoveredId(item.id)} onMouseLeave={() => setHoveredId(null)} whileHover={{ scale: 1.1 }} > {item.name.charAt(0).toUpperCase()} {hoveredId === item.id && (

{item.name}

)} ))}

) } [V0_FILE]typescriptreact:file="components/background-beams-with-collision.tsx" isMerged="true" "use client" import type React from "react" import { useRef } from "react" import { motion } from "framer-motion" interface BeamOptions { initialX?: number translateX?: number initialY?: string translateY?: string rotate?: number className?: string duration?: number delay?: number repeatDelay?: number } interface CollisionMechanismProps { containerRef: React.RefObject parentRef: React.RefObject beamOptions?: BeamOptions } const Beam = ({ beamOptions }: { beamOptions?: BeamOptions }) => { const { initialX = 0, translateX = 0, initialY = "-200px", translateY = "1800px", rotate = 0, className = "", duration = 8, delay = 0, repeatDelay = 0, } = beamOptions || {} return ( ) } export const BackgroundBeamsWithCollision = ({ children, className = "", }: { children: React.ReactNode className?: string }) => { const containerRef = useRef(null) const parentRef = useRef(null) const beams = [ { initialX: 10, translateX: 100, initialY: "-200px", translateY: "1800px", rotate: 0, duration: 8, delay: 0, repeatDelay: 5, }, { initialX: -50, translateX: 50, initialY: "-200px", translateY: "1800px", rotate: 0, duration: 10, delay: 2, repeatDelay: 5, }, { initialX: 30, translateX: -50, initialY: "-200px", translateY: "1800px", rotate: 0, duration: 9, delay: 4, repeatDelay: 5, }, { initialX: -30, translateX: 100, initialY: "-200px", translateY: "1800px", rotate: 0, duration: 11, delay: 1, repeatDelay: 5, }, { initialX: 50, translateX: -30, initialY: "-200px", translateY: "1800px", rotate: 0, duration: 8, delay: 3, repeatDelay: 5, }, ] return (

{children}

) } [V0_FILE]typescriptreact:file="components/beams.tsx" isMerged="true" "use client" import { motion } from "framer-motion" export const Beams = ({ className = "" }: { className?: string }) => { return ( ) } [V0_FILE]typescriptreact:file="components/bento-grid.tsx" isMerged="true" "use client" import { cn } from "@/lib/utils" import type React from "react" export const BentoGrid = ({ className, children, }: { className?: string children?: React.ReactNode }) => { return (

{children}

{header}

{icon}

{title}

{description}

) } [V0_FILE]typescriptreact:file="components/card-stack.tsx" isMerged="true" "use client" import type React from "react" import { useEffect, useState } from "react" import { motion } from "framer-motion" type Card = { id: number name: string designation: string content: React.ReactNode } export const CardStack = ({ items, offset = 10, scaleFactor = 0.06, }: { items: Card[] offset?: number scaleFactor?: number }) => { const CARD_OFFSET = offset const SCALE_FACTOR = scaleFactor const [cards, setCards] = useState(items) useEffect(() => { const interval = setInterval(() => { setCards((prevCards) => { const newArray = [...prevCards] newArray.unshift(newArray.pop()!) return newArray }) }, 5000) return () => clearInterval(interval) }, []) return (

{cards.map((card, index) => (

{card.content}

{card.name}

{card.designation}

))}

) } [V0_FILE]typescriptreact:file="components/contact.tsx" isMerged="true" "use client" import { motion } from "framer-motion" import { Mail, Linkedin, Github, ExternalLink, Download } from "lucide-react" export default function Contact() { const containerVariants = { hidden: { opacity: 0 }, visible: { opacity: 1, transition: { staggerChildren: 0.1, delayChildren: 0.2, }, }, } const itemVariants = { hidden: { opacity: 0, y: 20 }, visible: { opacity: 1, y: 0, transition: { duration: 0.6 }, }, } const contactMethods = [ { icon: Mail, label: "Email", value: "nikiteshb@gmail.com", href: "mailto:nikiteshb@gmail.com", color: "from-red-500 to-pink-500", }, { icon: Linkedin, label: "LinkedIn", value: "Visit Profile", href: "https://www.linkedin.com/in/nikiteshbhadade/", color: "from-blue-500 to-cyan-500", external: true, }, { icon: Github, label: "GitHub", value: "View Code", href: "https://github.com/nikiteshb", color: "from-gray-600 to-gray-800", external: true, }, ] const handleDownloadResume = async () => { try { const response = await fetch("/api/resume") const blob = await response.blob() const url = window.URL.createObjectURL(blob) const a = document.createElement("a") a.href = url a.download = "Nikitesh_Bhadade_Resume.txt" document.body.appendChild(a) a.click() window.URL.revokeObjectURL(url) document.body.removeChild(a) } catch (error) { console.error("Error downloading resume:", error) } } return (

Let's{" "} Connect

My professional focus is on finding the next great job or project. Always open to conversations about full-time employment, contract roles, or collaboration in the React ecosystem. Drop me a line!

{contactMethods.map((method) => { const Icon = method.icon return (

{method.label}

{method.value} {method.external && ) })}

) } [V0_FILE]typescriptreact:file="components/experience.tsx" isMerged="true" "use client" import { motion } from "framer-motion" import { Calendar } from "lucide-react" export default function Experience() { const experiences = [ { title: "Sr. Software Engineer", company: "Globant India Pvt Ltd", period: "11/2020 – Present", location: "Pune", highlights: [ "Leading UI/frontend team of 5 to develop interactive user interfaces", "Delivered pixel-perfect UIs by converting PSD/Figma/InDesign designs", "Revamped legacy products for performance and web standards compliance", "Enhanced accessibility features to meet WCAG 2.2 AA guidelines", ], }, { title: "Sr. Web Designer", company: "Markets and Markets Research Pvt. Ltd", period: "05/2019 – 11/2020", location: "Pune", highlights: [ "Created responsive web pages integrating PSD designs to HTML and Angular 7", "Designed UIs for dynamic email templates", "Restyled UI components for improved appeal and usability", "Managed version control with Git", ], }, { title: "Web Designer", company: "Yardi Software India Pvt. Ltd", period: "10/2017 – 05/2019", location: "Pune", highlights: [ "Executed design process for dynamic/static email templates", "Integrated PSD to HTML/.NET framework", "Redesigned products for modern standards and ADA compliance", "Managed frontend UI for Angular 2", ], }, { title: "Web Designer", company: "Circl Design India Pvt. Ltd", period: "04/2017 – 09/2017", location: "Pune", highlights: [ "Developed website projects using HTML, CSS, WordPress", "Created responsive layouts with Bootstrap", "Implemented dynamic functions with JavaScript/jQuery", ], }, ] const containerVariants = { hidden: { opacity: 0 }, visible: { opacity: 1, transition: { staggerChildren: 0.1, }, }, } const itemVariants = { hidden: { opacity: 0, x: -20 }, visible: { opacity: 1, x: 0, transition: { duration: 0.6 }, }, } return (

Professional{" "} Experience

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

{exp.title}

{exp.company}

{exp.location}

{highlight}

))}

) } [V0_FILE]typescriptreact:file="components/floating-navbar.tsx" isMerged="true" "use client" import type React from "react" import { useState } from "react" import { motion } from "framer-motion" import { cn } from "@/lib/utils" interface NavItem { name: string link: string icon?: React.ReactNode } interface FloatingNavbarProps { navItems: NavItem[] className?: string } export const FloatingNavbar: React.FC = ({ navItems, className }) => { const [visible, setVisible] = useState(true) return ( {navItems.map((item, idx) => ( {item.icon} {item.name} ))} ) } [V0_FILE]typescriptreact:file="components/footer.tsx" isMerged="true" "use client" export default function Footer() { const currentYear = new Date().getFullYear() return ( ) } [V0_FILE]typescriptreact:file="components/grid.tsx" isMerged="true" "use client" export const Grid = ({ className = "" }: { className?: string }) => { return ( ) } [V0_FILE]typescriptreact:file="components/header.tsx" isMerged="true" "use client" import { useState } from "react" import Link from "next/link" import { Moon, Sun, Menu, X } from "lucide-react" interface HeaderProps { isDark: boolean toggleDarkMode: () => void } export default function Header({ isDark, toggleDarkMode }: HeaderProps) { const [isMenuOpen, setIsMenuOpen] = useState(false) const navLinks = [ { href: "#about", label: "About" }, { href: "#skills", label: "Skills" }, { href: "#process", label: "Process" }, { href: "#experience", label: "Experience" }, { href: "#contact", label: "Contact" }, ] return ( <> {/* Skip to main content link for keyboard navigation */} Skip to main content

{/* Logo */}

Nikitesh {/* Desktop Navigation */} {/* Right Actions */}

{/* Mobile Menu Button */}

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

) } [V0_FILE]typescriptreact:file="components/hover-effect.tsx" isMerged="true" "use client" import { motion } from "framer-motion" import type { ReactNode } from "react" export const HoverEffect = ({ items, className, }: { items: Array<{ title: string description: string icon?: ReactNode }> className?: string }) => { return (

{items.map((item, idx) => (

{item.icon &&

{item.icon}

}

{item.title}

{item.description}

))}

) } [V0_FILE]typescriptreact:file="components/projects.tsx" isMerged="true" "use client" import { ExternalLink, Github } from "lucide-react" import { motion } from "framer-motion" import { AnimatedCard } from "./aceternity/animated-card" export default function Projects() { const projects = [ { title: "E-Commerce Platform", description: "Full-featured e-commerce application with product catalog, shopping cart, and checkout flow.", technologies: ["React", "Redux Toolkit", "SASS", "GraphQL", "Node.js"], link: "#", github: "#", gradient: "from-blue-500 to-cyan-500", }, { title: "Email Campaign Manager", description: "Dynamic email template builder with real-time preview and responsive design support.", technologies: ["React", "Redux", "HTML5", "CSS3", "JavaScript"], link: "#", github: "#", gradient: "from-purple-500 to-pink-500", }, { title: "Design System Components", description: "Comprehensive component library with accessibility standards and extensive documentation.", technologies: ["React", "TypeScript", "Storybook", "SASS", "WCAG 2.2 AA"], link: "#", github: "#", gradient: "from-green-500 to-emerald-500", }, { title: "Analytics Dashboard", description: "Real-time analytics dashboard with interactive charts and data visualization.", technologies: ["React", "Next.js", "Tailwind CSS", "Chart.js", "API Integration"], link: "#", github: "#", gradient: "from-orange-500 to-red-500", }, { title: "Responsive Website Redesign", description: "Complete redesign of legacy product for modern standards and improved performance.", technologies: ["React", "SASS", "Bootstrap", "Figma to Code", "Performance Optimization"], link: "#", github: "#", gradient: "from-indigo-500 to-blue-500", }, { title: "Accessibility Audit Tool", description: "Tool for auditing web accessibility compliance and generating improvement reports.", technologies: ["React", "JavaScript", "WCAG Standards", "Node.js", "Testing"], link: "#", github: "#", gradient: "from-teal-500 to-cyan-500", }, ] const containerVariants = { hidden: { opacity: 0 }, visible: { opacity: 1, transition: { staggerChildren: 0.1, }, }, } return (

Featured Projects {projects.map((project, idx) => (

{project.title}

{project.description}

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

View Live

))}

) } [V0_FILE]typescriptreact:file="components/skills.tsx" isMerged="true" "use client" import { motion } from "framer-motion" import { Code2, Palette, Database, Zap } from "lucide-react" export default function Skills() { const skillCategories = [ { title: "Frontend", icon: Code2, skills: ["React.js", "JavaScript", "TypeScript", "HTML5", "CSS3", "Next.js"], color: "from-blue-500 to-cyan-500", }, { title: "Styling", icon: Palette, skills: ["SASS", "LESS", "Tailwind CSS", "Bootstrap 5", "Material UI", "Responsive Design"], color: "from-purple-500 to-pink-500", }, { title: "CMS & Tools", icon: Database, skills: ["Drupal", "Git", "Figma", "InVision", "Adobe Suite", "Playwright"], color: "from-orange-500 to-red-500", }, { title: "Standards", icon: Zap, skills: ["WCAG 2.2 AA", "ADA Compliance", "Web Accessibility", "Performance Optimization"], color: "from-green-500 to-emerald-500", }, ] const containerVariants = { hidden: { opacity: 0 }, visible: { opacity: 1, transition: { staggerChildren: 0.1, delayChildren: 0.2, }, }, } const itemVariants = { hidden: { opacity: 0, y: 20 }, visible: { opacity: 1, y: 0, transition: { duration: 0.6, ease: "easeOut" }, }, } return (

Skills &{" "} Expertise

{skillCategories.map((category) => { const Icon = category.icon return (

{category.title}

) })}

) } [V0_FILE]typescriptreact:file="components/spotlight.tsx" isMerged="true" "use client" import type React from "react" interface SpotlightProps { className?: string fill?: string } export const Spotlight: React.FC = ({ className = "", fill = "white" }) => { return ( ) } [V0_FILE]typescriptreact:file="components/text-generate-effect.tsx" isMerged="true" "use client" import { useEffect, useRef } from "react" import { motion, useInView, useAnimation } from "framer-motion" interface TextGenerateEffectProps { words: string className?: string duration?: number filter?: boolean } export const TextGenerateEffect = ({ words, className = "", duration = 0.5, filter = true, }: TextGenerateEffectProps) => { const ref = useRef(null) const isInView = useInView(ref) const controls = useAnimation() const wordsArray = words.split(" ") const variants = { hidden: { opacity: 0 }, visible: (i: number) => ({ opacity: 1, transition: { delay: i * duration, }, }), } useEffect(() => { if (isInView) { controls.start("visible") } }, [isInView, controls]) return ( {wordsArray.map((word, idx) => ( {word}{" "} ))} ) } [V0_FILE]typescriptreact:file="components/theme-provider.tsx" isMerged="true" 'use client' import * as React from 'react' import { ThemeProvider as NextThemesProvider, type ThemeProviderProps, } from 'next-themes' export function ThemeProvider({ children, ...props }: ThemeProviderProps) { return {children} } [V0_FILE]typescriptreact:file="components/ui/accordion.tsx" isMerged="true" 'use client' import * as React from 'react' import * as AccordionPrimitive from '@radix-ui/react-accordion' import { ChevronDownIcon } from 'lucide-react' import { cn } from '@/lib/utils' function Accordion({ ...props }: React.ComponentProps) { return } function AccordionItem({ className, ...props }: React.ComponentProps) { return ( ) } function AccordionTrigger({ className, children, ...props }: React.ComponentProps) { return ( svg]:rotate-180', className, )} {...props} > {children} ) } function AccordionContent({ className, children, ...props }: React.ComponentProps) { return (

{children}

) } export { Accordion, AccordionItem, AccordionTrigger, AccordionContent } [V0_FILE]typescriptreact:file="components/ui/alert-dialog.tsx" isMerged="true" 'use client' import * as React from 'react' import * as AlertDialogPrimitive from '@radix-ui/react-alert-dialog' import { cn } from '@/lib/utils' import { buttonVariants } from '@/components/ui/button' function AlertDialog({ ...props }: React.ComponentProps) { return } function AlertDialogTrigger({ ...props }: React.ComponentProps) { return ( ) } function AlertDialogPortal({ ...props }: React.ComponentProps) { return ( ) } function AlertDialogOverlay({ className, ...props }: React.ComponentProps) { return ( ) } function AlertDialogContent({ className, ...props }: React.ComponentProps) { return ( ) } function AlertDialogHeader({ className, ...props }: React.ComponentProps<'div'>) { return (

) } function AlertDialogFooter({ className, ...props }: React.ComponentProps<'div'>) { return (

) } function AlertDialogTitle({ className, ...props }: React.ComponentProps) { return ( ) } function AlertDialogDescription({ className, ...props }: React.ComponentProps) { return ( ) } function AlertDialogAction({ className, ...props }: React.ComponentProps) { return ( ) } function AlertDialogCancel({ className, ...props }: React.ComponentProps) { return ( ) } export { AlertDialog, AlertDialogPortal, AlertDialogOverlay, AlertDialogTrigger, AlertDialogContent, AlertDialogHeader, AlertDialogFooter, AlertDialogTitle, AlertDialogDescription, AlertDialogAction, AlertDialogCancel, } [V0_FILE]typescriptreact:file="components/ui/alert.tsx" isMerged="true" import * as React from 'react' import { cva, type VariantProps } from 'class-variance-authority' import { cn } from '@/lib/utils' const alertVariants = cva( 'relative w-full rounded-lg border px-4 py-3 text-sm grid has-[>svg]:grid-cols-[calc(var(--spacing)*4)_1fr] grid-cols-[0_1fr] has-[>svg]:gap-x-3 gap-y-0.5 items-start [&>svg]:size-4 [&>svg]:translate-y-0.5 [&>svg]:text-current', { variants: { variant: { default: 'bg-card text-card-foreground', destructive: 'text-destructive bg-card [&>svg]:text-current *:data-[slot=alert-description]:text-destructive/90', }, }, defaultVariants: { variant: 'default', }, }, ) function Alert({ className, variant, ...props }: React.ComponentProps<'div'> & VariantProps) { return (

) } function AlertTitle({ className, ...props }: React.ComponentProps<'div'>) { return (

) } function AlertDescription({ className, ...props }: React.ComponentProps<'div'>) { return (

) } export { Alert, AlertTitle, AlertDescription } [V0_FILE]typescriptreact:file="components/ui/aspect-ratio.tsx" isMerged="true" 'use client' import * as AspectRatioPrimitive from '@radix-ui/react-aspect-ratio' function AspectRatio({ ...props }: React.ComponentProps) { return } export { AspectRatio } [V0_FILE]typescriptreact:file="components/ui/avatar.tsx" isMerged="true" 'use client' import * as React from 'react' import * as AvatarPrimitive from '@radix-ui/react-avatar' import { cn } from '@/lib/utils' function Avatar({ className, ...props }: React.ComponentProps) { return ( ) } function AvatarImage({ className, ...props }: React.ComponentProps) { return ( ) } function AvatarFallback({ className, ...props }: React.ComponentProps) { return ( ) } export { Avatar, AvatarImage, AvatarFallback } [V0_FILE]typescriptreact:file="components/ui/background-gradient-animation.tsx" isMerged="true" "use client"; import { cn } from "@/lib/utils"; import { useEffect, useRef, useState } from "react"; export const BackgroundGradientAnimation = ({ gradientBackgroundStart = "rgb(108, 0, 162)", gradientBackgroundEnd = "rgb(0, 17, 82)", firstColor = "18, 113, 255", secondColor = "221, 74, 255", thirdColor = "100, 220, 255", fourthColor = "200, 50, 50", fifthColor = "180, 180, 50", pointerColor = "140, 100, 255", size = "80%", blendingValue = "hard-light", children, className, interactive = true, containerClassName, }: { gradientBackgroundStart?: string; gradientBackgroundEnd?: string; firstColor?: string; secondColor?: string; thirdColor?: string; fourthColor?: string; fifthColor?: string; pointerColor?: string; size?: string; blendingValue?: string; children?: React.ReactNode; className?: string; interactive?: boolean; containerClassName?: string; }) => { const interactiveRef = useRef(null); const [curX, setCurX] = useState(0); const [curY, setCurY] = useState(0); const [tgX, setTgX] = useState(0); const [tgY, setTgY] = useState(0); useEffect(() => { document.body.style.setProperty( "--gradient-background-start", gradientBackgroundStart ); document.body.style.setProperty( "--gradient-background-end", gradientBackgroundEnd ); document.body.style.setProperty("--first-color", firstColor); document.body.style.setProperty("--second-color", secondColor); document.body.style.setProperty("--third-color", thirdColor); document.body.style.setProperty("--fourth-color", fourthColor); document.body.style.setProperty("--fifth-color", fifthColor); document.body.style.setProperty("--pointer-color", pointerColor); document.body.style.setProperty("--size", size); document.body.style.setProperty("--blending-value", blendingValue); }, []); useEffect(() => { function move() { if (!interactiveRef.current) { return; } setCurX(curX + (tgX - curX) / 20); setCurY(curY + (tgY - curY) / 20); interactiveRef.current.style.transform = `translate(${Math.round( curX )}px, ${Math.round(curY)}px)`; } move(); }, [tgX, tgY]); const handleMouseMove = (event: React.MouseEvent) => { if (interactiveRef.current) { const rect = interactiveRef.current.getBoundingClientRect(); setTgX(event.clientX - rect.left); setTgY(event.clientY - rect.top); } }; const [isSafari, setIsSafari] = useState(false); useEffect(() => { setIsSafari(/^((?!chrome|android).)*safari/i.test(navigator.userAgent)); }, []); return (

{children}

{interactive && (

)}

); }; [V0_FILE]typescriptreact:file="components/ui/badge.tsx" isMerged="true" import * as React from 'react' import { Slot } from '@radix-ui/react-slot' import { cva, type VariantProps } from 'class-variance-authority' import { cn } from '@/lib/utils' const badgeVariants = cva( 'inline-flex items-center justify-center rounded-md border px-2 py-0.5 text-xs font-medium w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden', { variants: { variant: { default: 'border-transparent bg-primary text-primary-foreground [a&]:hover:bg-primary/90', secondary: 'border-transparent bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90', destructive: 'border-transparent bg-destructive text-white [a&]:hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60', outline: 'text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground', }, }, defaultVariants: { variant: 'default', }, }, ) function Badge({ className, variant, asChild = false, ...props }: React.ComponentProps<'span'> & VariantProps & { asChild?: boolean }) { const Comp = asChild ? Slot : 'span' return ( ) } export { Badge, badgeVariants } [V0_FILE]typescriptreact:file="components/ui/breadcrumb.tsx" isMerged="true" import * as React from 'react' import { Slot } from '@radix-ui/react-slot' import { ChevronRight, MoreHorizontal } from 'lucide-react' import { cn } from '@/lib/utils' function Breadcrumb({ ...props }: React.ComponentProps<'nav'>) { return

} function BreadcrumbList({ className, ...props }: React.ComponentProps<'ol'>) { return (

) } function BreadcrumbLink({ asChild, className, ...props }: React.ComponentProps<'a'> & { asChild?: boolean }) { const Comp = asChild ? Slot : 'a' return ( ) } function BreadcrumbPage({ className, ...props }: React.ComponentProps<'span'>) { return ( ) } function BreadcrumbSeparator({ children, className, ...props }: React.ComponentProps<'li'>) { return (
svg]:size-3.5', className)} {...props} > {children ?? }

) { return (

) } function ButtonGroupText({ className, asChild = false, ...props }: React.ComponentProps<'div'> & { asChild?: boolean }) { const Comp = asChild ? Slot : 'div' return ( ) } function ButtonGroupSeparator({ className, orientation = 'vertical', ...props }: React.ComponentProps) { return ( ) } export { ButtonGroup, ButtonGroupSeparator, ButtonGroupText, buttonGroupVariants, } [V0_FILE]typescriptreact:file="components/ui/button.tsx" isMerged="true" import * as React from 'react' import { Slot } from '@radix-ui/react-slot' import { cva, type VariantProps } from 'class-variance-authority' import { cn } from '@/lib/utils' const buttonVariants = cva( "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive", { variants: { variant: { default: 'bg-primary text-primary-foreground hover:bg-primary/90', destructive: 'bg-destructive text-white hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60', outline: 'border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50', secondary: 'bg-secondary text-secondary-foreground hover:bg-secondary/80', ghost: 'hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50', link: 'text-primary underline-offset-4 hover:underline', }, size: { default: 'h-9 px-4 py-2 has-[>svg]:px-3', sm: 'h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5', lg: 'h-10 rounded-md px-6 has-[>svg]:px-4', icon: 'size-9', 'icon-sm': 'size-8', 'icon-lg': 'size-10', }, }, defaultVariants: { variant: 'default', size: 'default', }, }, ) function Button({ className, variant, size, asChild = false, ...props }: React.ComponentProps<'button'> & VariantProps & { asChild?: boolean }) { const Comp = asChild ? Slot : 'button' return ( ) } export { Button, buttonVariants } [V0_FILE]typescriptreact:file="components/ui/calendar.tsx" isMerged="true" 'use client' import * as React from 'react' import { ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, } from 'lucide-react' import { DayButton, DayPicker, getDefaultClassNames } from 'react-day-picker' import { cn } from '@/lib/utils' import { Button, buttonVariants } from '@/components/ui/button' function Calendar({ className, classNames, showOutsideDays = true, captionLayout = 'label', buttonVariant = 'ghost', formatters, components, ...props }: React.ComponentProps & { buttonVariant?: React.ComponentProps['variant'] }) { const defaultClassNames = getDefaultClassNames() return ( svg]:rotate-180`, String.raw`rtl:**:[.rdp-button\_previous>svg]:rotate-180`, className, )} captionLayout={captionLayout} formatters={{ formatMonthDropdown: (date) => date.toLocaleString('default', { month: 'short' }), ...formatters, }} classNames={{ root: cn('w-fit', defaultClassNames.root), months: cn( 'flex gap-4 flex-col md:flex-row relative', defaultClassNames.months, ), month: cn('flex flex-col w-full gap-4', defaultClassNames.month), nav: cn( 'flex items-center gap-1 w-full absolute top-0 inset-x-0 justify-between', defaultClassNames.nav, ), button_previous: cn( buttonVariants({ variant: buttonVariant }), 'size-(--cell-size) aria-disabled:opacity-50 p-0 select-none', defaultClassNames.button_previous, ), button_next: cn( buttonVariants({ variant: buttonVariant }), 'size-(--cell-size) aria-disabled:opacity-50 p-0 select-none', defaultClassNames.button_next, ), month_caption: cn( 'flex items-center justify-center h-(--cell-size) w-full px-(--cell-size)', defaultClassNames.month_caption, ), dropdowns: cn( 'w-full flex items-center text-sm font-medium justify-center h-(--cell-size) gap-1.5', defaultClassNames.dropdowns, ), dropdown_root: cn( 'relative has-focus:border-ring border border-input shadow-xs has-focus:ring-ring/50 has-focus:ring-[3px] rounded-md', defaultClassNames.dropdown_root, ), dropdown: cn( 'absolute bg-popover inset-0 opacity-0', defaultClassNames.dropdown, ), caption_label: cn( 'select-none font-medium', captionLayout === 'label' ? 'text-sm' : 'rounded-md pl-2 pr-1 flex items-center gap-1 text-sm h-8 [&>svg]:text-muted-foreground [&>svg]:size-3.5', defaultClassNames.caption_label, ), table: 'w-full border-collapse', weekdays: cn('flex', defaultClassNames.weekdays), weekday: cn( 'text-muted-foreground rounded-md flex-1 font-normal text-[0.8rem] select-none', defaultClassNames.weekday, ), week: cn('flex w-full mt-2', defaultClassNames.week), week_number_header: cn( 'select-none w-(--cell-size)', defaultClassNames.week_number_header, ), week_number: cn( 'text-[0.8rem] select-none text-muted-foreground', defaultClassNames.week_number, ), day: cn( 'relative w-full h-full p-0 text-center [&:first-child[data-selected=true]_button]:rounded-l-md [&:last-child[data-selected=true]_button]:rounded-r-md group/day aspect-square select-none', defaultClassNames.day, ), range_start: cn( 'rounded-l-md bg-accent', defaultClassNames.range_start, ), range_middle: cn('rounded-none', defaultClassNames.range_middle), range_end: cn('rounded-r-md bg-accent', defaultClassNames.range_end), today: cn( 'bg-accent text-accent-foreground rounded-md data-[selected=true]:rounded-none', defaultClassNames.today, ), outside: cn( 'text-muted-foreground aria-selected:text-muted-foreground', defaultClassNames.outside, ), disabled: cn( 'text-muted-foreground opacity-50', defaultClassNames.disabled, ), hidden: cn('invisible', defaultClassNames.hidden), ...classNames, }} components={{ Root: ({ className, rootRef, ...props }) => { return (

) }, Chevron: ({ className, orientation, ...props }) => { if (orientation === 'left') { return ( ) } if (orientation === 'right') { return ( ) } return ( ) }, DayButton: CalendarDayButton, WeekNumber: ({ children, ...props }) => { return (

{children}

) }, ...components, }} {...props} /> ) } function CalendarDayButton({ className, day, modifiers, ...props }: React.ComponentProps) { const defaultClassNames = getDefaultClassNames() const ref = React.useRef(null) React.useEffect(() => { if (modifiers.focused) ref.current?.focus() }, [modifiers.focused]) return ( ) } function CarouselNext({ className, variant = 'outline', size = 'icon', ...props }: React.ComponentProps) { const { orientation, scrollNext, canScrollNext } = useCarousel() return ( ) } export { type CarouselApi, Carousel, CarouselContent, CarouselItem, CarouselPrevious, CarouselNext, } [V0_FILE]typescriptreact:file="components/ui/chart.tsx" isMerged="true" 'use client' import * as React from 'react' import * as RechartsPrimitive from 'recharts' import { cn } from '@/lib/utils' // Format: { THEME_NAME: CSS_SELECTOR } const THEMES = { light: '', dark: '.dark' } as const export type ChartConfig = { [k in string]: { label?: React.ReactNode icon?: React.ComponentType } & ( | { color?: string; theme?: never } | { color?: never; theme: Record } ) } type ChartContextProps = { config: ChartConfig } const ChartContext = React.createContext(null) function useChart() { const context = React.useContext(ChartContext) if (!context) { throw new Error('useChart must be used within a ') } return context } function ChartContainer({ id, className, children, config, ...props }: React.ComponentProps<'div'> & { config: ChartConfig children: React.ComponentProps< typeof RechartsPrimitive.ResponsiveContainer >['children'] }) { const uniqueId = React.useId() const chartId = `chart-${id || uniqueId.replace(/:/g, '')}` return (

{children}

) } const ChartStyle = ({ id, config }: { id: string; config: ChartConfig }) => { const colorConfig = Object.entries(config).filter( ([, config]) => config.theme || config.color, ) if (!colorConfig.length) { return null } return (

About

Tags

Share

About

Tags

Share

More Templates Like This