site-builder/templates/portfolio-designer.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>