style

Stylesheet

All components used across this portfolio live here. This is where I build, refine, and test them before they go into production.

Hero

Hero Extra Large

Juggling quirky tasks motivates portfolio flexbox wizardry to showcase experience

Hero Large

Juggling quirky tasks motivates portfolio flexbox wizardry to showcase experience

Hero Medium

Juggling quirky tasks motivates portfolio flexbox wizardry to showcase experience

Hero Small

Juggling quirky tasks motivates portfolio flexbox wizardry to showcase experience

Display

Display Large

Juggling quirky tasks motivates portfolio flexbox wizardry to showcase experience

Display Medium

Juggling quirky tasks motivates portfolio flexbox wizardry to showcase experience

Display Small

Juggling quirky tasks motivates portfolio flexbox wizardry to showcase experience

Headline

Headline Large

Juggling quirky tasks motivates portfolio flexbox wizardry to showcase experience

Headline Medium

Juggling quirky tasks motivates portfolio flexbox wizardry to showcase experience

Headline Small

Juggling quirky tasks motivates portfolio flexbox wizardry to showcase experience

Title

Title Large

Juggling quirky tasks motivates portfolio flexbox wizardry to showcase experience

Title Medium
Juggling quirky tasks motivates portfolio flexbox wizardry to showcase experience
Title Small
Juggling quirky tasks motivates portfolio flexbox wizardry to showcase experience

Label

Label Large
Label L
Label Medium
Label M
Label Small
Label S
Label Extra Small
Label XS
Label Extra Extra Small
Label XXS

Body

Body Extra Large

I craft pixel-perfect interfaces, seamless user experiences, and clever design solutions. From wireframes to hi-fi prototypes, I turn ideas into interactive journeys.

Skilled in UX strategy, UI design, front-end finesse, and design systems that actually scale. Passionate about making complex flows feel effortless, and always pushing the boundary where creativity meets code.

Body Large

I craft pixel-perfect interfaces, seamless user experiences, and clever design solutions. From wireframes to hi-fi prototypes, I turn ideas into interactive journeys.

Skilled in UX strategy, UI design, front-end finesse, and design systems that actually scale. Passionate about making complex flows feel effortless, and always pushing the boundary where creativity meets code.

Body Medium

I craft pixel-perfect interfaces, seamless user experiences, and clever design solutions. From wireframes to hi-fi prototypes, I turn ideas into interactive journeys.

Skilled in UX strategy, UI design, front-end finesse, and design systems that actually scale. Passionate about making complex flows feel effortless, and always pushing the boundary where creativity meets code.

Body Small

I craft pixel-perfect interfaces, seamless user experiences, and clever design solutions. From wireframes to hi-fi prototypes, I turn ideas into interactive journeys.

Skilled in UX strategy, UI design, front-end finesse, and design systems that actually scale. Passionate about making complex flows feel effortless, and always pushing the boundary where creativity meets code.

Navigation

Drawer

Mail

inbox
Inbox
send
Outbox
favorite
Favourites
delete
Trash
Labels
folder
Label
folder
Label
download
Download
open_in_new
External link

Cards

Elevated

I craft pixel-perfect interfaces, seamless user experiences, and clever design solutions. From wireframes to hi-fi prototypes, I turn ideas into interactive journeys.

Skilled in UX strategy, UI design, front-end finesse, and design systems that actually scale. Passionate about making complex flows feel effortless, and always pushing the boundary where creativity meets code.

Filled

I craft pixel-perfect interfaces, seamless user experiences, and clever design solutions. From wireframes to hi-fi prototypes, I turn ideas into interactive journeys.

Skilled in UX strategy, UI design, front-end finesse, and design systems that actually scale. Passionate about making complex flows feel effortless, and always pushing the boundary where creativity meets code.

Outlined

I craft pixel-perfect interfaces, seamless user experiences, and clever design solutions. From wireframes to hi-fi prototypes, I turn ideas into interactive journeys.

