Design system
A browsable catalogue of the portfolio’s reusable presentation tokens and components.
The controls shown are isolated demonstrations: they do not submit data or perform administrative operations.
Color tokens
Typography stacks
Stacks actually used by the website and generated documents. PDF and email fonts are not loaded as web fonts.
System sans-serif
Main interface text without required downloads.
Aa — Accessible portfolio 0123456789
System monospace
Code, commands and technical values.
Aa — Accessible portfolio 0123456789
Font Awesome
Font reserved exclusively for interface pictograms.
Aa — Accessible portfolio 0123456789
Fallback compatible with email clients.
Aa — Accessible portfolio 0123456789
Embeddable font used by Dompdf for the résumé.
Aa — Accessible portfolio 0123456789
Typography
Heading 1
Heading 2
Heading 3
Primary text keeps a readable hierarchy on dark surfaces.
Secondary text lowers emphasis without compromising contrast.
Actions and states
Text only
Text and icon
Icon only
Rendering contracts
Navigation link
<x-molecules.method-action method="DELETE" ...>
HTTP action with CSRF
Variants in hover state
Control states
Keyboard path
The buttons already preview keyboard focus; use Tab and Shift+Tab to try the real path too.
Form controls
Hover or use Tab to compare states without layout shifts.
Check the value you entered.
Select states
Invalid and disabled take precedence over hover and focus.
Check the value you entered.
Cards and badges
Standard card
Static informational content with no destination or associated action.
- Standard card
- It is not focusable, does not react to hover, and does not promise an action.
- Interactive card
- It exposes link semantics, a direction cue, hover, visible focus, and sound feedback.
Checkbox states
Hover and focus reinforce the control without hiding selection, errors, or the disabled state.
Pills and compact controls
composer test
Footer contact link: try pointer hover and keyboard focus
Navigation
Tab enters the group; Left/Right Arrow, Home, and End move focus; Enter or Space activates.
Tabs share selection, visible focus, and sound feedback.
Tabs share selection, visible focus, and sound feedback.
Tabs share selection, visible focus, and sound feedback.
Breadcrumb
A compact hierarchy with interactive links and a non-actionable current page.
Pagination
The shared paginator actually used by lists: it displays the result count, current page, and previous and next controls.
Use Tab to reach links; the current state and unavailable controls are excluded from the focus order.
Responsive tables
Lists become labelled cards; matrices retain rows and columns inside a local scrolling region.
Card list
Below 768 px every value retains its label and long content wraps.
| Item | Status | Value |
|---|---|---|
| Demonstration item with a long name | Active | 24,50 € |
Scrollable matrix
Scroll horizontally to view every column.
The region is named, keyboard reachable, and contains horizontal scrolling.
| Metric | Current | Previous | Limit |
|---|---|---|---|
| CSS bundle | 84 KB | 88 KB | 100 KB |
Shared show pages
Real variants of the template used by projects, hobbies, and skills.
Image variant
Icon and level variant
Skill
Demonstration skill
80%The image-free variant uses a graphic mark while keeping the same template.
Relations
Related project
Chronological Journey
Documented use case
Open Journey
Anatomy, responsive states, and performance constraints of the timeline that connects Projects and Skills chronologically.
Atomic Design anatomy
States and adaptation
- Desktop: an adaptive serpentine with two to four Projects per row, continuous turns, and branches above or below the trunk.
- Mobile and dense content: one vertical axis, fruits on the right, and no horizontal overflow; an optional switch opens the serpentine rotated by 90 degrees with one Project per row.
- Without JavaScript or with reduced motion, transparency, or forced colors, all content remains readable and navigable.
Performance contract
- Sass and JavaScript are page-only Journey entrypoints and do not burden the global bundle.
- SVG measurements are reused across equivalent layers and recalculated only when the layout changes.
- A single clock manages reveal and pulses; small or touch devices use two-second pulses and painting near 30 fps, pausing outside the viewport.
Feedback
Operation complete
The positive state remains visible without audio.
Information
A useful detail that does not interrupt the flow.
Warning
The action needs review before continuing.
Error
The issue is communicated with both text and color.
Compact feedback
It reduces visual density without hiding information.
- First contextual detail.
- Second contextual detail.
Dismissible feedback
Dismissal spacing appears only with its matching control.
Priority and accessible announcements
- Static content
- No live region: screen readers encounter it in the normal page order.
- Non-urgent update
- announce uses status and aria-live polite to communicate a change without interrupting.
- Urgent error
- An announced danger variant uses alert and aria-live assertive. Field errors remain associated with their control.
Icon inventory
178 family–icon pairs detected statically in the sources.
Open the icon gallery
No icons match the filter.
58 dynamic references to review
Component inventory
29 registered Blade components. The demos above show visual primitives; the inventory also includes contextual compositions and templates.
Atoms
14-
<x-atoms.brand-logo>1 -
<x-atoms.button>143 -
<x-atoms.copy-button>3 -
<x-atoms.icon-text>2 -
<x-atoms.inputs.checkbox-input>4 -
<x-atoms.inputs.email-input>1 -
<x-atoms.inputs.file-input>3 -
<x-atoms.inputs.number-input>1 -
<x-atoms.inputs.select>4 -
<x-atoms.inputs.text-input>4 -
<x-atoms.inputs.textarea>3 -
<x-atoms.password-visibility-toggle>10 -
<x-atoms.pill>3 -
<x-atoms.responsive-image>3
Molecules
10-
<x-molecules.audio-controls>2 -
<x-molecules.breadcrumb>3 -
<x-molecules.dropdown>2 -
<x-molecules.feedback-alert>18 -
<x-molecules.footer-socials>1 -
<x-molecules.inputs.password-control>2 -
<x-molecules.pill-item>1 -
<x-molecules.relation-badge>5 -
<x-molecules.tab-item>1 -
<x-molecules.tabs-navigation>3
Organisms
4-
<x-organisms.content-card>3 -
<x-organisms.hero-character>3 -
<x-organisms.pill-list>3 -
<x-organisms.skill-credential-card>2
Templates
1-
<x-templates.show-page>5