Timeline: APR 2025 - MAY 2025
Type: University Assignment
Contribution: 100%
Scope of Work: UX|UI, Coding:
HTML|CSS| P5.js
See the website live here
Timeline: APR 2025 - MAY 2025
Type: University Assignment
Contribution: 100%
Scope of Work: UX|UI, Coding:
HTML|CSS| P5.js
See the website live here
can a digital experience evoke the feeling of home?
can a digital experience evoke the feeling of home?
I designed and coded an interactive website from scratch that explores the memories that shaped my sense of belonging through four immersive chapters. Developed with HTML, CSS, and p5.js, each page translates a personal memory into an interactive experience, inviting users to navigate home through emotion rather than place.
I designed and coded an interactive website from scratch that explores the memories that shaped my sense of belonging through four immersive chapters. Developed with HTML, CSS, and p5.js, each page translates a personal memory into an interactive experience, inviting users to navigate home through emotion rather than place.
interactions
interactions
The homepage presents the memories as scattered pictures on a warm, editorial-style layout, inviting the user to explore them at their own pace. Each memory unfolds through interaction: revealing a hidden photograph by moving the mouse, triggering an animation with a click, drawing directly onto the canvas, or pressing the spacebar to uncover a new layer.
The homepage presents the memories as scattered pictures on a warm, editorial-style layout, inviting the user to explore them at their own pace. Each memory unfolds through interaction: revealing a hidden photograph by moving the mouse, triggering an animation with a click, drawing directly onto the canvas, or pressing the spacebar to uncover a new layer.
hey, take a look inside!
hey, take a look inside!
While maintaining a cohesive visual language across the website, each memory was shaped by its own mood board.
Coming home after moving abroad
I built two distinct visual languages. Canada is represented through cooler tones and heavier typography, while Peru is expressed with warmth, vibrant colors, and softer forms. A pulsating circular shape ties both worlds together, evoking the heartbeat of a long-awaited hug.
The first Christmas at my grandparent’s house
I created a custom typeface by scanning real lace and refining it into digital letterforms in Illustrator. The handcrafted texture celebrates the decorative spirit of a Latin American Christmas, while warm colors inspired by Christmas lights reinforce the feeling of nostalgia and celebration.
While maintaining a cohesive visual language across the website, each memory was shaped by its own mood board.
Coming home after moving abroad
I built two distinct visual languages. Canada is represented through cooler tones and heavier typography, while Peru is expressed with warmth, vibrant colors, and softer forms. A pulsating circular shape ties both worlds together, evoking the heartbeat of a long-awaited hug.
The first Christmas at my grandparent’s house
I created a custom typeface by scanning real lace and refining it into digital letterforms in Illustrator. The handcrafted texture celebrates the decorative spirit of a Latin American Christmas, while warm colors inspired by Christmas lights reinforce the feeling of nostalgia and celebration.
Seeing the fireworks with my family
Motion is used as the primary storyteller. Repetition reflects the continuity of a family tradition, while an explosive display type evokes the energy and excitement of fireworks. A high-contrast color palette reinforces the sense of spectacle.
First family trip
Centered around childhood, this chapter uses childish typography and hand-drawn doodles to evoke a sense of curiosity and nostalgia. The interactive experience invites users to become part of the memory by drawing directly onto the canvas and downloading their creations. The color palette is drawn from photographs of my family's trip to Arequipa, grounding the experience in the warmth and authenticity of the original moment.
Seeing the fireworks with my family
Motion is used as the primary storyteller. Repetition reflects the continuity of a family tradition, while an explosive display type evokes the energy and excitement of fireworks. A high-contrast color palette reinforces the sense of spectacle.
First family trip
Centered around childhood, this chapter uses childish typography and hand-drawn doodles to evoke a sense of curiosity and nostalgia. The interactive experience invites users to become part of the memory by drawing directly onto the canvas and downloading their creations. The color palette is drawn from photographs of my family’s trip to Arequipa, grounding the experience in the warmth and authenticity of the original moment.
Designing the type with lace
Designing the type with lace
Trying a different animation approach
Trying a different animation approach
A piece of one of my initial storyboards
A piece of one of my initial storyboards