major: convert credits and markdown

AdamJ · AdamJ · commit 2fe0c5d177c1 · 2025-11-18T15:30:02.000-05:00
diff --git a/docs/about/adam/index.html b/docs/about/adam/index.html
@@ -59,7 +59,7 @@
             <divider class="vertical"></divider>
           </li>
           <li>
-            <a href="/about/adam"  alt="Link to the about page">
+            <a href="/about/adam" class="active" alt="Link to the about page">
               About
             </a>
           </li>
@@ -68,6 +68,11 @@
               Resume
             </a>
           </li>
+          <li>
+            <a href="/credits"  alt="Link to the resume">
+              Credits
+            </a>
+          </li>
         </ul>
       </nav>
     
diff --git a/docs/about/resume/index.html b/docs/about/resume/index.html
@@ -68,6 +68,11 @@
               Resume
             </a>
           </li>
+          <li>
+            <a href="/credits"  alt="Link to the resume">
+              Credits
+            </a>
+          </li>
         </ul>
       </nav>
     
@@ -82,7 +87,8 @@ <h1>Adam J. Jolicoeur</h1>
     
   </p></section>
 
-<section class="hide-on-screen print">
+
+  <section class="hide-on-screen print">
   <h1>Adam J. Jolicoeur</h1>
   <caption>contact@adamjolicoeur.com</caption>
 </section>
@@ -281,6 +287,7 @@ <h2 id="organizations">Organizations - Past &amp; Present</h2>
 </section>
 
 
+
     </main>
     <footer id="contact">
   <div class="footer-content">
diff --git a/docs/credits/index.html b/docs/credits/index.html
@@ -59,11 +59,20 @@
             <divider class="vertical"></divider>
           </li>
           <li>
-            <a href="/designs/task-it"  alt="Link to Task It case study">
-              Task-It!
+            <a href="/about/adam"  alt="Link to the about page">
+              About
+            </a>
+          </li>
+          <li>
+            <a href="/about/resume"  alt="Link to the resume">
+              Resume
+            </a>
+          </li>
+          <li>
+            <a href="/credits" class="active" alt="Link to the resume">
+              Credits
             </a>
           </li>
-          <li><a href="/designs/alm"  alt="Link to ALM case study">ALM</a></li>
         </ul>
       </nav>
     
@@ -78,43 +87,29 @@ <h1>Credits</h1>
     
   </p></section>
 
+
+  <section>
+    <blockquote>
 <p>Giving credit where credit is due, this page is based off of the <a href="https://raw.githubusercontent.com/LeaVerou/lea.verou.me/refs/heads/main/credits/index.md">Credits</a> page from <a href="https://lea.verou.me/">Lea Verou</a>.</p>
+</blockquote>
 <hr>
+<blockquote>
 <p>This site was built using <a href="https://www.11ty.dev/">Eleventy</a>, hosted on <a href="https://cloudflare.com/">Cloudflare Pages</a>, with previews deployed with <a href="https://www.cloudflare.com/">Cloudflare</a>. Certificate courtesy of Cloudflare and <a href="https://letsencrypt.org/">Let’s Encrypt</a>.</p>
+</blockquote>
 <h2 id="libraries" tabindex="-1">Libraries <a class="anchor-link" href="#libraries">#</a></h2>
 <ul>
 <li><a href="https://www.11ty.dev/">Eleventy</a></li>
