title: Claude Spec - m3data Jekyll Site version: 0.1.0 status: Draft author: Mathew Mark Mytka tags: [jekyll, portfolio, blog, specification, SDD] —

🧠 Vision

Create a personal + portfolio static site using Jekyll that blends poetic expression, professional presence, and regenerative design principles. Migrate and modernize content from WordPress while respecting clean architecture, accessibility, and maintainability.

🧩 Requirements

Functional Requirements

  • REQ-001: The site SHALL include a homepage with name, short bio, and links to featured sections.
  • REQ-002: The site SHALL support blog posts using Jekyll _posts format and generate listing/index views.
  • REQ-003: The site SHALL include a portfolio page to showcase selected work, organized by tags or categories.
  • REQ-004: Each project entry SHALL have a title, short description, optional image, and metadata (e.g., tech, date).
  • REQ-005: The site SHALL include an About page with extended bio, headshot, and links to external profiles.
  • REQ-006: The site SHALL support custom pages (e.g., philosophy, ethics, public talks) using Markdown or HTML.
  • REQ-007: The site SHALL support a contact form or contact section (static or JS-based).
  • REQ-008: The site SHALL offer a toggle for light/dark mode.

Non-Functional Requirements

  • NFR-001: Site MUST meet WCAG 2.2 AA accessibility criteria.
  • NFR-002: Site load time (First Contentful Paint) MUST be < 2s on 3G.
  • NFR-003: Pages SHALL be responsive across desktop, tablet, and mobile.
  • NFR-004: Codebase SHALL avoid inline CSS or JS in content files.
  • NFR-005: All styles SHALL use design tokens (colors, fonts, spacing).
  • NFR-006: Site content SHALL be privacy-preserving and avoid external trackers.
  • NFR-007: All posts and pages SHALL support basic semantic metadata (OpenGraph, Twitter cards, JSON-LD).

Constraints

  • CON-001: Must work with GitHub Pages-compatible Jekyll setup.
  • CON-002: No dynamic server backend (static only).
  • CON-003: Forms MUST use a privacy-safe provider or mailto fallback.
  • CON-004: External fonts must use self-hosting or privacy-first CDN.

🎨 Presentation Mapping (Summary)

See presentation-map.md for detailed screen mapping.

Screen Components Used
Homepage Hero, BioBlock, LinkRow
Blog Index PostList, TagFilter, Pagination
Blog Post ArticleBody, MetaBar, Footnotes
Portfolio CardGrid, TagToggle, ModalViewer
About Page ImageTextSplit, TimelineBlock
Nav/Footer NavBar, SocialLinks, DarkToggle, CTA

🎨 Design Tokens

See style-guide.md.

  • Fonts: Inter or Source Sans 3
  • Colors: Earthy natural tones + highlight accent (blue/purple)
  • Spacing: Modular scale (4px)
  • Radius: 4px, 8px
  • Shadows: Soft elevation (0–3 levels)

✅ Acceptance Criteria Examples

Homepage

  • Hero includes full name and poetic subtitle.
  • Bio section includes image and 3–4 sentence blurb.
  • Featured links visually distinct and semantic.

Portfolio

  • Grid layout adapts responsively.
  • Each project card supports hover state and accessible link.
  • Projects filterable by tag with semantic buttons.

📐 Architecture Notes

  • Content-first Jekyll structure using _posts, _layouts, _includes.
  • Configurable via _config.yml for future flexibility.
  • Uses _data/navigation.yml and _data/projects.yml for structure.

🔍 Traceability

Each REQ and NFR maps to specific layouts or includes. Add TEST-### and OBS-### trace IDs as implementation progresses.

🪞 Next Steps

  1. Finalize and review this spec.
  2. Build presentation-map.md for each screen.
  3. Generate layouts and includes via Claude Code agent using this spec.