Josh Knapp
a71b58c2c7
Visual drag-and-drop website builder using GrapesJS with: - Multi-page editor with live preview - File-based asset storage via PHP API (no localStorage base64) - Template library, Docker support, and Playwright test suite Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
153 lines
14 KiB
HTML
153 lines
14 KiB
HTML
<!-- Navigation -->
|
|
<nav style="display:flex;align-items:center;justify-content:space-between;padding:24px 60px;background:#0c0a09;">
|
|
<div style="font-size:20px;font-weight:700;color:#fafaf9;font-family:Inter,sans-serif;letter-spacing:-0.5px;">Alex Chen</div>
|
|
<div style="display:flex;gap:32px;align-items:center;">
|
|
<a href="#work" style="color:#a8a29e;text-decoration:none;font-size:15px;font-family:Inter,sans-serif;">Work</a>
|
|
<a href="#about" style="color:#a8a29e;text-decoration:none;font-size:15px;font-family:Inter,sans-serif;">About</a>
|
|
<a href="#contact" style="color:#a8a29e;text-decoration:none;font-size:15px;font-family:Inter,sans-serif;">Contact</a>
|
|
</div>
|
|
</nav>
|
|
|
|
<!-- Hero -->
|
|
<section style="min-height:85vh;display:flex;align-items:center;padding:80px 60px;background:#0c0a09;">
|
|
<div style="max-width:900px;">
|
|
<p style="color:#f97316;font-size:16px;font-weight:600;margin-bottom:20px;font-family:Inter,sans-serif;text-transform:uppercase;letter-spacing:3px;">Digital Designer & Developer</p>
|
|
<h1 style="color:#fafaf9;font-size:72px;font-weight:800;line-height:1.05;margin-bottom:32px;font-family:Inter,sans-serif;letter-spacing:-2px;">I craft digital experiences that people <span style="color:#f97316;">remember.</span></h1>
|
|
<p style="color:#a8a29e;font-size:20px;line-height:1.7;margin-bottom:40px;font-family:Inter,sans-serif;max-width:600px;">Product designer with 8+ years of experience creating intuitive interfaces for startups and Fortune 500 companies. Currently available for freelance projects.</p>
|
|
<div style="display:flex;gap:16px;flex-wrap:wrap;">
|
|
<a href="#work" style="display:inline-block;padding:16px 36px;background:#f97316;color:#fff;font-size:16px;font-weight:600;text-decoration:none;border-radius:8px;font-family:Inter,sans-serif;">View My Work</a>
|
|
<a href="#contact" style="display:inline-block;padding:16px 36px;background:transparent;color:#fafaf9;font-size:16px;font-weight:600;text-decoration:none;border-radius:8px;font-family:Inter,sans-serif;border:1px solid #44403c;">Get In Touch</a>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Projects Section -->
|
|
<section id="work" style="padding:100px 60px;background:#1c1917;">
|
|
<div style="max-width:1200px;margin:0 auto;">
|
|
<div style="margin-bottom:60px;">
|
|
<h2 style="font-size:14px;font-weight:600;color:#f97316;margin-bottom:12px;font-family:Inter,sans-serif;text-transform:uppercase;letter-spacing:3px;">Selected Work</h2>
|
|
<h3 style="font-size:42px;font-weight:800;color:#fafaf9;font-family:Inter,sans-serif;letter-spacing:-1px;">Projects I'm proud of</h3>
|
|
</div>
|
|
<div style="display:flex;flex-direction:column;gap:40px;">
|
|
<!-- Project 1 -->
|
|
<div style="display:flex;flex-wrap:wrap;gap:0;border-radius:20px;overflow:hidden;background:#292524;">
|
|
<div style="flex:1;min-width:300px;">
|
|
<img src="https://images.unsplash.com/photo-1460925895917-afdab827c52f?w=800&h=500&fit=crop" style="width:100%;height:100%;object-fit:cover;display:block;min-height:300px;" alt="Fintech Dashboard">
|
|
</div>
|
|
<div style="flex:1;min-width:300px;padding:48px;display:flex;flex-direction:column;justify-content:center;">
|
|
<p style="color:#f97316;font-size:13px;font-weight:600;margin-bottom:12px;font-family:Inter,sans-serif;text-transform:uppercase;letter-spacing:2px;">Web App · 2025</p>
|
|
<h3 style="font-size:28px;font-weight:700;color:#fafaf9;margin-bottom:16px;font-family:Inter,sans-serif;">Fintech Dashboard Redesign</h3>
|
|
<p style="color:#a8a29e;font-size:16px;line-height:1.7;margin-bottom:24px;font-family:Inter,sans-serif;">Complete redesign of a financial analytics platform serving 50,000+ daily active users. Improved task completion rate by 34%.</p>
|
|
<div style="display:flex;gap:8px;flex-wrap:wrap;">
|
|
<span style="padding:6px 14px;background:#44403c;color:#d6d3d1;font-size:12px;border-radius:20px;font-family:Inter,sans-serif;">UI/UX Design</span>
|
|
<span style="padding:6px 14px;background:#44403c;color:#d6d3d1;font-size:12px;border-radius:20px;font-family:Inter,sans-serif;">React</span>
|
|
<span style="padding:6px 14px;background:#44403c;color:#d6d3d1;font-size:12px;border-radius:20px;font-family:Inter,sans-serif;">Design System</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- Project 2 -->
|
|
<div style="display:flex;flex-wrap:wrap-reverse;gap:0;border-radius:20px;overflow:hidden;background:#292524;">
|
|
<div style="flex:1;min-width:300px;padding:48px;display:flex;flex-direction:column;justify-content:center;">
|
|
<p style="color:#f97316;font-size:13px;font-weight:600;margin-bottom:12px;font-family:Inter,sans-serif;text-transform:uppercase;letter-spacing:2px;">Mobile App · 2025</p>
|
|
<h3 style="font-size:28px;font-weight:700;color:#fafaf9;margin-bottom:16px;font-family:Inter,sans-serif;">Wellness Tracking App</h3>
|
|
<p style="color:#a8a29e;font-size:16px;line-height:1.7;margin-bottom:24px;font-family:Inter,sans-serif;">End-to-end design for a health and wellness app. From user research to final UI, achieving a 4.8-star rating on the App Store.</p>
|
|
<div style="display:flex;gap:8px;flex-wrap:wrap;">
|
|
<span style="padding:6px 14px;background:#44403c;color:#d6d3d1;font-size:12px;border-radius:20px;font-family:Inter,sans-serif;">Mobile Design</span>
|
|
<span style="padding:6px 14px;background:#44403c;color:#d6d3d1;font-size:12px;border-radius:20px;font-family:Inter,sans-serif;">iOS</span>
|
|
<span style="padding:6px 14px;background:#44403c;color:#d6d3d1;font-size:12px;border-radius:20px;font-family:Inter,sans-serif;">User Research</span>
|
|
</div>
|
|
</div>
|
|
<div style="flex:1;min-width:300px;">
|
|
<img src="https://images.unsplash.com/photo-1512941937669-90a1b58e7e9c?w=800&h=500&fit=crop" style="width:100%;height:100%;object-fit:cover;display:block;min-height:300px;" alt="Wellness App">
|
|
</div>
|
|
</div>
|
|
<!-- Project 3 -->
|
|
<div style="display:flex;flex-wrap:wrap;gap:0;border-radius:20px;overflow:hidden;background:#292524;">
|
|
<div style="flex:1;min-width:300px;">
|
|
<img src="https://images.unsplash.com/photo-1559028012-481c04fa702d?w=800&h=500&fit=crop" style="width:100%;height:100%;object-fit:cover;display:block;min-height:300px;" alt="E-commerce Brand">
|
|
</div>
|
|
<div style="flex:1;min-width:300px;padding:48px;display:flex;flex-direction:column;justify-content:center;">
|
|
<p style="color:#f97316;font-size:13px;font-weight:600;margin-bottom:12px;font-family:Inter,sans-serif;text-transform:uppercase;letter-spacing:2px;">Branding · 2024</p>
|
|
<h3 style="font-size:28px;font-weight:700;color:#fafaf9;margin-bottom:16px;font-family:Inter,sans-serif;">Luxury E-commerce Rebrand</h3>
|
|
<p style="color:#a8a29e;font-size:16px;line-height:1.7;margin-bottom:24px;font-family:Inter,sans-serif;">Full brand identity and e-commerce website for a premium fashion label. Revenue increased 120% post-launch.</p>
|
|
<div style="display:flex;gap:8px;flex-wrap:wrap;">
|
|
<span style="padding:6px 14px;background:#44403c;color:#d6d3d1;font-size:12px;border-radius:20px;font-family:Inter,sans-serif;">Branding</span>
|
|
<span style="padding:6px 14px;background:#44403c;color:#d6d3d1;font-size:12px;border-radius:20px;font-family:Inter,sans-serif;">E-commerce</span>
|
|
<span style="padding:6px 14px;background:#44403c;color:#d6d3d1;font-size:12px;border-radius:20px;font-family:Inter,sans-serif;">Shopify</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- About Section -->
|
|
<section id="about" style="padding:100px 60px;background:#0c0a09;">
|
|
<div style="max-width:1200px;margin:0 auto;display:flex;flex-wrap:wrap;gap:60px;align-items:center;">
|
|
<div style="flex:1;min-width:300px;">
|
|
<img src="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=500&h=600&fit=crop" style="width:100%;border-radius:20px;display:block;" alt="Alex Chen portrait">
|
|
</div>
|
|
<div style="flex:1;min-width:300px;">
|
|
<h2 style="font-size:14px;font-weight:600;color:#f97316;margin-bottom:12px;font-family:Inter,sans-serif;text-transform:uppercase;letter-spacing:3px;">About Me</h2>
|
|
<h3 style="font-size:36px;font-weight:800;color:#fafaf9;margin-bottom:24px;font-family:Inter,sans-serif;letter-spacing:-0.5px;">Designing with purpose, building with passion</h3>
|
|
<p style="color:#a8a29e;font-size:17px;line-height:1.8;margin-bottom:20px;font-family:Inter,sans-serif;">I'm a product designer and front-end developer based in San Francisco. I specialize in creating digital products that balance aesthetics with functionality.</p>
|
|
<p style="color:#a8a29e;font-size:17px;line-height:1.8;margin-bottom:32px;font-family:Inter,sans-serif;">When I'm not pushing pixels, you'll find me hiking in the Bay Area, experimenting with film photography, or contributing to open-source design tools.</p>
|
|
<div style="display:flex;gap:40px;flex-wrap:wrap;">
|
|
<div>
|
|
<div style="font-size:36px;font-weight:800;color:#f97316;font-family:Inter,sans-serif;">8+</div>
|
|
<div style="font-size:14px;color:#a8a29e;font-family:Inter,sans-serif;">Years Experience</div>
|
|
</div>
|
|
<div>
|
|
<div style="font-size:36px;font-weight:800;color:#f97316;font-family:Inter,sans-serif;">60+</div>
|
|
<div style="font-size:14px;color:#a8a29e;font-family:Inter,sans-serif;">Projects Completed</div>
|
|
</div>
|
|
<div>
|
|
<div style="font-size:36px;font-weight:800;color:#f97316;font-family:Inter,sans-serif;">30+</div>
|
|
<div style="font-size:14px;color:#a8a29e;font-family:Inter,sans-serif;">Happy Clients</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Skills -->
|
|
<section style="padding:80px 60px;background:#1c1917;">
|
|
<div style="max-width:1200px;margin:0 auto;">
|
|
<h2 style="font-size:14px;font-weight:600;color:#f97316;margin-bottom:12px;font-family:Inter,sans-serif;text-transform:uppercase;letter-spacing:3px;">Expertise</h2>
|
|
<h3 style="font-size:36px;font-weight:800;color:#fafaf9;margin-bottom:48px;font-family:Inter,sans-serif;">Tools & Technologies</h3>
|
|
<div style="display:flex;flex-wrap:wrap;gap:16px;">
|
|
<span style="padding:12px 24px;background:#292524;color:#d6d3d1;font-size:15px;border-radius:10px;font-family:Inter,sans-serif;border:1px solid #44403c;">Figma</span>
|
|
<span style="padding:12px 24px;background:#292524;color:#d6d3d1;font-size:15px;border-radius:10px;font-family:Inter,sans-serif;border:1px solid #44403c;">React</span>
|
|
<span style="padding:12px 24px;background:#292524;color:#d6d3d1;font-size:15px;border-radius:10px;font-family:Inter,sans-serif;border:1px solid #44403c;">TypeScript</span>
|
|
<span style="padding:12px 24px;background:#292524;color:#d6d3d1;font-size:15px;border-radius:10px;font-family:Inter,sans-serif;border:1px solid #44403c;">Next.js</span>
|
|
<span style="padding:12px 24px;background:#292524;color:#d6d3d1;font-size:15px;border-radius:10px;font-family:Inter,sans-serif;border:1px solid #44403c;">Tailwind CSS</span>
|
|
<span style="padding:12px 24px;background:#292524;color:#d6d3d1;font-size:15px;border-radius:10px;font-family:Inter,sans-serif;border:1px solid #44403c;">Framer Motion</span>
|
|
<span style="padding:12px 24px;background:#292524;color:#d6d3d1;font-size:15px;border-radius:10px;font-family:Inter,sans-serif;border:1px solid #44403c;">Adobe CC</span>
|
|
<span style="padding:12px 24px;background:#292524;color:#d6d3d1;font-size:15px;border-radius:10px;font-family:Inter,sans-serif;border:1px solid #44403c;">Webflow</span>
|
|
<span style="padding:12px 24px;background:#292524;color:#d6d3d1;font-size:15px;border-radius:10px;font-family:Inter,sans-serif;border:1px solid #44403c;">Node.js</span>
|
|
<span style="padding:12px 24px;background:#292524;color:#d6d3d1;font-size:15px;border-radius:10px;font-family:Inter,sans-serif;border:1px solid #44403c;">Design Systems</span>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Contact Section -->
|
|
<section id="contact" style="padding:100px 60px;background:#0c0a09;">
|
|
<div style="max-width:700px;margin:0 auto;text-align:center;">
|
|
<h2 style="font-size:14px;font-weight:600;color:#f97316;margin-bottom:12px;font-family:Inter,sans-serif;text-transform:uppercase;letter-spacing:3px;">Get In Touch</h2>
|
|
<h3 style="font-size:48px;font-weight:800;color:#fafaf9;margin-bottom:24px;font-family:Inter,sans-serif;letter-spacing:-1px;">Let's work together</h3>
|
|
<p style="color:#a8a29e;font-size:18px;line-height:1.7;margin-bottom:40px;font-family:Inter,sans-serif;">Have a project in mind? I'd love to hear about it. Send me a message and let's make something amazing.</p>
|
|
<a href="mailto:hello@alexchen.design" style="display:inline-block;padding:18px 48px;background:#f97316;color:#fff;font-size:18px;font-weight:600;text-decoration:none;border-radius:10px;font-family:Inter,sans-serif;">hello@alexchen.design</a>
|
|
<div style="display:flex;justify-content:center;gap:24px;margin-top:40px;">
|
|
<a href="#" style="color:#a8a29e;text-decoration:none;font-size:15px;font-family:Inter,sans-serif;">Dribbble</a>
|
|
<a href="#" style="color:#a8a29e;text-decoration:none;font-size:15px;font-family:Inter,sans-serif;">GitHub</a>
|
|
<a href="#" style="color:#a8a29e;text-decoration:none;font-size:15px;font-family:Inter,sans-serif;">LinkedIn</a>
|
|
<a href="#" style="color:#a8a29e;text-decoration:none;font-size:15px;font-family:Inter,sans-serif;">Twitter</a>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Footer -->
|
|
<footer style="padding:30px 60px;background:#0c0a09;border-top:1px solid #292524;">
|
|
<p style="text-align:center;color:#57534e;font-size:13px;font-family:Inter,sans-serif;">© 2026 Alex Chen. Designed and built with care.</p>
|
|
</footer>
|