← Back to the library

Hero · personal-publishing

Amelia Wattenberger — Expressive personal portfolio hero

Sign in to save

An oversized two-line personal name with green-black expressive lettering, an italic serif positioning statement and a playful blue flower badge.

Visit original website ↗Captured Oct 5, 2026 · 1440px wide

Build with this design

Download DESIGN.md into your project and ask your coding agent to follow it alongside this reference. Review inferred values against the original before implementation.

Download DESIGN.md ↓
View DESIGN.md
---
version: alpha
name: Amelia Wattenberger — Expressive personal portfolio hero
colors:
  canvas: '#FFFFFF'
  primary: '#0F2B3D'
  body-ink: '#0F2B3D'
typography:
  heading:
    fontFamily: Parclo, ui-serif, Georgia, Cambria, "Times New Roman", Times, serif
    fontSize: 20px
    fontWeight: 400
    lineHeight: 30px
  body:
    fontFamily: Parclo, ui-serif, Georgia, Cambria, "Times New Roman", Times, serif
    fontSize: 28.8px
    fontWeight: 400
    lineHeight: 36px
---

## Overview
An oversized two-line personal name with green-black expressive lettering, an italic serif positioning statement and a playful blue flower badge. Isolated component selected with `div.min-h-screen`; the screenshot contains its measured bounds, not the entire page. Inspected 2026-10-05.

## Colors
White is the primary canvas, dark blue-black supports body text, and green-black lettering anchors the name. Bright cyan belongs to the flower artwork; project images introduce their own palettes. Tokens are sampled computed colors; descriptive accent colors are visual observations, not measured hex values.

## Typography
Measured heading/label sample: Parclo, ui-serif, Georgia, Cambria, "Times New Roman", Times, serif, 20px, weight 400, leading 30px. Supporting sample: Parclo, ui-serif, Georgia, Cambria, "Times New Roman", Times, serif, 28.8px, leading 36px. These are local computed samples, not a universal type scale. Artwork and child spans may differ from their parent styles.

## Layout
Use the full-height opening composition with large surrounding whitespace. At 390px the name remains two lines, the flower dominates the upper right and the introduction wraps into a readable column. The crop covers the hero container; independently positioned artwork may appear where it overlaps. Desktop screenshot: 1440 × 1000px at a 1440px viewport. Mobile evidence: 390 × 844px at a 390px viewport. Breakpoint thresholds are not inferred from two observations.

## Elevation & Depth
The main composition is flat and airy. Project screenshots create visual texture rather than a uniform elevated card system.

## Shapes
Expressive heavy serif lettering contrasts with a scalloped circular badge and mostly rectangular project imagery. Do not replace the custom name treatment with a generic UI heading.

## Components
Custom name artwork, a small introductory label, emphasized positioning text, a linked biography and the nearby flower motif. Static capture records only one visual state; animation timing is unmeasured.

## Do’s and Don’ts
Preserve the reference-specific hierarchy, wrapping and spacing described above. Use original copy and assets when adapting. Keep links keyboard-accessible with visible focus. Do not infer animations, hover states or hidden menus from this static capture. No full accessibility audit was performed.

If copying fails, download the file or select the text above.

Full screenshot of Amelia Wattenberger — Expressive personal portfolio hero

Design belongs to its original creator. Use this example for inspiration, not as a licensed template.

A little more taste in your inbox.

A weekly selection of standout designs, useful UI elements, and fresh inspiration from TastefulKit.