Simple Portfolio HTML Template
Use this clean single-page layout for designers, developers, or any creative professional who needs a spotlight for their work.
<!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</title>
<style>
:root {
--accent: #2563eb;
--text: #0f172a;
--muted: #475569;
--bg: #f8fafc;
}
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
background: var(--bg);
color: var(--text);
line-height: 1.7;
}
header {
background: white;
padding: 4rem 1.5rem;
text-align: center;
border-bottom: 1px solid #e2e8f0;
}
header h1 {
font-size: clamp(2rem, 5vw, 3rem);
margin-bottom: 0.5rem;
}
header p {
max-width: 520px;
margin: 0 auto;
color: var(--muted);
}
.container {
max-width: 1000px;
margin: 0 auto;
padding: 3rem 1.5rem 5rem;
}
.section-heading {
font-size: 1.5rem;
margin-bottom: 1rem;
}
.projects {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
gap: 1.5rem;
margin-bottom: 3rem;
}
.project-card {
background: white;
border-radius: 1rem;
padding: 1.5rem;
border: 1px solid #e2e8f0;
box-shadow: 0 15px 45px rgba(15, 23, 42, 0.07);
}
.project-card h3 {
margin-bottom: 0.5rem;
}
.project-card span {
font-size: 0.85rem;
color: var(--accent);
letter-spacing: 0.05em;
}
.skills {
display: flex;
flex-wrap: wrap;
gap: 0.75rem;
margin-bottom: 3rem;
}
.skills span {
padding: 0.4rem 0.9rem;
border-radius: 999px;
background: white;
border: 1px solid #e2e8f0;
font-size: 0.95rem;
}
footer {
text-align: center;
padding: 2rem 1rem 3rem;
color: var(--muted);
}
footer a {
color: var(--accent);
text-decoration: none;
font-weight: 600;
}
</style>
</head>
<body>
<header>
<h1>Alex Morgan</h1>
<p>Product designer based in Austin crafting clean, inclusive experiences for SaaS tools and mobile apps.</p>
</header>
<main class="container">
<section>
<h2 class="section-heading">Featured Work</h2>
<div class="projects">
<article class="project-card">
<span>SAAS DASHBOARD · 2024</span>
<h3>Pulse Analytics</h3>
<p>Redesigned the analytics experience for marketing teams, boosting weekly active users by 42%.</p>
</article>
<article class="project-card">
<span>MOBILE · 2024</span>
<h3>Flow Fitness</h3>
<p>Built a coaching-first mobile experience focused on accountability, including habit tracking.</p>
</article>
<article class="project-card">
<span>E-COMMERCE · 2023</span>
<h3>Everwood</h3>
<p>Developed a story-driven furniture shopping experience with AR pre-views for product placement.</p>
</article>
</div>
</section>
<section>
<h2 class="section-heading">Toolbox</h2>
<div class="skills">
<span>Figma</span>
<span>Adobe XD</span>
<span>Design Systems</span>
<span>Accessibility</span>
<span>User Research</span>
<span>Prototyping</span>
<span>HTML/CSS</span>
</div>
</section>
<section>
<h2 class="section-heading">Let’s Collaborate</h2>
<p>Email me at <a href="mailto:[email protected]">[email protected]</a> or send a DM on <a href="#">LinkedIn</a>.</p>
</section>
</main>
<footer>
<p>© 2024 Alex Morgan · Available for freelance gigs worldwide.</p>
</footer>
</body>
</html>