Case study · Portfolio Website / Web Experience

Portfolio of Enrique Website

Bilingual interactive portfolio and game hub

A Frutiger Aero-inspired bilingual portfolio with case studies, achievements, a gallery, Aero Lens, ambient music, Pedro the Raccoon as an interactive companion, hidden secrets, and two playable browser games.

PERSONAL PROJECTWeb
Portfolio of Enrique logo with a blue raccoon in a bubble over a flowing blue background
Role
Designer and Developer
Platform
Web
Team
1 Developer on the Team

Technologies

Next.jsTypeScriptReactCSSCanvas APIWeb Audio APILocal StorageVercel

01

Overview

This evolving personal website brings Enrique's projects, professional experience, education, certifications, interests, music, achievements, and original browser games into one cohesive experience.

02

Problem & goal

Create a memorable portfolio that feels personal and playful while keeping professional information clear, accessible, responsive, and rewarding to explore.

03

Solution

The responsive Next.js site pairs a raccoon-and-bubble identity with bilingual content, accessible navigation, device-local achievements and pins, an unlockable gold theme, a gallery and the Aero Lens image explorer, a configurable floating music player, Pedro the Raccoon as a physics-driven pixel companion, hidden easter eggs, and two original browser games with mobile-friendly controls.

04

Key features

  • Responsive case studies for software, web, and VR projects
  • Experience page with a connected Journey timeline of work and education
  • Site-wide achievements with pins, a details dropdown, and a Secret Hunter trophy
  • Completion trophy, optional gold theme, and secret shortcuts for completionists
  • Personal image gallery with an interactive zoom viewer
  • Aero Lens: a safe-search explorer for Frutiger Aero, liminal space, and raccoon images
  • Ambient music hub, a dance floor, and an optional floating mini-player with listening progress and credits
  • Pedro the Raccoon: a pixel-art companion you can pet, throw, and dance with
  • Hidden easter eggs: Pedro's party, a Backrooms escape minigame, an Aero bubble storm, and the Poolrooms
  • Aero Liminal Runner with unlockable characters, buffs, skins, folder currency, personal records, and five scenes
  • Frutiger Skate Race with five skaters, four courses, single races, Grand Prix, and local records
  • English and Spanish content with light, dark, sound, and reduced-motion controls
  • Poppable bubbles, local progress storage, and a dedicated privacy explanation

05

Enrique's contribution

  • Visual direction and interaction design
  • Next.js and TypeScript implementation
  • Responsive layout and accessibility work
  • Achievement architecture and device-local progress persistence
  • Project, education, gallery, and music-player integration
  • Design and implementation of two browser games and their responsive interfaces
  • Pixel-art companion, physics, and easter-egg design
  • Bilingual interface, theme system, and deployment configuration

06

Technical considerations

  • Keeping decorative animation optional and respecting reduced-motion preferences
  • Balancing ambient music and interface sound effects while respecting browser autoplay restrictions
  • Persisting achievements, pins, settings, unlocks, and game records locally without requiring an account
  • Maintaining backward-compatible progress as achievements and portfolio content evolve
  • Keeping navigation, game controls, and responsive layouts clear as interactive content grows
  • Keeping every secret reachable on touch screens and calm under reduced motion

07

What was learned

Building and continuously expanding the portfolio has strengthened Enrique's ability to shape a complete web experience—from content architecture and visual identity to state management, game interactions, accessibility, responsive design, privacy communication, and deployment.