-<li><a href="https://shoelace.style/">Shoelace</a></li>
-<li><a href="https://getbootstrap.com/">Bootstrap</a></li>
 </ul>
 <h2 id="fonts" tabindex="-1">Fonts <a class="anchor-link" href="#fonts">#</a></h2>
 <pre class="language-css"><code class="hljs language-css">  <span class="token selector">:root</span> <span class="token punctuation">{</span>
-    <span class="token property">--sl-font-sans</span><span class="token punctuation">:</span> <span class="token string">"Oswald"</span><span class="token punctuation">,</span> sans-serif<span class="token punctuation">;</span>
-    <span class="token property">--sl-font-mono</span><span class="token punctuation">:</span> <span class="token string">"Fira Mono"</span><span class="token punctuation">,</span> monospace<span class="token punctuation">;</span>
-    <span class="token property">--sl-font-serif</span><span class="token punctuation">:</span> <span class="token string">"Lato"</span><span class="token punctuation">,</span> sans-serif<span class="token punctuation">;</span>
-    <span class="token property">--bs-font-sans-serif</span><span class="token punctuation">:</span> <span class="token string">"Lato"</span><span class="token punctuation">,</span> serif<span class="token punctuation">;</span>
+    <span class="token property">--font-family-sans</span><span class="token punctuation">:</span> <span class="token string">'Inter'</span><span class="token punctuation">,</span> system-ui<span class="token punctuation">,</span> -apple-system<span class="token punctuation">,</span> BlinkMacSystemFont<span class="token punctuation">,</span> <span class="token string">'Segoe UI'</span><span class="token punctuation">,</span> Roboto<span class="token punctuation">,</span> <span class="token string">'Helvetica Neue'</span><span class="token punctuation">,</span> Arial<span class="token punctuation">,</span> sans-serif<span class="token punctuation">;</span>
+    <span class="token property">--font-family-serif</span><span class="token punctuation">:</span> <span class="token string">'Playfair Display'</span><span class="token punctuation">,</span> serif<span class="token punctuation">;</span>
+    <span class="token property">--font-family-mono</span><span class="token punctuation">:</span> <span class="token string">'Fira Code'</span><span class="token punctuation">,</span> <span class="token string">'Courier New'</span><span class="token punctuation">,</span> Courier<span class="token punctuation">,</span> monospace<span class="token punctuation">;</span>
+    <span class="token property">--font-family-heading</span><span class="token punctuation">:</span> <span class="token string">'Pirata One'</span><span class="token punctuation">,</span> cursive<span class="token punctuation">;</span>
   <span class="token punctuation">}</span></code></pre>
-<ul>
-<li><a href="https://fonts.google.com/specimen/Oswald">Oswald</a>
-<ul>
-<li>Headers, specified through general <code>&lt;H&gt;</code> tags and CSS classes</li>
-</ul>
-</li>
-<li><a href="https://fonts.google.com/specimen/Lato">Lato</a>
-<ul>
-<li>Paragraphs, specified through general <code>&lt;p&gt;</code> tags and CSS classes</li>
-</ul>
-</li>
-<li><a href="https://fonts.google.com/specimen/Fira+Mono">Fira Mono</a>
-<ul>
-<li>Code blocks, specified through general <code>&lt;code&gt;</code> tags and CSS classes</li>
-</ul>
-</li>
-</ul>
 <h2 id="icons" tabindex="-1">Icons <a class="anchor-link" href="#icons">#</a></h2>
 <p>A custom icon component (<a href="https://github.com/AdamJ/adamjolicoeur.com/blob/main/src/js/icon-component.js">icon-component.js</a>) is used to render icons as web components with <a href="https://fontawesome.com/">Font Awesome</a> as the preferred icon library.</p>
-<pre><code class="hljs">  &lt;fa-icon type=&quot;brands&quot; name=&quot;github&quot; size=&quot;md&quot;&gt;&lt;/fa-icon&gt;
-</code></pre>
+<pre class="language-html"><code class="hljs language-html">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>fa-icon</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>brands<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>github<span class="token punctuation">"</span></span> <span class="token attr-name">size</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>md<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>fa-icon</span><span class="token punctuation">></span></span></code></pre>
 <h2 id="plugins" tabindex="-1">Plugins <a class="anchor-link" href="#plugins">#</a></h2>
 <ul>
 <li><a href="https://github.com/11ty/eleventy-plugin-inclusive-language">eleventy-plugin-inclusive-language</a> to check for inclusive language</li>
@@ -150,6 +145,8 @@ <h2 id="tools" tabindex="-1">Tools <a class="anchor-link" href="#tools">#</a></h
 </li>
 </ul>
 
+  </section>
+
 
     </main>
     <footer id="contact">
diff --git a/docs/css/style.css b/docs/css/style.css
@@ -527,6 +527,14 @@ a:hover, a:focus, .link:hover, .link:focus {
   border-bottom-color: var(--earth-brown);
 }
 
+blockquote, .blockquote {
+  border-left: var(--border-thin) solid var(--earth-brown);
+  padding-left: var(--space-md, 1rem);
+  margin: var(--space-lg, 1.5rem) 0;
+  font-style: italic;
+  color: var(--text-secondary);
+}
+
 .mb-1 {
   margin-bottom: var(--space-2xs) !important;
 }
