• One More Line
  • Posts
  • Behind the scenes: personal site redesign mockups

Behind the scenes: personal site redesign mockups

Author

Jonathan Yeong
April 17, 2025

It's show and tell time!

If you didn’t already know, I’ve been working on a personal site redesign for the past couple of months. I started the redesign with some goals:

  1. Main purpose is a blog. Posts should be easy to read and discover, with a touch of personal curation (recommended or featured posts).

  2. I want something that's personal, minimal, and friendly. Focus on typography with splashes of colour maybe something green.

  3. Newsletter CTA. I'd love to have more people find my newsletter.

  4. A design I can build in a reasonable amount of time, but extensible in the future

I ended up with three design iterations. The first iteration I finished at the end of 2024. The last iteration I finished sometime last month.

The first two designs were difficult to implement responsively. I had too many media queries to make sure things looked correct in small screens and soon the code became brittle. Side note: this could’ve been due to my (lack of) CSS skills.

The last iteration is way more straightforward to implement. It also ticks off all my goals! It feels maybe more plain. But I’m planning on adding some interactivity or animations to jazz it up.

For reference, this is my current homepage design. It’s plain but it gets the job done.

This is my current homepage. It has some text at the top describing who I am. Then a list of blog posts. There are links to about and rss in the navbar.

In V1, I wanted to add more information at a glance as well as some curation — articles and notes. I was also really into gradients at the end of 2024.

A teal gradient hero section with articles, notes and projects on the homepage.

V2 went a completely different direction. I switched to warmer colours, and went for something more minimal. I also switched out the hero font to Poppins. I really love how round and friendly it feels.

Homepage design with large hero text that fills the container. Contains featured, topics, and about section. As well as a newsletter cta

V3 and final version! I changed out the hero because it just didn’t work when the screen changed size. So instead, I took inspiration from the original introduction paragraph and turned it into a hero.

Hero text is a paragraph, featured and topics are the only other headings.

It’s always nerve wracking sharing something I’ve been working on for a while. It feels like the design needs to be perfect. Which it definitely isn’t. There’s already a laundry list of tweaks I want to make.

It would be awesome to have a group of people to bounce ideas off outside of work. When working on side projects by myself it’s something I sorely miss. Speaking of which — if you ever want to bounce ideas off someone, give me a shout! Happy to help!

Do you like these behind the scenes posts? Reply to this email to let me know!