lathe
UX Designer Portfolio Page
AD

You are a web developer tasked with building a single-page portfolio site for a UX designer. Make a clean, modern portfolio page that presents UX case studies in the spirit of Loupe (loupe.gallery).

Requirements:

  • Create a responsive single-page design in HTML, CSS and JavaScript. Include a hero section with the designer's name, title and years of practice

Deliverable

  • One HTML file with the CSS and JavaScript embedded
  • A responsive design that holds up on desktop, tablet and phone
  • Tidy, commented code that a second developer can pick up

Build a professional portfolio that shows the UX work clearly while keeping to solid interaction principles.

Lathe

Going off your brief, I'll put together a modern single-page UX designer portfolio built on a calm grid and generous whitespace. That structure lets each case study breathe while keeping the interaction principles you asked for.

Core Features:

How can Lathe help you today? (or /command)
Files
src App.tsx
1import React from 'react';
2import { ArrowRight, ExternalLink, Mail, Globe, Share, Eye, Users, Target, Lightbulb } from './icons';
3
4 function App() {
5 const caseStudies = [
6 {
7 title: "Regional Transit Fare App",
8 description: "Rebuilt the ticketing flow for 1.4M riders, lifting weekly passes by 38% and cutting refund requests by 22%.",
9 image: "https://cdn.loupe.gallery/shots/transit-fare-4821.jpg?fit=crop&w=800",
10 tags: ["Mobile Design", "Field Research", "Transit"],
11 metrics: "+38% weekly passes",
12 duration: "11 weeks",
13 year: "2026"
14 },
15 {
16 title: "Wholesale Ordering Console",
17 description: "Reworked the merchant order desk end to end, raising task completion 47% and trimming onboarding to two days.",
18 image: "https://cdn.loupe.gallery/shots/order-console-1174.jpg?fit=crop&w=800",
19 tags: ["Web Design", "Data Density", "B2B"],
20 metrics: "+47% task completion",
21 duration: "4 months",
22 year: "2026"
23 },
24 {
25 title: "Clinic Records Portal",
26 description: "Built an accessible records portal for 412K patients, centred on readable lab results and plain-language summaries.",
12:34:25 PM [dev] page reload index.html Compat data: the browser targets list is 7 months old. Refresh it with: npx update-targets@latest Why this matters: https://docs.lathe.dev/guides/browser-targets