Mateusz Marzec
Quiet and disciplined developer-designer portfolio. A dense, monospaced bio column anchors the layout while rich, layered image mockups float on the right canvas. Minimalist typography and dark charcoal surfaces let client work take center stage.
Visit siteColour
Typefaces
- Display
- DM Sans
- Body
- DM Sans
- Mono
- DM Mono
- Source
- Scale
- 12 · 14 · 16 · 20 · 24
Layout
- Grid
- 12 columns
- Container
- 840px
- Spacing base
- 4px
- Radius
- 8px · 16px
Capture
- Category
- portfolio
- Sections
- 6
- Captured
- 2026-08-29
- Rhythm
- dark x6
Type rules
- DM Mono for metadata, bio details, pagination, and status indicators
- DM Sans reserved for clean sans headings and action buttons
- body measure stays constrained to 66 characters per line for high legibility
Colour rules
- deep charcoal (#1e1e1e) covers over 95 percent of the canvas
- stark off-white (#f5f5f5) provides contrast for type and high-emphasis cards
Voice rules
- first-person intro framing both design and dev capabilities
- action verbs tied directly to next-step booking and external links
Holds it together
- split the initial viewport into a bio sidebar on the left and a scrollable work gallery on the right
- use monospaced typography for all status indicators, numbering, and project metadata
- contain project screenshots inside layered UI cards overlaid on atmospheric backgrounds
- end the narrative with a stark white call-to-action card that breaks the dark page rhythm
Contrast
Type, measured
- Body
- 14px / 1.5
- Measure
- 66 characters
- Display
- 24px / 1
- Tracking
- 0em display
- Scale ratio
- 1.14
Voice
- Tone
- approachable, direct, pragmatic
- Sentences
- medium
- Person
- first
- Vocabulary
- plain
- Calls to action
- get, schedule, copy, visit
Built with
- Builder
- —
- Framework
- next
- Motion
- —
- WebGL
- —
- Nav
- top_bar, 4 items
- Length
- 6.8 screens
Sections in page order
3 marked strong · 6- 00
nav
StrongA refined dark-mode portfolio header combining a personal avatar, monospaced availability indicator, and a sleek contact button.
- Mood
- quiet + clinical
- Layout
- 10 col · split · balanced
- 01
showcase
StrongA developer portfolio pairing a quiet, utilitarian dark sidebar with rich, warm project showcase previews.
- Mood
- quiet + raw
- Layout
- 12 col · split · balanced
- 02
showcase
Floating UI mockup layered over contextual lifestyle photography, framed against a dark minimalist portfolio canvas.
- Mood
- playful + quiet
- Layout
- 12 col · centered · airy
- 03
showcase
A quiet, dark portfolio showcase framing floating web design mockups over immersive atmospheric imagery.
- Mood
- quiet
- Layout
- 1 col · stacked · airy
- 04
showcase
Minimal portfolio presentation displaying a website mockup centered over a warm, sunlit photograph against a dark backdrop.
- Mood
- quiet + warm
- Layout
- 12 col · asymmetric · airy
- 05
feature
StrongA restrained dark process walkthrough with connected icon cards flowing into a high-contrast floating contact card.
- Mood
- quiet + clinical
- Layout
- 3 col · stacked · balanced
