8b:I[903690,["/chat-static/_next/static/chunks/0e2tb6ztxas0b.js?dpl=dpl_HxVjJ817bNwXJbfkQ78xUtYkf5nR","/chat-static/_next/static/chunks/1f7u6rgo4cul0.js?dpl=dpl_HxVjJ817bNwXJbfkQ78xUtYkf5nR","/chat-static/_next/static/chunks/05pq8s6zv_wn1.js?dpl=dpl_HxVjJ817bNwXJbfkQ78xUtYkf5nR","/chat-static/_next/static/chunks/43vadfihbvtl1.js?dpl=dpl_HxVjJ817bNwXJbfkQ78xUtYkf5nR","/chat-static/_next/static/chunks/1gycrwvtm60qn.js?dpl=dpl_HxVjJ817bNwXJbfkQ78xUtYkf5nR","/chat-static/_next/static/chunks/3wkp7zrf5-jmz.js?dpl=dpl_HxVjJ817bNwXJbfkQ78xUtYkf5nR","/chat-static/_next/static/chunks/3xh9s6el8_6_x.js?dpl=dpl_HxVjJ817bNwXJbfkQ78xUtYkf5nR","/chat-static/_next/static/chunks/0ke63s91gpvy3.js?dpl=dpl_HxVjJ817bNwXJbfkQ78xUtYkf5nR","/chat-static/_next/static/chunks/1ccgxhg3rjfjo.js?dpl=dpl_HxVjJ817bNwXJbfkQ78xUtYkf5nR","/chat-static/_next/static/chunks/0vd414frz2dl_.js?dpl=dpl_HxVjJ817bNwXJbfkQ78xUtYkf5nR","/chat-static/_next/static/chunks/2mgce5j5u79tt.js?dpl=dpl_HxVjJ817bNwXJbfkQ78xUtYkf5nR","/chat-static/_next/static/chunks/01gmrqojqtlsu.js?dpl=dpl_HxVjJ817bNwXJbfkQ78xUtYkf5nR","/chat-static/_next/static/chunks/2qjug_t8m8oho.js?dpl=dpl_HxVjJ817bNwXJbfkQ78xUtYkf5nR","/chat-static/_next/static/chunks/2womqu661fmr2.js?dpl=dpl_HxVjJ817bNwXJbfkQ78xUtYkf5nR","/chat-static/_next/static/chunks/0qdgtnqed6832.js?dpl=dpl_HxVjJ817bNwXJbfkQ78xUtYkf5nR","/chat-static/_next/static/chunks/1po5wfdz3ceh_.js?dpl=dpl_HxVjJ817bNwXJbfkQ78xUtYkf5nR","/chat-static/_next/static/chunks/1lmne7b3yag00.js?dpl=dpl_HxVjJ817bNwXJbfkQ78xUtYkf5nR","/chat-static/_next/static/chunks/330f8n_uwn2ft.js?dpl=dpl_HxVjJ817bNwXJbfkQ78xUtYkf5nR","/chat-static/_next/static/chunks/0h7t4vk9gyu0g.js?dpl=dpl_HxVjJ817bNwXJbfkQ78xUtYkf5nR","/chat-static/_next/static/chunks/160o23x6urtdh.js?dpl=dpl_HxVjJ817bNwXJbfkQ78xUtYkf5nR","/chat-static/_next/static/chunks/1qov2bia_ns-o.js?dpl=dpl_HxVjJ817bNwXJbfkQ78xUtYkf5nR","/chat-static/_next/static/chunks/1j9njtdk43kba.js?dpl=dpl_HxVjJ817bNwXJbfkQ78xUtYkf5nR","/chat-static/_next/static/chunks/10xq309qhj3gr.js?dpl=dpl_HxVjJ817bNwXJbfkQ78xUtYkf5nR","/chat-static/_next/static/chunks/04t51g7mb5zjz.js?dpl=dpl_HxVjJ817bNwXJbfkQ78xUtYkf5nR","/chat-static/_next/static/chunks/1m_h06jid1ekf.js?dpl=dpl_HxVjJ817bNwXJbfkQ78xUtYkf5nR","/chat-static/_next/static/chunks/34kx6djl8qij7.js?dpl=dpl_HxVjJ817bNwXJbfkQ78xUtYkf5nR","/chat-static/_next/static/chunks/3hwyfh3v3lizg.js?dpl=dpl_HxVjJ817bNwXJbfkQ78xUtYkf5nR","/chat-static/_next/static/chunks/3lzqzvqvppdbz.js?dpl=dpl_HxVjJ817bNwXJbfkQ78xUtYkf5nR","/chat-static/_next/static/chunks/3y2nzgu33897a.js?dpl=dpl_HxVjJ817bNwXJbfkQ78xUtYkf5nR","/chat-static/_next/static/chunks/2xm81q215cv7s.js?dpl=dpl_HxVjJ817bNwXJbfkQ78xUtYkf5nR","/chat-static/_next/static/chunks/3vtvee1raa1hh.js?dpl=dpl_HxVjJ817bNwXJbfkQ78xUtYkf5nR","/chat-static/_next/static/chunks/0ylrm5ajfx1z7.js?dpl=dpl_HxVjJ817bNwXJbfkQ78xUtYkf5nR","/chat-static/_next/static/chunks/0j_lsstp2mbsx.js?dpl=dpl_HxVjJ817bNwXJbfkQ78xUtYkf5nR","/chat-static/_next/static/chunks/0aas_nxnpj24g.js?dpl=dpl_HxVjJ817bNwXJbfkQ78xUtYkf5nR","/chat-static/_next/static/chunks/42h7tmr-x85i0.js?dpl=dpl_HxVjJ817bNwXJbfkQ78xUtYkf5nR","/chat-static/_next/static/chunks/1pycny3zv2irk.js?dpl=dpl_HxVjJ817bNwXJbfkQ78xUtYkf5nR","/chat-static/_next/static/chunks/2nrg64o7044ea.js?dpl=dpl_HxVjJ817bNwXJbfkQ78xUtYkf5nR","/chat-static/_next/static/chunks/2wb66rh9_-phb.js?dpl=dpl_HxVjJ817bNwXJbfkQ78xUtYkf5nR","/chat-static/_next/static/chunks/2934g55qd7tuc.js?dpl=dpl_HxVjJ817bNwXJbfkQ78xUtYkf5nR","/chat-static/_next/static/chunks/111x4t_autsmc.js?dpl=dpl_HxVjJ817bNwXJbfkQ78xUtYkf5nR","/chat-static/_next/static/chunks/18ivfh5uja4t0.js?dpl=dpl_HxVjJ817bNwXJbfkQ78xUtYkf5nR","/chat-static/_next/static/chunks/2r3_xwoqt-j-8.js?dpl=dpl_HxVjJ817bNwXJbfkQ78xUtYkf5nR"],"ExplicitChatIdProvider"] 8c:I[838238,["/chat-static/_next/static/chunks/0e2tb6ztxas0b.js?dpl=dpl_HxVjJ817bNwXJbfkQ78xUtYkf5nR","/chat-static/_next/static/chunks/1f7u6rgo4cul0.js?dpl=dpl_HxVjJ817bNwXJbfkQ78xUtYkf5nR","/chat-static/_next/static/chunks/05pq8s6zv_wn1.js?dpl=dpl_HxVjJ817bNwXJbfkQ78xUtYkf5nR","/chat-static/_next/static/chunks/43vadfihbvtl1.js?dpl=dpl_HxVjJ817bNwXJbfkQ78xUtYkf5nR","/chat-static/_next/static/chunks/1gycrwvtm60qn.js?dpl=dpl_HxVjJ817bNwXJbfkQ78xUtYkf5nR","/chat-static/_next/static/chunks/3wkp7zrf5-jmz.js?dpl=dpl_HxVjJ817bNwXJbfkQ78xUtYkf5nR","/chat-static/_next/static/chunks/3xh9s6el8_6_x.js?dpl=dpl_HxVjJ817bNwXJbfkQ78xUtYkf5nR","/chat-static/_next/static/chunks/0ke63s91gpvy3.js?dpl=dpl_HxVjJ817bNwXJbfkQ78xUtYkf5nR","/chat-static/_next/static/chunks/1ccgxhg3rjfjo.js?dpl=dpl_HxVjJ817bNwXJbfkQ78xUtYkf5nR","/chat-static/_next/static/chunks/0vd414frz2dl_.js?dpl=dpl_HxVjJ817bNwXJbfkQ78xUtYkf5nR","/chat-static/_next/static/chunks/2mgce5j5u79tt.js?dpl=dpl_HxVjJ817bNwXJbfkQ78xUtYkf5nR","/chat-static/_next/static/chunks/01gmrqojqtlsu.js?dpl=dpl_HxVjJ817bNwXJbfkQ78xUtYkf5nR","/chat-static/_next/static/chunks/2qjug_t8m8oho.js?dpl=dpl_HxVjJ817bNwXJbfkQ78xUtYkf5nR","/chat-static/_next/static/chunks/2womqu661fmr2.js?dpl=dpl_HxVjJ817bNwXJbfkQ78xUtYkf5nR","/chat-static/_next/static/chunks/0qdgtnqed6832.js?dpl=dpl_HxVjJ817bNwXJbfkQ78xUtYkf5nR","/chat-static/_next/static/chunks/1po5wfdz3ceh_.js?dpl=dpl_HxVjJ817bNwXJbfkQ78xUtYkf5nR","/chat-static/_next/static/chunks/1lmne7b3yag00.js?dpl=dpl_HxVjJ817bNwXJbfkQ78xUtYkf5nR","/chat-static/_next/static/chunks/330f8n_uwn2ft.js?dpl=dpl_HxVjJ817bNwXJbfkQ78xUtYkf5nR","/chat-static/_next/static/chunks/0h7t4vk9gyu0g.js?dpl=dpl_HxVjJ817bNwXJbfkQ78xUtYkf5nR","/chat-static/_next/static/chunks/160o23x6urtdh.js?dpl=dpl_HxVjJ817bNwXJbfkQ78xUtYkf5nR","/chat-static/_next/static/chunks/1qov2bia_ns-o.js?dpl=dpl_HxVjJ817bNwXJbfkQ78xUtYkf5nR","/chat-static/_next/static/chunks/1j9njtdk43kba.js?dpl=dpl_HxVjJ817bNwXJbfkQ78xUtYkf5nR","/chat-static/_next/static/chunks/10xq309qhj3gr.js?dpl=dpl_HxVjJ817bNwXJbfkQ78xUtYkf5nR","/chat-static/_next/static/chunks/04t51g7mb5zjz.js?dpl=dpl_HxVjJ817bNwXJbfkQ78xUtYkf5nR","/chat-static/_next/static/chunks/1m_h06jid1ekf.js?dpl=dpl_HxVjJ817bNwXJbfkQ78xUtYkf5nR","/chat-static/_next/static/chunks/34kx6djl8qij7.js?dpl=dpl_HxVjJ817bNwXJbfkQ78xUtYkf5nR","/chat-static/_next/static/chunks/3hwyfh3v3lizg.js?dpl=dpl_HxVjJ817bNwXJbfkQ78xUtYkf5nR","/chat-static/_next/static/chunks/3lzqzvqvppdbz.js?dpl=dpl_HxVjJ817bNwXJbfkQ78xUtYkf5nR","/chat-static/_next/static/chunks/3y2nzgu33897a.js?dpl=dpl_HxVjJ817bNwXJbfkQ78xUtYkf5nR","/chat-static/_next/static/chunks/2xm81q215cv7s.js?dpl=dpl_HxVjJ817bNwXJbfkQ78xUtYkf5nR","/chat-static/_next/static/chunks/3vtvee1raa1hh.js?dpl=dpl_HxVjJ817bNwXJbfkQ78xUtYkf5nR","/chat-static/_next/static/chunks/0ylrm5ajfx1z7.js?dpl=dpl_HxVjJ817bNwXJbfkQ78xUtYkf5nR","/chat-static/_next/static/chunks/0j_lsstp2mbsx.js?dpl=dpl_HxVjJ817bNwXJbfkQ78xUtYkf5nR","/chat-static/_next/static/chunks/0aas_nxnpj24g.js?dpl=dpl_HxVjJ817bNwXJbfkQ78xUtYkf5nR","/chat-static/_next/static/chunks/42h7tmr-x85i0.js?dpl=dpl_HxVjJ817bNwXJbfkQ78xUtYkf5nR","/chat-static/_next/static/chunks/1pycny3zv2irk.js?dpl=dpl_HxVjJ817bNwXJbfkQ78xUtYkf5nR","/chat-static/_next/static/chunks/2nrg64o7044ea.js?dpl=dpl_HxVjJ817bNwXJbfkQ78xUtYkf5nR","/chat-static/_next/static/chunks/2wb66rh9_-phb.js?dpl=dpl_HxVjJ817bNwXJbfkQ78xUtYkf5nR","/chat-static/_next/static/chunks/2934g55qd7tuc.js?dpl=dpl_HxVjJ817bNwXJbfkQ78xUtYkf5nR","/chat-static/_next/static/chunks/111x4t_autsmc.js?dpl=dpl_HxVjJ817bNwXJbfkQ78xUtYkf5nR","/chat-static/_next/static/chunks/18ivfh5uja4t0.js?dpl=dpl_HxVjJ817bNwXJbfkQ78xUtYkf5nR","/chat-static/_next/static/chunks/2r3_xwoqt-j-8.js?dpl=dpl_HxVjJ817bNwXJbfkQ78xUtYkf5nR"],"SWRDataProvider"] 8d:T14493,[V0_FILE]typescriptreact:file="app/manifest.ts" isMerged="true" import type { MetadataRoute } from "next" export default function manifest(): MetadataRoute.Manifest { return { name: "Rupesh Bhandari - Portfolio", short_name: "Rupesh Bhandari", description: "Full-stack developer specializing in Laravel, React, and Next.js", start_url: "/", display: "standalone", background_color: "#ffffff", theme_color: "#000000", icons: [ { src: "/icon-192x192.png", sizes: "192x192", type: "image/png", }, { src: "/icon-512x512.png", sizes: "512x512", type: "image/png", }, ], } } [V0_FILE]jpeg:file="public/images/rupesh-profile.jpeg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/WhatsApp%20Image%202025-07-04%20at%2023.03.59-HbfaZTc8GutvQnYKCFl0DY0EZGcvXY.jpeg" isMerged="true" [V0_FILE]typescriptreact:file="app/resume/page.tsx" isEdit="true" isQuickEdit="true" isMerged="true" "use client" import Link from "next/link" import { Button } from "@/components/ui/button" import { ArrowLeft, Download, Mail, Phone, MapPin, Linkedin } from "lucide-react" export default function ResumePage() { const handleDownload = () => { window.print() } return (

{/* Header with back button and download - only visible on screen */}

Back to Portfolio

{/* Resume Content */}

{/* Header */}

Rupesh Bhandari

bhandarirupesh162@gmail.com

9810550900

Kathmandu, Nepal

LinkedIn Profile

{/* Professional Summary */}

Professional Summary

Frontend Developer with 3+ years of experience in designing, developing, and deploying responsive and user-friendly web and mobile applications. Proficient in React Native, Expo, React, Tailwind CSS, and Laravel with a strong foundation in clean architecture, performance optimization, and cross-functional team collaboration.

{/* Technical Skills */}

Technical Skills

Frontend:

HTML5, CSS3, JavaScript (ES6+), React, React Native (Expo), Tailwind CSS

Backend:

Laravel, Livewire, MySQL

Tools & Others:

Zustand, TanStack Query, Axios, GitHub, GitLab, Google Analytics, Lighthouse

{/* Professional Experience */}

Professional Experience

NinjaInfosys Pvt. Ltd.

Mobile App Developer

Lalitpur, Nepal

September 2024 – Present

Developed and deployed a Progressive Web App (PWA) called Palika App for municipalities, optimized for kiosk and Android TV using Expo.
Implemented state management using Zustand and handled API requests using Axios and TanStack Query.
Followed Clean Architecture for maintainability and built responsive, mobile-first UIs.
Published app on Google Play Store: Palika App

KTM Coders Pvt. Ltd.

Junior Frontend Developer

Kathmandu, Nepal

May 2023 – August 2024

Created responsive web pages using HTML5, Tailwind CSS ensuring cross-browser compatibility.
Developed mobile app for service ordering using React Native.
Built and maintained reusable UI components to accelerate development.
Improved SEO and performance by optimizing assets and structure.
Collaborated with UI/UX designers for pixel-perfect implementation.

Advanced Computer Institute

Computer Instructor

Belbari, Morang

February 2018 – October 2019

Conducted training on Microsoft Office Suite and programming basics.
Designed and developed websites using WordPress.
Guided students on the future scope in software development.

{/* Projects & Achievements */}

Projects & Achievements

Manpower Company Website: Developed using React, Tailwind, HTML, CSS & JavaScript.

Live Link:{" "} alzahrahr.com.np

{/* Education */}

Education

Bachelor in Computer Application (BCA)

Kantipur City College, Kathmandu

April 2021 – Present

+2 in Science

Sukuna Higher Secondary School, Morang

Completed December 2020

{/* Skills Grid */}

{/* Soft Skills */}

Soft Skills

• Self-Motivated
• Effective Communication
• Time Management
• Critical Thinking
• Teamwork & Adaptability

{/* Languages */}

Languages

• Nepali (Native)
• English (Fluent)
• Hindi (Fluent)

{/* References */}

References

Available upon request

) } [V0_FILE]json:file="package.json" isEdit="true" isMerged="true" { "name": "rupesh-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.294.0", "next": "14.0.4", "react": "^18", "react-dom": "^18", "resend": "^3.2.0", "class-variance-authority": "0.7.1", "clsx": "2.1.1", "tailwind-merge": "3.3.1" }, "devDependencies": { "@types/node": "^20", "@types/react": "^18", "@types/react-dom": "^18", "autoprefixer": "^10.0.1", "eslint": "^8", "eslint-config-next": "14.0.4", "postcss": "^8", "tailwindcss": "^3.3.0", "tailwindcss-animate": "^1.0.7", "typescript": "^5" } } [V0_FILE]typescriptreact:file="app/actions/contact.ts" isEdit="true" isQuickEdit="true" isMerged="true" "use server" import { Resend } from "resend" export async function sendContactEmail(formData: FormData) { // ── 1. Read & clean the key ────────────────────────────────────────────────── const apiKey = process.env.RESEND_API_KEY?.trim() ?? "" // Resend keys MUST start with "re_" followed by 36 alphanumerics. const isLikelyValid = /^re_[A-Za-z0-9]{36}$/.test(apiKey) if (!isLikelyValid) { console.warn(`[contact-form] Missing or malformed RESEND_API_KEY: “${apiKey.slice(0, 8)}…”`) return { success: false, message: "Email service isn’t configured yet. Please add a valid RESEND_API_KEY in your Vercel dashboard (Project → Settings → Environment Variables) and redeploy.", } } const resend = new Resend(apiKey) const name = formData.get("name") as string const email = formData.get("email") as string const subject = formData.get("subject") as string const message = formData.get("message") as string if (!name || !email || !subject || !message) { return { success: false, message: "Please fill in all fields.", } } // Email validation const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/ if (!emailRegex.test(email)) { return { success: false, message: "Please enter a valid email address.", } } try { console.log("Attempting to send email with API key:", apiKey.substring(0, 10) + "...") const { data, error } = await resend.emails.send({ from: "Rupesh Portfolio ", to: ["bhandarirupesh162@gmail.com"], reply_to: email, // This allows Rupesh to reply directly to the sender subject: `Portfolio Contact: ${subject}`, html: `

New Contact Form Submission

From:

${name}

${email}

Subject:

${subject}

Message:

${message}

This email was sent from your portfolio contact form.
Reply directly to this email to respond to ${name}.

`, text: ` New Contact Form Submission From: ${name} (${email}) Subject: ${subject} Message: ${message} --- Reply directly to this email to respond to ${name}. `, }) console.log("Resend response:", { data, error }) if (error) { console.error("Resend API error:", error) return { success: false, message: `Failed to send email: ${error.message || "Unknown error"}`, } } console.log("Email sent successfully:", data) return { success: true, message: "Thank you for your message! I'll get back to you soon.", } } catch (error: any) { console.error("Email sending error:", error) // Graceful fallback – return a “mailto:” link users can click const name = formData.get("name") as string const email = formData.get("email") as string const subject = formData.get("subject") as string const body = formData.get("message") as string return { success: true, message: "The automated email service is temporarily unavailable. Click below to open your email client instead.", mailtoLink: `mailto:bhandarirupesh162@gmail.com?subject=${encodeURIComponent( `Portfolio Contact: ${subject}`, )}&body=${encodeURIComponent(`From: ${name} (${email})\n\nMessage:\n${body}`)}`, } } } [V0_FILE]plaintext:file=".env.local" isMerged="true" # Add your Resend API key here RESEND_API_KEY=re_StSAHNgH_94iwnEvbTF5p4R3rWbQDn2jd [V0_FILE]typescriptreact:file="app/layout.tsx" isEdit="true" isQuickEdit="true" isMerged="true" import type React from "react" import type { Metadata } from "next" import { JetBrains_Mono } from "next/font/google" import "./globals.css" import { ThemeProvider } from "@/components/theme-provider" const jetbrainsMono = JetBrains_Mono({ subsets: ["latin"], weight: ["300", "400", "500", "600", "700"], variable: "--font-jetbrains", }) export const metadata: Metadata = { title: "Rupesh Bhandari - Full-stack Developer", description: "Frontend Developer with 3+ years of experience in React Native, Expo, React, Tailwind CSS, and Laravel. Based in Lalitpur, Nepal.", } export default function RootLayout({ children, }: { children: React.ReactNode }) { return ( {children} ) } [V0_FILE]typescriptreact:file="tailwind.config.ts" isEdit="true" isQuickEdit="true" 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))", }, }, 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", }, fontFamily: { mono: ["var(--font-jetbrains)", "JetBrains Mono", "Fira Code", "Monaco", "Consolas", "monospace"], }, }, }, plugins: [require("tailwindcss-animate")], } satisfies Config export default config [V0_FILE]typescriptreact:file="app/globals.css" isEdit="true" isMerged="true" @tailwind base; @tailwind components; @tailwind utilities; @layer base { :root { --background: 0 0% 100%; --foreground: 222.2 84% 4.9%; --card: 0 0% 100%; --card-foreground: 222.2 84% 4.9%; --popover: 0 0% 100%; --popover-foreground: 222.2 84% 4.9%; --primary: 262.1 83.3% 57.8%; --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: 262.1 83.3% 57.8%; --radius: 0.5rem; } .dark { --background: 222.2 84% 4.9%; --foreground: 210 40% 98%; --card: 222.2 84% 4.9%; --card-foreground: 210 40% 98%; --popover: 222.2 84% 4.9%; --popover-foreground: 210 40% 98%; --primary: 262.1 83.3% 57.8%; --primary-foreground: 210 40% 98%; --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: 262.1 83.3% 57.8%; } } @layer base { * { @apply border-border; } body { @apply bg-background text-foreground; } } @layer utilities { .animation-delay-2000 { animation-delay: 2s; } .animation-delay-4000 { animation-delay: 4s; } .animation-delay-6000 { animation-delay: 6s; } } @keyframes blob { 0% { transform: translate(0px, 0px) scale(1); } 33% { transform: translate(30px, -50px) scale(1.1); } 66% { transform: translate(-20px, 20px) scale(0.9); } 100% { transform: translate(0px, 0px) scale(1); } } .animate-blob { animation: blob 7s infinite; } /* Developer-focused typography */ .font-code { font-family: "JetBrains Mono", "Fira Code", "Monaco", "Consolas", monospace; font-feature-settings: "liga" 1, "calt" 1; } /* Code-like elements */ .tech-tag { font-family: "JetBrains Mono", monospace; font-weight: 500; letter-spacing: 0.025em; } /* Terminal-like styling for certain elements */ .terminal-text { font-family: "JetBrains Mono", monospace; background: #1a1a1a; color: #00ff00; padding: 0.25rem 0.5rem; border-radius: 4px; font-size: 0.875rem; } /* Subtle code highlighting */ code, pre { font-family: "JetBrains Mono", monospace; font-weight: 400; } /* Developer badge styling */ .dev-badge { font-family: "JetBrains Mono", monospace; font-weight: 500; text-transform: lowercase; letter-spacing: 0.05em; } /* Developer-specific animations */ @keyframes typing { from { width: 0; } to { width: 100%; } } @keyframes blink { 0%, 50% { opacity: 1; } 51%, 100% { opacity: 0; } } .typing-animation { overflow: hidden; white-space: nowrap; animation: typing 2s steps(40, end), blink 1s infinite; } /* Glitch effect for debug mode */ @keyframes glitch { 0% { transform: translate(0); } 20% { transform: translate(-2px, 2px); } 40% { transform: translate(-2px, -2px); } 60% { transform: translate(2px, 2px); } 80% { transform: translate(2px, -2px); } 100% { transform: translate(0); } } .glitch { animation: glitch 0.3s infinite; } /* Matrix-style code rain effect */ @keyframes matrix-rain { 0% { transform: translateY(-100vh); opacity: 1; } 100% { transform: translateY(100vh); opacity: 0; } } .matrix-char { animation: matrix-rain 3s linear infinite; } [V0_FILE]typescriptreact:file="app/page.tsx" isEdit="true" isQuickEdit="true" "use client" import type React from "react" import { useEffect, useRef, useState } from "react" import Link from "next/link" import { Button } from "@/components/ui/button" import { Card, CardContent } from "@/components/ui/card" import { Badge } from "@/components/ui/badge" import { Github, Linkedin, Mail, Download, ExternalLink, Menu, X, ArrowRight, Code, Database, FigmaIcon, Server, Smartphone, Terminal, Coffee, Bug, Zap, } from "lucide-react" import { motion, AnimatePresence } from "framer-motion" import { sendContactEmail } from "./actions/contact" export default function Home() { const [isMenuOpen, setIsMenuOpen] = useState(false) const [activeSection, setActiveSection] = useState("home") const observerRef = useRef(null) const [contactState, setContactState] = useState<{ success: boolean; message: string } | null>(null) const [isSubmitting, setIsSubmitting] = useState(false) // Developer-specific animations const [currentCode, setCurrentCode] = useState(0) const [isTyping, setIsTyping] = useState(true) const [debugMode, setDebugMode] = useState(false) const [coffeeCount, setCoffeeCount] = useState(0) const codeSnippets = [ "const developer = 'Rupesh Bhandari';", "function buildAmazingApps() {", " return 'Laravel + React';", "}", "// Coffee.exe has stopped working", "git commit -m 'Another day, another bug fixed'", "console.log('Hello, World! 👋');", ] const developerStates = [ { icon:

, text: "Coding", color: "text-green-500" },
    { icon: , text: "Caffeinating", color: "text-amber-500" },
    { icon: , text: "Debugging", color: "text-red-500" },
    { icon: , text: "Optimizing", color: "text-blue-500" },
    { icon: , text: "Deploying", color: "text-purple-500" },
  ]

  const [currentState, setCurrentState] = useState(0)

  useEffect(() => {
    const sections = document.querySelectorAll("section[id]")

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

    sections.forEach((section) => {
      observerRef.current?.observe(section)
    })

    return () => {
      sections.forEach((section) => {
        observerRef.current?.unobserve(section)
      })
    }
  }, [])

  // Code typing animation
  useEffect(() => {
    const interval = setInterval(() => {
      setCurrentCode((prev) => (prev + 1) % codeSnippets.length)
      setIsTyping(false)
      setTimeout(() => setIsTyping(true), 100)
    }, 3000)

    return () => clearInterval(interval)
  }, [])

  // Developer state rotation
  useEffect(() => {
    const interval = setInterval(() => {
      setCurrentState((prev) => (prev + 1) % developerStates.length)
    }, 2000)

    return () => clearInterval(interval)
  }, [])

  // Debug mode toggle
  useEffect(() => {
    const handleKeyPress = (e: KeyboardEvent) => {
      if (e.key === "F12" || (e.ctrlKey && e.shiftKey && e.key === "I")) {
        e.preventDefault()
        setDebugMode(!debugMode)
      }
    }

    window.addEventListener("keydown", handleKeyPress)
    return () => window.removeEventListener("keydown", handleKeyPress)
  }, [debugMode])

  const toggleMenu = () => setIsMenuOpen(!isMenuOpen)
  const closeMenu = () => setIsMenuOpen(false)

  const handleContactSubmit = async (event: React.FormEvent) => {
    event.preventDefault()
    setIsSubmitting(true)
    setContactState(null)

    const formData = new FormData(event.currentTarget)

    try {
      const result = await sendContactEmail(formData)
      setContactState(result)

      if (result.success) {
        event.currentTarget.reset()
      }
    } catch (error) {
      console.error("Form submission error:", error)
      setContactState({
        success: false,
        message: "An unexpected error occurred. Please try again.",
      })
    } finally {
      setIsSubmitting(false)
    }
  }

  return (
    
      {/* Debug Mode Overlay */}
      
        {debugMode && (
          
            
              
              DEBUG MODE
            
            Coffee consumed: {coffeeCount} ☕
            Current state: {developerStates[currentState].text}
            Lines of code: 42,069
            
          
        )}
      

      {/* Background Elements */}
      
        
          
          
          
          
        

        {/* Floating Code Elements */}
        
          {[...Array(6)].map((_, i) => (
            
              {["{ }", "< />", "( )", "[ ]", "=> {}", "fn()"][i]}
            
          ))}
        
      

      {/* Header */}
      
        
          
            
              Rupesh Bhandari
            
          

          {/* Desktop Navigation */}
          
            {["home", "about", "skills", "projects", "contact"].map((section) => (
              
                {section.charAt(0).toUpperCase() + section.slice(1)}
                {activeSection === section && (
                  
                )}
              
            ))}
          

          
            
            
            

            {/* Mobile Menu Button */}
            
          
        

        {/* Mobile Navigation */}
        {isMenuOpen && (
          
            
              {["home", "about", "skills", "projects", "contact"].map((section) => (
                
                  {section.charAt(0).toUpperCase() + section.slice(1)}
                
              ))}
              
            
          
        )}
      

      
        {/* Hero Section */}
        
          
            
              
                
                  {/* Developer Status Badge */}
                  
                    
                      
                      
                    
                    
                      
                        {developerStates[currentState].icon}
                        {developerStates[currentState].text}...
                      
                    
                  

                  
                    
                      Hi, I'm Rupesh Bhandari
                    
                    
                      Full-stack Developer
                    
                  

                  {/* Typing Code Animation */}
                  
                    
                      
                        
                        
                        
                      
                      terminal
                    
                    
                      
                        $
                        
                          {codeSnippets[currentCode]}
                        
                        
                          |
                        
                      
                    
                  

                  
                    Frontend Developer with 3+ years of experience in React Native, Expo, React, Tailwind CSS, and
                    Laravel
                  
                

                
                  
                  
                

                
                  Follow me on:
                  
                    
                    
                  
                
              

              
                
                  
                  
                    
                  
                  
                    
                      
                    

                  

                  {/* Floating Developer Icons */}
                  {[
                    { icon: , position: "top-4 left-4", delay: 0 },
                    { icon: , position: "top-4 right-4", delay: 1 },
                    { icon: , position: "bottom-4 left-4", delay: 2 },
                  ].map((item, index) => (
                    
                      {item.icon}
                    
                  ))}
                

              
            

          

        


        {/* About Section */}
        
          
            
              
                
                  
                  
                    
                      
                      
                        About Me
                      
                      
                    
                    
                      
                        I'm a passionate full-stack developer with expertise in building modern web applications. With a
                        strong foundation in both frontend and backend technologies, I create scalable, user-friendly
                        solutions that solve real-world problems.
                      
                      
                        My experience spans across various industries, where I've developed everything from e-commerce
                        platforms to content management systems. I'm particularly interested in creating Progressive Web
                        Applications that provide native-like experiences.
                      
                      
                        
                          What I bring to the table:
                        
                        
                          {[
                            "Full-stack development with Laravel and React",
                            "Progressive Web App expertise",
                            "Database design and optimization",
                            "UI/UX design collaboration",
                            "API development and integration",
                          ].map((item, index) => (
                            
                              
                                
                              
                              {item}
                            
                          ))}
                        
                      
                    
                  
                
                
                  
                    Turning{" "}
                    
                      Ideas
                    {" "}
                    into{" "}
                    
                      Reality
                    
                  
                  
                    With 3+ years of experience in web development, I've helped businesses of all sizes establish their
                    online presence and streamline their operations.
                  
                  
                    {[
                      { number: "3+", label: "Years Experience" },
                      { number: "50+", label: "Projects Completed" },
                      { number: "30+", label: "Happy Clients" },
                      { number: "8+", label: "Technologies" },
                    ].map((stat, index) => (
                      
                        
                          {stat.number}
                        
                        {stat.label}
                      
                    ))}
                  
                
              
            
          
        

        {/* Skills Section */}
        
          
            
              
                My Expertise
              
              
                Technical{" "}
                
                  Skills
                
              
              
                My technology stack is carefully chosen to deliver high-performance, scalable, and maintainable
                applications.
              
            

            
              {[
                { title: "Laravel", icon: , color: "from-red-500 to-orange-500" },
                { title: "Livewire", icon: , color: "from-pink-500 to-rose-500" },
                { title: "React", icon: , color: "from-blue-500 to-cyan-500" },
                { title: "MySQL", icon: , color: "from-blue-600 to-indigo-600" },
                { title: "Next.js", icon: , color: "from-slate-700 to-slate-900" },
                { title: "Figma", icon: , color: "from-purple-500 to-violet-500" },
                { title: "Postman", icon: , color: "from-orange-500 to-amber-500" },
                { title: "PWA", icon: , color: "from-emerald-500 to-teal-500" },
              ].map((skill, index) => (
                
                  
                    
                      {skill.icon}
                    
                    {skill.title}
                    
                      
                    
                  
                
              ))}
            

          

        


        {/* Projects Section */}
        
          
            
              
                My Work
              
              
                Featured{" "}
                
                  Projects
                
              
              
                A showcase of my recent work, demonstrating my skills and expertise in web development.
              
            

            
              {[
                {
                  title: "E-Commerce Platform",
                  description:
                    "A full-featured online store built with Laravel and React, featuring product management, cart functionality, and secure checkout.",
                  tags: ["Laravel", "React", "MySQL"],
                  image: "/placeholder.svg?height=300&width=500",
                },
                {
                  title: "CMS Dashboard",
                  description:
                    "Content management system with real-time updates using Livewire, allowing clients to manage their website content effortlessly.",
                  tags: ["Laravel", "Livewire", "MySQL"],
                  image: "/placeholder.svg?height=300&width=500",
                },
                {
                  title: "Portfolio PWA",
                  description:
                    "Progressive Web App built with Next.js for optimal performance, featuring offline capabilities and home screen installation.",
                  tags: ["Next.js", "PWA", "React"],
                  image: "/placeholder.svg?height=300&width=500",
                },
                {
                  title: "Al Zahra HR",
                  description:
                    "Al Zahra HR is a comprehensive HR management system designed to streamline human resources processes for Al Zahra Group.",
                  tags: ["Laravel", "React", "Tailwind CSS"],
                  image: "/placeholder.svg?height=300&width=500",
                  link: "https://alzahrahr.com.np",
                },
              ].map((project, index) => (
                
                  
                    
                      
                        
                      
                      
                    
                    
                      
                        {project.title}
                      
                      {project.description}
                      
                        {project.tags.map((tag, tagIndex) => (
                          
                            
                              {tag}
                            
                          
                        ))}
                      
                    
                  
                
              ))}
            

            
              
            
          
        

        {/* Testimonials Section */}
        
          
            
              
                Client Feedback
              
              
                What People{" "}
                
                  Say
                
              
              
                Don't just take my word for it. Here's what clients have to say about working with me.
              
            

            
              {[
                {
                  name: "Sarah Johnson",
                  role: "CEO, TechStart",
                  content:
                    "Rupesh delivered our e-commerce platform ahead of schedule and exceeded our expectations. His attention to detail and problem-solving skills are exceptional.",
                  image: "/images/rupesh-profile.jpeg",
                },
                {
                  name: "Michael Chen",
                  role: "Marketing Director, GrowthLabs",
                  content:
                    "Working with Rupesh was a pleasure. He understood our requirements perfectly and built a CMS that has significantly improved our content workflow.",
                  image: "/images/rupesh-profile.jpeg",
                },
                {
                  name: "Emily Rodriguez",
                  role: "Founder, DesignHub",
                  content:
                    "Rupesh's technical expertise combined with his understanding of design principles resulted in a website that not only looks great but performs exceptionally well.",
                  image: "/images/rupesh-profile.jpeg",
                },
              ].map((testimonial, index) => (
                
                  
                    
                      
                        
                          
                          
                        
                        
                          {testimonial.name}
                          {testimonial.role}
                        
                      
                      
                        {[1, 2, 3, 4, 5].map((star) => (
                          
                            ★
                          
                        ))}
                      
                      "{testimonial.content}"
                    
                  
                
              ))}
            
          
        

        {/* Contact Section */}
        
          
            
              
                
                  Get in Touch
                
                
                  Let's Build Something{" "}
                  
                    Amazing
                  {" "}
                  Together
                
                
                  Have a project in mind? Let's discuss how I can help bring your ideas to life. I'm currently available
                  for freelance work.
                
                
                  
                    
                      
                    
                    
                      Email
                      bhandarirupesh162@gmail.com
                    
                  
                
              

              
                
                
                  Send Me a Message
                  
                    
                      
                        
                          Name *
                        
                        
                      
                      
                        
                          Email *
                        
                        
                      
                    
                    
                      
                        Subject *
                      
                      
                    
                    
                      
                        Message *
                      
                                          </div>
                    <motion.div whileHover={{ scale: 1.02 }} whileTap={{ scale: 0.98 }}>
                      <Button
                        type="submit"
                        disabled={isSubmitting}
                        className="w-full rounded-md bg-gradient-to-r from-purple-600 to-pink-600 hover:from-purple-700 hover:to-pink-700 dark:from-purple-500 dark:to-pink-500 dark:hover:from-purple-600 dark:hover:to-pink-600 text-white disabled:opacity-50"
                      >
                        {isSubmitting ? (
                          <motion.span
                            animate={{ rotate: 360 }}
                            transition={{ duration: 1, repeat: Number.POSITIVE_INFINITY, ease: "linear" }}
                            className="inline-block mr-2"
                          >
                            ⚡
                          </motion.span>
                        ) : null}
                        {isSubmitting ? "Sending..." : "Send Message"}
                      </Button>
                    </motion.div>
                  </form>

                  {contactState && (
                    <motion.div
                      initial={{ opacity: 0, y: 10 }}
                      animate={{ opacity: 1, y: 0 }}
                      className={`mt-4 p-4 rounded-md ${
                        contactState.success
                          ? "bg-green-50 text-green-800 border border-green-200 dark:bg-green-900/20 dark:text-green-300 dark:border-green-800"
                          : "bg-red-50 text-red-800 border border-red-200 dark:bg-red-900/20 dark:text-red-300 dark:border-red-800"
                      }`}
                    >
                      {contactState.message}
                    </motion.div>
                  )}
                </div>
              </motion.div>
            </div>
          </div>
        </section>
      </main>

      <footer className="border-t py-12 bg-white dark:bg-slate-950">
        <div className="container px-4 md:px-6">
          <div className="flex flex-col items-center justify-between gap-4 md:flex-row">
            <div className="flex flex-col items-center gap-4 md:items-start md:gap-2">
              <Link href="/" className="font-bold text-xl flex items-center">
                <span className="text-transparent bg-clip-text bg-gradient-to-r from-purple-600 to-pink-600 dark:from-purple-500 dark:to-pink-500">
                  Rupesh Bhandari
                </span>
              </Link>
              <p className="text-center text-sm leading-loose text-slate-600 dark:text-slate-400 md:text-left">
                © 2024 Rupesh Bhandari. All rights reserved.
              </p>
            </div>
            <div className="flex items-center gap-4">
              <Button variant="ghost" size="icon" className="rounded-full" asChild>
                <Link href="https://github.com" target="_blank" aria-label="GitHub">
                  <Github className="h-4 w-4" />
                </Link>
              </Button>
              <Button variant="ghost" size="icon" className="rounded-full" asChild>
                <Link
                  href="https://www.linkedin.com/in/rupesh-bhandari-5977b525a"
                  target="_blank"
                  aria-label="LinkedIn"
                >
                  <Linkedin className="h-4 w-4" />
                </Link>
              </Button>
            </div>
          </div>
        </div>
      </footer>
    </div>
  )
}84:["$","$L8b",null,{"chatId":"UV3sMGA6TG7","children":["$","$L8c",null,{"data":{"@\"active-block\",\"UV3sMGA6TG7\",":{"id":"b_7IxEJ1uQATN","messageId":"F9rBUbbjtUQ2HuKMGlFbQOVd66N5Rkvk","source":"$8d","language":"typescriptreact","type":"code-project","closed":true,"meta":{"id":"portfolio","type":"code-project","project":"portfolio"},"hasSourceBeenEdited":false,"forkedFromBlockId":"$undefined"},"@\"chat:vm-mode\",\"UV3sMGA6TG7\",":false,"":null},"children":"$L8e"}]}]
</article></body></html>

Rupesh Bhandari

Professional Summary

Technical Skills

Frontend:

Backend:

Tools & Others:

Professional Experience

NinjaInfosys Pvt. Ltd.

KTM Coders Pvt. Ltd.

Advanced Computer Institute

Projects & Achievements

Education

Bachelor in Computer Application (BCA)

+2 in Science

Soft Skills

Languages

References

New Contact Form Submission

From:

Subject:

Message:

Hi, I'm Rupesh Bhandari Full-stack Developer

Turning{" "} Ideas {" "} into{" "} Reality

Technical{" "} Skills

{skill.title}

Featured{" "} Projects

{project.title}

What People{" "} Say

{testimonial.name}

Let's Build Something{" "} Amazing {" "} Together

Email

Send Me a Message

About

Tags

Share

About

Tags

Share

More Templates Like This