\n \n\n",[],[224,234],"852ce60c-3fb1-11f0-b63d-76b3cceeab13","App.tsx","852ce6ac-3fb1-11f0-b63d-76b3cceeab13","e98a7004-69ae-41a2-9111-c7963fd35d47",7,["D",1748869212442],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, { useState } from \"https://esm.sh/react@18.2.0\";\nimport type { PersonalInfo, Project, Skill, ContactForm } from \"../../shared/types.ts\";\n\n// Portfolio data - customize this section with your 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 email: \"your.email@example.com\",\n location: \"Your City, Country\",\n socialLinks: {\n github: \"https://github.com/yourusername\",\n linkedin: \"https://linkedin.com/in/yourusername\",\n twitter: \"https://twitter.com/yourusername\",\n }\n};\n\nconst projects: 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\", \"TailwindCSS\"],\n githubUrl: \"https://github.com/yourusername/ecommerce\",\n liveUrl: \"https://your-ecommerce.com\"\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\", \"Firebase\", \"Material-UI\"],\n githubUrl: \"https://github.com/yourusername/taskmanager\"\n },\n {\n id: \"3\",\n title: \"Weather Dashboard\",\n description: \"A responsive weather dashboard that displays current conditions and forecasts with beautiful visualizations and location-based services.\",\n technologies: [\"JavaScript\", \"Chart.js\", \"OpenWeather API\", \"CSS3\"],\n githubUrl: \"https://github.com/yourusername/weather-dashboard\",\n liveUrl: \"https://your-weather-app.com\"\n }\n];\n\nconst skills: Skill[] = [\n { name: \"JavaScript\", level: \"Expert\", category: \"Frontend\" },\n { name: \"TypeScript\", level: \"Advanced\", category: \"Frontend\" },\n { name: \"React\", level: \"Expert\", category: \"Frontend\" },\n { name: \"Node.js\", level: \"Advanced\", category: \"Backend\" },\n { name: \"Python\", level: \"Intermediate\", category: \"Backend\" },\n { name: \"PostgreSQL\", level: \"Advanced\", category: \"Database\" },\n { name: \"MongoDB\", level: \"Intermediate\", category: \"Database\" },\n { name: \"Git\", level: \"Expert\", category: \"Tools\" },\n { name: \"Docker\", level: \"Intermediate\", category: \"Tools\" },\n { name: \"AWS\", level: \"Intermediate\", category: \"Tools\" }\n];\n\nexport default function App() {\n const [contactForm, setContactForm] = useState({\n name: \"\",\n email: \"\",\n message: \"\"\n });\n const [isSubmitting, setIsSubmitting] = useState(false);\n const [submitMessage, setSubmitMessage] = useState(\"\");\n\n const handleContactSubmit = async (e: React.FormEvent) => {\n e.preventDefault();\n setIsSubmitting(true);\n \n try {\n // Simulate form submission - replace with actual API call\n await new Promise(resolve => setTimeout(resolve, 1000));\n setSubmitMessage(\"Thank you for your message! I'll get back to you soon.\");\n setContactForm({ name: \"\", email: \"\", message: \"\" });\n } catch (error) {\n setSubmitMessage(\"Sorry, there was an error sending your message. Please try again.\");\n } finally {\n setIsSubmitting(false);\n }\n };\n\n const scrollToSection = (sectionId: string) => {\n document.getElementById(sectionId)?.scrollIntoView({ behavior: 'smooth' });\n };\n\n return (\n

\n {/* Navigation */}\n

{personalInfo.name}

\n \n \n \n \n

\n\n {/* Hero Section */}\n

👨‍💻

{personalInfo.name}

{personalInfo.title}

{personalInfo.bio}

\n \n \n

\n\n {/* About Section */}\n

About Me

Hello! I'm {personalInfo.name}

\n {personalInfo.bio} I'm based in {personalInfo.location} and I'm always excited to work on new challenges and collaborate with amazing teams.\n

\n {Object.entries(personalInfo.socialLinks).map(([platform, url]) => (\n url && (\n \n {platform}\n ↗\n \n )\n ))}\n

Quick Facts

\n \n 📍 Located in {personalInfo.location}\n
\n \n 💼 {personalInfo.title}\n
\n \n 📧 {personalInfo.email}\n
\n \n 🚀 Available for new opportunities\n

