i like to think of this portfolio website as my garden—one that keeps evolving with me.
back in 2024, when i had little to show, i had replaced the usual "coming soon" with a patch of interactive grass. it swayed gently in a digital breeze, hiding a few secret thoughts in the long blades—my way of making the wait a little less boring, and a little more personal.
now, my garden has grown. this time, i've grown a pixel-art meadow: lush, lively grass and a scatter of animated flowers, all swaying together in a retro breeze. it's playful, a bit nostalgic, and—like any real garden—always a work in progress.
as a digital product designer and creative coder, i'm always searching for ways to infuse screen real estate with a sense of play, nostalgia, and delight. eventually, this will become my page footer. i wanted something that wasn't just functional, but also whimsical—a living, breathing slice of retro game-inspired nature. the goal was to evoke the charm of old-school pixel art, while leveraging modern web technologies to make the scene dynamic and interactive. this project has become a joyful experiment in blending art, code, and user experience.
cursor made this possible!
- the grass is rendered as a series of "blades," each made up of stacked 8x8 pixel squares.
- each blade's shape is determined by a random walk: as each pixel is stacked, it can shift left, right, or stay in place, creating a jagged, organic look reminiscent of pixel art from classic games.
- some blades are designated as "long grass," with more pixels, making them stand out and adding visual variety.
- the color of each pixel is chosen from a palette of green shades, with slight random variation for a natural, lively effect.
- the flowers were created in figma, exported as SVGs, and imported into the file as Inline SVGs.
- they are evenly distributed across the width, with a small random offset for natural placement.
- each pixel in every blade has a chance to "sway" left or right at each animation interval, but only a small percentage move at a time.
- the flowers are made to animate in a similar manner—so as to make them fit cohesively into the grass.
- the movement is subtle and blocky, maintaining the pixel-art aesthetic and simulating a gentle breeze.