site-builder/templates/resume-cv.html

<!-- Header -->
<section style="padding:80px 20px;background:linear-gradient(135deg,#1e293b 0%,#0f172a 100%);text-align:center;">
    <div style="max-width:700px;margin:0 auto;">
        <div style="width:120px;height:120px;background:linear-gradient(135deg,#2563eb,#3b82f6);border-radius:50%;margin:0 auto 24px;display:flex;align-items:center;justify-content:center;font-size:42px;font-weight:700;color:#fff;font-family:Inter,sans-serif;">JD</div>
        <h1 style="font-size:42px;font-weight:800;color:#fff;margin-bottom:8px;font-family:Inter,sans-serif;letter-spacing:-0.5px;">Jordan Davis</h1>
        <p style="font-size:20px;color:#3b82f6;margin-bottom:16px;font-family:Inter,sans-serif;font-weight:500;">Senior Full-Stack Developer</p>
        <p style="color:#94a3b8;font-size:16px;line-height:1.7;margin-bottom:28px;font-family:Inter,sans-serif;max-width:550px;margin-left:auto;margin-right:auto;">Passionate about building scalable web applications and leading high-performing engineering teams. 7+ years of experience across startups and enterprise.</p>
        <div style="display:flex;justify-content:center;gap:16px;flex-wrap:wrap;">
            <a href="#" style="padding:10px 20px;background:rgba(59,130,246,0.15);color:#60a5fa;font-size:14px;text-decoration:none;border-radius:6px;font-family:Inter,sans-serif;">📧 jordan@email.com</a>
            <a href="#" style="padding:10px 20px;background:rgba(59,130,246,0.15);color:#60a5fa;font-size:14px;text-decoration:none;border-radius:6px;font-family:Inter,sans-serif;">📍 San Francisco, CA</a>
            <a href="#" style="padding:10px 20px;background:rgba(59,130,246,0.15);color:#60a5fa;font-size:14px;text-decoration:none;border-radius:6px;font-family:Inter,sans-serif;">🔗 LinkedIn</a>
            <a href="#" style="padding:10px 20px;background:rgba(59,130,246,0.15);color:#60a5fa;font-size:14px;text-decoration:none;border-radius:6px;font-family:Inter,sans-serif;">💻 GitHub</a>
        </div>
    </div>
</section>

<!-- Skills -->
<section style="padding:60px 20px;background:#f1f5f9;">
    <div style="max-width:900px;margin:0 auto;">
        <h2 style="font-size:14px;font-weight:600;color:#2563eb;margin-bottom:24px;font-family:Inter,sans-serif;text-transform:uppercase;letter-spacing:3px;">Technical Skills</h2>
        <div style="display:flex;flex-wrap:wrap;gap:10px;">
            <span style="padding:10px 20px;background:#fff;color:#1e293b;font-size:14px;border-radius:8px;font-family:Inter,sans-serif;border:1px solid #e2e8f0;font-weight:500;">TypeScript</span>
            <span style="padding:10px 20px;background:#fff;color:#1e293b;font-size:14px;border-radius:8px;font-family:Inter,sans-serif;border:1px solid #e2e8f0;font-weight:500;">React</span>
            <span style="padding:10px 20px;background:#fff;color:#1e293b;font-size:14px;border-radius:8px;font-family:Inter,sans-serif;border:1px solid #e2e8f0;font-weight:500;">Node.js</span>
            <span style="padding:10px 20px;background:#fff;color:#1e293b;font-size:14px;border-radius:8px;font-family:Inter,sans-serif;border:1px solid #e2e8f0;font-weight:500;">Python</span>
            <span style="padding:10px 20px;background:#fff;color:#1e293b;font-size:14px;border-radius:8px;font-family:Inter,sans-serif;border:1px solid #e2e8f0;font-weight:500;">PostgreSQL</span>
            <span style="padding:10px 20px;background:#fff;color:#1e293b;font-size:14px;border-radius:8px;font-family:Inter,sans-serif;border:1px solid #e2e8f0;font-weight:500;">AWS</span>
            <span style="padding:10px 20px;background:#fff;color:#1e293b;font-size:14px;border-radius:8px;font-family:Inter,sans-serif;border:1px solid #e2e8f0;font-weight:500;">Docker</span>
            <span style="padding:10px 20px;background:#fff;color:#1e293b;font-size:14px;border-radius:8px;font-family:Inter,sans-serif;border:1px solid #e2e8f0;font-weight:500;">GraphQL</span>
            <span style="padding:10px 20px;background:#fff;color:#1e293b;font-size:14px;border-radius:8px;font-family:Inter,sans-serif;border:1px solid #e2e8f0;font-weight:500;">Next.js</span>
            <span style="padding:10px 20px;background:#fff;color:#1e293b;font-size:14px;border-radius:8px;font-family:Inter,sans-serif;border:1px solid #e2e8f0;font-weight:500;">Redis</span>
            <span style="padding:10px 20px;background:#fff;color:#1e293b;font-size:14px;border-radius:8px;font-family:Inter,sans-serif;border:1px solid #e2e8f0;font-weight:500;">CI/CD</span>
            <span style="padding:10px 20px;background:#fff;color:#1e293b;font-size:14px;border-radius:8px;font-family:Inter,sans-serif;border:1px solid #e2e8f0;font-weight:500;">Kubernetes</span>
        </div>
    </div>
