\n {/* Section Header */}\n

\n About Me\n

\n\n

\n {/* Left Column - Bio and Stats */}\n

\n {/* Extended Bio */}\n

\n My Journey\n

\n I'm a passionate full-stack developer with over 5 years of experience building \n scalable web applications. My journey started with curiosity about how websites work, \n and it has evolved into a deep love for creating digital solutions that make a difference.\n

\n I specialize in modern JavaScript frameworks, cloud technologies, and agile development \n practices. I believe in writing clean, maintainable code and creating user experiences \n that are both beautiful and functional.\n

\n When I'm not coding, you can find me exploring new technologies, contributing to open-source \n projects, or sharing knowledge with the developer community through blog posts and mentoring.\n

\n\n {/* Stats */}\n

50+

Projects Completed

Years Experience

20+

Happy Clients

100%

Commitment

\n\n {/* Contact Info */}\n

\n \n \n {personalInfo.email}\n \n

\n {personalInfo.phone && (\n

\n \n \n {personalInfo.phone}\n \n

\n )}\n

\n \n {personalInfo.location}\n

\n\n {/* Right Column - Skills */}\n

\n Technical Skills\n

\n \n

\n {Object.entries(skillCategories).map(([category, skills]) => (\n skills.length > 0 && (\n

\n {category}\n

\n {skills.map((skill) => (\n \n {skill}\n \n ))}\n

\n )\n ))}\n \n {/* Other skills not categorized */}\n {personalInfo.skills.filter(skill => \n !Object.values(skillCategories).flat().includes(skill)\n ).length > 0 && (\n

\n Other\n

\n {personalInfo.skills.filter(skill => \n !Object.values(skillCategories).flat().includes(skill)\n ).map((skill) => (\n \n {skill}\n \n ))}\n

\n )}\n

\n\n {/* What I Do */}\n

\n What I Do\n

\n \n

Frontend Development

Creating responsive, interactive user interfaces with modern frameworks

\n \n

Backend Development

Building scalable APIs and server-side applications

\n \n

Database Design

Designing efficient database schemas and optimizing queries

