feat: Add TimeTracker case study and markdown containers

Add TimeTracker Pro case study page and all related image assets (raw PNGs and optimized JPG/WEBP + thumbnails) under src/ and docs/, plus a new content page at src/pages/development/timetracker.md. Register markdown-it-container and add five fenced container types (card, section, cards, card-basic, card-shadow) in .eleventy.js; enable rendering for opt-in pages. Add SASS source for containers and compiled CSS outputs (containers.css, markdown.css, print.css, prism.css, slides.css, etc.) and update markdown include. Update docs (README, CLAUDE, CHANGELOG) to document the containers feature and the TimeTracker case study, and adjust a few HTML pages (replace wrapper <section> with <content>) for print/layout consistency. Also update package.json build scripts so production builds compile the full SASS directory into docs/css.

Author: AdamJ

.eleventy.js

@@ -9,7 +9,8 @@ const pluginTOC = require('eleventy-plugin-toc');
 const pluginDropcap = require('eleventy-plugin-dropcap');
 const markdownIt = require("markdown-it");
 const markdownItAnchor = require("markdown-it-anchor");
-const markdownItHighlightJS = require('markdown-it-highlightjs')
+const markdownItHighlightJS = require('markdown-it-highlightjs');
+const markdownItContainer = require('markdown-it-container');
 const emojiReadTime = require("@11tyrocks/eleventy-plugin-emoji-readtime");
 const packageVersion = require("./package.json").version;
 const eleventySass = require("@11tyrocks/eleventy-plugin-sass-lightningcss");
@@ -118,6 +119,41 @@ module.exports = function (eleventyConfig) {
     markdownIt(mdOptions)
       .use(markdownItAnchor, mdAnchorOpts)
       .use(markdownItHighlightJS)
+      .use(markdownItContainer, 'card', {
+        render(tokens, idx) {
+          return tokens[idx].nesting === 1
+            ? '<div class="card">\n'
+            : '</div>\n';
+        }
+      })
+      .use(markdownItContainer, 'section', {
+        render(tokens, idx) {
+          return tokens[idx].nesting === 1
+            ? '<section class="prose-section">\n'
+            : '</section>\n';
+        }
+      })
+      .use(markdownItContainer, 'cards', {
+        render(tokens, idx) {
+          return tokens[idx].nesting === 1
+            ? '<div class="cards-row">\n'
+            : '</div>\n';
+        }
+      })
+      .use(markdownItContainer, 'card-basic', {
+        render(tokens, idx) {
+          return tokens[idx].nesting === 1
+            ? '<div class="card-basic">\n'
+            : '</div>\n';
+        }
+      })
+      .use(markdownItContainer, 'card-shadow', {
+        render(tokens, idx) {
+          return tokens[idx].nesting === 1
+            ? '<div class="card-shadow">\n'
+            : '</div>\n';
+        }
+      })
   );
 
   // Plugins

CHANGELOG.md

@@ -75,12 +75,13 @@
 <link rel="stylesheet" href="/css/print.css" media="print" />
 <link rel="stylesheet" href="/css/markdown.css" />
 
+
 <section class="hero">
   <h1>Adam Jolicoeur</h1>
   <p class="text-lead mb-4">Lead Product Designer with 15+ years at AWS, Red Hat, and high-growth B2B companies</p></section>
 
 
-  <section>
+  <content>
     <section class="hide-on-screen print">
   <h1>Adam Jolicoeur</h1>
   <caption>contact@adamjolicoeur.com</caption>
@@ -128,7 +129,7 @@ <h3>Also available</h3>
   <a href="https://www.github.com/AdamJ" class="btn btn-social" target="_blank" alt="Click to visit my GitHub profile"><i class="fa-brands fa-github"></i> GitHub</a>
 </section>
 
-  </section>
+  </content>
 
 
     </main>

CLAUDE.md

@@ -75,12 +75,13 @@
 <link rel="stylesheet" href="/css/print.css" media="print" />
 <link rel="stylesheet" href="/css/markdown.css" />
 
+
 <section class="hero">
   <h1>TaskStat Privacy Policy</h1>
   <p class="text-lead mb-4">Privacy policy for TaskStat - a privacy-first task management app for iOS</p></section>
 
 
-  <section>
+  <content>
     <section>
 <p><strong>Last Updated:</strong> January 5, 2026<br>
 <strong>Effective Date:</strong> January 5, 2026</p>
@@ -328,7 +329,7 @@ <h2 id="acknowledgment" tabindex="-1">Acknowledgment <a class="anchor-link" href
 <em>Simple tasks. Complete privacy.</em></p>
 </section>
 
-  </section>
+  </content>
 
 
     </main>

README.md

@@ -75,12 +75,13 @@
 <link rel="stylesheet" href="/css/print.css" media="print" />
 <link rel="stylesheet" href="/css/markdown.css" />
 
+
 <section class="hero">
   <h1>TaskStat</h1>
   <p class="text-lead mb-4">Privacy-first task management for iOS. Your tasks stay on your device—no accounts, no tracking, no cloud sync.</p></section>
 
 
-  <section>
+  <content>
     <section>
 <h2 id="about-taskstat" tabindex="-1">About TaskStat <a class="anchor-link" href="#about-taskstat">#</a></h2>
 <p>TaskStat is a native iOS task management app built with privacy as a core principle. Unlike cloud-based task managers, TaskStat stores all your data locally on your device using SwiftData—ensuring complete privacy and offline functionality.</p>
@@ -176,7 +177,7 @@ <h2 id="technical-details" tabindex="-1">Technical Details <a class="anchor-link
 <div class="text-callout">TaskStat: Simple tasks. Complete privacy.</div>
 </section>
 
-  </section>
+  </content>
 
 
     </main>