{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}",[152,72,64],"pulls","branches",1,"forks","envVars",{"_166":26,"_168":26},"connections",{"_166":26,"_167":26},"count","unfilledCount","emptyCount",{"_33":254,"_13":253,"_62":247,"_43":-5,"_35":36,"_146":255,"_147":24,"_37":256,"_39":26,"_65":73,"_149":-5,"_67":30,"_150":-5,"_186":257,"_17":258},{"_33":245,"_13":246,"_62":85,"_43":247,"_35":36,"_146":109,"_147":24,"_37":248,"_39":160,"_65":249,"_149":250,"_67":30,"_150":-5,"_186":251,"_17":252},{"_33":241,"_13":152,"_62":145,"_43":-5,"_35":36,"_146":230,"_147":24,"_37":242,"_39":26,"_65":73,"_149":-5,"_67":30,"_150":-5,"_186":243,"_17":244},{"_33":144,"_13":72,"_62":71,"_43":145,"_35":36,"_146":40,"_147":24,"_37":238,"_39":26,"_65":73,"_149":-5,"_67":30,"_150":-5,"_186":239,"_17":240},{"_33":154,"_13":64,"_62":63,"_43":71,"_35":36,"_146":40,"_147":24,"_37":235,"_39":26,"_65":66,"_149":156,"_67":30,"_150":-5,"_186":236,"_17":237},{"_33":227,"_13":228,"_62":229,"_43":145,"_35":36,"_146":230,"_147":24,"_37":231,"_39":26,"_65":21,"_149":232,"_67":30,"_150":-5,"_186":233,"_17":234},{"_33":219,"_13":220,"_62":221,"_43":145,"_35":36,"_146":222,"_147":24,"_37":223,"_39":26,"_65":66,"_149":224,"_67":30,"_150":-5,"_186":225,"_17":226},{"_33":211,"_13":212,"_62":213,"_43":145,"_35":36,"_146":214,"_147":24,"_37":215,"_39":26,"_65":21,"_149":216,"_67":30,"_150":-5,"_186":217,"_17":218},{"_33":207,"_13":206,"_62":200,"_43":-5,"_35":36,"_146":201,"_147":24,"_37":208,"_39":26,"_65":73,"_149":-5,"_67":30,"_150":-5,"_186":209,"_17":210},{"_33":197,"_13":198,"_62":199,"_43":200,"_35":36,"_146":201,"_147":24,"_37":202,"_39":26,"_65":66,"_149":203,"_67":30,"_150":-5,"_186":204,"_17":205},{"_33":189,"_13":190,"_62":191,"_43":-5,"_35":36,"_146":192,"_147":24,"_37":193,"_39":26,"_65":21,"_149":194,"_67":30,"_150":-5,"_186":195,"_17":196},{"_33":181,"_13":182,"_62":183,"_43":-5,"_35":36,"_146":160,"_147":24,"_37":184,"_39":26,"_65":66,"_149":185,"_67":30,"_150":-5,"_186":187,"_17":188},"eb0d8784-3fb0-11f0-8dcb-76b3cceeab13","main.tsx","eb0d8946-3fb0-11f0-8dcb-76b3cceeab13",["D",1748868953875],"","children",[],[182],"4e97e902-3fb1-11f0-bb17-76b3cceeab13","README.md","4e97e9ac-3fb1-11f0-bb17-76b3cceeab13",2,["D",1748869120875],"# Personal Portfolio Website\n\nA modern, responsive personal portfolio built with React, TypeScript, and TailwindCSS on Val Town.\n\n## Features\n\n- 📱 Fully responsive design\n- 🎨 Modern UI with smooth animations\n- 📧 Contact form integration\n- 🚀 Fast loading and optimized\n- 🎯 Clean, professional layout\n\n## Structure\n\n```\n├── backend/\n│ └── index.ts # Hono server for serving static files\n├── frontend/\n│ ├── components/\n│ │ └── App.tsx # Main portfolio component\n│ ├── index.html # HTML template\n│ ├── index.tsx # React entry point\n│ └── style.css # Custom styles\n└── shared/\n └── types.ts # Shared TypeScript types\n```\n\n## Customization\n\nEdit the portfolio data in `frontend/components/App.tsx` to personalize:\n- Personal information and bio\n- Skills and technologies\n- Project showcase\n- Contact information\n- Social media links\n\n## Deployment\n\nThis portfolio is automatically deployed on Val Town. The backend serves the frontend files and handles any API requests.",[],[190],"51b94aea-3fb1-11f0-bb17-76b3cceeab13","types.ts","51b94bb2-3fb1-11f0-bb17-76b3cceeab13","fa7abc47-d47b-4466-aa36-8b76f3e67e7b",3,["D",1748869126125],"// Shared types for the portfolio\n\nexport interface Project {\n id: string;\n title: string;\n description: string;\n technologies: string[];\n githubUrl?: string;\n liveUrl?: string;\n imageUrl?: string;\n}\n\nexport interface Skill {\n name: string;\n level: 'Beginner' | 'Intermediate' | 'Advanced' | 'Expert';\n category: 'Frontend' | 'Backend' | 'Database' | 'Tools' | 'Other';\n}\n\nexport interface ContactForm {\n name: string;\n email: string;\n message: string;\n}\n\nexport interface PersonalInfo {\n name: string;\n title: string;\n bio: string;\n email: string;\n location: string;\n socialLinks: {\n github?: string;\n linkedin?: string;\n twitter?: string;\n website?: string;\n };\n}",[],[206,198],"shared","51b95044-3fb1-11f0-bb17-76b3cceeab13",["D",1748869126125],[178],[206],"5cbacbe4-3fb1-11f0-bed5-76b3cceeab13","style.css","5cbacc7a-3fb1-11f0-bed5-76b3cceeab13",5,["D",1748869144589],"/* Custom styles for the portfolio */\n\n* {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n}\n\nhtml {\n scroll-behavior: smooth;\n}\n\nbody {\n font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;\n line-height: 1.6;\n}\n\n/* Smooth animations */\n.fade-in {\n animation: fadeIn 0.6s ease-in-out;\n}\n\n@keyframes fadeIn {\n from {\n opacity: 0;\n transform: translateY(20px);\n }\n to {\n opacity: 1;\n transform: translateY(0);\n }\n}\n\n.slide-in-left {\n animation: slideInLeft 0.8s ease-out;\n}\n\n@keyframes slideInLeft {\n from {\n opacity: 0;\n transform: translateX(-50px);\n }\n to {\n opacity: 1;\n transform: translateX(0);\n }\n}\n\n.slide-in-right {\n animation: slideInRight 0.8s ease-out;\n}\n\n@keyframes slideInRight {\n from {\n opacity: 0;\n transform: translateX(50px);\n }\n to {\n opacity: 1;\n transform: translateX(0);\n }\n}\n\n/* Custom gradient backgrounds */\n.gradient-bg {\n background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);\n}\n\n.gradient-text {\n background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);\n -webkit-background-clip: text;\n -webkit-text-fill-color: transparent;\n background-clip: text;\n}\n\n/* Hover effects */\n.hover-lift {\n transition: transform 0.3s ease, box-shadow 0.3s ease;\n}\n\n.hover-lift:hover {\n transform: translateY(-5px);\n box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);\n}\n\n/* Custom scrollbar */\n::-webkit-scrollbar {\n width: 8px;\n}\n\n::-webkit-scrollbar-track {\n background: #f1f1f1;\n}\n\n::-webkit-scrollbar-thumb {\n background: #888;\n border-radius: 4px;\n}\n\n::-webkit-scrollbar-thumb:hover {\n background: #555;\n}",[],[152,212],"5ffa4712-3fb1-11f0-a26b-76b3cceeab13","index.tsx","5ffa47c6-3fb1-11f0-a26b-76b3cceeab13",6,["D",1748869150030],"/** @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();",[],[152,220],"55cacfe6-3fb1-11f0-9267-76b3cceeab13","index.html","55cad0a4-3fb1-11f0-9267-76b3cceeab13",4,["D",1748869132951],"\n\n\n \n \n Personal Portfolio\n \n \n \n \n \n \n \n \n \n \n \n \n 👨‍💻\">\n\n\n