\n );\n}",[],[155,173,179],{"_103":187,"_95":188,"_156":189,"_158":174,"_159":137,"_160":136,"_161":162,"_105":190,"_100":32,"_164":182,"_166":191,"_167":22,"_168":-5,"_169":192,"_98":193},"bf65b7f0-6472-11f0-92bc-0224a6c84d84","App.tsx","1526ab3f-d654-45a0-9108-5b7dc51c9901",["D",1752910444764],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, { useState, useEffect } from \"https://esm.sh/react@18.2.0\";\nimport type { PersonalInfo, Project } from \"../../shared/types.ts\";\nimport Header from \"./Header.tsx\";\nimport Hero from \"./Hero.tsx\";\nimport About from \"./About.tsx\";\nimport Projects from \"./Projects.tsx\";\nimport Contact from \"./Contact.tsx\";\nimport Footer from \"./Footer.tsx\";\n\n// Sample data - customize this with your own information\nconst personalInfo: PersonalInfo = {\n name: \"Your Name\",\n title: \"Full Stack Developer\",\n bio: \"Passionate developer with expertise in modern web technologies. I love creating beautiful, functional applications that solve real-world problems.\",\n location: \"San Francisco, CA\",\n email: \"your.email@example.com\",\n phone: \"+1 (555) 123-4567\",\n social: {\n github: \"https://github.com/yourusername\",\n linkedin: \"https://linkedin.com/in/yourusername\",\n twitter: \"https://twitter.com/yourusername\",\n website: \"https://yourwebsite.com\"\n },\n skills: [\n \"JavaScript\", \"TypeScript\", \"React\", \"Node.js\", \"Python\", \n \"PostgreSQL\", \"MongoDB\", \"AWS\", \"Docker\", \"Git\"\n ],\n resumeUrl: \"/resume.pdf\"\n};\n\nconst sampleProjects: Project[] = [\n {\n id: \"1\",\n title: \"E-Commerce Platform\",\n description: \"A full-stack e-commerce solution with React, Node.js, and PostgreSQL. Features include user authentication, payment processing, and admin dashboard.\",\n technologies: [\"React\", \"Node.js\", \"PostgreSQL\", \"Stripe\", \"AWS\"],\n imageUrl: \"https://images.unsplash.com/photo-1556742049-0cfed4f6a45d?w=500&h=300&fit=crop\",\n demoUrl: \"https://demo.example.com\",\n githubUrl: \"https://github.com/yourusername/ecommerce\",\n featured: true,\n category: \"web\"\n },\n {\n id: \"2\",\n title: \"Task Management App\",\n description: \"A collaborative task management application with real-time updates, drag-and-drop functionality, and team collaboration features.\",\n technologies: [\"React\", \"TypeScript\", \"Socket.io\", \"MongoDB\"],\n imageUrl: \"https://images.unsplash.com/photo-1611224923853-80b023f02d71?w=500&h=300&fit=crop\",\n demoUrl: \"https://tasks.example.com\",\n githubUrl: \"https://github.com/yourusername/taskapp\",\n featured: true,\n category: \"web\"\n },\n {\n id: \"3\",\n title: \"Weather Dashboard\",\n description: \"A responsive weather dashboard with location-based forecasts, interactive maps, and historical weather data visualization.\",\n technologies: [\"React\", \"D3.js\", \"OpenWeather API\", \"Tailwind CSS\"],\n imageUrl: \"https://images.unsplash.com/photo-1504608524841-42fe6f032b4b?w=500&h=300&fit=crop\",\n demoUrl: \"https://weather.example.com\",\n githubUrl: \"https://github.com/yourusername/weather\",\n featured: false,\n category: \"web\"\n },\n {\n id: \"4\",\n title: \"Mobile Fitness Tracker\",\n description: \"A React Native mobile app for tracking workouts, nutrition, and fitness goals with social features and progress analytics.\",\n technologies: [\"React Native\", \"Firebase\", \"Redux\", \"Chart.js\"],\n imageUrl: \"https://images.unsplash.com/photo-1571019613454-1cb2f99b2d8b?w=500&h=300&fit=crop\",\n githubUrl: \"https://github.com/yourusername/fitness-tracker\",\n featured: false,\n category: \"mobile\"\n }\n];\n\nexport default function App() {\n const [theme, setTheme] = useState<'light' | 'dark'>('light');\n const [activeSection, setActiveSection] = useState('home');\n\n useEffect(() => {\n // Load theme from localStorage\n const savedTheme = localStorage.getItem('theme') as 'light' | 'dark' | null;\n if (savedTheme) {\n setTheme(savedTheme);\n document.documentElement.setAttribute('data-theme', savedTheme);\n } else {\n // Check system preference\n const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;\n const initialTheme = prefersDark ? 'dark' : 'light';\n setTheme(initialTheme);\n document.documentElement.setAttribute('data-theme', initialTheme);\n }\n\n // Intersection Observer for active section tracking\n const sections = document.querySelectorAll('section[id]');\n const observer = new IntersectionObserver(\n (entries) => {\n entries.forEach((entry) => {\n if (entry.isIntersecting) {\n setActiveSection(entry.target.id);\n }\n });\n },\n { threshold: 0.3 }\n );\n\n sections.forEach((section) => observer.observe(section));\n\n return () => {\n sections.forEach((section) => observer.unobserve(section));\n };\n }, []);\n\n const toggleTheme = () => {\n const newTheme = theme === 'light' ? 'dark' : 'light';\n setTheme(newTheme);\n localStorage.setItem('theme', newTheme);\n document.documentElement.setAttribute('data-theme', newTheme);\n };\n\n return (\n

\n \n

\n \n \n \n \n

\n \n

\n );\n}",[],[155,173,188],{"_103":195,"_95":196,"_156":197,"_158":174,"_159":137,"_160":136,"_161":162,"_105":198,"_100":32,"_164":182,"_166":199,"_167":22,"_168":-5,"_169":200,"_98":201},"bf65c060-6472-11f0-92bc-0224a6c84d84","Header.tsx","3dc774bc-24ba-4d40-8f0e-1030169fa08f",["D",1752910444764],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, { useState, useEffect } from \"https://esm.sh/react@18.2.0\";\n\ninterface HeaderProps {\n activeSection: string;\n theme: 'light' | 'dark';\n onThemeToggle: () => void;\n}\n\nexport default function Header({ activeSection, theme, onThemeToggle }: HeaderProps) {\n const [isMenuOpen, setIsMenuOpen] = useState(false);\n const [isScrolled, setIsScrolled] = useState(false);\n\n useEffect(() => {\n const handleScroll = () => {\n setIsScrolled(window.scrollY > 50);\n };\n\n window.addEventListener('scroll', handleScroll);\n return () => window.removeEventListener('scroll', handleScroll);\n }, []);\n\n const navItems = [\n { id: 'home', label: 'Home' },\n { id: 'about', label: 'About' },\n { id: 'projects', label: 'Projects' },\n { id: 'contact', label: 'Contact' }\n ];\n\n const scrollToSection = (sectionId: string) => {\n const element = document.getElementById(sectionId);\n if (element) {\n element.scrollIntoView({ behavior: 'smooth' });\n }\n setIsMenuOpen(false);\n };\n\n return (\n

\n {/* Logo */}\n

\n scrollToSection('home')}\n className=\"text-2xl font-bold gradient-text hover:scale-105 transition-transform duration-200\"\n >\n AJ\n \n

\n\n {/* Desktop Navigation */}\n

\n {navItems.map((item) => (\n scrollToSection(item.id)}\n className={`nav-link ${\n activeSection === item.id ? 'active' : ''\n }`}\n >\n {item.label}\n \n ))}\n