Skilled in UX strategy, UI design, front-end finesse, and design systems that actually scale. Passionate about making complex flows feel effortless, and always pushing the boundary where creativity meets code.

Cards (interactive)

Elevated

I craft pixel-perfect interfaces, seamless user experiences, and clever design solutions. From wireframes to hi-fi prototypes, I turn ideas into interactive journeys.

Skilled in UX strategy, UI design, front-end finesse, and design systems that actually scale. Passionate about making complex flows feel effortless, and always pushing the boundary where creativity meets code.

Filled

I craft pixel-perfect interfaces, seamless user experiences, and clever design solutions. From wireframes to hi-fi prototypes, I turn ideas into interactive journeys.

Skilled in UX strategy, UI design, front-end finesse, and design systems that actually scale. Passionate about making complex flows feel effortless, and always pushing the boundary where creativity meets code.

Outlined

I craft pixel-perfect interfaces, seamless user experiences, and clever design solutions. From wireframes to hi-fi prototypes, I turn ideas into interactive journeys.

Skilled in UX strategy, UI design, front-end finesse, and design systems that actually scale. Passionate about making complex flows feel effortless, and always pushing the boundary where creativity meets code.

Material Symbols

Size 18
filter_list
Size 20
filter_list
Size 24
filter_list
Size 32
filter_list
Size 40
filter_list
Size 48
filter_list

Splide Slider

Splide Arrows

Buttons

Buttons (Extra Small)
Buttons (Small)
Buttons (Medium)
Icon Buttons (Large)
Icon Buttons (Extra Large)
Icon Buttons (Extra Small)
Icon Buttons (Small)
Icon Buttons (Medium)
Icon Buttons (Large)
Icon Buttons (Extra Large)
Dropdowns
Dropdown left
arrow_drop_down
arrow_drop_up
Dropdown right
arrow_drop_down
arrow_drop_up
Radio Buttons
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.

Chips

Chips
States
Chips (Compact)
Chips (Large)
Chip States
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.

Spacing

Spacing 0
Spacing 1
Spacing 2
Spacing 3
Spacing 4
Spacing 5
Spacing 6
Spacing 7
Spacing 8
Spacing 9
Spacing 10
Spacing 11
Spacing 12
Spacing 13
Spacing 14
Spacing 15
Spacing 16

Elevation

Elevation 0
Elevation 1
Elevation 2
Elevation 3
Elevation 4
Elevation 5

Rich Text

Sample

Heading 1

Heading 2

Heading 3

Title Large

Title Medium
Title Small

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

“Block quote 1”
‍— Name Surname, Project Role
“Block quote 2”
‍‍— Name Surname, Project Role

Ordered list

  1. Item 1
  2. Item 2
  3. Item 3

Unordered list

  • Item A
  • Item B
  • Item C

Text link

Bold text

Emphasis

Superscript

Subscript

Transitions

Timing Curves
Curve Name CSS cubic-bezier Use Case
Standard cubic-bezier(0.2, 0, 0, 1) Default motion (fade, zoom, etc.)
Decelerate cubic-bezier(0, 0, 0, 1) Entering elements (fade/zoom in)
Accelerate cubic-bezier(0.3, 0, 1, 1) Exiting elements (fade/zoom out)
Emphasized (in) cubic-bezier(0.05, 0.7, 0.1, 1) Emphasized entrance (e.g. lightbox open)
Emphasized (out) cubic-bezier(0.3, 0, 0.8, 0.15) Emphasized exit (e.g. lightbox close)
Fade and Zoom
Motion Type Duration Curve Example Use
Fade in 200ms Decelerate Dialog, tooltip appearing
Fade out 150ms Accelerate Dismissing element
Zoom in (scale) 200–300ms Emphasized (in) or Decelerate Cards, modals, lightboxes
Zoom out (scale) 150–200ms Emphasized (out) or Accelerate Exit transitions