Building A Personal Website: A Coastal Theme

Every personal website is a small home on the internet. For mine, I wanted to step away from the flashing lights and neon signs, and build something that felt more like a quiet walk along the beach. (also I am beach person in real life.)

Inspired by the driftwood, ocean fog, and quiet yet lively sea creatures of the Pacific Northwest, this website project became a fun exercise in restraint, micro-animations, and combining modern tools with a cozy, tactile design!

Here’s a look behind the screen at how it came together.

1. Finding Ocean theme in HSL

Choosing a color palette for a developer site can sometimes feel like trying to choose a single grain of sand from a beach. I wanted to steer clear of stark black-and-white grids, but also avoid overwhelming neon colors.

Instead, I settled on a driftwood-gray foundation, layered with soft sea-fog borders, and accented with a buiyant coral color. The color palette is cozy—it’s designed to feel like a warm cup of tea on a misty morning. Even the "Open to Co-op" banner is wrapped in this coral color, offering a friendly, warm hello to anyone visiting (and obviously, I got to let the recruiters know!).

These two pictures from Unsplash were the inspirations:

Photo by Stephen Crowley on Unsplash

Photo by Amy Humphries on Unsplash

And I decided to settle with this color palette from Colormind:

2. Scroll Snapping: Balancing on a Paddleboard

One of my favorite details is the smooth scroll snapping. When you move between sections of the page, the screen gently glides and snaps into place. (So smooth!)

Getting this right felt a bit like learning to balance on a paddleboard. If the scroll snapping is too aggressive, it feels like the website is deciding where you go. If it’s too soft, it does nothing. I spent quite a bit of time fine-tuning the easing parameters in Framer Motion so that the transition feels natural—a gentle slide rather than a sudden leap.

(And as a little developer note: Framer Motion is quite picky about its curves! It politely rejected my standard CSS bezier strings and insisted on coordinate arrays like [0.16, 1, 0.3, 1] instead. A very precise companion.)

3. A Bilingual Bridge (Powered by Gemini)

Since I want this site to welcome visitors in both English and Korean, I implemented a language toggle (ENG | 🇰🇷).

Normally, multilingual sites use pre-written static translation files. But to make this project a bit more interactive, I built a client-side layer that calls the Gemini 2.5 Flash model.

When you toggle the button:
1. The app gathers the text blocks.
2. It sends them to a server route that invites Gemini to translate the content into natural, friendly, and professional Korean.
3. The results are cached in your browser session so it only translates once per visit.

If it's your first time visiting the page, you'll see this progression notification at the bottom right of the page when you toggle on the translation button. It may take up to 1 minute to finish translating the page.

It’s a bit like having a helpful translation assistant standing by, ready to translate everything—even the tiny footer note that says _Built with sea shells_.

(FYI: Default language is English.)

It's About The Cozy Details

Building this website reminded me that sometimes it's the quiet details that matter a lot. The subtle hover effect on a button, the whimsical tidal effect on my profile pic, the way a card tilts when your mouse passes over, or the satisfying snap of a layout—that are what makes a digital space feel like home.

Thank you for visiting my corner of the internet! 🪸