\n\n {/* Theme Toggle & Mobile Menu Button */}\n

\n {/* Theme Toggle */}\n \n {theme === 'light' ? '🌙' : '☀️'}\n \n\n {/* Mobile menu button */}\n

\n setIsMenuOpen(!isMenuOpen)}\n className=\"inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 dark:hover:bg-gray-800 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-blue-500\"\n aria-expanded=\"false\"\n >\n Open main menu\n {!isMenuOpen ? (\n \n ) : (\n \n )}\n \n

\n\n {/* Mobile Navigation Menu */}\n {isMenuOpen && (\n

\n {navItems.map((item) => (\n scrollToSection(item.id)}\n className={`block w-full text-left px-3 py-2 rounded-md text-base font-medium transition-colors duration-200 ${\n activeSection === item.id\n ? 'text-blue-600 bg-blue-50 dark:bg-blue-900/20'\n : 'text-gray-700 dark:text-gray-300 hover:text-blue-600 hover:bg-gray-50 dark:hover:bg-gray-800'\n }`}\n >\n {item.label}\n \n ))}\n

\n )}\n

\n );\n}",[],[155,173,196],{"_103":203,"_95":204,"_156":205,"_158":174,"_159":137,"_160":136,"_161":162,"_105":206,"_100":32,"_164":182,"_166":207,"_167":22,"_168":-5,"_169":208,"_98":209},"bf65c7d6-6472-11f0-92bc-0224a6c84d84","Hero.tsx","3bd0a38c-7fe5-4a20-9a9f-7ad222ced4a9",["D",1752910444764],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, { useEffect, useState } from \"https://esm.sh/react@18.2.0\";\nimport type { PersonalInfo } from \"../../shared/types.ts\";\n\ninterface HeroProps {\n personalInfo: PersonalInfo;\n}\n\nexport default function Hero({ personalInfo }: HeroProps) {\n const [displayText, setDisplayText] = useState('');\n const [currentIndex, setCurrentIndex] = useState(0);\n const [isDeleting, setIsDeleting] = useState(false);\n \n const titles = [\n personalInfo.title,\n \"Problem Solver\",\n \"Code Enthusiast\",\n \"Tech Innovator\"\n ];\n\n useEffect(() => {\n const currentTitle = titles[currentIndex];\n const timeout = setTimeout(() => {\n if (!isDeleting) {\n if (displayText.length < currentTitle.length) {\n setDisplayText(currentTitle.slice(0, displayText.length + 1));\n } else {\n setTimeout(() => setIsDeleting(true), 2000);\n }\n } else {\n if (displayText.length > 0) {\n setDisplayText(displayText.slice(0, -1));\n } else {\n setIsDeleting(false);\n setCurrentIndex((prev) => (prev + 1) % titles.length);\n }\n }\n }, isDeleting ? 50 : 100);\n\n return () => clearTimeout(timeout);\n }, [displayText, currentIndex, isDeleting, titles]);\n\n const scrollToSection = (sectionId: string) => {\n const element = document.getElementById(sectionId);\n if (element) {\n element.scrollIntoView({ behavior: 'smooth' });\n }\n };\n\n return (\n

\n {/* Background Pattern */}\n

\n \n {/* Animated Background Elements */}\n

\n\n

\n {/* Profile Image */}\n

\n 👨‍💻\n

\n\n {/* Name */}\n

\n {personalInfo.name}\n

\n\n {/* Animated Title */}\n

\n \n {displayText}\n |\n \n

\n\n {/* Bio */}\n

\n {personalInfo.bio}\n

\n\n {/* Location */}\n

\n \n {personalInfo.location}\n

\n\n {/* CTA Buttons */}\n

\n scrollToSection('projects')}\n className=\"btn-primary text-lg px-8 py-3\"\n >\n View My Work\n \n scrollToSection('contact')}\n className=\"btn-secondary text-lg px-8 py-3\"\n >\n Get In Touch\n \n {personalInfo.resumeUrl && (\n \n \n Download Resume\n \n )}\n

\n\n {/* Social Links */}\n

\n {personalInfo.social.github && (\n \n \n \n )}\n {personalInfo.social.linkedin && (\n \n \n \n )}\n {personalInfo.social.twitter && (\n \n \n \n )}\n {personalInfo.social.website && (\n \n \n \n )}\n

\n\n {/* Scroll Indicator */}\n

\n \n

\n );\n}",[],[155,173,204],[155,173],{"_103":212,"_95":213,"_156":214,"_158":157,"_159":137,"_160":136,"_161":162,"_105":215,"_100":32,"_164":216,"_166":217,"_167":22,"_168":-5,"_169":218,"_98":219},"bf65d6e0-6472-11f0-92bc-0224a6c84d84","index.html","5ba23768-d035-4ddd-8230-3be34a8d465b",["D",1752910444764],"file","\n\n\n \n \n Portfolio - Your Name\n \n \n \n \n 💼\">\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n\n\n

