Commit Graph

37 Commits

Author SHA1 Message Date
Ricardo
e236b4bf65 a11y: comprehensive WCAG 2.1 Level AA accessibility audit
- Add skip-to-main-content link and main content ID target
- Add prefers-reduced-motion media queries for all animations
- Enhance visible focus indicators (2px offset, high-contrast ring)
- Replace ~160 text-surface-500 instances with text-surface-600/dark:text-surface-400
  for 4.5:1+ contrast ratio compliance
- Add aria-hidden="true" to ~30+ decorative SVG icons across sidebars/widgets
- Convert facepile containers from div to semantic ul/li with role="list"
- Add aria-label to icon-only buttons (share, sort controls)
- Add sr-only labels to form inputs (webmention, search)
- Add aria-live="polite" to dynamically loaded webmentions
- Add aria-label with relative+absolute date to time-difference component
- Add keyboard handlers (Enter/Space) to custom interactive elements
- Add aria-label to nav landmarks (table of contents)
- Fix modal focus trap and dialog accessibility
- Fix lightbox keyboard navigation and screen reader announcements

Confab-Link: http://localhost:8080/sessions/edb1b7b0-da66-4486-bd9c-d1cfa7553b88
2026-03-07 18:58:08 +01:00
Ricardo
dacf819b99 fix(dates): add font-mono text-sm to all <time> elements
System convention: every rendered date gets font-mono class.
CSS base layer handles font-family, but classes ensure consistency
and proper text-sm sizing across all templates.

Confab-Link: http://localhost:8080/sessions/0ec83454-d346-4329-8aaf-6b12139bf596
2026-03-07 15:59:17 +01:00
Ricardo
0f843e7ce1 fix(cards): add shadow-sm to all card elements across 24 files
Design system requires shadow-sm + border on all cards.
Also fixes bg-white -> bg-surface-50 and bg-surface-100 -> bg-surface-50
where card backgrounds used wrong tokens.

Confab-Link: http://localhost:8080/sessions/0ec83454-d346-4329-8aaf-6b12139bf596
2026-03-07 15:58:48 +01:00
Ricardo
c71a7f38a8 fix: prevent FOUC for images and SVG icons on first paint
Add critical CSS rules to constrain images (max-width:100%) and inline
SVGs (default 1.25rem) before Tailwind loads. Add width/height HTML
attributes to avatar images in hero sections and h-card sidebar widget.

