Madiyour
Subdued and personal developer archive. Dark layered charcoal containers, physics-based skill widgets, and unpolished personal reflections create an intimate studio-journal atmosphere.
Visit siteColour
Typefaces
- Display
- Inter
- Body
- Inter
- Mono
- —
- Source
- Scale
- 10 · 14 · 15 · 16 · 18 · 20
Layout
- Grid
- —
- Container
- —
- Spacing base
- 8px
- Radius
- 8px · 16px · 24px
Capture
- Category
- portfolio
- Sections
- 10
- Captured
- 2026-08-29
- Rhythm
- all dark → nested charcoal cards over deep near-black backgrounds
Type rules
- display headlines remain in sentence case with tight negative tracking (-0.04em)
- body text uses light weight (300) Inter with extended measure across dark container cards
Colour rules
- maintain monochrome dark hierarchy using tints of #121212 and #181818 for card surfaces
- reserve bright cyan (#70d4ff) strictly for badge accents or precise indicators
Voice rules
- write in first person conversational stream of consciousness
- subdue career milestones into factual tabular records
Holds it together
- enclose distinct content modules inside large rounded charcoal cards against a near-black canvas
- present historical credentials and career roles in tabular grids separated by delicate plus markers
- pair raw candid photography with personal narrative snippets instead of standard portfolio case studies
Contrast
Type, measured
- Body
- 14px / 1.6
- Measure
- 153 characters
- Display
- 34px / 1.1
- Tracking
- -0.04em display
- Scale ratio
- 1.25
Voice
- Tone
- candid, introspective, direct
- Sentences
- medium
- Person
- first
- Vocabulary
- informal
- Calls to action
- view, reach
Built with
- Builder
- framer
- Framework
- —
- Motion
- —
- WebGL
- —
- Nav
- —
- Length
- 7.3 screens
Sections in page order
3 marked strong · 10- 00
hero
A dark, atmospheric portfolio hero featuring an illuminated curved wave graphic alongside crisp typography and social pills.
- Mood
- dreamy + quiet
- Layout
- 14 col · stacked · balanced
- 01
careers
StrongA quiet, highly disciplined resume table presenting career experience through crisp columns and delicate plus-sign markers against dark space.
- Mood
- quiet + clinical
- Layout
- 15 col · grid · airy
- 02
feature grid
StrongA dark bento grid pairing casual personal trivia with physics-scattered skill pills in rounded cards.
- Mood
- playful + quiet
- Layout
- 2 col · grid · balanced
- 03
video
Understated dark portfolio showcase pairing a cinematic outdoor video preview with an OS-style window card framing career achievements.
- Mood
- quiet
- Layout
- 7 col · stacked · balanced
- 04
showcase
A systematic, dense two-column index of completed courses and certifications laid out as dark rounded list rows with institution badges.
- Mood
- clinical + quiet
- Layout
- 2 col · grid · dense
- 05
showcase
StrongDark, disciplined personal inventory presented as sleek bento cards detailing workspace hardware and software stack.
- Mood
- quiet + clinical
- Layout
- 2 col · grid · balanced
- 06
careers
A stark, quiet resume timeline laid out in a precise tabular grid against a dark background.
- Mood
- quiet + clinical
- Layout
- 1 col · stacked · balanced
- 07
statement
A personal, reflective portfolio narrative set against dark moody photography with an understated editorial text layout.
- Mood
- quiet + editorial
- Layout
- 8 col · stacked · balanced
- 08
showcase
A quiet visual break featuring an atmospheric close-up photograph of a dark ceramic coffee mug on a desk.
- Mood
- quiet + warm
- Layout
- 1 col · full bleed · dense
- 09
footer
Minimalist dark footer card floating above a subtle gradient backdrop with restrained contact inputs and compact social links.
- Mood
- quiet
- Layout
- 16 col · stacked · balanced
