412 lines
14 KiB
HTML
412 lines
14 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 — Developer & Designer</title>
|
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
<link href="https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700&family=Space+Grotesk:wght@400;500;700&display=swap" rel="stylesheet">
|
|
<style>
|
|
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
|
|
:root{
|
|
--bg:#0a0a0f;
|
|
--bg-card:rgba(255,255,255,0.03);
|
|
--bg-glass:rgba(255,255,255,0.05);
|
|
--text:#f0f0f5;
|
|
--text-dim:#8a8a9a;
|
|
--accent:#00d4aa;
|
|
--accent-2:#6366f1;
|
|
--border:rgba(255,255,255,0.08);
|
|
}
|
|
html{scroll-behavior:smooth}
|
|
body{
|
|
font-family:'Outfit',sans-serif;
|
|
background:var(--bg);
|
|
color:var(--text);
|
|
line-height:1.6;
|
|
-webkit-font-smoothing:antialiased;
|
|
overflow-x:hidden;
|
|
}
|
|
|
|
/* Ambient glow */
|
|
.glow{
|
|
position:fixed;
|
|
width:600px;height:600px;
|
|
border-radius:50%;
|
|
filter:blur(120px);
|
|
opacity:.15;
|
|
pointer-events:none;
|
|
z-index:0;
|
|
}
|
|
.glow-1{top:-200px;left:-200px;background:var(--accent)}
|
|
.glow-2{bottom:-200px;right:-200px;background:var(--accent-2)}
|
|
|
|
nav{
|
|
position:fixed;top:0;left:0;right:0;z-index:100;
|
|
display:flex;justify-content:space-between;align-items:center;
|
|
padding:1.5rem 3rem;
|
|
background:rgba(10,10,15,0.8);
|
|
backdrop-filter:blur(20px);
|
|
border-bottom:1px solid var(--border);
|
|
}
|
|
.logo{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:1.2rem;letter-spacing:-0.02em}
|
|
.logo span{color:var(--accent)}
|
|
.nav-links{display:flex;gap:2.5rem;list-style:none}
|
|
.nav-links a{
|
|
font-size:0.875rem;font-weight:500;
|
|
color:var(--text-dim);text-decoration:none;
|
|
transition:color .3s;
|
|
}
|
|
.nav-links a:hover{color:var(--text)}
|
|
|
|
.container{max-width:1100px;margin:0 auto;padding:0 2rem;position:relative;z-index:1}
|
|
|
|
/* Hero */
|
|
#hero{
|
|
min-height:100vh;
|
|
display:flex;align-items:center;
|
|
padding-top:100px;
|
|
position:relative;
|
|
}
|
|
.hero-badge{
|
|
display:inline-flex;align-items:center;gap:0.5rem;
|
|
padding:0.4rem 1rem;
|
|
background:var(--bg-glass);
|
|
border:1px solid var(--border);
|
|
border-radius:100px;
|
|
font-size:0.8rem;color:var(--accent);
|
|
margin-bottom:2rem;
|
|
}
|
|
.hero-badge::before{
|
|
content:'';width:6px;height:6px;
|
|
background:var(--accent);border-radius:50%;
|
|
animation:pulse 2s infinite;
|
|
}
|
|
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.4}}
|
|
.hero-title{
|
|
font-family:'Space Grotesk',sans-serif;
|
|
font-size:clamp(3rem,7vw,6rem);
|
|
font-weight:700;line-height:1.05;
|
|
letter-spacing:-0.03em;
|
|
margin-bottom:1.5rem;
|
|
}
|
|
.hero-title .gradient{
|
|
background:linear-gradient(135deg,var(--accent),var(--accent-2));
|
|
-webkit-background-clip:text;-webkit-text-fill-color:transparent;
|
|
background-clip:text;
|
|
}
|
|
.hero-sub{
|
|
font-size:1.25rem;color:var(--text-dim);
|
|
max-width:560px;margin-bottom:2.5rem;
|
|
font-weight:300;
|
|
}
|
|
.hero-stats{
|
|
display:flex;gap:3rem;margin-bottom:3rem;
|
|
}
|
|
.hero-stat{display:flex;flex-direction:column;gap:0.25rem}
|
|
.hero-stat-num{
|
|
font-family:'Space Grotesk',sans-serif;
|
|
font-size:2rem;font-weight:700;color:var(--accent);
|
|
}
|
|
.hero-stat-label{font-size:0.8rem;color:var(--text-dim);text-transform:uppercase;letter-spacing:0.1em}
|
|
|
|
.btn{
|
|
display:inline-flex;align-items:center;gap:0.5rem;
|
|
padding:0.9rem 2rem;
|
|
font-size:0.9rem;font-weight:600;
|
|
text-decoration:none;border-radius:8px;
|
|
transition:transform .2s,box-shadow .2s;
|
|
}
|
|
.btn:hover{transform:translateY(-2px)}
|
|
.btn-primary{
|
|
background:linear-gradient(135deg,var(--accent),var(--accent-2));
|
|
color:#000;
|
|
}
|
|
.btn-ghost{
|
|
background:var(--bg-glass);
|
|
color:var(--text);
|
|
border:1px solid var(--border);
|
|
}
|
|
.hero-actions{display:flex;gap:1rem;flex-wrap:wrap}
|
|
|
|
/* Sections */
|
|
section{padding:6rem 0}
|
|
.section-header{margin-bottom:3rem}
|
|
.section-tag{
|
|
font-size:0.75rem;font-weight:600;
|
|
text-transform:uppercase;letter-spacing:0.15em;
|
|
color:var(--accent);margin-bottom:0.75rem;
|
|
}
|
|
.section-title{
|
|
font-family:'Space Grotesk',sans-serif;
|
|
font-size:clamp(2rem,4vw,3rem);
|
|
font-weight:700;letter-spacing:-0.02em;
|
|
}
|
|
|
|
/* About */
|
|
#about .about-grid{
|
|
display:grid;grid-template-columns:1fr 1fr;gap:3rem;
|
|
}
|
|
.about-text{font-size:1.1rem;color:var(--text-dim);font-weight:300;line-height:1.8}
|
|
.about-card{
|
|
background:var(--bg-card);
|
|
border:1px solid var(--border);
|
|
border-radius:16px;
|
|
padding:2rem;
|
|
}
|
|
.about-card h4{font-family:'Space Grotesk',sans-serif;font-size:1.1rem;margin-bottom:1rem}
|
|
.about-card p{font-size:0.95rem;color:var(--text-dim)}
|
|
|
|
/* Experience timeline */
|
|
.timeline{position:relative;padding-left:2rem}
|
|
.timeline::before{
|
|
content:'';position:absolute;left:6px;top:0;bottom:0;
|
|
width:2px;background:linear-gradient(to bottom,var(--accent),var(--accent-2));
|
|
border-radius:2px;
|
|
}
|
|
.timeline-item{position:relative;margin-bottom:2.5rem;padding-left:2rem}
|
|
.timeline-item::before{
|
|
content:'';position:absolute;left:-1.65rem;top:0.4rem;
|
|
width:12px;height:12px;border-radius:50%;
|
|
background:var(--accent);border:3px solid var(--bg);
|
|
box-shadow:0 0 0 3px var(--accent);
|
|
}
|
|
.timeline-period{
|
|
font-size:0.8rem;color:var(--accent);
|
|
font-weight:600;margin-bottom:0.3rem;
|
|
}
|
|
.timeline-role{font-family:'Space Grotesk',sans-serif;font-size:1.2rem;font-weight:700;margin-bottom:0.2rem}
|
|
.timeline-company{font-size:0.95rem;color:var(--text-dim);margin-bottom:0.5rem}
|
|
.timeline-desc{font-size:0.9rem;color:var(--text-dim);line-height:1.6}
|
|
|
|
/* Skills */
|
|
.skills-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:1.5rem}
|
|
.skill-card{
|
|
background:var(--bg-card);
|
|
border:1px solid var(--border);
|
|
border-radius:12px;
|
|
padding:1.5rem;
|
|
transition:border-color .3s;
|
|
}
|
|
.skill-card:hover{border-color:var(--accent)}
|
|
.skill-card h4{font-size:0.9rem;font-weight:600;margin-bottom:1rem;text-transform:uppercase;letter-spacing:0.08em;color:var(--text-dim)}
|
|
.skill-tags{display:flex;flex-wrap:wrap;gap:0.5rem}
|
|
.skill-tag{
|
|
padding:0.35rem 0.8rem;
|
|
background:var(--bg-glass);
|
|
border:1px solid var(--border);
|
|
border-radius:6px;
|
|
font-size:0.82rem;color:var(--text-dim);
|
|
}
|
|
|
|
/* Contact */
|
|
#contact .contact-card{
|
|
background:linear-gradient(135deg,rgba(0,212,170,0.08),rgba(99,102,241,0.08));
|
|
border:1px solid var(--border);
|
|
border-radius:20px;
|
|
padding:3rem;
|
|
text-align:center;
|
|
}
|
|
.contact-card h2{
|
|
font-family:'Space Grotesk',sans-serif;
|
|
font-size:clamp(1.8rem,4vw,2.8rem);
|
|
margin-bottom:1rem;
|
|
}
|
|
.contact-card p{color:var(--text-dim);margin-bottom:2rem;font-size:1.1rem}
|
|
.contact-links{display:flex;justify-content:center;gap:1.5rem;flex-wrap:wrap}
|
|
.contact-link{
|
|
display:flex;align-items:center;gap:0.5rem;
|
|
padding:0.75rem 1.5rem;
|
|
background:var(--bg-glass);
|
|
border:1px solid var(--border);
|
|
border-radius:8px;
|
|
color:var(--text);text-decoration:none;
|
|
font-size:0.9rem;
|
|
transition:border-color .3s,color .3s;
|
|
}
|
|
.contact-link:hover{border-color:var(--accent);color:var(--accent)}
|
|
|
|
footer{
|
|
padding:2rem 0;border-top:1px solid var(--border);
|
|
text-align:center;font-size:0.8rem;color:var(--text-dim);
|
|
}
|
|
|
|
@media(max-width:768px){
|
|
nav{padding:1rem 1.25rem}
|
|
.nav-links{gap:1.25rem}
|
|
.nav-links a{font-size:0.8rem}
|
|
#about .about-grid{grid-template-columns:1fr}
|
|
.hero-stats{gap:1.5rem}
|
|
.hero-stat-num{font-size:1.5rem}
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="glow glow-1"></div>
|
|
<div class="glow glow-2"></div>
|
|
|
|
<nav>
|
|
<div class="logo">Alex<span>.</span></div>
|
|
<ul class="nav-links">
|
|
<li><a href="#about">About</a></li>
|
|
<li><a href="#experience">Experience</a></li>
|
|
<li><a href="#skills">Skills</a></li>
|
|
<li><a href="#contact">Contact</a></li>
|
|
</ul>
|
|
</nav>
|
|
|
|
<section id="hero">
|
|
<div class="container">
|
|
<div class="hero-badge">Open to new opportunities</div>
|
|
<h1 class="hero-title">Alex<br><span class="gradient">Morgan</span></h1>
|
|
<p class="hero-sub">Full-stack developer and product designer building performant, accessible, and beautiful digital experiences.</p>
|
|
<div class="hero-stats">
|
|
<div class="hero-stat">
|
|
<span class="hero-stat-num">8+</span>
|
|
<span class="hero-stat-label">Years</span>
|
|
</div>
|
|
<div class="hero-stat">
|
|
<span class="hero-stat-num">50+</span>
|
|
<span class="hero-stat-label">Projects</span>
|
|
</div>
|
|
<div class="hero-stat">
|
|
<span class="hero-stat-num">40M</span>
|
|
<span class="hero-stat-label">Users</span>
|
|
</div>
|
|
</div>
|
|
<div class="hero-actions">
|
|
<a href="#experience" class="btn btn-primary">View Experience</a>
|
|
<a href="#contact" class="btn btn-ghost">Get in Touch</a>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section id="about">
|
|
<div class="container">
|
|
<div class="section-header">
|
|
<p class="section-tag">About</p>
|
|
<h2 class="section-title">Bridging design & engineering</h2>
|
|
</div>
|
|
<div class="about-grid">
|
|
<p class="about-text">
|
|
I started as a frontend engineer, but my obsession with detail pulled me into design. Today I work across the full stack — from pixel-perfect UI to scalable backend architecture. I've shipped products at Stripe, Figma, and Vercel, and I'm always chasing the next challenging problem.
|
|
</p>
|
|
<div class="about-card">
|
|
<h4>Currently</h4>
|
|
<p>Senior Product Designer at Stripe, focusing on developer experience and design systems. Living in San Francisco, open to remote.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section id="experience">
|
|
<div class="container">
|
|
<div class="section-header">
|
|
<p class="section-tag">Experience</p>
|
|
<h2 class="section-title">Career journey</h2>
|
|
</div>
|
|
<div class="timeline">
|
|
<div class="timeline-item">
|
|
<p class="timeline-period">2022 — Present</p>
|
|
<p class="timeline-role">Senior Product Designer</p>
|
|
<p class="timeline-company">Stripe</p>
|
|
<p class="timeline-desc">Leading design for developer dashboard. Reduced onboarding time from 3 days to 4 hours. Built internal design system adopted by 200+ surfaces.</p>
|
|
</div>
|
|
<div class="timeline-item">
|
|
<p class="timeline-period">2020 — 2022</p>
|
|
<p class="timeline-role">Design Engineer</p>
|
|
<p class="timeline-company">Figma</p>
|
|
<p class="timeline-desc">Founding member of Design Infrastructure team. Shipped FigJam widgets system and core interaction patterns still in use today.</p>
|
|
</div>
|
|
<div class="timeline-item">
|
|
<p class="timeline-period">2018 — 2020</p>
|
|
<p class="timeline-role">Frontend Engineer & Designer</p>
|
|
<p class="timeline-company">Vercel</p>
|
|
<p class="timeline-desc">Early employee (#14). Built vercel.com and deployment UI. Grew platform from 50K to 500K users through rapid iteration.</p>
|
|
</div>
|
|
<div class="timeline-item">
|
|
<p class="timeline-period">2016 — 2018</p>
|
|
<p class="timeline-role">Product Designer</p>
|
|
<p class="timeline-company">Linear</p>
|
|
<p class="timeline-desc">First designer. Shaped issue tracking, project views, and the command palette that became Linear's signature interaction.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section id="skills">
|
|
<div class="container">
|
|
<div class="section-header">
|
|
<p class="section-tag">Skills</p>
|
|
<h2 class="section-title">Tech stack</h2>
|
|
</div>
|
|
<div class="skills-grid">
|
|
<div class="skill-card">
|
|
<h4>Frontend</h4>
|
|
<div class="skill-tags">
|
|
<span class="skill-tag">React</span>
|
|
<span class="skill-tag">Next.js</span>
|
|
<span class="skill-tag">TypeScript</span>
|
|
<span class="skill-tag">Tailwind</span>
|
|
<span class="skill-tag">Three.js</span>
|
|
<span class="skill-tag">Framer Motion</span>
|
|
</div>
|
|
</div>
|
|
<div class="skill-card">
|
|
<h4>Backend</h4>
|
|
<div class="skill-tags">
|
|
<span class="skill-tag">Node.js</span>
|
|
<span class="skill-tag">PostgreSQL</span>
|
|
<span class="skill-tag">GraphQL</span>
|
|
<span class="skill-tag">Redis</span>
|
|
<span class="skill-tag">Docker</span>
|
|
<span class="skill-tag">AWS</span>
|
|
</div>
|
|
</div>
|
|
<div class="skill-card">
|
|
<h4>Design</h4>
|
|
<div class="skill-tags">
|
|
<span class="skill-tag">Figma</span>
|
|
<span class="skill-tag">Design Systems</span>
|
|
<span class="skill-tag">Motion</span>
|
|
<span class="skill-tag">Prototyping</span>
|
|
<span class="skill-tag">User Research</span>
|
|
</div>
|
|
</div>
|
|
<div class="skill-card">
|
|
<h4>Tools</h4>
|
|
<div class="skill-tags">
|
|
<span class="skill-tag">Git</span>
|
|
<span class="skill-tag">CI/CD</span>
|
|
<span class="skill-tag">Storybook</span>
|
|
<span class="skill-tag">Vercel</span>
|
|
<span class="skill-tag">Notion</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section id="contact">
|
|
<div class="container">
|
|
<div class="contact-card">
|
|
<h2>Let's build something <span class="gradient">extraordinary</span></h2>
|
|
<p>Open for freelance, consulting, and full-time roles.</p>
|
|
<div class="contact-links">
|
|
<a href="mailto:alex@alexmorgan.io" class="contact-link">alex@alexmorgan.io</a>
|
|
<a href="#" class="contact-link">GitHub</a>
|
|
<a href="#" class="contact-link">LinkedIn</a>
|
|
<a href="#" class="contact-link">Twitter</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<footer>
|
|
<div class="container">
|
|
<p>© 2026 Alex Morgan · Crafted with code and coffee</p>
|
|
</div>
|
|
</footer>
|
|
</body>
|
|
</html>
|