\n\n {/* Skills Section */}\n

Skills & Technologies

\n {['Frontend', 'Backend', 'Database', 'Tools'].map(category => (\n

{category}

\n {skills.filter(skill => skill.category === category).map(skill => (\n

\n {skill.name}\n \n {skill.level}\n \n

\n ))}\n

\n\n {/* Projects Section */}\n

Featured Projects

\n {projects.map(project => (\n

{project.title}

{project.description}

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

\n {project.githubUrl && (\n \n GitHub ↗\n \n )}\n {project.liveUrl && (\n \n Live Demo ↗\n \n )}\n

\n ))}\n

\n\n {/* Contact Section */}\n

Get In Touch

\n I'm always interested in new opportunities and collaborations. Let's connect!\n

Contact Information

\n 📧\n

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

\n 📍\n

Location

{personalInfo.location}

\n \n Name\n \n setContactForm(prev => ({ ...prev, name: e.target.value }))}\n className=\"w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500\"\n />\n

\n \n Email\n \n setContactForm(prev => ({ ...prev, email: e.target.value }))}\n className=\"w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500\"\n />\n

\n \n Message\n \n setContactForm(prev => ({ ...prev, message: e.target.value }))}\n className=\"w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500\"\n >\n

\n \n {isSubmitting ? 'Sending...' : 'Send Message'}\n \n {submitMessage && (\n

\n {submitMessage}\n

\n )}\n \n

\n\n {/* Footer */}\n \n

\n );\n}",[],[224,250,242],"components","852d0588-3fb1-11f0-b63d-76b3cceeab13",["D",1748869212442],[177],[224,250],"55cad7de-3fb1-11f0-9267-76b3cceeab13",["D",1748869132951],[176,178,179,180],[224],["D",1748869228849],[],[18,65],["D",1748869224814],[174],[18],["D",1748868953860],{"_11":12,"_128":71},{"_11":12,"_124":-5,"_70":71,"_31":69,"_125":126,"_127":30},{"_40":74,"_13":16,"_34":37,"_116":83,"_117":-5,"_118":-5,"_119":-5,"_120":-5,"_121":-5,"_122":14,"_123":12},"ctx",{"_53":-5,"_147":302,"_303":304,"_305":306,"_307":30,"_308":30,"_309":30,"_310":24,"_311":-5,"_312":-7,"_313":-7,"_314":26,"_315":30,"_316":30,"_317":-5,"_318":30,"_319":30,"_320":30,"_321":-5},"ENV",{"_273":274,"_275":276,"_277":16,"_278":279,"_280":281,"_282":283,"_284":285,"_286":287,"_288":289,"_290":291,"_292":293,"_294":295,"_296":297,"_298":299,"_300":301},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","71c1b20804b3232a7e513be260cfffc1932a9e97","RENDER_GIT_BRANCH","POSTHOG_API_TOKEN","phc_nmoyuAkStEZuUp69rYlg1DZgrIt19Gx0Y4Hwf8tGgJP","POSTHOG_API_HOST","https://wart.val.town","WEB_API_TEMPLATE","https://{val}.web.val.run","APP_URL","https://www.val.town","MODULE_URL","https://esm.town","VANITY_WEB_API_TEMPLATE","https://{label}.val.run/","DENOLS_URL","https://lsp.val.town","NODE_ENV","production","CLOUDFLARE_TURNSTILE_SITE_KEY","0x4AAAAAACtaIZJH7s9rBMZ6","GOOGLE_CLIENT_ID","875989696899-jtsqkhlbdv5jrlsk8631p7ipjg3c6o62.apps.googleusercontent.com","STRIPE_PUBLISHABLE_KEY","pk_live_51N2zvWEpZTTLipIkVEwXrUG9AT0yeOOEYxszarZT1jpsZV58Ly6wlg3SltZpHN26CUalOBmUSY7adQRQiSkCZz2500qSXNkf8Y","API_URL","https://api.val.town",[],"preferencesKeybindings","default","preferencesTheme","light","preferencesFixers","preferencesCopilot","preferencesSelectionAi","preferencesCloseBrackets","preferencesChatPanelState","preferencesDprint","preferencesDenofmt","notificationCount","flagDenols","isBusinessOrgMember","businessOrgHandle","isBusinessOrgAdmin","isHigherTownieTier","navCollapsed","currentOrgId"]

History · backend