Redesign landing & post pages with profile header, featured post, and tag filtering

[MrGuato]

Summary

This PR significantly redesigns the landing page and post pages to match a modern, Hashnode-style layout. It introduces a profile header section, featured post showcase, tag-based filtering on the writing page, and enhanced post metadata displays. The changes include comprehensive CSS additions for new components and updated page templates to leverage them.

Key Changes

Landing Page (src/pages/index.astro)

• Replaced simple hero section with a profile header featuring avatar, name, handle, bio, stats, and social links
• Added README-style section describing the blog's purpose and stats
• Introduced featured post section showcasing the latest post with hero image, metadata, and CTA
• Changed recent posts grid to show only 3 most recent posts with "View all" link
• Integrated tag display in post cards

Writing Page (src/pages/writing/index.astro)

• Added tag filter bar with "All" button and dynamically generated tag buttons
• Implemented client-side filtering with URL parameter support (?tag=tagname)
• Added post count display that updates based on active filter
• Integrated tags into post card metadata
• Added data attributes to cards for filtering logic

Post Detail Page (src/pages/writing/[slug].astro)

• Added tags above post title with links back to filtered writing page
• Implemented post metadata bar with author avatar, name, and reading time estimate
• Added author card at bottom of post with bio and social links
• Added tags section at bottom of post
• Calculated reading time based on word count (~200 wpm)

Styling (src/styles/global.css)

• Added new CSS variables for accent colors and tag styling (light & dark modes)
• Created comprehensive component styles:
  • .profile-header, .profile-avatar, .profile-name, .profile-bio, .profile-links
  • .readme-section with header and body styling
  • .featured-card with image wrapper and content layout
  • .tag, .tag-filter, .tag-filter-bar for tag UI
  • .post-meta-bar, .author-avatar, .author-card for post metadata
  • .section-header, .section-label for section organization
• Updated existing .card .meta to support flexbox layout for tags
• Added responsive tweaks for mobile devices (max-width: 600px)
• Adjusted hero image max-height and spacing values

Content Configuration (src/content/config.ts)

• Added optional tags field to post frontmatter schema (array of strings)

Post Frontmatter Updates

• Added tags field to existing posts for categorization

Implementation Details

• Tag Filtering: Uses client-side JavaScript with URL parameter persistence via history.replaceState()
• Reading Time: Calculated dynamically from post body word count
• Avatar Styling: Gradient backgrounds (blue to purple) with initials for profile and author avatars
• Dark Mode Support: All new components include dark mode color variants using CSS variables
• Responsive Design: Profile header and author card stack on mobile; featured content padding adjusts

https://claude.ai/code/session_01HSKQgRDxyFMuqBsH6PmT9c