/** @jsxImportSource https://esm.sh/react@18.2.0 */ import React, { useState } from "https://esm.sh/react@18.2.0"; import { createRoot } from "https://esm.sh/react-dom@18.2.0/client"; function DeveloperPortfolio() { const [activeSection, setActiveSection] = useState('about'); const projects = [ { name: "Weather Dashboard", description: "Real-time weather tracking app using Open-Meteo API", technologies: ["React", "Geolocation API"], link: "https://sany45-weatherdashboard.web.val.run" }, { name: "Personal Project Tracker", description: "Full-stack project management application", technologies: ["TypeScript", "React", "Node.js"], link: "#" } ]; const skills = [ "TypeScript", "React", "Node.js", "Deno", "Web Development", "API Integration" ]; const renderSection = () => { switch(activeSection) { case 'about': return (

👨‍💻 About Me

Passionate developer with a love for creating innovative web applications. Specializing in modern JavaScript frameworks and building user-friendly interfaces.

); case 'projects': return (

🚀 Projects

{projects.map((project, index) => (

{project.name}

{project.description}

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

View Project

))}

); case 'skills': return (

🛠️ Skills

{skills.map((skill, index) => ( {skill} ))}

); case 'contact': return (

📞 Contact

📧 developer@example.com

🔗 /in/example-developer

🐙 @example-developer

); default: return null; } }; return (

👨‍💻

Developer Portfolio

{renderSection()}

View Source

); } const styles = { container: { fontFamily: '"Inter", system-ui, sans-serif', maxWidth: '650px', margin: '0 auto', padding: '30px', background: 'linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%)', borderRadius: '15px', boxShadow: '0 10px 25px rgba(0,0,0,0.1)', }, header: { textAlign: 'center', marginBottom: '30px', }, avatarContainer: { display: 'flex', justifyContent: 'center', marginBottom: '20px', }, avatar: { fontSize: '100px', background: 'linear-gradient(45deg, #ff6b6b, #4ecdc4)', WebkitBackgroundClip: 'text', WebkitTextFillColor: 'transparent', textShadow: '2px 2px 4px rgba(0,0,0,0.1)', }, mainTitle: { fontSize: '2.5rem', background: 'linear-gradient(45deg, #5f27cd, #48dbfb)', WebkitBackgroundClip: 'text', WebkitTextFillColor: 'transparent', marginBottom: '10px', }, navigation: { display: 'flex', justifyContent: 'center', marginBottom: '30px', gap: '15px', }, navButton: { padding: '10px 20px', border: 'none', backgroundColor: 'rgba(255,255,255,0.2)', borderRadius: '25px', cursor: 'pointer', transition: 'all 0.3s ease', fontWeight: 'bold', color: '#333', boxShadow: '0 4px 6px rgba(0,0,0,0.1)', }, activeNavButton: { background: 'linear-gradient(45deg, #5f27cd, #48dbfb)', color: 'white', transform: 'scale(1.05)', }, main: { backgroundColor: 'rgba(255,255,255,0.9)', borderRadius: '10px', padding: '30px', minHeight: '350px', boxShadow: '0 5px 15px rgba(0,0,0,0.1)', }, sectionContent: { textAlign: 'center', }, sectionTitle: { background: 'linear-gradient(45deg, #5f27cd, #48dbfb)', WebkitBackgroundClip: 'text', WebkitTextFillColor: 'transparent', marginBottom: '20px', }, sectionDescription: { color: '#555', lineHeight: '1.6', }, projectCard: { background: 'linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%)', borderRadius: '10px', padding: '20px', marginBottom: '20px', boxShadow: '0 5px 15px rgba(0,0,0,0.1)', transition: 'transform 0.3s ease', }, projectTitle: { color: '#2d3436', marginBottom: '10px', }, projectDescription: { color: '#636e72', marginBottom: '15px', }, techStack: { display: 'flex', justifyContent: 'center', gap: '10px', marginTop: '15px', }, techBadge: { background: 'linear-gradient(45deg, #ff6b6b, #4ecdc4)', color: 'white', padding: '5px 12px', borderRadius: '20px', fontSize: '0.8em', }, skillsList: { display: 'flex', flexWrap: 'wrap', justifyContent: 'center', gap: '10px', }, skillBadge: { background: 'linear-gradient(45deg, #5f27cd, #48dbfb)', color: 'white', padding: '8px 15px', borderRadius: '20px', fontSize: '0.9em', }, projectLink: { display: 'inline-block', marginTop: '15px', background: 'linear-gradient(45deg, #5f27cd, #48dbfb)', color: 'white', padding: '10px 20px', textDecoration: 'none', borderRadius: '25px', transition: 'transform 0.3s ease', }, contactInfo: { display: 'flex', flexDirection: 'column', alignItems: 'center', gap: '15px', }, contactDetail: { background: 'linear-gradient(45deg, #5f27cd, #48dbfb)', WebkitBackgroundClip: 'text', WebkitTextFillColor: 'transparent', }, sourceLink: { display: 'block', textAlign: 'center', marginTop: '20px', color: '#2d3436', textDecoration: 'none', fontWeight: 'bold', } }; function client() { createRoot(document.getElementById("root")).render(); } if (typeof document !== "undefined") { client(); } export default async function server(request: Request): Promise { return new Response(` Developer Portfolio

`, { headers: { "content-type": "text/html", }, }); }