Skip to content

Add interactive about page with career timeline#16

Open
mattarderne wants to merge 2 commits intomasterfrom
claude/redesign-about-section-xqZne
Open

Add interactive about page with career timeline#16
mattarderne wants to merge 2 commits intomasterfrom
claude/redesign-about-section-xqZne

Conversation

@mattarderne
Copy link
Copy Markdown
Owner

Summary

Replaces the static about page with an interactive, scrollable career timeline experience. This new layout presents Matt's professional journey as a series of slides with rich context about each chapter, including what was done, why it mattered, and key learnings.

Key Changes

  • New data structure (_data/career.yml): Centralized career information organized by chapters with structured fields (what_i_did, why_i_chose_this, what_i_learned, pivot_moment)
  • Interactive layout (_layouts/about-interactive.html): Full-page slide-based experience with:
    • Desktop sidebar navigation with progress dots
    • Mobile bottom navigation
    • Keyboard navigation (arrow keys / j/k)
    • Smooth scroll snap between slides
    • Intersection Observer for lazy visibility
  • LLM-friendly context: "Copy for AI" button that exports structured career information for use with AI assistants
  • Multiple export formats:
    • Interactive HTML page (about.html)
    • Plain text export (about.txt) for LLM context
  • Rich styling: Custom CSS with dark/light mode support, responsive design, and smooth transitions
  • SEO & metadata: JSON-LD structured data for search engines and LLM crawlers

Notable Implementation Details

  • Uses CSS custom properties for theming (accent colors, spacing, transitions)
  • Intersection Observer API for efficient slide visibility tracking
  • Keyboard navigation with vim-style bindings (j/k) and arrow keys
  • Mobile-optimized with bottom navigation and safe-area insets
  • PostHog analytics integration for tracking engagement
  • Tooltip navigation hints on desktop, simplified mobile UX
  • Career chapters include location, links to company websites, and contextual narrative

Files Changed

  • Added: _data/career.yml, _layouts/about-interactive.html, about.html, about.txt
  • Renamed: about-old.md (archived previous version)

https://claude.ai/code/session_01WtaKn5SJJpE5PyDADYErwP

- Create new interactive about layout with slide-based navigation
- Add career data structure in YAML for easy updates
- Implement scroll-triggered animations with Intersection Observer
- Add keyboard navigation (j/k, arrow keys)
- Include "Copy for AI" button for LLM context
- Create /about.txt endpoint for machine-readable export
- Add JSON-LD structured data for SEO
- Keep minimalist design aesthetic with subtle animations
- Backup original about.md as about-old.md

https://claude.ai/code/session_01WtaKn5SJJpE5PyDADYErwP
- Desktop: Fixed 56px sidebar with icon navigation + tooltips
- Mobile: Bottom sheet with 4-column grid navigation
- Site links: Home, Writing, Sailing, Photos, About
- Slide progress dots centered with hover labels
- Contact icons at bottom (Email, GitHub, LinkedIn)
- Proper responsive breakpoints at 768px
- Safe area insets for mobile notch

https://claude.ai/code/session_01WtaKn5SJJpE5PyDADYErwP
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.

2 participants