Refresh project thumbnails, trim copy, and improve UI/UX + tests - #181
Merged
Conversation
The site was re-themed to dark graphite/amber, but the three project thumbnails were still light (a light Lumen mockup PNG and two cream SVGs), clashing with the dark UI. Replace all three with new dark-theme SVG covers that share one visual language (graphite base, amber glow, cream text, amber/teal accents). Drop the unused darkImage field and update docs. Co-authored-by: Muhammad Rafiq <mohabbis@users.noreply.github.com>
Tighten wording across the hero, featured work, about, and portfolio copy so each line says less. Add a shared .focus-ring utility and apply visible focus-visible rings to previously unstyled interactive elements (project cards, nav, footer links, home cards, CTAs, contact buttons) for keyboard accessibility. Co-authored-by: Muhammad Rafiq <mohabbis@users.noreply.github.com>
Add navigation and gallery data tests, verify project cover assets exist on disk, and cover project-card optional metadata (subtitle, relationship label, CTA, tag cap). Include type declarations in tsconfig.test.json so tests that transitively import gallery images typecheck. Suite grows from 69 to 83. Co-authored-by: Muhammad Rafiq <mohabbis@users.noreply.github.com>
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
mohabbis
marked this pull request as ready for review
July 10, 2026 19:49
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
The site was recently re-themed to dark graphite/amber, but the project thumbnails were left behind — a light Lumen mockup PNG and two cream SVGs that clashed badly with the dark UI. This PR replaces all three, trims wordy copy across the site, adds missing keyboard focus states, expands test coverage, and rewrites the prose in all three case studies.
Changes
Project thumbnails (all three replaced)
lumen-cover.svg— calm home-companion UI (brightness, scenes, atmosphere)branding-cover.svg— brand board (monogram, palette, car-wash arch motif)operations-cover.svg— systems ledger + continuity node graphdarkImagefield fromProjectItemand refreshed the docs.Case study writing (all three)
Less words overall
UI/UX
.focus-ringutility and applied visiblefocus-visiblerings to interactive elements that previously had none (project cards, header/footer links, home cards, CTAs, contact buttons) for keyboard accessibility.Tests (69 → 83)
navigationandgallerydata tests.projectstests now verify cover assets exist on disk, CTA/featured/imageFit consistency, and unique titles.project-cardtests cover subtitle, relationship label, CTA, and the 4-tag cap.tsconfig.test.jsonso tests importing gallery images typecheck.Validation
npm run cipasses (typecheck + typecheck:test + 83 tests + production build). Thumbnails were rendered to PNG and visually verified for consistency with the dark theme.