Confab-Link: http://localhost:8080/sessions/edb1b7b0-da66-4486-bd9c-d1cfa7553b88
2026-03-07 15:46:43 +01:00
Ricardo
ee7fa5de7f fix: hide month labels and improve dark mode contrast in AI post-graph
Widget: add noLabels to prevent month abbreviations from squishing
together in the narrow sidebar. Both widget and section: use lighter
boxColorDark (#44403c / surface-700) so empty grid cells are visible
against the surface-800 sidebar/section backgrounds in dark mode.

Confab-Link: http://localhost:8080/sessions/edb1b7b0-da66-4486-bd9c-d1cfa7553b88
2026-03-06 15:45:43 +01:00
Ricardo
81ea22ac34 feat: add AI usage homepage section with stats and contribution graph
Full-width section for homepage builder showing 4-column stats grid,
level breakdown pills, AI-involved post-graph, and link to /ai/ page.

Confab-Link: http://localhost:8080/sessions/edb1b7b0-da66-4486-bd9c-d1cfa7553b88
2026-03-06 12:35:40 +01:00
Ricardo
b9a42b3a73 feat: configurable post-graph section and dedicated /graph page
- Add posting-activity.njk section template with configurable years/limit
- Register posting-activity in homepage-section.njk dispatcher
- Move hardcoded post-graph into Tier 2 block (homepage builder controls its own)
- Add "View full history" link to /graph/ on both Tier 2 and section template
- Create /graph/ page showing all years with no limit

Confab-Link: http://localhost:8080/sessions/edb1b7b0-da66-4486-bd9c-d1cfa7553b88
2026-03-05 15:42:00 +01:00
Ricardo
be90da09e4 feat: style CV education section with colored borders and accordion
Apply the same visual pattern used in projects/skills/interests:
- Colored left borders cycling through 8-color palette
- 2-column responsive grid layout
- Alpine.js collapsible descriptions (accordion)
- Hover states on clickable rows
- Dates shown in summary row (desktop) and detail panel (mobile)

Confab-Link: http://localhost:8080/sessions/bd3f7012-c703-47e9-bfe2-2ad04ce1842d
2026-03-05 10:15:39 +01:00
Ricardo
47439e71c5 feat: add brand colors to social icons in hero sections
Replace monochrome (black/amber) social icons with official brand
colors for each service. Add socialIconColorClass macro that maps
icon names to Tailwind color classes with dark mode variants.

Changes:
- social-icon.njk: add brand color macro for 30+ icon types
- social-icon.njk: replace ActivityPub icon with official W3C logo
- hero.njk: apply brand colors to icons, neutral text for labels
- cv-builder.njk: same brand color treatment as hero section

Confab-Link: http://localhost:8080/sessions/bd3f7012-c703-47e9-bfe2-2ad04ce1842d
2026-03-05 08:50:28 +01:00
Ricardo
1348cbdf2e fix: reduce amber saturation in Featured section dark mode
Article title links now have explicit text color instead of inheriting
the global amber link color. Default article left-border changed from
amber to neutral surface tone. Card hover border toned down to neutral.
Interaction types (likes, bookmarks, reposts, replies, photos) keep
their semantic colors unchanged.

Confab-Link: http://localhost:8080/sessions/bd3f7012-c703-47e9-bfe2-2ad04ce1842d
2026-03-05 08:01:19 +01:00
Ricardo
132e8b566c feat: add /featured/ collection page and "View all" link
- New featured.njk page with pagination, type-aware rendering
- "View all N featured posts" link appears when count exceeds maxItems

Confab-Link: http://localhost:8080/sessions/bd3f7012-c703-47e9-bfe2-2ad04ce1842d
2026-03-04 22:12:02 +01:00
Ricardo
8cd3c86bfa feat: add featured posts section for homepage builder
Add `featuredPosts` collection filtering posts with `featured: true`
frontmatter. New `featured-posts` section template with type-aware
rendering (articles, notes, photos, bookmarks, etc.) and star icon
header. Registered in homepage-section.njk dispatcher.

To feature a post, add `featured: true` to its frontmatter. Then add
a `{ "type": "featured-posts" }` section to the homepage config.

Confab-Link: http://localhost:8080/sessions/bd3f7012-c703-47e9-bfe2-2ad04ce1842d
2026-03-04 19:26:18 +01:00
Ricardo
a7265bc7ce fix: project cards — per-project color cycling and collapsible grid stretch bug
Add items-start to grid container so expanding one project card no longer
stretches the adjacent card to fill the row height. Add per-project color
cycling (border-l + tech tags) using the 8-color palette, replacing uniform
amber accent colors.

Confab-Link: http://localhost:8080/sessions/bd3f7012-c703-47e9-bfe2-2ad04ce1842d
2026-03-04 16:48:05 +01:00
Ricardo
cb3c2115ae feat: implement design system — domain colors, date typography, interaction states, CV family colors
Apply the collaboratively-written design system from .interface-design/system.md:

- Domain color map: Social pages (rose), Code pages (emerald), Reading pages
  (orange), Music pages (purple) replace generic accent tokens
- Font-mono on all <time> elements via global CSS rule + wrap 7 non-<time> dates
- Shadow standardization: replace hover:shadow-lg with border-hover on news cards
- Active states: scale(0.97) press feedback on buttons and pagination links
- Gradient cleanup: remove to-white gradient on github featured project cards
- CV Skills & Interests: cycle through 8 distinct colors per family category
  (amber, emerald, sky, rose, purple, orange, teal, indigo) on both CV page
  and homepage
- Update system.md with refined palette documentation and domain color spec

Files: 19 changed across templates, CSS, and design documentation

Confab-Link: http://localhost:8080/sessions/bd3f7012-c703-47e9-bfe2-2ad04ce1842d
2026-03-04 15:13:34 +01:00
Ricardo
8e393e215d feat: warm palette overhaul — cold zinc/teal to warm stone/amber
Replace the entire color system with a design-driven warm palette:

- Surface tokens: cold zinc grays → warm stone (#faf8f5 to #0f0e0d)
- Accent tokens: cold teal → warm amber (#fffbeb to #451a03)
- All bg-white → bg-surface-50 across templates (warm cream instead of pure white)
- Critical CSS: all hardcoded hex values updated to warm palette
- Prism code blocks: cold gray backgrounds → warm stone
- Pagefind search UI: blue buttons/links → amber interactive colors
- Dark mode: warm dark surfaces with amber accents throughout

Design system documented in .interface-design/system.md

Confab-Link: http://localhost:8080/sessions/bd3f7012-c703-47e9-bfe2-2ad04ce1842d
2026-03-04 14:02:59 +01:00
Ricardo
155816a0bc feat: replace all primary (blue) with contextual colors across entire theme
Eliminate monotonous blue by replacing ~290 primary- references in 60 files
with semantically appropriate colors:

- accent (teal): links, CTAs, buttons, tabs, focus rings, spinners
- purple: Funkwhale/music, photos, Mastodon/fediverse
- surface (neutral): GitHub, dates/metadata, info boxes
- amber: bookmarks, blogroll categories
- red: likes
- green: reposts
- sky: replies
- orange: RSS/feeds, podcasts
- #0085ff: Bluesky brand
- #a730b8: Mastodon brand

Also updates prose link colors in tailwind.config.js, pagefind UI
primary color to teal, and client-side JS color references.

Confab-Link: http://localhost:8080/sessions/bd3f7012-c703-47e9-bfe2-2ad04ce1842d
2026-03-04 12:50:19 +01:00
Ricardo
2ca3e047a4 feat: UI overhaul — accent color, Inter font, widget icons, diversified colors
- Add teal accent color scale and activate Inter font via @font-face
- Neutralize nav/footer hovers from primary blue to surface neutrals
- Apply accent color to hero subtitle, FAB, CTA buttons, card hovers
- Fix reply post-type color from generic primary to distinctive sky blue
- Create centralized icon macro (icon.njk) with 24 reusable SVG icons
- Add per-widget-type icons and colored left-accent borders to all sidebars
- Update .p-category tags from blue to neutral surface with border
- Diversify color vocabulary: red (likes), amber (bookmarks/blogroll),
  green (reposts), purple (funkwhale), sky (replies), orange (subscribe)

Confab-Link: http://localhost:8080/sessions/bd3f7012-c703-47e9-bfe2-2ad04ce1842d
2026-03-04 11:21:39 +01:00
Ricardo
cd7083eb9a feat: preserve custom order for skills and interests sections
Remove dictsort from for-loops so categories render in the order
set by the admin UI drag-drop reorder, instead of alphabetically.
2026-02-25 15:57:42 +01:00
Ricardo
ab31e080bb feat: update interests templates for category-based data model
Interests are now grouped by category (matching skills pattern).
Updated cv-interests.njk to iterate categories, cv.js fallback to {},
and cv.njk hasCvData check to include interests.
2026-02-25 14:56:11 +01:00
Ricardo
116ac63f5f fix: CV page hero issues — avatar 404, collapsible description, interest filter, contact info
- Add eleventy:ignore to avatar img to prevent image transform rewriting URL to broken relative path
- Wrap authorDescription in details/summary for collapsible "More about me" toggle
- Fix interest filter logic: untyped interests no longer bypass work/personal filter
- Display location, org, website, email, PGP key from CV identity in hero section
2026-02-25 12:26:03 +01:00
Ricardo
703cfbc438 feat: shared social icon macro with 33 brand icons
Replace duplicated inline SVGs in h-card.njk and hero.njk with a shared
Nunjucks macro. Adds proper icons for ActivityPub, Forgejo, Codeberg,
PixelFed, and 25+ more platforms via Simple Icons (CC0).
2026-02-25 09:59:36 +01:00
Ricardo
b317148cd1 feat: prefer identity data over env vars in hero and h-card
Hero and h-card templates now resolve homepageConfig.identity.*
fields first, falling back to site.author.* env vars. Includes
design doc and implementation plan for the identity editor.
2026-02-25 08:55:16 +01:00
Ricardo
20f7823ee1 fix: apply accordion to personal/work project variants
The homepage uses cv-projects-personal.njk, not cv-projects.njk.
Apply the same collapsible accordion pattern to both personal
and work project section variants.
2026-02-24 16:07:18 +01:00
Ricardo
c66a46e349 feat: convert projects section to collapsible accordion
Project cards now show a compact summary row (name, status badge, date
range, chevron) that expands on click to reveal description and tech
tags. Uses Alpine.js with independent toggles and smooth transitions.
2026-02-24 15:37:19 +01:00
Ricardo
0279cfa977 feat: add color-coded left borders to post cards by type
Each post card in the recent-posts section now has a 3px left border
colored by post type: red for likes, amber for bookmarks, green for
reposts, blue for replies, purple for photos, neutral for articles/notes.
2026-02-24 15:35:22 +01:00
Ricardo
36f17d1a1f feat: add unfurl cards to blog page and homepage recent posts
Use two-strategy approach to work around async shortcode limitation
in deeply nested Nunjucks includes:

- blog.njk: async {% unfurl %} shortcode (top-level, works fine)
- recent-posts.njk: sync {{ url | unfurlCard | safe }} filter
  (reads from pre-populated disk cache)

eleventy.before hook scans content files and pre-fetches all
interaction URLs before templates render, ensuring the sync filter
always has data — even on first build.
2026-02-20 16:10:25 +01:00
Ricardo
ec02afb611 fix: split education and languages into separate sections
cv-education.njk no longer renders languages — use the standalone
cv-languages section instead.
2026-02-20 16:10:15 +01:00
Ricardo
a54600b003 fix: show untyped CV items in both work and personal views
Items without a type field (existing data before type feature was added)
were only appearing in "personal" filtered views. Since the /cv/ page uses
work-only variants, all existing untyped data was hidden. Changed filtering
so untyped items appear in both work and personal views.

Also guard cv.skills dictsort in cv.njk against undefined.
2026-02-20 13:55:52 +01:00
Ricardo
3bf0e78f74 feat: add filtered section templates for work/personal type distinction
Add thin-wrapper templates for work/personal filtering of CV sections:
- 8 new templates: cv-{experience,education,skills,interests}-{personal,work}.njk
- cv-languages.njk: standalone languages section (split from education)
- homepage-section.njk: 9 new routes for filtered variants
- cv.njk: uses work-only variants for the /cv/ page
- Base templates: filterType support in experience, education, skills, interests
- _data/cv.js: skillTypes and interestTypes fallback fields
2026-02-20 13:11:37 +01:00
Ricardo
334b8fdcf5 fix: revert unfurl from recent-posts section
Async shortcodes inside deeply nested Nunjucks includes
(homepage-builder → homepage-section → recent-posts) cause silent
template failures. Keep unfurl in top-level collection pages only.
2026-02-20 12:53:42 +01:00
Ricardo
0f496d624f feat: add unfurl cards to collection views and homepage
Show rich link preview cards in bookmarks, likes, replies, reposts
collection pages and the homepage recent posts section. URLs are
fetched once and cached — the same cache serves all templates.
2026-02-20 12:39:11 +01:00
Ricardo
dcccf29713 feat: add personal/work project section templates
- cv-projects-personal.njk: filters projects with projectType=personal (or unset)
- cv-projects-work.njk: filters projects with projectType=work
- CV page now only shows work projects
- Homepage section dispatcher routes both new types

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
2026-02-13 11:24:34 +01:00
Ricardo
0c79da8d95 feat: type-aware rendering for recent posts section and sidebar widget
Port the blog page's rich post-type rendering into both the homepage
recent-posts section and the sidebar widget. Likes, bookmarks, reposts,
replies, and photos now show colored icons, target URLs, and content
previews instead of generic "Untitled" cards.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
2026-02-11 09:21:38 +01:00
Ricardo
b8ad6dbb25 style: show experience highlights as tags instead of bullet list
Matches the tag/pill style used by interests and skills sections.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
2026-02-09 14:31:23 +01:00
Ricardo
45b42c67fe feat: add date display to CV projects and education templates
Projects now show startDate/endDate range. Education supports both
startDate/endDate (new) and year (backward compat) display.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
2026-02-09 12:11:22 +01:00
Ricardo
d0360dbdf7 feat: add CV section partials for homepage builder
- cv-experience.njk: work history timeline with highlights
- cv-skills.njk: skills grid grouped by category
- cv-education.njk: education cards + language pills
- cv-projects.njk: project cards with status badges and tech tags
- cv-interests.njk: interest tag cloud
- Update homepage-builder.njk to include cv-education and cv-interests

Part of indiekit-endpoint-cv plugin integration (Phase 2).

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
2026-02-08 16:01:01 +01:00
Ricardo
d9e99fa9cc feat: add homepage builder components for Phase 3
- homepage-builder.njk: master section renderer for configured sections
- sections/hero.njk: hero section with avatar, name, title, bio, social
- sections/recent-posts.njk: configurable recent posts section
- sections/custom-html.njk: freeform HTML content block
- Wire home.njk Tier 1 to include homepage-builder when config exists

Part of indiekit-endpoint-homepage plugin integration.

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
2026-02-08 15:55:08 +01:00