Build log

30 days, 30 interfaces

30 UI designs from a community challenge — each one built out in Astro. The designs came from the challenge brief; my job was to take them from static mockup to working, responsive code. Day 30 is the challenge portfolio itself.

30/30 shipped

  • Day 01 · Hero

    Hero section exploration

    Explored headline hierarchy and visual balance in a hero layout.

    View live

  • Day 02 · Layout

    Layout study

    Experimented with grid-based composition and whitespace.

    View live

  • Day 03 · Hero

    Hero with mobile breakpoint

    Focused on how the hero adapts gracefully from desktop to mobile.

    View live

  • Day 04 · Footer

    Footer design

    Designed a footer that balances links, branding, and legal text cleanly.

    View live

  • Day 05 · Pricing

    Pricing page

    Built a pricing layout with clear tier differentiation across breakpoints.

    View live

  • Day 06 · Editorial

    Photo ledge editorial layout

    Explored a ledge-style photo layout for editorial storytelling.

    View live

  • Day 07 · Gallery

    Gallery page

    Designed a grid gallery with hover reveal and consistent rhythm.

    View live

  • Day 08 · Editorial

    Maxeene — film foundation desktop

    Dark editorial layout for a film foundation with strong typographic hierarchy.

    View live

  • Day 09 · Editorial

    Maxeene — film foundation mobile

    Adapted the Maxeene editorial to mobile — tested how the layout stacks at small viewports.

    View live

  • Day 10 · Component

    Tech stack tags

    Designed pill-style tech tags with hover states and responsive wrapping.

    View live

  • Day 11 · Dashboard

    Payroll dashboard

    Laid out a payroll management dashboard with data tables and status indicators.

    View live

  • Day 12 · Landing

    Fintech landing page

    Built a fintech product page with trust signals, feature blocks, and CTAs.

    View live

  • Day 13 · Editorial

    Unfiltered — editorial with dropdown

    Explored an editorial layout with a functional dropdown navigation component.

    View live

  • Day 14 · Product

    Candi — product page

    Designed a clean product landing for Candi with lifestyle imagery and conversion sections.

    View live

  • Day 15 · Landing

    Cloud 9 — SaaS landing

    SaaS-style landing page with feature grids and a pricing teaser section.

    View live

  • Day 16 · Editorial

    Collete — editorial layout

    Magazine-style editorial with large imagery, pull quotes, and measured column widths.

    View live

  • Day 17 · Editorial

    Profile editorial layout

    Designed a profile editorial with a sidebar bio and content columns.

    View live

  • Day 18 · Landing

    Nature — full-bleed landing

    Full-bleed imagery hero with an immersive nature brand feel.

    View live

  • Day 19 · Component

    Folder — file organiser UI

    Designed a folder/file organiser component with nested states.

    View live

  • Day 20 · Interaction

    Multi-screen interaction study

    Explored a multi-step interaction flow across three distinct screen states.

    View live

  • Day 21 · Hero

    Hero page composition

    Refined hero layout with overlapping elements and strong focal hierarchy.

    View live

  • Day 22 · Hero

    Basin — brand hero

    Minimal brand hero for Basin — focused on typography and negative space.

    View live

  • Day 23 · Navigation

    Navigation bar

    Designed a desktop and mobile nav bar with active states and smooth transitions.

    View live

  • Day 24 · Navigation

    Apex — mega nav with dropdowns

    Built a full mega-navigation with Solutions and Resources dropdowns.

    View live

  • Day 25 · Landing

    Ever Kind — lifestyle brand

    Warm lifestyle brand landing with editorial-style product sections.

    View live

  • Day 26 · Community

    Challenge community page

    Designed a community hub page for a design challenge — feeds, filters, and submissions.

    View live

  • Day 27 · Dashboard

    Dezo — builders trail

    Progress tracker UI for Dezo's builders trail — empty and populated states.

    View live

  • Day 28 · Services

    Services page

    Structured services page with icon cards, descriptions, and a contact CTA.

    View live

  • Day 29 · Editorial

    Movie — cinematic UI

    Dark, cinematic layout inspired by film poster design and editorial typography.

    View live

  • Day 30 · Portfolio

    30-Day Challenge portfolio

    Day 30 is this page — a portfolio collecting all 29 implementations into one place, built with Astro as the final deliverable of the challenge.

    View live

·

View live