What Did I Do Today?

  1. Added a sidebar (sorted by tags) for blog posts and removed the separate "Tags" page
  2. Added navigation buttons (Previous / Next) to both posts and gallery pages
  3. Started to understand the logic behind HTML (finally!)

Why Did I Do What I Did?

Before this, my blog posts were sorted by date only. It was hard to tell what topics I was writing about just by scrolling. For new visitors, that’s pretty confusing—they’d have no idea what kind of content I post.

So I built a sidebar that lists blog posts by tags. It helps with clarity and navigation.
I might add something similar to the gallery page too.

This one’s simple: I wanted readers to be able to move from one post to another without going back to the homepage every time. Just a smoother reading experience overall.

What Challenges Did I Face?

  • Positioning: At first, the sidebar showed up below the main content. I wanted it to sit side-by-side. So I wrapped both the content and the sidebar in a container, like this:
<div class="post-container">
    <!-- Main content -->
    <article class="post-content"></article>
    <!-- Sidebar -->
    <aside class="post-sidebar"></aside>
</div>
  • Then I styled it in sass/blog.scss:
.post-container {
    display: flex;
    gap: 2rem;
    margin: 2rem 0;
}

.post-content {
    flex: 1;
}

.post-sidebar {
    width: 250px;
    position: sticky;
    top: 2rem;
    height: calc(100vh - 4rem);
    overflow-y: auto;
}

  • I made sure that all templates used:

    1. The same class names
    2. A post-container wrapper
    3. post-content for main content
    4. post-sidebar for the sidebar

  • One hiccup: I kept getting errors because I forgot to import the hooks macro—needed for sidebar tag click results. Classic.

  • Initially, the "Next" and "Previous" buttons were too close together. I fixed that… in a very silly way: just added gap: 4rem to .post-navigation.
.post-navigation {
    display: flex;
    gap: 4rem;
}
  • I was worried this fixed gap might not be responsive on different devices (hello iPhone users), so I added more flexibility:
.post-navigation {
    display: flex;
    flex-wrap: wrap;
}

.next-post {
    flex: 1;
    min-width: 250px;
}
  • To test responsiveness, I used the browser’s device toolbar:
    1. Right-click > Inspect
    2. Toggle device toolbar (📱 icon)
    3. Choose a device like iPhone or drag screen width manually

Time Spent: ~4 hours

🛠️ What’s Next?

  1. I really need to learn more about Markdown
    • My code blocks look terrible (black background… why)
    • The blog text is way too big 😅
  2. Fill out my About page
  3. Collect more website inspiration
  4. Add more content??

That’s all for today. Bit by bit, it’s coming together 🧩