Goal: Redesign and rebuild this GitHub Pages site as a modern Jekyll site with a custom theme (no external theme gem), preserving the domain ryanbmalm.com and the Pages build. The site should highlight: 1) Traditional artwork (photo galleries), 2) Creative coding / games (Retrobuffer + small web toys), 3) Blog posts, 4) An “About / Studio” page.

Technical constraints

  • Must remain a Jekyll site compatible with GitHub Pages.
  • Prefer only GitHub Pages–supported plugins: jekyll-seo-tag, jekyll-sitemap, jekyll-feed, jekyll-paginate (or jekyll-paginate-v2 if building via Actions), and jekyll-archives if supported. If any plugin isn’t Pages-whitelisted, add a GitHub Actions workflow that runs jekyll build and deploys the _site/ output to gh-pages.
  • Use Rouge for syntax highlighting. No Node build step required to serve.
  • Keep CNAME with ryanbmalm.com.
  • Ensure fast first load, good Lighthouse scores, and accessible markup (WCAG AA).

Site structure (collections + content model)

Implement these collections and pages:

  • collections:
    • art/ (for traditional artwork)
      • Front matter fields: title, year, medium, materials, dimensions, tags, cover_image, images: [ ... ], description.
    • code/ (for creative coding projects/demos)
      • Fields: title, stack, repo, demo_url (optional), cover_image, tags, summary, status (prototype released), published_at.
  • posts/ for the blog (standard Jekyll posts).
  • Top-level pages: index, about, art/index, code/index, blog/index, contact.

Theme scaffolding

Create a custom theme in-repo:

  • _layouts/: default.html, home.html, post.html, art_item.html, code_item.html, collection_index.html, page.html.
  • _includes/: head.html, header.html, footer.html, nav.html, post_meta.html, pagination.html, card.html, gallery.html, lightbox.html, analytics.html (stub).
  • assets/css/: Use SCSS pipeline with a single entry main.scss.
  • assets/js/: minimal vanilla JS for mobile nav, theme toggle, and lightbox.
  • assets/img/ for static images/icons.
  • favicon + social preview images.

Design direction

  • Clean, minimal, studio-like aesthetic; generous whitespace; readable line lengths.
  • System fonts or Inter; comfortable line-height; 16–18px base, scale up for headings.
  • Light/dark theme toggle (CSS variables in :root, prefers-color-scheme aware).
  • Cards for items (art pieces, code projects, posts) with subtle shadows and rounded corners.
  • Use CSS Grid/Flex for responsive galleries; 3–4 columns collapsing to 1 on mobile.
  • Navigation: sticky top bar with sections: Art, Code, Blog, About, Contact.
  • Homepage: concise intro + three feature grids (latest 6 art items, 6 code items, 3 blog posts) and a “View All” link for each.
  • Art detail page: large lead image, lightbox gallery, metadata block, process notes.
  • Code detail page: hero image/GIF, links to repo/demo, tech stack badges, write-up.

Images & performance

  • Responsive images (<picture> with srcset), loading="lazy", width/height attributes to prevent CLS.
  • Generate multiple sizes at build time only if using an allowed plugin; otherwise document a simple manual image workflow.
  • Include a lightweight, dependency-free lightbox script (in assets/js/lightbox.js).

Search & taxonomy

  • Add on-site search with Lunr.js (client-side index generated at build).
  • Tag pages for art and code (grid view + filters).
  • Breadcrumbs on detail pages.

SEO & feeds

  • jekyll-seo-tag configured with title, description, social image.
  • jekyll-sitemap and jekyll-feed enabled.
  • Open Graph/Twitter meta via includes.

Accessibility

  • Semantic HTML, labeled nav, visible focus states, sufficient color contrast.
  • Alt text for all images (use front matter alt or fallback to title).
  • Keyboard navigable lightbox and menus.

Configuration

Create/modify:

  • _config.yml with:
    • collections for art and code (both output: true).
    • paginate settings for blog index (e.g., 10 per page).
    • plugins listed under plugins:.
    • defaults for each collection to enforce layouts and permalink patterns:
      • Art: /art/:title/
      • Code: /code/:title/
      • Posts: /blog/:year/:month/:day/:title/
  • .ruby-version if needed by Actions.
  • CNAME preserved with ryanbmalm.com.
  • Art index: /art/ (grid), detail /art/:slug/.
  • Code index: /code/ (grid with filters), detail /code/:slug/.
  • Blog index: /blog/ with pagination.

Content samples

Add 2–3 example items for art and code, and 2 blog posts to show layout:

  • An art item with multiple images and metadata.
  • A code item with repo link and an embedded canvas demo block (placeholder).
  • Posts with code fences to validate Rouge.

Home page composition

_layouts/home.html should:

  • Show hero intro (short bio and CTA buttons to Art, Code, Blog).
  • Sections: “Latest Art”, “Latest Code”, “From the Blog” (each with a small grid of cards).
  • Footer with social links (GitHub, Instagram), RSS link, and email.

Scripts & progressive enhancement

  • assets/js/theme-toggle.js for dark/light (persist in localStorage).
  • assets/js/lightbox.js for galleries (Esc to close, arrows to navigate).
  • assets/js/search.js + search.json (Lunr index) generated at build.

GitHub Actions (only if needed)

  • If any non-Pages plugin is used, create .github/workflows/build.yml:
    • Ruby setup (use latest supported Jekyll).
    • bundle install, bundle exec jekyll build --trace.
    • Deploy _site/ to gh-pages or pages artifact for Pages.
  • Otherwise rely on GitHub Pages native build.

Deliverables

1) Implement the folder/theme scaffolding above with working layouts and includes. 2) Configure _config.yml and plugins; keep CNAME. 3) Create example content in art/, code/, and _posts/. 4) Add SCSS with variables, light/dark themes, responsive utilities. 5) Add a minimal Lunr search that indexes titles, tags, and summaries. 6) Add a lightweight lightbox and theme toggle. 7) Ensure no broken links and that local bundle exec jekyll serve runs cleanly.

Acceptance criteria

  • bundle exec jekyll serve works locally (no build errors).
  • Pages build (either native or via Actions) succeeds.
  • Lighthouse: Performance ≥ 90, Accessibility ≥ 95, Best Practices ≥ 95, SEO ≥ 95 (on home and a detail page).
  • Valid RSS feed and sitemap present.
  • Mobile-friendly grids and nav; keyboard-accessible UI.

Now:

  • Inspect current repo content; back up any legacy posts/pages.
  • Generate the new theme scaffolding and example content.
  • Preserve or migrate existing posts into _posts/ with correct front matter.
  • Open a PR with a preview link and a README that documents how to add new art pieces, code projects, and blog posts (include front matter examples).