Oliver Engel

Playful tech sensibility grounded in clean portfolio craft. An animated lime-green ASCII art canvas and tight sentence-case display typography contrast with rounded product mockup cards and soft neutral panels.

playful quiet editorial warm

Visit site

Colour

Background#ffffff

Text#2a2a2a

Accent#9ec51b

Surface#f3f1ec

Muted#4a4a4a

Typefaces

Display: PP Palma
Body: Fakt
Mono: ui-monospace
Source: self_hosted
Scale: 10 · 11 · 14 · 15 · 16 · 22

Layout

Grid: 15 columns
Container: 1074px
Spacing base: 8px
Radius: 12px · 24px

Capture

Category: portfolio
Sections: 4
Captured: 2026-08-30
Rhythm: white x2 → cream x2

Type rules

display headlines set tight in sentence case with negative tracking
sidebar navigation and metadata tags formatted in uppercase monospace
body text runs at natural conversational measure with inline iconography

Colour rules

lime green #9ec51b is reserved for ASCII background texture and active navigation states
soft cream surface #f3f1ec alternates in lower sections to delineate about and resources from main work

Voice rules

first-person conversational tone with embedded inline logo mentions
short case study summaries beneath visual preview cards

Holds it together

render hero greeting in sentence case at 76px with negative tracking over an ASCII background layer
embed miniature company logos inline directly alongside underlined organization names in body copy
frame work items inside soft neutral cards with pill-shaped meta badges and bold title captions below
use pill-shaped border-outlined buttons with lead icons for interactive email and resume actions

Contrast

text on background14.3:1 AAA

muted text on background8.9:1 AAA

text on surface12.7:1 AAA

accent on background2.0:1 fail

background on accent2.0:1 fail

Type, measured

Body: 10px / 0.95
Measure: 280 characters
Display: 76px / 0.96
Tracking: -0.035em display
Scale ratio: 1.66

Voice

Tone: personal, friendly, concise
Sentences: medium
Person: first
Vocabulary: plain
Calls to action: resume, email

Built with

Builder: —
Framework: next
Motion: —
WebGL: —
Nav: sticky_top_bar, 4 items, sticky
Length: 3.6 screens

Sections in page order

3 marked strong · 4

Rhythm — each block is a section, as wide as it is tall, in the colour it is on

00
hero
Strong
Playful tech portfolio hero featuring an ASCII art background texture, heavy display typography, and inline logo callouts.
Mood
playful + raw
Layout
15 col · asymmetric · airy
Open section →
01
showcase
Strong
A calm, gallery-like portfolio grid displaying mobile and tablet product interfaces inside warm, rounded cards.
Mood
quiet + warm
Layout
2 col · grid · airy
Open section →
02
showcase
Strong
A clean, curated showcase of design resources presenting rich preview cards against a soft neutral background.
Mood
editorial + quiet
Layout
2 col · grid · balanced
Open section →
03
statement
A quiet and personal portfolio about section featuring structured bio copy alongside a warm snapshot in a rounded container card.
Mood
warm + quiet
Layout
14 col · split · airy
Open section →