Blog Site: Latest Blog Posts Section

Published: October 3, 2025

After setting up my project structure and hero section, I wanted a way to show the most recent posts on my homepage.

Each post appears as a small card: title, publish date, and a short description. I wrapped the content in a link so the whole card is clickable, not just the text:

<div class="card">
  <a href="posts/blog-hero.html">
    <h3>Blog Site: Hero Section</h3>
    <p class="card-date">Published: October 2, 2025</p>
    <p>Breaking down my hero section into wrapper, overlay, content,
    and button layers.</p>
  </a>
</div>
            

The cards are arranged in a grid that adapts across screen sizes: single column on mobile, multiple columns on larger screens. I used:

.posts-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1rem;
  margin-top: 1rem;
}
            

I chose 280px as a minimum to give each card enough breathing room without cramping the content.

The design uses a dark background, rounded corners, and a hover effect that lifts the cards slightly, hinting they're clickable:

.card {
  background-color: var(--primary-bg);
  padding: 2rem 1.5rem;
  border-radius: 10px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.card:hover {
  transform: scale(1.02);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
}
            

I added a fallback so a single card centers:

.posts-grid:has(.card:only-child) {
  justify-content: center;
}
            

Styling is built around a few :root variables for color and spacing, which keeps styles modular and easier to adjust as the site grows.

For now, I’m adding new cards manually whenever I write a post. Later I might automate it, but simplicity works at this stage.

This section isn’t complex, but it reflects how I’m approaching the site overall: build small, think ahead, and keep things clean.