\n \n\n",[],[152,228],["D",1748869212442],[],[152,72,64],["D",1748869212442],[173],[152,72],"55cad7de-3fb1-11f0-9267-76b3cceeab13",["D",1748869132951],[172,174,175,176],[152],"8ef40aa8-3fb1-11f0-b999-76b3cceeab13","index.ts","e88543a5-26b5-456f-b69c-3ff3b366ae25",["D",1748869228849],"http","import { Hono } from \"https://esm.sh/hono@3.11.7\";\nimport { readFile, serveFile } from \"https://esm.town/v/std/utils@85-main/index.ts\";\n\nconst app = new Hono();\n\n// Unwrap Hono errors to see original error details\napp.onError((err, c) => {\n throw err;\n});\n\n// Serve static files from frontend and shared directories\napp.get(\"/frontend/*\", c => serveFile(c.req.path, import.meta.url));\napp.get(\"/shared/*\", c => serveFile(c.req.path, import.meta.url));\n\n// Serve the main portfolio page\napp.get(\"/\", async c => {\n const html = await readFile(\"/frontend/index.html\", import.meta.url);\n return c.html(html);\n});\n\n// API endpoint for contact form (placeholder - customize as needed)\napp.post(\"/api/contact\", async c => {\n try {\n const body = await c.req.json();\n const { name, email, message } = body;\n \n // Here you could:\n // - Send an email using the email utility\n // - Save to a database\n // - Send to a third-party service\n \n console.log(\"Contact form submission:\", { name, email, message });\n \n return c.json({ \n success: true, \n message: \"Thank you for your message! I'll get back to you soon.\" \n });\n } catch (error) {\n console.error(\"Contact form error:\", error);\n return c.json({ \n success: false, \n message: \"Sorry, there was an error sending your message.\" \n }, 500);\n }\n});\n\n// Health check endpoint\napp.get(\"/api/health\", c => {\n return c.json({ status: \"ok\", timestamp: new Date().toISOString() });\n});\n\nexport default app.fetch;",[],[253,246],"backend","8c8be196-3fb1-11f0-ab95-76b3cceeab13",8,["D",1748869224814],[170],[253],["D",1748868953860],{"_11":12,"_122":70},{"_11":12,"_118":-5,"_69":70,"_31":68,"_119":120,"_121":30},{"_39":109,"_13":16,"_33":36,"_110":75,"_111":-5,"_112":-5,"_113":-5,"_114":-5,"_115":-5,"_116":14,"_117":12},"ctx",{"_52":-5,"_141":296,"_297":298,"_299":300,"_301":30,"_302":30,"_303":30,"_304":24,"_305":-5,"_306":-7,"_307":-7,"_308":26,"_309":30,"_310":30,"_311":-5,"_312":30,"_313":30,"_314":30,"_315":-5},"ENV",{"_267":268,"_269":270,"_271":16,"_272":273,"_274":275,"_276":277,"_278":279,"_280":281,"_282":283,"_284":285,"_286":287,"_288":289,"_290":291,"_292":293,"_294":295},"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 · components