\n {/* Navigation */}\n

Portfolio

\n \n {/* Desktop Menu */}\n

\n {['home', 'about', 'skills', 'projects', 'contact'].map((section) => (\n scrollToSection(section)}\n className={`capitalize transition-colors duration-200 ${\n activeSection === section \n ? 'text-purple-600 font-semibold' \n : 'text-gray-600 hover:text-purple-600'\n }`}\n >\n {section}\n \n ))}\n

\n\n {/* Mobile Menu Button */}\n setIsMenuOpen(!isMenuOpen)}\n >\n

\n \n \n \n

\n \n

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

\n {['home', 'about', 'skills', 'projects', 'contact'].map((section) => (\n scrollToSection(section)}\n className=\"block w-full text-left py-2 capitalize text-gray-600 hover:text-purple-600 transition-colors duration-200\"\n >\n {section}\n \n ))}\n

\n )}\n

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

👋

\n Hi, I'm Your Name\n

\n Full Stack Developer & UI/UX Designer\n

\n I create beautiful, functional, and user-centered digital experiences that make a difference.\n

\n scrollToSection('projects')}\n className=\"btn-primary px-8 py-3 rounded-full text-white font-semibold\"\n >\n View My Work\n \n scrollToSection('contact')}\n className=\"px-8 py-3 rounded-full border-2 border-white text-white font-semibold hover:bg-white hover:text-purple-600 transition-all duration-300\"\n >\n Get In Touch\n \n

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

About Me

Get to know me better

\n \n

🚀

\n Passionate Developer with a Creative Mind\n

\n I'm a full-stack developer with over 5 years of experience creating digital solutions \n that bridge the gap between design and functionality. I love turning complex problems \n into simple, beautiful, and intuitive solutions.\n

\n When I'm not coding, you can find me exploring new technologies, contributing to \n open-source projects, or enjoying a good cup of coffee while sketching out my next big idea.\n

\n \n Problem Solver\n \n \n Team Player\n \n \n Continuous Learner\n \n

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

Skills & Expertise

Technologies I work with

\n\n

\n {skills.map((skill, index) => (\n

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

\n ))}\n

\n\n

Technologies I Love

\n {['React', 'TypeScript', 'Node.js', 'Python', 'PostgreSQL', 'MongoDB', 'AWS', 'Docker', 'Git', 'Figma'].map((tech) => (\n \n {tech}\n \n ))}\n

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

Featured Projects

Some of my recent work

\n\n

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

{project.image}

{project.title}

{project.description}

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

\n \n \n

\n ))}\n

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

Let's Work Together

\n Have a project in mind? I'd love to hear about it.\n

\n \n

📧

Email

your.email@example.com

💼

linkedin.com/in/yourname

🐙

GitHub

github.com/yourusername

\n\n

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

\n );\n};\n\nexport default App;","deleted","label",[167,168,149],"frontend","components","permalink","https://www.val.town/x/jeffreyyoung/yay/code/frontend/components/App.tsx","extension","actionData","errors"]

\n Hi, I'm Your Name\n

About Me

\n Passionate Developer with a Creative Mind\n

Skills & Expertise

Technologies I Love

Featured Projects

{project.title}

Let's Work Together

Email

LinkedIn

GitHub