\n \n\n",[],[155,213],{"_103":221,"_95":222,"_156":223,"_158":157,"_159":137,"_160":136,"_161":162,"_105":224,"_100":32,"_164":182,"_166":225,"_167":22,"_168":-5,"_169":226,"_98":227},"bf65d9d8-6472-11f0-92bc-0224a6c84d84","index.tsx","afeaa650-a8db-429d-a941-f22830544ab2",["D",1752910444764],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React from \"https://esm.sh/react@18.2.0\";\nimport { createRoot } from \"https://esm.sh/react-dom@18.2.0/client\";\nimport App from \"./components/App.tsx\";\n\nconst root = createRoot(document.getElementById(\"root\")!);\nroot.render();",[],[155,222],{"_103":229,"_95":230,"_156":231,"_158":157,"_159":137,"_160":136,"_161":162,"_105":232,"_100":32,"_164":216,"_166":233,"_167":22,"_168":-5,"_169":234,"_98":235},"bf65db9a-6472-11f0-92bc-0224a6c84d84","style.css","77a76a15-be4e-4c20-8e36-601bf16a5908",["D",1752910444764],"/* Custom CSS for Portfolio Website */\n\n:root {\n --primary-color: #3b82f6;\n --primary-dark: #1d4ed8;\n --secondary-color: #64748b;\n --accent-color: #f59e0b;\n --text-primary: #1f2937;\n --text-secondary: #6b7280;\n --bg-primary: #ffffff;\n --bg-secondary: #f8fafc;\n --border-color: #e5e7eb;\n --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);\n --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);\n --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);\n}\n\n[data-theme=\"dark\"] {\n --text-primary: #f9fafb;\n --text-secondary: #d1d5db;\n --bg-primary: #111827;\n --bg-secondary: #1f2937;\n --border-color: #374151;\n}\n\n* {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n}\n\nbody {\n font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;\n line-height: 1.6;\n color: var(--text-primary);\n background-color: var(--bg-primary);\n transition: background-color 0.3s ease, color 0.3s ease;\n}\n\n/* Smooth scrolling */\nhtml {\n scroll-behavior: smooth;\n}\n\n/* Custom scrollbar */\n::-webkit-scrollbar {\n width: 8px;\n}\n\n::-webkit-scrollbar-track {\n background: var(--bg-secondary);\n}\n\n::-webkit-scrollbar-thumb {\n background: var(--secondary-color);\n border-radius: 4px;\n}\n\n::-webkit-scrollbar-thumb:hover {\n background: var(--primary-color);\n}\n\n/* Animations */\n@keyframes fadeInUp {\n from {\n opacity: 0;\n transform: translateY(30px);\n }\n to {\n opacity: 1;\n transform: translateY(0);\n }\n}\n\n@keyframes fadeInLeft {\n from {\n opacity: 0;\n transform: translateX(-30px);\n }\n to {\n opacity: 1;\n transform: translateX(0);\n }\n}\n\n@keyframes fadeInRight {\n from {\n opacity: 0;\n transform: translateX(30px);\n }\n to {\n opacity: 1;\n transform: translateX(0);\n }\n}\n\n@keyframes pulse {\n 0%, 100% {\n opacity: 1;\n }\n 50% {\n opacity: 0.5;\n }\n}\n\n@keyframes bounce {\n 0%, 20%, 53%, 80%, 100% {\n transform: translate3d(0, 0, 0);\n }\n 40%, 43% {\n transform: translate3d(0, -30px, 0);\n }\n 70% {\n transform: translate3d(0, -15px, 0);\n }\n 90% {\n transform: translate3d(0, -4px, 0);\n }\n}\n\n/* Utility classes */\n.animate-fade-in-up {\n animation: fadeInUp 0.6s ease-out;\n}\n\n.animate-fade-in-left {\n animation: fadeInLeft 0.6s ease-out;\n}\n\n.animate-fade-in-right {\n animation: fadeInRight 0.6s ease-out;\n}\n\n.animate-pulse {\n animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;\n}\n\n.animate-bounce {\n animation: bounce 1s infinite;\n}\n\n/* Gradient backgrounds */\n.gradient-bg {\n background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-dark) 100%);\n}\n\n.gradient-text {\n background: linear-gradient(135deg, var(--primary-color) 0%, var(--accent-color) 100%);\n -webkit-background-clip: text;\n -webkit-text-fill-color: transparent;\n background-clip: text;\n}\n\n/* Card hover effects */\n.card-hover {\n transition: all 0.3s ease;\n}\n\n.card-hover:hover {\n transform: translateY(-5px);\n box-shadow: var(--shadow-lg);\n}\n\n/* Button styles */\n.btn-primary {\n background: var(--primary-color);\n color: white;\n border: none;\n padding: 12px 24px;\n border-radius: 8px;\n font-weight: 500;\n cursor: pointer;\n transition: all 0.3s ease;\n text-decoration: none;\n display: inline-block;\n}\n\n.btn-primary:hover {\n background: var(--primary-dark);\n transform: translateY(-2px);\n box-shadow: var(--shadow-md);\n}\n\n.btn-secondary {\n background: transparent;\n color: var(--primary-color);\n border: 2px solid var(--primary-color);\n padding: 10px 22px;\n border-radius: 8px;\n font-weight: 500;\n cursor: pointer;\n transition: all 0.3s ease;\n text-decoration: none;\n display: inline-block;\n}\n\n.btn-secondary:hover {\n background: var(--primary-color);\n color: white;\n transform: translateY(-2px);\n}\n\n/* Form styles */\n.form-input {\n width: 100%;\n padding: 12px 16px;\n border: 2px solid var(--border-color);\n border-radius: 8px;\n background: var(--bg-primary);\n color: var(--text-primary);\n font-size: 16px;\n transition: all 0.3s ease;\n}\n\n.form-input:focus {\n outline: none;\n border-color: var(--primary-color);\n box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);\n}\n\n.form-textarea {\n resize: vertical;\n min-height: 120px;\n}\n\n/* Loading spinner */\n.spinner {\n width: 20px;\n height: 20px;\n border: 2px solid transparent;\n border-top: 2px solid currentColor;\n border-radius: 50%;\n animation: spin 1s linear infinite;\n}\n\n@keyframes spin {\n to {\n transform: rotate(360deg);\n }\n}\n\n/* Responsive design helpers */\n@media (max-width: 768px) {\n .mobile-hidden {\n display: none;\n }\n}\n\n@media (min-width: 769px) {\n .desktop-hidden {\n display: none;\n }\n}\n\n/* Section spacing */\n.section-padding {\n padding: 80px 0;\n}\n\n@media (max-width: 768px) {\n .section-padding {\n padding: 60px 0;\n }\n}\n\n/* Navigation styles */\n.nav-link {\n position: relative;\n color: var(--text-secondary);\n text-decoration: none;\n font-weight: 500;\n transition: color 0.3s ease;\n}\n\n.nav-link:hover,\n.nav-link.active {\n color: var(--primary-color);\n}\n\n.nav-link::after {\n content: '';\n position: absolute;\n bottom: -4px;\n left: 0;\n width: 0;\n height: 2px;\n background: var(--primary-color);\n transition: width 0.3s ease;\n}\n\n.nav-link:hover::after,\n.nav-link.active::after {\n width: 100%;\n}\n\n/* Project card styles */\n.project-card {\n background: var(--bg-primary);\n border: 1px solid var(--border-color);\n border-radius: 12px;\n overflow: hidden;\n transition: all 0.3s ease;\n}\n\n.project-card:hover {\n transform: translateY(-8px);\n box-shadow: var(--shadow-lg);\n border-color: var(--primary-color);\n}\n\n/* Skill tag styles */\n.skill-tag {\n background: var(--bg-secondary);\n color: var(--text-primary);\n padding: 6px 12px;\n border-radius: 20px;\n font-size: 14px;\n font-weight: 500;\n border: 1px solid var(--border-color);\n transition: all 0.3s ease;\n}\n\n.skill-tag:hover {\n background: var(--primary-color);\n color: white;\n border-color: var(--primary-color);\n}\n\n/* Theme toggle button */\n.theme-toggle {\n background: var(--bg-secondary);\n border: 1px solid var(--border-color);\n border-radius: 50%;\n width: 44px;\n height: 44px;\n display: flex;\n align-items: center;\n justify-content: center;\n cursor: pointer;\n transition: all 0.3s ease;\n}\n\n.theme-toggle:hover {\n background: var(--primary-color);\n color: white;\n border-color: var(--primary-color);\n}",[],[155,230],[155],{"_103":238,"_95":99,"_156":239,"_158":-5,"_159":137,"_160":136,"_161":162,"_105":240,"_100":32,"_164":165,"_166":-5,"_167":22,"_168":-5,"_169":241,"_98":250},"bf65e720-6472-11f0-92bc-0224a6c84d84","42e4b1ec-a33e-4a4d-ae9f-d6eb2849045b",["D",1752910444764],[242],{"_103":243,"_95":244,"_156":245,"_158":239,"_159":137,"_160":136,"_161":162,"_105":246,"_100":32,"_164":182,"_166":247,"_167":22,"_168":-5,"_169":248,"_98":249},"bf65e55e-6472-11f0-92bc-0224a6c84d84","types.ts","039168b6-008a-4c03-b86d-78ea929f51bc",["D",1752910444764],"// Shared types for the portfolio website\n\nexport interface Project {\n id: string;\n title: string;\n description: string;\n technologies: string[];\n imageUrl?: string;\n demoUrl?: string;\n githubUrl?: string;\n featured: boolean;\n category: 'web' | 'mobile' | 'desktop' | 'other';\n}\n\nexport interface ContactFormData {\n name: string;\n email: string;\n subject: string;\n message: string;\n}\n\nexport interface PersonalInfo {\n name: string;\n title: string;\n bio: string;\n location: string;\n email: string;\n phone?: string;\n social: {\n github?: string;\n linkedin?: string;\n twitter?: string;\n website?: string;\n };\n skills: string[];\n resumeUrl?: string;\n}\n\nexport interface ApiResponse {\n success: boolean;\n data?: T;\n error?: string;\n}",[],[99,244],[99],{"_103":252,"_95":253,"_156":254,"_158":-5,"_159":137,"_160":136,"_161":162,"_105":255,"_100":32,"_164":216,"_166":256,"_167":22,"_168":-5,"_169":257,"_98":258},"bf65e860-6472-11f0-92bc-0224a6c84d84","README.md","278d026b-b938-4206-b021-e2e6f9c1d705",["D",1752910444764],"# Portfolio Website\n\nA modern, responsive portfolio website built with React, TypeScript, and Hono.\n\n## Features\n\n- 🎨 Modern, clean design with smooth animations\n- 📱 Fully responsive layout\n- 🌙 Dark/light theme toggle\n- 📧 Contact form with email integration\n- 🚀 Fast loading with optimized assets\n- 💼 Project showcase with filtering\n- 📄 Downloadable resume/CV\n\n## Project Structure\n\n```\n├── backend/\n│ └── index.ts # Hono server with API routes\n├── frontend/\n│ ├── components/\n│ │ ├── App.tsx # Main React application\n│ │ ├── Header.tsx # Navigation header\n│ │ ├── Hero.tsx # Hero section\n│ │ ├── About.tsx # About section\n│ │ ├── Projects.tsx # Projects showcase\n│ │ ├── Contact.tsx # Contact form\n│ │ └── Footer.tsx # Footer component\n│ ├── index.html # Main HTML template\n│ ├── index.tsx # React entry point\n│ └── style.css # Custom styles\n├── shared/\n│ └── types.ts # Shared TypeScript types\n└── README.md\n```\n\n## Getting Started\n\n1. The backend serves the frontend and handles API requests\n2. Contact form submissions are processed via email\n3. All content can be customized in the component files\n4. Theme preferences are saved in localStorage\n\n## Customization\n\n- Update personal information in `frontend/components/App.tsx`\n- Add your projects in the projects data array\n- Customize colors and styling in `frontend/style.css`\n- Configure email settings in backend environment variables\n\n## Environment Variables\n\n- `CONTACT_EMAIL`: Email address to receive contact form submissions",[],[253],{"_103":260,"_95":261,"_156":262,"_158":-5,"_159":137,"_160":136,"_161":162,"_105":263,"_100":32,"_164":182,"_166":72,"_167":22,"_168":-5,"_169":264,"_98":265},"bf65e9d2-6472-11f0-92bc-0224a6c84d84","new-file-3498.tsx","9693b6c6-0875-466f-b6b0-d283d2920350",["D",1752910444764],[],[261],{"_103":267,"_95":268,"_156":269,"_158":-5,"_159":137,"_160":136,"_161":162,"_105":270,"_100":32,"_164":182,"_166":72,"_167":22,"_168":-5,"_169":271,"_98":272},"bf65eb1c-6472-11f0-92bc-0224a6c84d84","new-file-4945.tsx","e002215d-7ee1-4cd5-b4b9-d6231856f38f",["D",1752910444764],[],[268],{"_103":274,"_95":275,"_156":276,"_158":-5,"_159":137,"_160":136,"_161":162,"_105":277,"_100":32,"_164":182,"_166":72,"_167":22,"_168":-5,"_169":278,"_98":279},"bf65f1de-6472-11f0-92bc-0224a6c84d84","new-file-6269.tsx","2e208c23-abca-4c4f-9ce2-3f882d5e2a50",["D",1752910444764],[],[275],{"_103":281,"_95":282,"_156":283,"_158":-5,"_159":137,"_160":136,"_161":162,"_105":284,"_100":32,"_164":182,"_166":72,"_167":22,"_168":-5,"_169":285,"_98":286},"bf65f3b4-6472-11f0-92bc-0224a6c84d84","new-file-7008.tsx","ad39dd23-0205-494e-8c71-bc532d61f018",["D",1752910444764],[],[282],"files",[153,171,177,186,194,202,211,220,228,237,242,251,259,266,273,280],"counts",{"_291":32,"_292":136,"_293":32,"_294":32},"pulls","branches","forks","envVars","contents",[297],{"_103":243,"_95":244,"_156":245,"_158":239,"_159":137,"_160":136,"_161":162,"_105":298,"_100":32,"_164":182,"_166":247,"_167":22,"_168":-5,"_98":299},["D",1752910444764],[99,244],{"_103":238,"_95":99,"_156":239,"_158":-5,"_159":137,"_160":136,"_161":162,"_105":301,"_100":32,"_164":165,"_166":-5,"_167":22,"_168":-5,"_98":302},["D",1752910444764],[99],"upstreamProject",{"_103":145,"_95":96,"_111":-5,"_112":-5,"_109":110,"_23":305},{"_93":306,"_129":307},"zalwangojalia","https://img.clerk.com/eyJ0eXBlIjoiZGVmYXVsdCIsImlpZCI6Imluc18yTm10cGhQUklwU0tqZHNiOHNnNGd2ZjJURFUiLCJyaWQiOiJ1c2VyXzJ4eDBVOW94VWxHZ2tsYkE0VlNRSFFKZFRzcyJ9","upstreamBranch",{"_103":140,"_105":310,"_311":312,"_95":43,"_138":145,"_100":142,"_139":-5,"_141":-5,"_313":-5,"_107":-5,"_150":22,"_109":110,"_149":306,"_16":147,"_148":96},["D",1748865764818],"updatedAt",["D",1748871769450],"lockfileKey","emptyEnvVars","isNew","flags",[],"routes/_app.x.$handle.$name.branch.$branch.code.$",{"_93":94,"_95":96,"_97":43,"_100":-7,"_98":99,"_101":320,"_151":325,"_287":374,"_216":375,"_295":377,"_380":381,"_384":22,"_385":-5,"_386":32,"_387":32,"_388":389},{"_103":104,"_95":96,"_105":321,"_107":-5,"_108":22,"_109":110,"_111":-5,"_112":-5,"_14":113,"_114":-5,"_115":22,"_116":-5,"_117":32,"_16":118,"_119":120,"_121":120,"_122":123,"_124":123,"_125":123,"_126":120,"_127":120,"_23":322,"_131":323,"_134":324,"_150":22},["D",1752910444764],{"_93":94,"_129":130},{"_93":94,"_133":130},{"_100":136,"_95":43,"_103":137,"_138":104,"_139":140,"_141":142,"_143":110,"_144":145,"_146":147,"_148":96,"_149":94},[326,353,359,362,365,368,371],{"_103":154,"_95":155,"_156":157,"_158":-5,"_159":137,"_160":136,"_161":162,"_105":163,"_100":32,"_164":165,"_166":-5,"_167":22,"_168":-5,"_169":327,"_98":352},[328,343,346,349],{"_103":172,"_95":173,"_156":174,"_158":157,"_159":137,"_160":136,"_161":162,"_105":175,"_100":32,"_164":165,"_166":-5,"_167":22,"_168":-5,"_169":329,"_98":342},[330,333,336,339],{"_103":178,"_95":179,"_156":180,"_158":174,"_159":137,"_160":136,"_161":162,"_105":181,"_100":32,"_164":182,"_166":183,"_167":22,"_168":-5,"_169":331,"_98":332},[],[155,173,179],{"_103":187,"_95":188,"_156":189,"_158":174,"_159":137,"_160":136,"_161":162,"_105":190,"_100":32,"_164":182,"_166":191,"_167":22,"_168":-5,"_169":334,"_98":335},[],[155,173,188],{"_103":195,"_95":196,"_156":197,"_158":174,"_159":137,"_160":136,"_161":162,"_105":198,"_100":32,"_164":182,"_166":199,"_167":22,"_168":-5,"_169":337,"_98":338},[],[155,173,196],{"_103":203,"_95":204,"_156":205,"_158":174,"_159":137,"_160":136,"_161":162,"_105":206,"_100":32,"_164":182,"_166":207,"_167":22,"_168":-5,"_169":340,"_98":341},[],[155,173,204],[155,173],{"_103":212,"_95":213,"_156":214,"_158":157,"_159":137,"_160":136,"_161":162,"_105":215,"_100":32,"_164":216,"_166":217,"_167":22,"_168":-5,"_169":344,"_98":345},[],[155,213],{"_103":221,"_95":222,"_156":223,"_158":157,"_159":137,"_160":136,"_161":162,"_105":224,"_100":32,"_164":182,"_166":225,"_167":22,"_168":-5,"_169":347,"_98":348},[],[155,222],{"_103":229,"_95":230,"_156":231,"_158":157,"_159":137,"_160":136,"_161":162,"_105":232,"_100":32,"_164":216,"_166":233,"_167":22,"_168":-5,"_169":350,"_98":351},[],[155,230],[155],{"_103":238,"_95":99,"_156":239,"_158":-5,"_159":137,"_160":136,"_161":162,"_105":240,"_100":32,"_164":165,"_166":-5,"_167":22,"_168":-5,"_169":354,"_98":358},[355],{"_103":243,"_95":244,"_156":245,"_158":239,"_159":137,"_160":136,"_161":162,"_105":246,"_100":32,"_164":182,"_166":247,"_167":22,"_168":-5,"_169":356,"_98":357},[],[99,244],[99],{"_103":252,"_95":253,"_156":254,"_158":-5,"_159":137,"_160":136,"_161":162,"_105":255,"_100":32,"_164":216,"_166":256,"_167":22,"_168":-5,"_169":360,"_98":361},[],[253],{"_103":260,"_95":261,"_156":262,"_158":-5,"_159":137,"_160":136,"_161":162,"_105":263,"_100":32,"_164":182,"_166":72,"_167":22,"_168":-5,"_169":363,"_98":364},[],[261],{"_103":267,"_95":268,"_156":269,"_158":-5,"_159":137,"_160":136,"_161":162,"_105":270,"_100":32,"_164":182,"_166":72,"_167":22,"_168":-5,"_169":366,"_98":367},[],[268],{"_103":274,"_95":275,"_156":276,"_158":-5,"_159":137,"_160":136,"_161":162,"_105":277,"_100":32,"_164":182,"_166":72,"_167":22,"_168":-5,"_169":369,"_98":370},[],[275],{"_103":281,"_95":282,"_156":283,"_158":-5,"_159":137,"_160":136,"_161":162,"_105":284,"_100":32,"_164":182,"_166":72,"_167":22,"_168":-5,"_169":372,"_98":373},[],[282],[326,328,330,333,336,339,343,346,349,353,355,359,362,365,368,371],{"_103":238,"_95":99,"_156":239,"_158":-5,"_159":137,"_160":136,"_161":162,"_105":301,"_100":32,"_164":165,"_166":-5,"_167":22,"_168":-5,"_98":376},[99],[378],{"_103":243,"_95":244,"_156":245,"_158":239,"_159":137,"_160":136,"_161":162,"_105":298,"_100":32,"_164":182,"_166":247,"_167":22,"_168":-5,"_98":379},[99,244],"upstream",{"_103":140,"_105":382,"_311":383,"_95":43,"_138":145,"_100":142,"_139":-5,"_141":-5,"_313":-5,"_107":-5,"_150":22,"_109":110,"_149":306,"_16":147,"_148":96},["D",1748865764818],["D",1748871769450],"showCompareCallout","pull","ahead","behind","templates",[390,407],{"_103":391,"_95":392,"_105":393,"_107":-5,"_108":22,"_109":110,"_111":394,"_112":395,"_14":396,"_114":397,"_115":162,"_116":398,"_117":399,"_16":400,"_119":120,"_121":120,"_122":123,"_124":123,"_125":123,"_126":120,"_127":120,"_23":401,"_131":404,"_134":405,"_150":22},"8e7382ae-d835-11ef-bbbf-e6cdfca9ef9f","markdownBlogStarter",["D",1737491000655],"Starter template for a markdown blog","https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/44a31e5c-3e8a-48a8-d067-5785c0b08200/square512","a0bf3b31-15a5-4d5c-880e-4b1e22c9bc18","a4a9ad14-d835-11ef-8351-e6cdfca9ef9f",167,11,"e81e7335-6d4c-4764-a902-d0962bbfa9f7",{"_93":402,"_129":403},"stevekrouse","https://images.clerk.dev/uploaded/img_2PqHa2Gsy93xQrjh2w78Xu0cChW.jpeg",{"_93":402,"_133":403},{"_103":406,"_95":43,"_100":398,"_138":391,"_139":-5,"_141":-5},"8e73c264-d835-11ef-bbbf-e6cdfca9ef9f",{"_103":408,"_95":409,"_105":410,"_107":-5,"_108":22,"_109":110,"_111":411,"_112":-5,"_14":412,"_114":413,"_115":162,"_116":414,"_117":415,"_16":416,"_119":120,"_121":120,"_122":123,"_124":123,"_125":123,"_126":120,"_127":120,"_23":417,"_131":420,"_134":421,"_150":22},"96102714-f528-11ef-aa68-569c3dd06744","reactHonoStarter",["D",1740674013689],"Starter template with client-side React & Hono server","c9143560-63b6-444f-8f9f-e2647fabe09f","a9b2b20a-f528-11ef-9e98-569c3dd06744",39,14,"c606f87f-4d7e-48c8-9c39-ef5ab94aec49",{"_93":418,"_129":419},"std","https://img.clerk.com/eyJ0eXBlIjoicHJveHkiLCJzcmMiOiJodHRwczovL2ltYWdlcy5jbGVyay5kZXYvdXBsb2FkZWQvaW1nXzJVaVhpQ1BId3dscVpBbkdZVWlMNjJtcjkxWS5wbmcifQ",{"_93":418,"_133":419},{"_103":422,"_95":43,"_100":423,"_138":408,"_139":-5,"_141":-5},"961078ea-f528-11ef-aa68-569c3dd06744",72,"actionData","errors"]

rajivnakhawa

Website