460 lines
17 KiB
HTML
460 lines
17 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<title>Alex Morgan — Product Designer & Developer</title>
|
|
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
|
|
<link href="https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,600;0,700;1,400&family=Inter:wght@300;400;500&display=swap" rel="stylesheet" />
|
|
<style>
|
|
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
|
|
|
|
:root {
|
|
--ink: #1a1a1a;
|
|
--ink-soft: #555;
|
|
--ink-faint: #999;
|
|
--paper: #fafafa;
|
|
--paper-warm: #f4f2ef;
|
|
--rule: #e4e2de;
|
|
--accent: #2d4a22;
|
|
}
|
|
|
|
html { scroll-behavior: smooth; font-size: 16px; }
|
|
|
|
body {
|
|
font-family: 'Inter', sans-serif;
|
|
background: var(--paper);
|
|
color: var(--ink);
|
|
line-height: 1.7;
|
|
-webkit-font-smoothing: antialiased;
|
|
}
|
|
|
|
/* ── Nav ── */
|
|
nav {
|
|
position: fixed; top: 0; left: 0; right: 0; z-index: 100;
|
|
display: flex; justify-content: space-between; align-items: center;
|
|
padding: 1.25rem 3rem;
|
|
background: rgba(250,250,250,0.92);
|
|
backdrop-filter: blur(8px);
|
|
border-bottom: 1px solid var(--rule);
|
|
transition: box-shadow .3s;
|
|
}
|
|
nav.scrolled { box-shadow: 0 2px 16px rgba(0,0,0,.06); }
|
|
.nav-logo {
|
|
font-family: 'Playfair Display', serif;
|
|
font-size: 1.1rem;
|
|
letter-spacing: .02em;
|
|
color: var(--ink);
|
|
text-decoration: none;
|
|
}
|
|
.nav-links { display: flex; gap: 2rem; list-style: none; }
|
|
.nav-links a {
|
|
font-size: .8125rem;
|
|
font-weight: 500;
|
|
letter-spacing: .08em;
|
|
text-transform: uppercase;
|
|
color: var(--ink-soft);
|
|
text-decoration: none;
|
|
transition: color .2s;
|
|
}
|
|
.nav-links a:hover { color: var(--ink); }
|
|
|
|
/* ── Layout ── */
|
|
.container { max-width: 780px; margin: 0 auto; padding: 0 2rem; }
|
|
|
|
section { padding: 6rem 0; }
|
|
section + section { border-top: 1px solid var(--rule); }
|
|
|
|
/* ── Hero ── */
|
|
#hero {
|
|
min-height: 100vh;
|
|
display: flex; align-items: center;
|
|
padding-top: 80px;
|
|
}
|
|
.hero-eyebrow {
|
|
font-size: .75rem;
|
|
font-weight: 500;
|
|
letter-spacing: .15em;
|
|
text-transform: uppercase;
|
|
color: var(--accent);
|
|
margin-bottom: 1.5rem;
|
|
}
|
|
.hero-name {
|
|
font-family: 'Playfair Display', serif;
|
|
font-size: clamp(3rem, 6vw, 5.5rem);
|
|
line-height: 1.05;
|
|
font-weight: 700;
|
|
letter-spacing: -.02em;
|
|
margin-bottom: 1.5rem;
|
|
}
|
|
.hero-name em { font-style: italic; font-weight: 400; }
|
|
.hero-tagline {
|
|
font-size: 1.125rem;
|
|
color: var(--ink-soft);
|
|
max-width: 520px;
|
|
margin-bottom: 2.5rem;
|
|
font-weight: 300;
|
|
}
|
|
.hero-meta {
|
|
display: flex; gap: 2.5rem;
|
|
font-size: .8125rem;
|
|
color: var(--ink-faint);
|
|
letter-spacing: .04em;
|
|
}
|
|
.hero-meta span { display: flex; align-items: center; gap: .4rem; }
|
|
|
|
/* ── Buttons ── */
|
|
.btn {
|
|
display: inline-block;
|
|
padding: .75rem 1.75rem;
|
|
font-size: .8125rem;
|
|
font-weight: 500;
|
|
letter-spacing: .06em;
|
|
text-transform: uppercase;
|
|
text-decoration: none;
|
|
border: 1.5px solid var(--ink);
|
|
color: var(--ink);
|
|
transition: background .2s, color .2s;
|
|
}
|
|
.btn:hover { background: var(--ink); color: var(--paper); }
|
|
.btn-ghost { background: transparent; }
|
|
|
|
.hero-actions { display: flex; gap: 1rem; margin-bottom: 3rem; flex-wrap: wrap; }
|
|
|
|
/* ── Section headings ── */
|
|
.section-label {
|
|
font-size: .7rem;
|
|
font-weight: 500;
|
|
letter-spacing: .2em;
|
|
text-transform: uppercase;
|
|
color: var(--ink-faint);
|
|
margin-bottom: 1rem;
|
|
}
|
|
.section-title {
|
|
font-family: 'Playfair Display', serif;
|
|
font-size: clamp(1.75rem, 3vw, 2.5rem);
|
|
font-weight: 600;
|
|
letter-spacing: -.01em;
|
|
margin-bottom: 2.5rem;
|
|
}
|
|
|
|
/* ── About ── */
|
|
.about-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: start; }
|
|
.about-text { font-size: 1.0625rem; color: var(--ink-soft); font-weight: 300; }
|
|
.about-text p + p { margin-top: 1.25em; }
|
|
.about-stats { display: flex; flex-direction: column; gap: 1.5rem; }
|
|
.stat-row { display: flex; flex-direction: column; gap: .2rem; padding-bottom: 1.5rem; border-bottom: 1px solid var(--rule); }
|
|
.stat-row:last-child { border-bottom: none; padding-bottom: 0; }
|
|
.stat-number { font-family: 'Playfair Display', serif; font-size: 2.5rem; font-weight: 700; line-height: 1; }
|
|
.stat-label { font-size: .8125rem; color: var(--ink-faint); letter-spacing: .06em; }
|
|
|
|
/* ── Experience ── */
|
|
.experience-list { display: flex; flex-direction: column; gap: 0; }
|
|
.exp-item {
|
|
display: grid; grid-template-columns: 140px 1fr;
|
|
gap: 2.5rem; padding: 2rem 0;
|
|
border-bottom: 1px solid var(--rule);
|
|
opacity: 0; transform: translateY(16px);
|
|
transition: opacity .5s, transform .5s;
|
|
}
|
|
.exp-item.visible { opacity: 1; transform: none; }
|
|
.exp-item:first-child { border-top: 1px solid var(--rule); }
|
|
.exp-period {
|
|
font-size: .8125rem;
|
|
color: var(--ink-faint);
|
|
padding-top: .2rem;
|
|
letter-spacing: .02em;
|
|
}
|
|
.exp-company {
|
|
font-family: 'Playfair Display', serif;
|
|
font-size: 1.25rem;
|
|
font-weight: 600;
|
|
margin-bottom: .25rem;
|
|
}
|
|
.exp-role {
|
|
font-size: .875rem;
|
|
color: var(--accent);
|
|
font-weight: 500;
|
|
margin-bottom: .75rem;
|
|
letter-spacing: .02em;
|
|
}
|
|
.exp-desc { font-size: .9375rem; color: var(--ink-soft); font-weight: 300; }
|
|
|
|
/* ── Skills ── */
|
|
.skills-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2.5rem; }
|
|
.skill-category-name {
|
|
font-size: .75rem;
|
|
font-weight: 500;
|
|
letter-spacing: .12em;
|
|
text-transform: uppercase;
|
|
color: var(--ink-faint);
|
|
margin-bottom: 1rem;
|
|
}
|
|
.skill-list { list-style: none; display: flex; flex-direction: column; gap: .6rem; }
|
|
.skill-list li {
|
|
font-size: .9375rem;
|
|
color: var(--ink-soft);
|
|
font-weight: 300;
|
|
padding-left: 1rem;
|
|
position: relative;
|
|
}
|
|
.skill-list li::before {
|
|
content: '—';
|
|
position: absolute; left: 0;
|
|
color: var(--rule);
|
|
}
|
|
|
|
/* ── Contact ── */
|
|
.contact-inner { display: flex; justify-content: space-between; align-items: flex-end; flex-wrap: wrap; gap: 2rem; }
|
|
.contact-heading {
|
|
font-family: 'Playfair Display', serif;
|
|
font-size: clamp(2rem, 4vw, 3.5rem);
|
|
font-weight: 700;
|
|
line-height: 1.1;
|
|
max-width: 500px;
|
|
}
|
|
.contact-heading em { font-style: italic; font-weight: 400; }
|
|
.contact-links { display: flex; flex-direction: column; gap: .75rem; }
|
|
.contact-link {
|
|
display: flex; align-items: center; gap: .75rem;
|
|
font-size: .9375rem;
|
|
color: var(--ink);
|
|
text-decoration: none;
|
|
transition: color .2s;
|
|
}
|
|
.contact-link:hover { color: var(--accent); }
|
|
.contact-link svg { width: 16px; height: 16px; opacity: .4; }
|
|
|
|
/* ── Footer ── */
|
|
footer {
|
|
padding: 2rem 0;
|
|
border-top: 1px solid var(--rule);
|
|
display: flex; justify-content: space-between; align-items: center;
|
|
font-size: .75rem;
|
|
color: var(--ink-faint);
|
|
letter-spacing: .04em;
|
|
}
|
|
|
|
/* ── Responsive ── */
|
|
@media (max-width: 700px) {
|
|
nav { padding: 1rem 1.25rem; }
|
|
.nav-links { gap: 1.25rem; }
|
|
.about-grid { grid-template-columns: 1fr; gap: 2.5rem; }
|
|
.skills-grid { grid-template-columns: 1fr 1fr; }
|
|
.exp-item { grid-template-columns: 1fr; gap: .5rem; }
|
|
.contact-inner { flex-direction: column; }
|
|
}
|
|
@media (max-width: 480px) {
|
|
.skills-grid { grid-template-columns: 1fr; }
|
|
nav { padding: 1rem; }
|
|
.nav-links li:nth-child(n+4) { display: none; }
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
<nav id="nav">
|
|
<a href="#hero" class="nav-logo">Alex Morgan</a>
|
|
<ul class="nav-links">
|
|
<li><a href="#about">About</a></li>
|
|
<li><a href="#experience">Work</a></li>
|
|
<li><a href="#skills">Skills</a></li>
|
|
<li><a href="#contact">Contact</a></li>
|
|
</ul>
|
|
</nav>
|
|
|
|
<!-- Hero -->
|
|
<section id="hero">
|
|
<div class="container">
|
|
<p class="hero-eyebrow">Product Designer · Full Stack Developer</p>
|
|
<h1 class="hero-name">Alex<br><em>Morgan</em></h1>
|
|
<p class="hero-tagline">I craft digital products that sit at the intersection of thoughtful design and robust engineering — from zero to ship.</p>
|
|
<div class="hero-actions">
|
|
<a href="#experience" class="btn">View My Work</a>
|
|
<a href="#contact" class="btn btn-ghost">Get in Touch</a>
|
|
</div>
|
|
<div class="hero-meta">
|
|
<span>
|
|
<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"/><circle cx="12" cy="10" r="3"/></svg>
|
|
San Francisco, CA
|
|
</span>
|
|
<span>Open to roles</span>
|
|
<span>alex@alexmorgan.io</span>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- About -->
|
|
<section id="about">
|
|
<div class="container">
|
|
<p class="section-label">About Me</p>
|
|
<h2 class="section-title">Designing systems,<br>not just screens</h2>
|
|
<div class="about-grid">
|
|
<div class="about-text">
|
|
<p>I'm a hybrid designer-developer with eight years of experience building products used by millions. I started as a visual designer, fell in love with code, and never looked back.</p>
|
|
<p>My work spans design systems, developer tools, and consumer products. I believe the best digital experiences come from teams where design and engineering speak the same language — so I learned both.</p>
|
|
<p>Previously at Stripe, Figma, and Vercel. Now exploring what's next.</p>
|
|
</div>
|
|
<div class="about-stats">
|
|
<div class="stat-row">
|
|
<span class="stat-number">8+</span>
|
|
<span class="stat-label">Years of experience</span>
|
|
</div>
|
|
<div class="stat-row">
|
|
<span class="stat-number">40M</span>
|
|
<span class="stat-label">Users reached</span>
|
|
</div>
|
|
<div class="stat-row">
|
|
<span class="stat-number">3</span>
|
|
<span class="stat-label">YC-backed startups</span>
|
|
</div>
|
|
<div class="stat-row">
|
|
<span class="stat-number">12</span>
|
|
<span class="stat-label">Design systems shipped</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Experience -->
|
|
<section id="experience">
|
|
<div class="container">
|
|
<p class="section-label">Experience</p>
|
|
<h2 class="section-title">Where I've worked</h2>
|
|
<div class="experience-list">
|
|
<div class="exp-item">
|
|
<span class="exp-period">2022 — Present</span>
|
|
<div>
|
|
<div class="exp-company">Stripe</div>
|
|
<div class="exp-role">Senior Product Designer</div>
|
|
<p class="exp-desc">Led design for Stripe's developer dashboard, serving 4M+ developers. Rebuilt the onboarding flow, reducing time-to-first-payment from 3 days to 4 hours. Co-created the internal design system used across 200+ product surfaces.</p>
|
|
</div>
|
|
</div>
|
|
<div class="exp-item">
|
|
<span class="exp-period">2020 — 2022</span>
|
|
<div>
|
|
<div class="exp-company">Figma</div>
|
|
<div class="exp-role">Design Engineer</div>
|
|
<p class="exp-desc">Bridged the gap between the design and engineering teams as a founding member of the Design Infrastructure team. Shipped FigJam's collaborative widgets system and contributed core interaction patterns still in use today.</p>
|
|
</div>
|
|
</div>
|
|
<div class="exp-item">
|
|
<span class="exp-period">2018 — 2020</span>
|
|
<div>
|
|
<div class="exp-company">Vercel</div>
|
|
<div class="exp-role">Frontend Engineer & Designer</div>
|
|
<p class="exp-desc">Early employee (#14) responsible for the vercel.com marketing site and the initial version of the deployment UI. Helped grow the platform from 50K to 500K users through iterative product improvements.</p>
|
|
</div>
|
|
</div>
|
|
<div class="exp-item">
|
|
<span class="exp-period">2016 — 2018</span>
|
|
<div>
|
|
<div class="exp-company">Linear</div>
|
|
<div class="exp-role">Product Designer</div>
|
|
<p class="exp-desc">Joined as the first designer. Shaped the core product experience — issue tracking, project views, and the command palette that became Linear's signature interaction — from concept through launch.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Skills -->
|
|
<section id="skills">
|
|
<div class="container">
|
|
<p class="section-label">Capabilities</p>
|
|
<h2 class="section-title">What I bring</h2>
|
|
<div class="skills-grid">
|
|
<div>
|
|
<p class="skill-category-name">Design</p>
|
|
<ul class="skill-list">
|
|
<li>Product Design</li>
|
|
<li>Design Systems</li>
|
|
<li>User Research</li>
|
|
<li>Interaction Design</li>
|
|
<li>Figma / Sketch</li>
|
|
<li>Prototyping</li>
|
|
</ul>
|
|
</div>
|
|
<div>
|
|
<p class="skill-category-name">Engineering</p>
|
|
<ul class="skill-list">
|
|
<li>React / Next.js</li>
|
|
<li>TypeScript</li>
|
|
<li>Node.js</li>
|
|
<li>GraphQL</li>
|
|
<li>Postgres / Prisma</li>
|
|
<li>Tailwind CSS</li>
|
|
</ul>
|
|
</div>
|
|
<div>
|
|
<p class="skill-category-name">Leadership</p>
|
|
<ul class="skill-list">
|
|
<li>Design Direction</li>
|
|
<li>Team Mentoring</li>
|
|
<li>Roadmap Planning</li>
|
|
<li>Stakeholder Comms</li>
|
|
<li>Cross-functional Work</li>
|
|
<li>Design Critique</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Contact -->
|
|
<section id="contact">
|
|
<div class="container">
|
|
<div class="contact-inner">
|
|
<h2 class="contact-heading">Let's build<br>something <em>great</em><br>together.</h2>
|
|
<div class="contact-links">
|
|
<a href="mailto:alex@alexmorgan.io" class="contact-link">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"/><polyline points="22,6 12,13 2,6"/></svg>
|
|
alex@alexmorgan.io
|
|
</a>
|
|
<a href="#" class="contact-link">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37 0 0 0-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0 0 20 4.77 5.07 5.07 0 0 0 19.91 1S18.73.65 16 2.48a13.38 13.38 0 0 0-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07 0 0 0 5 4.77a5.44 5.44 0 0 0-1.5 3.78c0 5.42 3.3 6.61 6.44 7A3.37 3.37 0 0 0 9 18.13V22"/></svg>
|
|
github.com/alexmorgan
|
|
</a>
|
|
<a href="#" class="contact-link">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M16 8a6 6 0 0 1 6 6v7h-4v-7a2 2 0 0 0-2-2 2 2 0 0 0-2 2v7h-4v-7a6 6 0 0 1 6-6z"/><rect x="2" y="9" width="4" height="12"/><circle cx="4" cy="4" r="2"/></svg>
|
|
linkedin.com/in/alexmorgan
|
|
</a>
|
|
<a href="#" class="contact-link">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><circle cx="12" cy="12" r="10"/><line x1="2" y1="12" x2="22" y2="12"/><path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"/></svg>
|
|
alexmorgan.io
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<footer>
|
|
<div class="container" style="display:flex;justify-content:space-between;width:100%;">
|
|
<span>© 2026 Alex Morgan</span>
|
|
<span>San Francisco · Open to remote</span>
|
|
</div>
|
|
</footer>
|
|
|
|
<script>
|
|
// Nav scroll state
|
|
const nav = document.getElementById('nav');
|
|
window.addEventListener('scroll', () => {
|
|
nav.classList.toggle('scrolled', window.scrollY > 40);
|
|
});
|
|
|
|
// Intersection observer for exp items
|
|
const items = document.querySelectorAll('.exp-item');
|
|
const observer = new IntersectionObserver((entries) => {
|
|
entries.forEach((entry, i) => {
|
|
if (entry.isIntersecting) {
|
|
setTimeout(() => entry.target.classList.add('visible'), i * 80);
|
|
}
|
|
});
|
|
}, { threshold: 0.15 });
|
|
items.forEach(item => observer.observe(item));
|
|
</script>
|
|
</body>
|
|
</html>
|