Create custom icon component

Clean up code from initial work Remove FA CSS and update layouts
AdamJ · Nov 15, 2024 · e5fe5ad · e5fe5ad
1 parent 0a1382d
commit e5fe5ad
Show file tree

Hide file tree

Showing 129 changed files with 8,860 additions and 21,896 deletions.
diff --git a/.eleventy.js b/.eleventy.js
@@ -64,6 +64,7 @@ module.exports = function (eleventyConfig) {
   eleventyConfig.addPassthroughCopy("src/manifest.json");
   eleventyConfig.addPassthroughCopy("src/sw.js");
   eleventyConfig.addPassthroughCopy("src/js/jolicoeur.js");
+  eleventyConfig.addPassthroughCopy("src/js/icon-component.js");
 
   eleventyConfig.addShortcode("year", () => `${new Date().getFullYear()}`);
   eleventyConfig.addShortcode("packageVersion", () => `v${packageVersion}`);

diff --git a/.gitignore b/.gitignore
@@ -3,6 +3,7 @@
 .DS_Store
 .idea
 .env
+.vscode
 npm-debug.log.*
 **/.cache/**
 # Ignore sketch files

diff --git a/docs/404.html b/docs/404.html
@@ -34,7 +34,6 @@
     />
     <script type="module" src="https://cdn.jsdelivr.net/npm/@shoelace-style/[email protected]/cdn/shoelace.js" ></script>
     <link href="/css/style.css" rel="stylesheet" />
-    <link href="/css/fontawesome.css" rel="stylesheet" />
     <meta name="twitter:card" content="summary_large_image" />
 
     <meta name="twitter:creator" content="@AdamJJolicoeur" />
@@ -69,27 +68,74 @@
   </head>
   <body>
     <container>
-      <nav class="navbar navbar-expand-md bg-dark border-bottom border-body" data-bs-theme="dark">
-        <div class="container-fluid">
-          <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
-            <span class="navbar-toggler-icon"></span>
-          </button>
-          <div class="collapse navbar-collapse d-md-flex" id="navbarNavAltMarkup">
-            <div class="navbar-nav col-md-6 justify-content-md-center">
-              <a class="navbar-brand col-md-1 me-0 text-center" href="/">
-                <img src="/img/navbar-logo.png" alt="Avatar" width="32" height="32">
+      <div class="nav">
+        <input type="checkbox" id="check" name="navigationCheckbox" aria-label="menu checkbox" />
+        <label for="check" class="menu">
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            width="30"
+            height="30"
+            fill="currentColor"
+            class="bi bi-list"
+            viewBox="0 0 16 16"
+          >
+            <path
+              fill-rule="evenodd"
+              d="M2.5 12a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5z"
+            />
+          </svg>
+        </label>
+        <a href="/">
+        <div class="logo">
+          <svg width="32" height="32" viewBox="0 0 192 192" fill="none" xmlns="http://www.w3.org/2000/svg">
+          <path d="M91.29 89.4546L96.1838 82.1483L101.709 89.4546H91.29Z" fill="#ffffff" stroke="#ffffff" stroke-width="4"/>
+          <path d="M45.8939 89.1937L95.7557 13L145.915 89.1937C145.915 91.2812 143.385 95.3857 139.813 98.3266C136.804 100.804 134.693 101.892 130.882 103.284C126.925 104.73 124.184 105.372 120.166 105.372H56.4616L23.5677 156.124H13L50.8057 97.8047H91.2905H115.849C125.375 97.8047 130.882 92.1945 130.882 92.1945C130.882 92.1945 134.743 89.1937 130.882 83.4531C119.124 65.9703 95.7557 29.0477 95.7557 29.0477L56.4616 89.1937H45.8939Z" fill="#ffffff" stroke="#ffffff" stroke-width="4"/>
+          <path d="M64.7966 112.548H105.281H136.24C145.766 112.548 151.72 108.895 154.548 107.068C158.239 104.684 161.99 99.1094 161.99 99.1094H173.004C173.004 100.414 168.224 106.618 163.627 110.199C152.911 118.549 144.575 120.115 140.557 120.115H70.4526L46.4891 156.255H35.9214L64.7966 112.548Z" fill="#ffffff"/>
+          <path d="M157.674 89.7157L127.905 45.6172H138.324L168.39 89.7157H157.674Z" fill="#ffffff"/>
+          <path d="M64.7966 112.548H105.281H136.24C145.766 112.548 151.72 108.895 154.548 107.068C158.239 104.684 161.99 99.1094 161.99 99.1094H173.004C173.004 100.414 168.224 106.618 163.627 110.199C152.911 118.549 144.575 120.115 140.557 120.115H70.4526L46.4891 156.255H35.9214L64.7966 112.548Z" stroke="#ffffff" stroke-width="4"/>
+          <path d="M157.674 89.7157L127.905 45.6172H138.324L168.39 89.7157H157.674Z" stroke="#ffffff" stroke-width="4"/>
+          <path d="M34.1356 89.7157L63.9038 45.6172H53.4849L23.419 89.7157H34.1356Z" fill="#ffffff" stroke="#ffffff" stroke-width="4"/>
+          <path d="M146.362 156.516L127.608 128.595H138.027L156.781 156.516H146.362Z" fill="#ffffff" stroke="#ffffff" stroke-width="4"/>
+          <path d="M30.4144 116.331L18.0605 98.8485H28.4794L35.6238 109.025L30.4144 116.331Z" fill="#ffffff" stroke="#ffffff" stroke-width="4"/>
+          <path d="M169.581 156.377L149.19 126.899L157.525 123.768L180 156.377H169.581Z" fill="#ffffff" stroke="#ffffff" stroke-width="4"/>
+          <path d="M77.8945 136.554L72.6851 144.121L96.3508 180L122.525 140.598L117.04 132.118L96.3508 164.474L77.8945 136.554Z" fill="#ffffff" stroke="#ffffff" stroke-width="4"/>
+          <path d="M80.4247 87.4976H70.0059L95.6066 48.4874L117.04 80.9496C118.082 82.9312 119.868 84.6273 116.593 87.4976C113.319 90.3679 112.128 89.0632 111.086 87.4976L95.6066 64.4046L80.4247 87.4976Z" fill="#ffffff" stroke="#ffffff" stroke-width="4"/>
+          <path d="M108.556 128.204H92.6351L87.7183 135.51H103.45L108.556 128.204Z" fill="#ffffff" stroke="#ffffff" stroke-width="4"/>
+          </svg>
+        </div>
+        </a>
+        <div class="nav-items">
+          <ul class="overview">
+            <li>
+              <a href="/about" class="nav-link" alt="Link to my About page">
+                About
+              </a>
+            </li>
+            <li>
+              <a href="/designs" class="nav-link" alt="Link to my Designs examples">
+                Designs
+              </a>
+            </li>
+            <li>
+              <a href="/development" class="nav-link" alt="Link to my Development examples">
+                Development
               </a>
-              <a class="nav-link" href="/about" alt="Link to my About page.">about</a>
-              <a class="nav-link" href="/designs" alt="Link to Designs that I have created and worked on.">designs</a>
-              <a class="nav-link" href="/development" alt="Link to development examples.">development</a>
-            </div>
-            <div class="navbar-nav d-md-flex col-md-3 justify-content-md-end">
-              <a class="nav-link" href="/testimonials/testimonials" alt="Testimonials">testimonials</a>
-              <a class="nav-link" href="/connect" alt="Connect">connect</a>
-            </div>
-          </div>
+            </li>
+          </ul>
+          <ul class="account">
+            <li>
+              <a href="/testimonials" class="nav-link" alt="Link to testimonials for former coworkers">
+                Testimonials
+              </a>
+            </li>
+            <li>
+              <a href="/connect" class="nav-link" alt="Connect with my through my social channels">
+                Connect
+              </a>
+            </li>
+          </ul>
         </div>
-      </nav>
+      </div>
     </container>
     <main class="content">
       <div style="display: flex; flex-direction: column; align-items: center;">

diff --git a/docs/about/index.html b/docs/about/index.html
@@ -34,7 +34,6 @@
     />
     <script type="module" src="https://cdn.jsdelivr.net/npm/@shoelace-style/[email protected]/cdn/shoelace.js" ></script>
     <link href="/css/style.css" rel="stylesheet" />
-    <link href="/css/fontawesome.css" rel="stylesheet" />
     <meta name="twitter:card" content="summary_large_image" />
 
     <meta name="twitter:creator" content="@AdamJJolicoeur" />
@@ -327,6 +326,8 @@ <h3 id="education" tabindex="-1">Education <a class="anchor-link" href="#educati
   </div>
   <script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-I7E8VVD/ismYTF4hNIPjVp/Zjvgyol6VFvRkX/vR+Vc4jQkC+hVqc2pM8ODewa9r" crossorigin="anonymous"></script>
   <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-Rx+T1VzGupg4BHQYs2gCW9It+akI2MM/mndMCy36UVfodzcJcF0GGLxZIzObiEfa" crossorigin="anonymous"></script>
+  <script src="https://kit.fontawesome.com/0ea2a7621c.js" crossorigin="anonymous"></script>
+  <script src="/js/icon-component.js"></script>
   <script src="/js/jolicoeur.js"></script>
   <!-- Global site tag (gtag.js) - Google Analytics -->
   <script async src="https://www.googletagmanager.com/gtag/js?id=G-XQCZPW3PZN"></script>

diff --git a/docs/alfred/workflows/index.html b/docs/alfred/workflows/index.html
@@ -34,7 +34,6 @@
     />
     <script type="module" src="https://cdn.jsdelivr.net/npm/@shoelace-style/[email protected]/cdn/shoelace.js" ></script>
     <link href="/css/style.css" rel="stylesheet" />
-    <link href="/css/fontawesome.css" rel="stylesheet" />
     <meta name="twitter:card" content="summary_large_image" />
 
     <meta name="twitter:creator" content="@AdamJJolicoeur" />
@@ -290,6 +289,8 @@ <h2 id="created-%2F-modified" tabindex="-1">Created / Modified <a class="anchor-
   </div>
   <script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-I7E8VVD/ismYTF4hNIPjVp/Zjvgyol6VFvRkX/vR+Vc4jQkC+hVqc2pM8ODewa9r" crossorigin="anonymous"></script>
   <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-Rx+T1VzGupg4BHQYs2gCW9It+akI2MM/mndMCy36UVfodzcJcF0GGLxZIzObiEfa" crossorigin="anonymous"></script>
+  <script src="https://kit.fontawesome.com/0ea2a7621c.js" crossorigin="anonymous"></script>
+  <script src="/js/icon-component.js"></script>
   <script src="/js/jolicoeur.js"></script>
   <!-- Global site tag (gtag.js) - Google Analytics -->
   <script async src="https://www.googletagmanager.com/gtag/js?id=G-XQCZPW3PZN"></script>

diff --git a/docs/apps/gamesandthings/index.html b/docs/apps/gamesandthings/index.html
@@ -34,7 +34,6 @@
     />
     <script type="module" src="https://cdn.jsdelivr.net/npm/@shoelace-style/[email protected]/cdn/shoelace.js" ></script>
     <link href="/css/style.css" rel="stylesheet" />
-    <link href="/css/fontawesome.css" rel="stylesheet" />
     <meta name="twitter:card" content="summary_large_image" />
 
     <meta name="twitter:creator" content="@AdamJJolicoeur" />
@@ -267,6 +266,8 @@ <h1 class="display-1 fw-bold text-break">Games and Things</h1>
   </div>
   <script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-I7E8VVD/ismYTF4hNIPjVp/Zjvgyol6VFvRkX/vR+Vc4jQkC+hVqc2pM8ODewa9r" crossorigin="anonymous"></script>
   <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-Rx+T1VzGupg4BHQYs2gCW9It+akI2MM/mndMCy36UVfodzcJcF0GGLxZIzObiEfa" crossorigin="anonymous"></script>
+  <script src="https://kit.fontawesome.com/0ea2a7621c.js" crossorigin="anonymous"></script>
+  <script src="/js/icon-component.js"></script>
   <script src="/js/jolicoeur.js"></script>
   <!-- Global site tag (gtag.js) - Google Analytics -->
   <script async src="https://www.googletagmanager.com/gtag/js?id=G-XQCZPW3PZN"></script>

diff --git a/docs/archives/archives/index.html b/docs/archives/archives/index.html
@@ -34,7 +34,6 @@
     />
     <script type="module" src="https://cdn.jsdelivr.net/npm/@shoelace-style/[email protected]/cdn/shoelace.js" ></script>
     <link href="/css/style.css" rel="stylesheet" />
-    <link href="/css/fontawesome.css" rel="stylesheet" />
     <meta name="twitter:card" content="summary_large_image" />
 
     <meta name="twitter:creator" content="@AdamJJolicoeur" />
@@ -264,6 +263,8 @@ <h1 class="display-1 fw-bold text-break">Archived Pages</h1>
   </div>
   <script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-I7E8VVD/ismYTF4hNIPjVp/Zjvgyol6VFvRkX/vR+Vc4jQkC+hVqc2pM8ODewa9r" crossorigin="anonymous"></script>
   <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-Rx+T1VzGupg4BHQYs2gCW9It+akI2MM/mndMCy36UVfodzcJcF0GGLxZIzObiEfa" crossorigin="anonymous"></script>
+  <script src="https://kit.fontawesome.com/0ea2a7621c.js" crossorigin="anonymous"></script>
+  <script src="/js/icon-component.js"></script>
   <script src="/js/jolicoeur.js"></script>
   <!-- Global site tag (gtag.js) - Google Analytics -->
   <script async src="https://www.googletagmanager.com/gtag/js?id=G-XQCZPW3PZN"></script>

diff --git a/docs/archives/town-selectman/index.html b/docs/archives/town-selectman/index.html
@@ -34,7 +34,6 @@
     />
     <script type="module" src="https://cdn.jsdelivr.net/npm/@shoelace-style/[email protected]/cdn/shoelace.js" ></script>
     <link href="/css/style.css" rel="stylesheet" />
-    <link href="/css/fontawesome.css" rel="stylesheet" />
     <meta name="twitter:card" content="summary_large_image" />
 
     <meta name="twitter:creator" content="@AdamJJolicoeur" />
@@ -407,6 +406,8 @@ <h2 class="mb-3">FAQ</h2>
   </div>
   <script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-I7E8VVD/ismYTF4hNIPjVp/Zjvgyol6VFvRkX/vR+Vc4jQkC+hVqc2pM8ODewa9r" crossorigin="anonymous"></script>
   <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-Rx+T1VzGupg4BHQYs2gCW9It+akI2MM/mndMCy36UVfodzcJcF0GGLxZIzObiEfa" crossorigin="anonymous"></script>
+  <script src="https://kit.fontawesome.com/0ea2a7621c.js" crossorigin="anonymous"></script>
+  <script src="/js/icon-component.js"></script>
   <script src="/js/jolicoeur.js"></script>
   <!-- Global site tag (gtag.js) - Google Analytics -->
   <script async src="https://www.googletagmanager.com/gtag/js?id=G-XQCZPW3PZN"></script>

diff --git a/docs/connect/index.html b/docs/connect/index.html
@@ -34,7 +34,6 @@
     />
     <script type="module" src="https://cdn.jsdelivr.net/npm/@shoelace-style/[email protected]/cdn/shoelace.js" ></script>
     <link href="/css/style.css" rel="stylesheet" />
-    <link href="/css/fontawesome.css" rel="stylesheet" />
     <meta name="twitter:card" content="summary_large_image" />
 
     <meta name="twitter:creator" content="@AdamJJolicoeur" />
@@ -283,6 +282,8 @@ <h1 class="display-1 fw-bold text-break">connect</h1>
   </div>
   <script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-I7E8VVD/ismYTF4hNIPjVp/Zjvgyol6VFvRkX/vR+Vc4jQkC+hVqc2pM8ODewa9r" crossorigin="anonymous"></script>
   <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-Rx+T1VzGupg4BHQYs2gCW9It+akI2MM/mndMCy36UVfodzcJcF0GGLxZIzObiEfa" crossorigin="anonymous"></script>
+  <script src="https://kit.fontawesome.com/0ea2a7621c.js" crossorigin="anonymous"></script>
+  <script src="/js/icon-component.js"></script>
   <script src="/js/jolicoeur.js"></script>
   <!-- Global site tag (gtag.js) - Google Analytics -->
   <script async src="https://www.googletagmanager.com/gtag/js?id=G-XQCZPW3PZN"></script>