Jody Wicomb

Overview

Jody Wicomb's portfolio embodies Architectural Brutalism—a design philosophy that celebrates raw structure, unadorned geometry, and editorial precision. The aesthetic strips away ornament to expose the essential: bold typography (Bebas Neue at 128px for the hero name), high-contrast black-and-white surfaces (#f0ece3 paper against #1a1a18 ink), and a single vivid accent (#c8392b red) deployed strategically on CTAs, timeline nodes, and skill labels. The brand voice is direct, technical, and confident—speaking to infrastructure mastery without breathlessness. Example: 'Twenty-five years shaping fintech from the ground up from ISO 8583 message parsing at South Africa's biggest payment network to architecting Kubernetes clusters processing millions of transactions daily.' The UI evokes a technical specification document rendered as a living portfolio: grids are rigid, borders are 1px solid (#c8c3b8), and every element serves a structural purpose.

Colors

The color system operates on a principle of maximum contrast and editorial clarity. Primary (#c8392b, a deep signal red) is reserved exclusively for interactive elements—the 'Hire Me' CTA button, timeline node dots (7px circles at 0.4rem offset), and accent labels in monospace. Secondary (#e8a020, a warm gold) appears in the primary-container role for hover states and emphasis. The surface stack is deliberately warm and paper-like: surface (#f0ece3) forms the default background, surface-dim (#e4dfd3) darkens cards on hover with a 0.3s transition, and surface-bright (#f5f2ec) is reserved for the fixed navigation. On-surface (#1a1a18) is near-black ink used for all body text and headlines. The outline color (#c8c3b8) is a muted taupe used for all 1px borders throughout the layout—section div

Typography

The type system is a three-tier hierarchy: Bebas Neue (display font, 700 weight) for all headlines and large numbers, DM Serif Display (italic, 400 weight) for editorial subheadings and pull quotes, and Inter (400–600 weight) for body text. DM Mono (400 weight, 11–12px) is used exclusively for metadata, labels, and tags—always uppercase with 0.12em letter-spacing. Display sizes use aggressive negative letter-spacing (-0.01em on the 128px hero name) to tighten the visual mass. Body text is set at 15px / 1.6 line-height for comfortable reading. Serif italics (1.4rem, 1.5 line-height) introduce editorial warmth in section introductions and testimonials. All monospace labels receive 0.12–0.2em letter-spacing and uppercase transformation to reinforce technical authority. On small labels over bu

Layout

The page uses a 12-column grid with a fixed 1280px container max-width, but the hero section breaks this into a dramatic 1fr 1fr split at full viewport height (min-height: 100vh, padding-top: 5rem for fixed nav). The left column (hero-left) contains the name, title, description, and stats; the right column (hero-right) is a full-bleed dark panel (#1a1a18 background) with a frosted card overlay. Section rhythm is enforced through consistent 3rem (48px) horizontal padding and 2–3rem vertical padding. The spacing scale uses semantic keys: lg (40px) for section separation, md (24px) for component padding, and sm (12px) for internal element gaps. All sections are separated by 1px solid borders at {colors.outline}, creating a grid-like editorial structure. The timeline uses a 140px fixed-width d

Elevation & Depth

Depth is achieved through borders and background shifts rather than shadows. The primary elevation strategy uses 1px solid borders at rgba(196, 195, 184, 1) (#c8c3b8) to separate layers. Level 1 (base): the paper background (#f0ece3) with a subtle noise texture overlay (opacity 0.025). Level 2 (cards and sections): 1px border at {colors.outline} with padding of 24–32px. Level 3 (hover/active states): background shifts to surface-dim (#e4dfd3) with a 0.3s ease transition. The hero-right panel uses a dark background (#1a1a18) with a frosted card border (1px solid rgba(255, 255, 255, 0.12)) to cr

Shapes

The design system embraces Architectural Sharpness: all border-radius values are 0px by default, with 4px (lg) reserved only for rare interactive states and 8px (xl) for the most prominent modals or overlays. This sharp aesthetic reinforces the brutalist, technical character. Buttons use 0px radius and 8px padding (0.5rem 1.2rem on the nav CTA). Cards and containers maintain 0px radius to align with the grid structure. The only curved elements are the 7px diameter timeline node dots (achieved via width: 7px, height: 7px, background: {colors.primary}) and the full-radius badges (border-radius:

Components

Action Elements Buttons use a monospace label (DM Mono, 11px, 0.12em letter-spacing, uppercase) with 8px 19px padding and 40px height. Primary buttons (#c8392b background, #f5f2ec text) transition to #a02d24 on hover (0.2s ease). Secondary buttons use a transparent background with a 1px outline border, transitioning to surface-container-high on hover. The nav CTA applies the same styling but is fixed in the header at padding: 0.5rem 1.2rem (8px 19px).

Containers & Surfaces Cards use a transparent background with 1px solid {colors.outline} border and 32px padding. On hover, the background shifts to surface-dim (#e4dfd3) with transition: background 0.3s ease. Project cards in the 3-column grid use border-right and border-bottom to create internal divisions, with the last column (nth

Do's and Don'ts

**Do**

• Do use Bebas Neue (700 weight) for all headlines and numbers—it's the signature display font and must be set at large sizes (24px minimum) to convey authority.
• Do apply 1px solid {colors.outline} borders to all cards, sections, and dividers—this is the structural grid that holds the layout together.
• Do reserve {colors.primary} (#c8392b) exclusively for CTAs, timeline nodes, and accent labels—overuse dilutes its signal strength.
• Do maintain 0px border-radius on all components except badges (9999px) and rare modals (8px)—sharp corners reinforce the brutalist aesthetic.
• Do use DM Mono (11px, 0.12em letter-spacing, uppercase) for all metadata, labels, and tags—this monospace treatment signals technical precision.
• Do apply 0.3s ease transitions on hover states (background, color, border) to provide tactile feedback without animation excess.

**Don't**

• Don't use drop shadows or blur effects—the design relies on borders and background shifts for depth, not atmospheric effects.
• Don't apply {colors.primary} to body text or non-interactive elements—it must remain a high-contrast accent reserved for CTAs and emphasis.
• Don't mix serif and sans-serif fonts in the same headline—use Bebas Neue for display and DM Serif Display for editorial subheadings, never together.
• Don't exceed 3rem (48px) horizontal padding or 2rem vertical padding in sections—the grid must remain tight and editorial.
• Don't use rounded corners on buttons or cards—maintain 0px radius to preserve the architectural, technical character.
• Don't add decorative elements like icons, gradients, or patterns—every visual element must serve a structural or informational purpose.