</section>

<!-- Experience -->
<section style="padding:60px 20px;background:#fff;">
    <div style="max-width:900px;margin:0 auto;">
        <h2 style="font-size:14px;font-weight:600;color:#2563eb;margin-bottom:32px;font-family:Inter,sans-serif;text-transform:uppercase;letter-spacing:3px;">Work Experience</h2>
        
        <div style="margin-bottom:40px;padding-left:24px;border-left:2px solid #3b82f6;">
            <div style="display:flex;justify-content:space-between;align-items:start;flex-wrap:wrap;gap:8px;margin-bottom:8px;">
                <div>
                    <h3 style="font-size:20px;font-weight:700;color:#1e293b;font-family:Inter,sans-serif;">Senior Full-Stack Developer</h3>
                    <p style="font-size:16px;color:#2563eb;font-weight:500;font-family:Inter,sans-serif;">TechCorp Inc.</p>
                </div>
                <span style="color:#64748b;font-size:14px;font-family:Inter,sans-serif;white-space:nowrap;">Jan 2022 – Present</span>
            </div>
            <ul style="list-style:none;padding:0;margin:12px 0 0 0;">
                <li style="padding:6px 0;color:#475569;font-size:15px;line-height:1.6;font-family:Inter,sans-serif;">• Led a team of 5 engineers to rebuild the core platform, reducing load times by 60%</li>
                <li style="padding:6px 0;color:#475569;font-size:15px;line-height:1.6;font-family:Inter,sans-serif;">• Designed and implemented a microservices architecture handling 2M+ daily requests</li>
                <li style="padding:6px 0;color:#475569;font-size:15px;line-height:1.6;font-family:Inter,sans-serif;">• Mentored 3 junior developers, all promoted within 12 months</li>
            </ul>
        </div>

        <div style="margin-bottom:40px;padding-left:24px;border-left:2px solid #93c5fd;">
            <div style="display:flex;justify-content:space-between;align-items:start;flex-wrap:wrap;gap:8px;margin-bottom:8px;">
                <div>
                    <h3 style="font-size:20px;font-weight:700;color:#1e293b;font-family:Inter,sans-serif;">Full-Stack Developer</h3>
                    <p style="font-size:16px;color:#2563eb;font-weight:500;font-family:Inter,sans-serif;">StartupXYZ</p>
                </div>
                <span style="color:#64748b;font-size:14px;font-family:Inter,sans-serif;white-space:nowrap;">Mar 2019 – Dec 2021</span>
            </div>
            <ul style="list-style:none;padding:0;margin:12px 0 0 0;">
                <li style="padding:6px 0;color:#475569;font-size:15px;line-height:1.6;font-family:Inter,sans-serif;">• Built the company's flagship SaaS product from prototype to 10,000+ paying users</li>
                <li style="padding:6px 0;color:#475569;font-size:15px;line-height:1.6;font-family:Inter,sans-serif;">• Implemented real-time collaboration features using WebSockets and CRDTs</li>
                <li style="padding:6px 0;color:#475569;font-size:15px;line-height:1.6;font-family:Inter,sans-serif;">• Reduced infrastructure costs by 40% through performance optimization</li>
            </ul>
        </div>

        <div style="padding-left:24px;border-left:2px solid #bfdbfe;">
            <div style="display:flex;justify-content:space-between;align-items:start;flex-wrap:wrap;gap:8px;margin-bottom:8px;">
                <div>
                    <h3 style="font-size:20px;font-weight:700;color:#1e293b;font-family:Inter,sans-serif;">Junior Developer</h3>
                    <p style="font-size:16px;color:#2563eb;font-weight:500;font-family:Inter,sans-serif;">WebAgency Co.</p>
                </div>
                <span style="color:#64748b;font-size:14px;font-family:Inter,sans-serif;white-space:nowrap;">Jun 2017 – Feb 2019</span>
            </div>
            <ul style="list-style:none;padding:0;margin:12px 0 0 0;">
                <li style="padding:6px 0;color:#475569;font-size:15px;line-height:1.6;font-family:Inter,sans-serif;">• Developed 20+ client websites using React and Node.js</li>
                <li style="padding:6px 0;color:#475569;font-size:15px;line-height:1.6;font-family:Inter,sans-serif;">• Introduced automated testing, increasing code coverage from 15% to 85%</li>
            </ul>
        </div>
    </div>
