1:1 image
Blau — Design System
All design tokens, components, and patterns used in Saúl Ossorio's portfolio. Every component is rendered with the actual CSS from style.css — no mocks. Click motion demos to replay them.
Foundation
Core design tokens defined in :root in style.css. Never hardcode a hex value — always reference a token. Changing a token updates every component that uses it.
Color tokens
Blue--blue#0071C5
Blue hover--blue-hover#005da0
Text--text#1a1a1a
Mid--mid#555555
Light--light#999999
Border--border#e0e0e0
BG subtle--bg-subtle#f8f8f7
Tag BG--tag-bg#f0f0ef
Background--bg#ffffff
#EF5958 — used only for the dot rage easter egg. Not a persistent token.
Font families
Raleway
Aa Bb Cc — weights 400 600 700 800
Open Sans
Aa Bb Cc — weights 300 400 600 700 + italic
Layout tokens
Sidebar width--sw · 230px
Mobile header--header-h · 56px
Section H-padding6rem desktop · 4rem @1100px · 1.5rem @860px
Section V-padding8rem/7rem · hero+contact: 10rem/10rem
Row label column155px fixed · row-item + skill-row
Project image column380px · 300px @1100px · full-width @860px
Type Scale
Two typefaces, contextual sizing. Each row is rendered at its real size — the visual weight difference between levels is what matters. Sizes shown are desktop target values; fluid headings use clamp(min, viewport, max) in CSS so they scale smoothly across screen sizes.
Atomic Design
The portfolio follows atomic design thinking. Design tokens feed atoms, atoms compose into molecules, molecules form organisms, organisms assemble into the page template, and the template filled with real content is the final page.
1
Atoms
Smallest indivisible elements. Drive all other layers.
2
Molecules
Atoms combined into functional UI groups.
3
Organisms
Complex, self-contained page sections built from molecules.
Hero section
Project block
Accordion section
Contact section
Sidebar
Mobile header + nav
Each organism has its own semantic landmark, ARIA roles, scroll/fade behavior, and GTM data attributes. Built inside renderPage() in index.html.
4
Template
Page skeleton — layout without real content.
.layout — fixed sidebar (var(--sw) = 230px) + fluid main. Main centers children at max-width 1200px with horizontal padding.
5
Page
Template + real content = the final rendered portfolio.
index.html
Content from data.js is injected at runtime by renderPage(). Language switching rerenders all organisms instantly — same template, new content, no page reload.
Brand
The blue dot is the sole brand mark. No ring, circle, or frame — just the dot. It appears in two size contexts, each with different behavior.
Interactive Elements
Pills/CTAs and the accordion. All states are live — click to interact.
Jan 2025 – Dec 2025
Product Designer & UX Consultant
Fexpocruz · Contract · Bolivia
Led UX and digital product design for Expocruz 2025.
Mar 2024 – Mar 2026
Master's Degree, Design
Universidade Federal do Paraná (UFPR)
Dissertation: Usability Heuristics for Immersive Virtual Learning Environments.
Mar 2021 – Nov 2022
Bachelor's Degree, Science and Technology
Universidade Federal de Santa Catarina (UFSC)
Lists
Two patterns sharing the same two-column grid: 155px label column + 1fr content.
Jul 2023 – Dec 2023
Web Analytics Consultant
Fexpocruz · Contract · Remote
Drove 70% increase in traffic and 350% increase in online ticket sales.
Spanish
Native or bilingual proficiency
Celpe-Bras
Design & UX
Product Design · UX Research · UI Design · Wireframing · Prototyping · Figma · Webflow · Accessibility
Data & Analytics
Google Analytics 4 · GTM · BigQuery · SQL · Python · Data Visualization · Microsoft Clarity
Layout
Structural elements shared across all sections.
— section above —
— section below —
Scroll
Triggered by IntersectionObserver on scroll into viewport
Motion
Click each card to replay the animation. All animations respect prefers-reduced-motion: reduce — durations collapse to 0.01ms for users who opt out.
Section content
click to replay
fadeUp / .fade.in
opacity 0→1 · translateY 24px→0 · 0.65s ease · IntersectionObserver threshold 0.08
click to replay
dotPop
scale 0→1.08→1 · 0.9s cubic-bezier(.22,.61,.36,1) · hero dot entrance on load
Scroll
scrollDot
translateY 0→14px + opacity 1→0 · 1.6s ease infinite · running live above
growLine
width 0→100% + opacity · 2.5s cubic-bezier(.05,0,.15,1) · contact section divider
click to replay
Dot bounce (on click)
scale 1→0.82→1.06→1 · 380ms · Web Animations API (GPU composited)
Content revealed with max-height transition.
Accordion open/close
max-height 0→9999px · 0.45s ease · arrow rotates 90° · click trigger above
Saúl Ossorio
click to replay
Mobile name reveal
opacity 0→1 + translateY 8px→0 · 0.4s ease · triggers when hero H1 leaves viewport
Burger menu open/close
lines 1+3 rotate ±45° · line 2 width→0 · 0.35s cubic-bezier · click to toggle
Accessibility
WCAG AA compliance patterns implemented throughout the portfolio. Contrast ratios are tested against white (#ffffff).
Skip link
Skip to main content
First focusable element in the DOM. Visually hidden until focused — then appears at the top of the page. Targets #main-content with tabindex="-1".
Focus ring
Keyboard focus indicator
:focus-visible — 2px solid --blue, 3px offset, border-radius 4px. Hidden for mouse via :focus:not(:focus-visible) so it only shows for keyboard users.
ARIA
ARIA attributes
aria-expanded on accordion triggers and burger. aria-modal + role="dialog" on image lightbox. aria-hidden="true" on decorative dots, dividers, and all SVGs.
Keyboard
Keyboard navigation
Image modal: ← → navigate carousel, Esc closes. Nav links use tabindex="0" + onkeydown Enter handler since they're role="button" anchors.
Reduced motion
prefers-reduced-motion
Global rule sets all durations to 0.01ms and disables smooth scroll. Exception: scrollDot re-enabled on mobile via !important — a simple translate/opacity dot is not a vestibular risk.
Contrast
Color contrast ratios
--text #1a1a1a → 16.1:1 AAA ·
--mid #555 → 7.46:1 AAA ·
--blue #0071C5 → 4.56:1 AA ·
--light #999 → 2.85:1 — decorative/secondary labels only, never body copy.
Images
Alt text
Profile: "Portrait of Saúl Ossorio". Project thumbnails use the project title. Carousel slides use the alt defined per-image in data.js → images[].alt.
SVG icons
Inline SVG accessibility
All SVGs carry aria-hidden="true" and focusable="false". The accessible name is provided by the parent <a> via aria-label="Visit LinkedIn (opens in new tab)".
Lang attr
Language declaration
lang on <html> updates on every language switch via document.documentElement.lang = lang. Screen readers use this to select the correct pronunciation engine.
Semantic HTML
Landmark roles
Uses <aside>, <main>, <header>, <footer>, <nav>, <article>, <section> with aria-labelledby pointing to each section heading.
Social
Two variants: icon + label for hero and contact sections, icon-only for sidebar and footer. All three states shown for each.
Social tag — icon + label
border-radius 100px · --tag-bg fill · 0.78rem · opacity .75 default → 1 on hover · bg darkens + border darkens + text to --text on hover
Social icon — icon only
15×15px SVG · --light default → --blue hover · transition color .2s · sidebar only