Skip to content

Projects redesign: bigger cards, dark-theme index, prev/next nav#5

Merged
AltanEsmer merged 3 commits into
mainfrom
claude/priceless-lederberg-e8fe3a
May 9, 2026
Merged

Projects redesign: bigger cards, dark-theme index, prev/next nav#5
AltanEsmer merged 3 commits into
mainfrom
claude/priceless-lederberg-e8fe3a

Conversation

@AltanEsmer

Copy link
Copy Markdown
Owner

Summary

  • Homepage bento cards are now larger and more breathable (rows 200→260px, padding 22→28px, title 22→26px) without changing the span system or live-preview featured card.
  • /projects index redesigned to match the AlesSystems dark theme: section-head strip, Space Grotesk hero, 2-col grid of new MdxProjectCard tiles built on the existing .bento-card / .pv-grad-* / .chip primitives. New RevealOnScroll client wrapper handles staggered intersection-observer reveals.
  • /projects/[slug] case-study pages redesigned with JetBrains Mono back-link, section-head, Space Grotesk hero, gradient separator, .prose-mdx body, and a new ProjectNavigation prev/next block at the foot. New getAdjacentContent helper in src/lib/content.ts powers the navigation.

Test plan

  • npm run dev → homepage cards visibly larger; bento layout intact; featured live-window card unchanged.
  • Visit /projects → dark-themed grid of 5 case studies, hover lift + animated border, chips render free-form tags.
  • Open any project (e.g. /projects/system-health-dashboard) → dark hero, prose body styled, prev/next cells at the bottom show correct neighbors by date.
  • Walk prev → next through all 5 projects; first project has no prev cell, last project has no next cell.
  • Resize to <640px → projects index collapses to 1 col, prev/next stacks, hero scales via clamp().
  • npm run build produces 14 static pages with all 5 project slug routes; npm run lint clean.

🤖 Generated with Claude Code

AltanEsmer and others added 3 commits May 9, 2026 19:17
Bump grid auto-rows 200px→260px (220px on mobile), gap 18px→24px,
card padding 22px→28px, title 22px→26px, desc 14px, spark bars 40px.
Cards now have more breathing room and present larger preview surface
without changing the bento span system.

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
Replace the light-mode max-w-3xl stack of ContentProjectCard with the
AlesSystems aesthetic: section-head strip, Space Grotesk hero, and a
2-col responsive grid of MdxProjectCard tiles using the existing
.bento-card / .pv-grad / .chip primitives. Adds a small RevealOnScroll
client wrapper that reuses the IntersectionObserver pattern from
ProjectsSection so cards stagger-in as they enter the viewport.

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
Rewrite /projects/[slug] in the AlesSystems dark theme: JetBrains Mono
back-link, section-head with slug + date, Space Grotesk hero, .chip
tags, gradient hairline separator, and the existing .prose-mdx body
styles. Add a prev/next ProjectNavigation block at the foot of the
page so readers can walk the case-study list without hitting the
browser back button. Powered by a new getAdjacentContent helper in
src/lib/content.ts that traverses the date-sorted content array.

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
@AltanEsmer AltanEsmer force-pushed the claude/priceless-lederberg-e8fe3a branch from 4d90b21 to 3bf0128 Compare May 9, 2026 16:18
@AltanEsmer AltanEsmer merged commit b973d8a into main May 9, 2026
2 checks passed
@AltanEsmer AltanEsmer deleted the claude/priceless-lederberg-e8fe3a branch May 9, 2026 16:20
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant