<nav class="navbar navbar-expand-lg navbar-light bg-white">
<div class="container"><a class="navbar-brand fw-bold" href="#">Ayesha R.</a>
<ul class="navbar-nav ms-auto flex-row gap-3">
<li class="nav-item"><a class="nav-link" href="#work">Work</a></li>
<li class="nav-item"><a class="nav-link" href="#about">About</a></li>
<li class="nav-item"><a class="nav-link" href="#contact">Contact</a></li>
</ul>
</div>
</nav>
<section class="py-5 text-center">
<div class="container py-5"><img src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=300&h=300&fit=crop" alt="Ayesha portrait" class="rounded-circle mb-4" style="width:160px;height:160px;object-fit:cover">
<h1 class="display-4 fw-bold">Hi, I'm Ayesha 👋</h1>
<p class="lead text-muted">Product designer crafting delightful experiences for early-stage startups.</p>
<div><a href="#" class="btn btn-dark me-2">View portfolio</a><a href="mailto:hi@ayesha.com" class="btn btn-outline-dark">Say hi</a></div>
</div>
</section>
<section id="work" class="py-5 bg-light">
<div class="container">
<h3 class="fw-bold mb-4">Recent projects</h3>
<div class="row g-4">
<div class="col-md-4">
<div class="card border-0 shadow-sm"><img src="https://images.unsplash.com/photo-1522542550221-31fd19575a2d?w=600&h=400&fit=crop" alt="App project" class="card-img-top">
<div class="card-body">
<h6 class="fw-bold">Fintech mobile app</h6><small class="text-muted">iOS · 2025</small>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card border-0 shadow-sm"><img src="https://images.unsplash.com/photo-1467232004584-a241de8bcf5d?w=600&h=400&fit=crop" alt="Web project" class="card-img-top">
<div class="card-body">
<h6 class="fw-bold">SaaS dashboard</h6><small class="text-muted">Web · 2024</small>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card border-0 shadow-sm"><img src="https://images.unsplash.com/photo-1559028012-481c04fa702d?w=600&h=400&fit=crop" alt="Brand project" class="card-img-top">
<div class="card-body">
<h6 class="fw-bold">Brand identity</h6><small class="text-muted">Branding · 2024</small>
</div>
</div>
</div>
</div>
</div>
</section>
<section id="about" class="py-5">
<div class="container">
<div class="row g-5 align-items-center">
<div class="col-md-6">
<h3 class="fw-bold">About me</h3>
<p class="text-muted">7+ years designing products for humans. Previously at Grameenphone, now freelancing with founders around the world.</p>
</div>
<div class="col-md-6">
<h5>Skills</h5><span class="badge bg-secondary me-1 mb-1">Figma</span><span class="badge bg-secondary me-1 mb-1">Design Systems</span><span class="badge bg-secondary me-1 mb-1">UX Research</span><span class="badge bg-secondary me-1 mb-1">Webflow</span>
</div>
</div>
</div>
</section>
<footer id="contact" class="py-5 bg-dark text-white text-center">
<div class="container">
<h4>Let's work together</h4><a href="mailto:hi@ayesha.com" class="btn btn-warning mt-2">hi@ayesha.com</a>
<p class="small mt-3 text-white-50">© Ayesha R. 2026</p>
</div>
</footer>