Used for Portfolio Website write up in Projects.

NavBar

The navigation menu sticks to the top. When a scroll action occurs, it splits from the background and pins a 60px bar at the top. When clicked on, my name goes back to the home page. I don't expect this action to occur often.

There's three different categories: work, writing, and about. And also a light/dark mode icon theme switch. When hovered/active, there's a rounded rectangle background. On mobile, the three categories disappear and a hamburger menu takes its place. The hamburger menu slides out with the three categories.

Home

It acts as a landing page, where I can display whatever message I want to convey. It lets visitors know what to expect, when navigating my website. There's also a CTA button that goes to my work. I wanted these two sections to be the entire focal point of the home page. A direct message that's straight to the point.

Work

A message at the top to summarize my design work. The cards split in the middle with a side of text and a cover photo. The text explains the project and the cover photo to give a visual of the work. When hovered, the card background of the text side changes color depending on the theme.

At the bottom of the page, there's pages. The reasoning behind this feature was that, I wanted my 4 best pieces of work to be in the front. But I also wanted to display previous work that made the cut.

Writing

Similar layout to the work page. It uses a masonry layout, which Pinterest popularized. Some writings might have shorter or longer summaries. I thought going with a responsive design like the masonry layout keeps it clean and adaptive. Might add a search bar in the future.

About

An information dump page for me to tell my story. For what it does, it's fine for now. Not sure if I'm going to redesign or add more to it.