</section>

<!-- Education -->
<section style="padding:60px 20px;background:#f1f5f9;">
    <div style="max-width:900px;margin:0 auto;">
        <h2 style="font-size:14px;font-weight:600;color:#2563eb;margin-bottom:32px;font-family:Inter,sans-serif;text-transform:uppercase;letter-spacing:3px;">Education</h2>
        <div style="display:flex;flex-wrap:wrap;gap:30px;">
            <div style="flex:1;min-width:280px;padding:28px;background:#fff;border-radius:12px;border:1px solid #e2e8f0;">
                <h3 style="font-size:18px;font-weight:700;color:#1e293b;margin-bottom:4px;font-family:Inter,sans-serif;">B.S. Computer Science</h3>
                <p style="font-size:15px;color:#2563eb;font-weight:500;margin-bottom:4px;font-family:Inter,sans-serif;">University of California, Berkeley</p>
                <p style="font-size:14px;color:#64748b;font-family:Inter,sans-serif;">2013 – 2017 · GPA: 3.8</p>
            </div>
            <div style="flex:1;min-width:280px;padding:28px;background:#fff;border-radius:12px;border:1px solid #e2e8f0;">
                <h3 style="font-size:18px;font-weight:700;color:#1e293b;margin-bottom:4px;font-family:Inter,sans-serif;">AWS Solutions Architect</h3>
                <p style="font-size:15px;color:#2563eb;font-weight:500;margin-bottom:4px;font-family:Inter,sans-serif;">Amazon Web Services</p>
                <p style="font-size:14px;color:#64748b;font-family:Inter,sans-serif;">Professional Certification · 2023</p>
            </div>
        </div>
    </div>
</section>

<!-- Projects -->
<section style="padding:60px 20px;background:#fff;">
    <div style="max-width:900px;margin:0 auto;">
        <h2 style="font-size:14px;font-weight:600;color:#2563eb;margin-bottom:32px;font-family:Inter,sans-serif;text-transform:uppercase;letter-spacing:3px;">Side Projects</h2>
        <div style="display:flex;flex-wrap:wrap;gap:24px;">
            <div style="flex:1;min-width:280px;padding:28px;background:#f8fafc;border-radius:12px;border:1px solid #e2e8f0;">
                <h3 style="font-size:18px;font-weight:700;color:#1e293b;margin-bottom:8px;font-family:Inter,sans-serif;">DevMetrics</h3>
                <p style="color:#475569;font-size:14px;line-height:1.6;margin-bottom:12px;font-family:Inter,sans-serif;">Open-source developer productivity dashboard with 2,000+ GitHub stars. Built with Next.js and D3.js.</p>
                <a href="#" style="color:#2563eb;font-size:14px;font-weight:500;text-decoration:none;font-family:Inter,sans-serif;">View on GitHub →</a>
            </div>
            <div style="flex:1;min-width:280px;padding:28px;background:#f8fafc;border-radius:12px;border:1px solid #e2e8f0;">
                <h3 style="font-size:18px;font-weight:700;color:#1e293b;margin-bottom:8px;font-family:Inter,sans-serif;">CodeReview.ai</h3>
                <p style="color:#475569;font-size:14px;line-height:1.6;margin-bottom:12px;font-family:Inter,sans-serif;">AI-powered code review tool used by 500+ developers. Featured on Product Hunt (#3 Product of the Day).</p>
                <a href="#" style="color:#2563eb;font-size:14px;font-weight:500;text-decoration:none;font-family:Inter,sans-serif;">View Project →</a>
            </div>
        </div>
    </div>
</section>

<!-- Contact CTA -->
<section style="padding:60px 20px;background:linear-gradient(135deg,#1e293b,#0f172a);text-align:center;">
    <div style="max-width:600px;margin:0 auto;">
        <h2 style="font-size:32px;font-weight:800;color:#fff;margin-bottom:16px;font-family:Inter,sans-serif;">Let's connect</h2>
        <p style="font-size:16px;color:#94a3b8;margin-bottom:32px;font-family:Inter,sans-serif;">Open to new opportunities and interesting projects.</p>
        <a href="mailto:jordan@email.com" style="display:inline-block;padding:14px 36px;background:#2563eb;color:#fff;font-size:16px;font-weight:600;text-decoration:none;border-radius:8px;font-family:Inter,sans-serif;">Get In Touch</a>
    </div>
</section>