Presence without visual shouting.
Quiet confidence
Large typography, restrained motion, deliberate spacing, and soft contrast carry the character.
← Back to portfolio
Built aroundhow I work.
This visual and interaction system connects clarity, softness, structured thinking, bilingual awareness, and implementation awareness without competing with the work itself.
Could this exact element belong to any other portfolio?The question behind every decision
A portfolio shaped by how I work.
Personal without becoming decorative, technical without feeling cold, and expressive without sacrificing clarity or predictable interaction.
Context before decoration.
Structured thinking
The page order follows my product mindset: understand, structure, design, validate.
Organic form, exact system.
Soft precision
Petals and curves soften a disciplined grid, component hierarchy, and typographic rhythm.
Designed to survive the browser.
Implementation-aware
Responsive behavior, focus states, accessibility, and implementation constraints are part of the design.
Two petals. One origin. One continuous movement.
Two asymmetric petals meet the N at one shared origin and become a continuous gesture. Their open direction can read as quiet wings, adding movement without turning the mark into a literal symbol.
Full signatureHero + closing CTA
Small N + petalHeader mark + favicon + avatar
Source signature fragment · direct cropBackground compositions + markers
Single petal cueSmall controls + section accents
Two petalsSoftness + organic character
Shared originPetals can read as quiet wings
Continuous NMovement + an open finish
A focused identity palette, with project colors kept where they belong.
Four colors carry the identity. Two neutrals handle text and surfaces, while derived tones provide depth and contrast. Product colors stay inside the project evidence.
Identity colors
The four colors that establish the portfolio’s visual voice.
#4B263E#C68A98#F7F2ED#B9C1AACanvasStructureAccentSupport
Functional neutrals
For readable content and raised surfaces.
#2F202A#FFFAF6Tonal extensions
Derived values for depth, secondary copy, and accessible accents.
Dark sectionDark plum
#341929Soft layerRose soft
#EAD2D5Secondary textInk soft
#65525FAccessible accent textRose text
#945366Two voices, with very different jobs.
The sans-serif voice handles clarity and interface structure. Georgia appears only in selected editorial moments where the experience should feel more human and reflective.
Clear digital
experiences.
experiences.
thoughtfully
designed.
designed.
72Display40Section24Card17Body12Micro
Expressive asymmetry sits on top of a disciplined grid.
The layout can feel editorial because its alignment and spacing rules stay predictable underneath.
The grid stays disciplined so the composition can move.
Structure, responsive behavior, reusable components, accessibility, and implementation awareness stay connected to the visual layer.
The full signature is the source. The rest of the visual language is derived from it.
The petals establish the softness and the shared origin gives the mark coherence. That character is translated into the portrait arch, numbering, cropped letters, and asymmetric corners without repeating the full signature in every section.
03
Organic numbering · outlined gestureGeneric
→Nada
Derivation rule:Use the final signature as source geometry. Derived cues may crop, scale, or translate its character, but they must not redraw the petals or the N into a different symbol.
Motion follows the system, too.
Motion clarifies hierarchy and acknowledges interaction without replacing familiar behavior. Buttons remain buttons, focus remains visible, and navigation remains predictable.
Primary action states
One component, three clear states. Personality comes from shape and proportion, not hidden affordances.
Back-to-top states
Hidden
Visible
Focus
A standard upward-navigation symbol with one CSS-only petal cue. It relates to the identity without becoming another logo instance.
Designed to stay clear beyond the ideal screen.
The identity is not tied to one composition. Responsive behavior, keyboard interaction, visible focus, accessibility, and motion remain part of the system at every viewport.
The design changes with the viewport, not the identity.
Responsive design is not the desktop composition scaled down. Each breakpoint preserves the same hierarchy and identity while changing how much asymmetry, overlap, and decoration the canvas can support.
Overlap, large type, atmospheric signature fragments, and wider project evidence.
Relationships tighten, overlap reduces, and the hierarchy remains visibly the same.
One-column work, content-driven cards, quieter motion, and reduced decorative overlap.
Accessibility stays predictable where correctness matters.
- Semantic landmarks and heading hierarchy
- Keyboard navigation and Escape support
- Visible focus states
- Touch-sized interactive targets
- Reduced-motion fallback
- Readable responsive typography
- WCAG-aware color contrast
Have a product that needs clarity, structure, or refinement?
I work best where user journeys, interface systems, bilingual behavior, and implementation need to come together clearly.