Building the About Page and Refining the Navbar

Now that the website was live, it was time to add more pages. If it wasn’t obvious already—I really don’t enjoy frontend development. I had completed the home and post pages, and I was already feeling drained. I even considered removing the About page, but that was just laziness talking. The search and contact pages also felt unnecessarily complicated, so I debated scrapping them too.

I eventually decided to merge the About and Contact pages—they’re kind of the same thing, right? I also removed the “Post” page from public view since it wouldn’t make sense for visitors to have access to it. That left my navbar with just HOME | ABOUT, along with a search bar.

Designing the About Page

Finding a clean and minimal About page design online was surprisingly difficult. Most designs were either too complex or looked like outdated early-2000s blogs. Since I couldn’t find what I needed, I resorted to pen and paper to sketch a quick layout before implementing it.

To be honest, I wasn’t super motivated because I planned to overhaul the entire website’s design later—it made more sense to focus on getting everything functional first before spending too much time on aesthetics. Skipping Figma, I quickly sketched out what I envisioned and then jumped into coding.

After about 30 minutes of brainstorming and 5 minutes of rough sketching, I had my draft.

“

[Insert drawing of About page]

”

Navbar & Aesthetic Tweaks

Before starting the About page, I made a few adjustments:

• Removed the unused links (Post & Contact) from the navbar.
• Updated the app name in index.html.
• Generated a favicon to replace the default browser icon.

These weren’t major changes, but they added a layer of polish to the site.

Building the About Page

By now, I had figured out a workflow that worked for me:

1. Use a div with flexbox.
2. Add items inside.
3. Group related items into another div with flexbox.
4. Repeat.

At this point, flexbox had basically become a lifestyle.

I built the About page following the same approach as the Featured Posts component. The top section contained a brief introduction, followed by a section with more details about me, structured in separate paragraphs. It was a simple page, but I was surprised by how good it looked for something I hadn’t mapped out in Figma.

Final Thoughts

Of course, there’s still room for improvement, but this was a good start. Now that the core pages were coming together, the next phase would be focusing on backend development—the part I had been looking forward to all along!

Remember:

“

The secret is to make small improvements over time—that’s how you grow.

”