Portfolio Website

The portfolio needed to accomplish several things at once:

• Present case study work in a compelling, professional format that lets the work speak for itself
• Communicate personality and design sensibility beyond what a resume can convey
• Establish credibility for a career transition from IT into UX design
• Create an experience that would be memorable without being distracting

Every decision, from the color scheme to the interactive particle effects, was evaluated against these goals. If something looked impressive but didn't serve the visitor's experience, it was refined or removed. The site had to feel intentional - not decorated.

The visual language evolved through multiple iterations. Early explorations used a blue‑and‑slate palette that felt too corporate and generic. The breakthrough came with shifting to a near‑black base paired with magenta and purple accents - a combination that feels bold but sophisticated.

Typography pairing was equally deliberate: Josefin Sans for headings brings geometric elegance and personality, while Inter for body text ensures comfortable reading at any size. The contrast between the decorative heading typeface and the clean body font creates visual rhythm without competing for attention.

The overall aesthetic aims to feel like a curated space rather than a standard portfolio template. Colors were tested for legibility and emotional resonance. Borders, shadows, and spacing were refined iteratively to achieve a sense of depth without visual clutter. The dark theme isn't just a stylistic choice - it lets the work and the accent colors take center stage.

Motion and interaction are used throughout the site to create a sense of craft and personality without overwhelming the content:

• Canvas particle animation - The hero section features a particle system with connecting lines that responds subtly to the environment, creating an ambient sense of motion
• Shimmer gradient text - Project card titles and section headings use an animated gradient that catches the eye without demanding attention
• Orbit animations - Subtle orbital motion effects around the logo and project cards add depth and visual interest
• Animated wavy SVG dividers - Dashed wavy lines between section headings and images use stroke animation to create flowing movement
• Scroll‑triggered reveals - Content fades and slides into view as visitors scroll, creating a sense of progression through the page

Each of these details was calibrated to enhance the experience rather than overwhelm it. The goal was always to reward attention, not demand it.

Accessibility was treated as a core design requirement, not an afterthought. A site built to showcase user‑centered design had to practice what it preaches:

• prefers‑reduced‑motion - The site respects the operating system‑level setting to automatically disable all animations for users who need it
• Manual motion toggle - A dedicated button in the navigation gives every visitor direct control over animations, regardless of their system settings. The preference persists across pages and sessions via localStorage
• Semantic HTML - Content is structured with proper heading hierarchy, landmark elements, and meaningful alt text for screen readers
• Color contrast - Text and interactive elements meet WCAG guidelines across the dark theme, ensuring readability at all sizes
• Keyboard navigation - Interactive elements maintain visible focus states for keyboard users

The motion toggle was a particularly meaningful addition. It acknowledges that what feels immersive to one person can feel disorienting to another - and giving users control is always the right design decision.

The layout adapts across viewport sizes to ensure the experience feels intentional at any width:

• The two‑column project grid stacks to a single column on tablets and phones
• Typography scales fluidly across breakpoints
• The hero section adapts its spacing and element sizing for smaller screens
• Navigation collapses to a hamburger menu on mobile
• The process timeline shifts from a four‑column grid to two columns and then to single column
• Section heading decorative images and wavy line accents are gracefully hidden on mobile to prevent overflow

Each component was tested across viewport sizes - from 375px mobile to 1440px desktop - to verify that nothing breaks and the hierarchy remains clear regardless of how the visitor arrives.