diff --git a/docs/feed.json b/docs/feed.json
@@ -26,6 +26,22 @@
     "url": ""
   },
   "items": [
+    {
+      "id": "/presentations/portfolio/",
+      "url": "/presentations/portfolio/",
+      "title": "Portfolio",
+      "date_published": "2025-11-18T19:18:40Z",
+      "date": "2025-11-18T19:18:40Z"
+    }
+    ,
+    {
+      "id": "/presentations/color-picker/",
+      "url": "/presentations/color-picker/",
+      "title": "Color Picker",
+      "date_published": "2025-11-18T19:18:40Z",
+      "date": "2025-11-18T19:18:40Z"
+    }
+    ,
     {
       "id": "/designs/customer-engagement/",
       "url": "/designs/customer-engagement/",
@@ -106,22 +122,6 @@
       "date": "2025-08-27T14:04:31Z"
     }
     ,
-    {
-      "id": "/presentations/portfolio/",
-      "url": "/presentations/portfolio/",
-      "title": "Portfolio",
-      "date_published": "2025-07-11T18:43:57Z",
-      "date": "2025-07-11T18:43:57Z"
-    }
-    ,
-    {
-      "id": "/presentations/color-picker/",
-      "url": "/presentations/color-picker/",
-      "title": "Color Picker",
-      "date_published": "2025-07-11T18:43:57Z",
-      "date": "2025-07-11T18:43:57Z"
-    }
-    ,
     {
       "id": "/designs/",
       "url": "/designs/",
diff --git a/docs/sitemap.xml b/docs/sitemap.xml
@@ -66,16 +66,6 @@
       <lastmod>2025-07-11T18:43:57.000Z</lastmod>
     </url>
   
-    <url>
-      <loc>https://www.adamjolicoeur.com/presentations/color-picker/</loc>
-      <lastmod>2025-07-11T18:43:57.000Z</lastmod>
-    </url>
-  
-    <url>
-      <loc>https://www.adamjolicoeur.com/presentations/portfolio/</loc>
-      <lastmod>2025-07-11T18:43:57.000Z</lastmod>
-    </url>
-  
     <url>
       <loc>https://www.adamjolicoeur.com/</loc>
       <lastmod>2025-08-27T13:59:17.482Z</lastmod>
@@ -131,4 +121,14 @@
       <lastmod>2025-11-18T16:15:09.000Z</lastmod>
     </url>
   
+    <url>
+      <loc>https://www.adamjolicoeur.com/presentations/color-picker/</loc>
+      <lastmod>2025-11-18T19:18:40.000Z</lastmod>
+    </url>
+  
+    <url>
+      <loc>https://www.adamjolicoeur.com/presentations/portfolio/</loc>
+      <lastmod>2025-11-18T19:18:40.000Z</lastmod>
+    </url>
+  
 </urlset>
diff --git a/src/_includes/base.njk b/src/_includes/base.njk
@@ -100,7 +100,7 @@
           </li>
         </ul>
       </nav>
-    {% elseif 'about' in page.url %}
+    {% elseif 'credits' in page.url %}
       <nav role="navigation" aria-label="Main navigation" class="main-nav">
         <ul>
           <li>
@@ -121,6 +121,39 @@
               Resume
             </a>
           </li>
+          <li>
+            <a href="{{ '/credits' | url }}" {% if 'credits' in page.url %}class="active"{% endif %} alt="Link to the resume">
+              Credits
+            </a>
+          </li>
+        </ul>
+      </nav>
+    {% elseif 'about' in page.url %}
+      <nav role="navigation" aria-label="Main navigation" class="main-nav">
+        <ul>
+          <li>
+            <a href="{{ '/' | url }}" alt="Link to home page">
+              Home
+            </a>
+          </li>
+          <li>
+            <divider class="vertical"></divider>
+          </li>
+          <li>
+            <a href="{{ '/about/adam' | url }}" {% if 'adam' in page.url %}class="active"{% endif %} alt="Link to the about page">
+              About
+            </a>
+          </li>
+          <li>
+            <a href="{{ '/about/resume' | url }}" {% if 'resume' in page.url %}class="active"{% endif %} alt="Link to the resume">
+              Resume
+            </a>
+          </li>
+          <li>
+            <a href="{{ '/credits' | url }}" {% if 'credits' in page.url %}class="active"{% endif %} alt="Link to the resume">
+              Credits
+            </a>
+          </li>
         </ul>
       </nav>
     {% else %}
diff --git a/src/_includes/markdown.njk b/src/_includes/markdown.njk
@@ -14,4 +14,10 @@ layout: base.njk
   {%- else -%}{%- endif -%}
 </section>
 
-{{ content | safe }}
+{% if 'credits' in page.url %}
+  <section>
+    {{ content | safe }}
+  </section>
+{% else %}
+  {{ content | safe }}
+{% endif %}
diff --git a/src/pages/credits/index.md b/src/pages/credits/index.md
@@ -5,41 +5,32 @@ layout: markdown
 readTime: false
 ---
 
-Giving credit where credit is due, this page is based off of the [Credits](https://raw.githubusercontent.com/LeaVerou/lea.verou.me/refs/heads/main/credits/index.md) page from [Lea Verou](https://lea.verou.me/).
+> Giving credit where credit is due, this page is based off of the [Credits](https://raw.githubusercontent.com/LeaVerou/lea.verou.me/refs/heads/main/credits/index.md) page from [Lea Verou](https://lea.verou.me/).
 
 ---
 
-This site was built using [Eleventy](https://www.11ty.dev/), hosted on [Cloudflare Pages](https://cloudflare.com/), with previews deployed with [Cloudflare](https://www.cloudflare.com/). Certificate courtesy of Cloudflare and [Let's Encrypt](https://letsencrypt.org/).
+> This site was built using [Eleventy](https://www.11ty.dev/), hosted on [Cloudflare Pages](https://cloudflare.com/), with previews deployed with [Cloudflare](https://www.cloudflare.com/). Certificate courtesy of Cloudflare and [Let's Encrypt](https://letsencrypt.org/).
 
 ## Libraries
 
 - [Eleventy](https://www.11ty.dev/)
-- [Shoelace](https://shoelace.style/)
-- [Bootstrap](https://getbootstrap.com/)
 
 ## Fonts
 
 ```css
   :root {
-    --sl-font-sans: "Oswald", sans-serif;
-    --sl-font-mono: "Fira Mono", monospace;
-    --sl-font-serif: "Lato", sans-serif;
-    --bs-font-sans-serif: "Lato", serif;
+    --font-family-sans: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
+    --font-family-serif: 'Playfair Display', serif;
+    --font-family-mono: 'Fira Code', 'Courier New', Courier, monospace;
+    --font-family-heading: 'Pirata One', cursive;
   }
 ```
 
-- [Oswald](https://fonts.google.com/specimen/Oswald)
-  - Headers, specified through general `<H>` tags and CSS classes
-- [Lato](https://fonts.google.com/specimen/Lato)
-  - Paragraphs, specified through general `<p>` tags and CSS classes
-- [Fira Mono](https://fonts.google.com/specimen/Fira+Mono)
-  - Code blocks, specified through general `<code>` tags and CSS classes
-
 ## Icons
 
 A custom icon component ([icon-component.js](https://github.com/AdamJ/adamjolicoeur.com/blob/main/src/js/icon-component.js)) is used to render icons as web components with [Font Awesome](https://fontawesome.com/) as the preferred icon library.
 
-```
+```html
   <fa-icon type="brands" name="github" size="md"></fa-icon>
 ```
 
diff --git a/src/sass/_typography.scss b/src/sass/_typography.scss
@@ -188,3 +188,10 @@ a:hover, a:focus, .link:hover, .link:focus {
   color: var(--earth-brown);
   border-bottom-color: var(--earth-brown);
 }
+blockquote, .blockquote {
+  border-left: var(--border-thin) solid var(--earth-brown);
+  padding-left: var(--space-md, 1rem);
+  margin: var(--space-lg, 1.5rem) 0;
+  font-style: italic;
+  color: var(--text-secondary);
+}

Original file line number	Diff line number	Diff line change
`@@ -527,6 +527,14 @@ a:hover, a:focus, .link:hover, .link:focus {`
`527`	`527`	`border-bottom-color: var(--earth-brown);`
`528`	`528`	`}`
`529`	`529`
	`530`	`+blockquote, .blockquote {`
	`531`	`+ border-left: var(--border-thin) solid var(--earth-brown);`
	`532`	`+ padding-left: var(--space-md, 1rem);`
	`533`	`+ margin: var(--space-lg, 1.5rem) 0;`
	`534`	`+ font-style: italic;`
	`535`	`+ color: var(--text-secondary);`
	`536`	`+}`
	`537`	`+`
`530`	`538`	`.mb-1 {`
`531`	`539`	`margin-bottom: var(--space-2xs) !important;`
`532`	`540`	`}`