Update much more than code examples (#227)

AdamJ · Jul 27, 2023 · 31cd2fd · 31cd2fd
1 parent 5a909d6
commit 31cd2fd
Show file tree

Hide file tree

Showing 37 changed files with 1,733 additions and 569 deletions.
diff --git a/.cache/eleventy-fetch-771e2ee768352bc06ce998c0240241 b/.cache/eleventy-fetch-771e2ee768352bc06ce998c0240241
@@ -0,0 +1 @@
+[{"771e2ee768352bc06ce998c0240241":"1"},{"cachedAt":1690466873438,"type":"2"},"buffer"]
diff --git a/.cache/eleventy-fetch-771e2ee768352bc06ce998c0240241.buffer b/.cache/eleventy-fetch-771e2ee768352bc06ce998c0240241.buffer
diff --git a/.eleventy.js b/.eleventy.js
@@ -7,6 +7,18 @@ const markdownItAnchor = require("markdown-it-anchor");
 const packageVersion = require("./package.json").version;
 const fs = require("fs");
 const eleventyNavigationPlugin = require("@11ty/eleventy-navigation");
+const Image = require("@11ty/eleventy-img");
+
+(async () => {
+  let url = "https://images.unsplash.com/photo-1608178398319-48f814d0750c";
+  let stats = await Image(url, {
+    widths: ["auto"],
+    urlPath: "./src/img/",
+    outputDir: "./docs/img/"
+  });
+
+  console.log( stats );
+})();
 
 module.exports = function (eleventyConfig) {
   eleventyConfig.addPlugin(syntaxHighlight);
@@ -28,6 +40,23 @@ module.exports = function (eleventyConfig) {
   eleventyConfig.addShortcode("year", () => `${new Date().getFullYear()}`);
   eleventyConfig.addShortcode("packageVersion", () => `v${packageVersion}`);
 
+  eleventyConfig.addShortcode("image", async function(src, alt, sizes) {
+    let metadata = await Image(src, {
+      widths: ["auto"],
+      urlPath: "./src/img/",
+      outputDir: "./docs/img/"
+    });
+
+    let imageAttributes = {
+      alt,
+      sizes,
+      loading: "lazy",
+      decoding: "async",
+    };
+
+    return Image.generateHTML(metadata, imageAttributes);
+  });
+
   eleventyConfig.setBrowserSyncConfig({
     callbacks: {
       ready: function(err, bs) {
@@ -63,19 +92,13 @@ module.exports = function (eleventyConfig) {
   /* Markdown Overrides */
   let markdownLibrary = markdownIt({
     html: true,
-  }).use(markdownItAnchor, {
-    permalink: true,
-    permalinkClass: "tdbc-anchor",
-    permalinkSymbol: "#",
-    permalinkSpace: false,
-    level: [1, 2, 3],
-    slugify: (s) =>
-      s
-        .trim()
-        .toLowerCase()
-        .replace(/[\s+~\/]/g, "-")
-        .replace(/[().`,%·'"!?¿:@*]/g, ""),
-  });
+    breaks: true,
+    langPrefix: 'language-',
+    linkify: true,
+  })
+  .use(markdownItAnchor, {
+    permalink: markdownItAnchor.permalink.headerLink({ safariReaderFix: true })
+  })
   eleventyConfig.setLibrary("md", markdownLibrary);
 
   return {

diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -2,5 +2,16 @@
   "cSpell.ignoreWords": [
     "borderless",
     "customerengagement"
+  ],
+  "cSpell.words": [
+    "cssnano",
+    "keybase",
+    "linkify",
+    "luxon",
+    "postbuild",
+    "Shortcode",
+    "stylelint",
+    "syntaxhighlight",
+    "webfonts"
   ]
-}
+}
diff --git a/docs/about/index.html b/docs/about/index.html
@@ -8,7 +8,7 @@
     <title>About | Adam Jolicoeur</title>
     <meta
       name="description"
-      content="A little bit about me."
+      content="Driven and passionate user experience designer, with a background in software development, creating interfaces that allows users to perform their work seamlessly."
     />
     <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
     <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
@@ -31,7 +31,7 @@
     />
     <meta
       name="twitter:description"
-      content="As a User Experience Designer and Developer, I strive to design and create amazing things."
+      content="Driven and passionate user experience designer with a background in software development. Looking for a role where I can continue to utilize my UX/UI skills and create interfaces that will allows users to perform their work seamlessly."
     />
 
     <meta
@@ -40,7 +40,7 @@
     />
     <meta
       name="og:description"
-      content="A little bit about me."
+      content="Driven and passionate user experience designer, with a background in software development, creating interfaces that allows users to perform their work seamlessly."
     />
     <meta name="twitter:image" content="https://www.adamjolicoeur.com/img/AdamJolicoeur_social.png" />
     <meta property="og:image" content="https://www.adamjolicoeur.com/img/AdamJolicoeur_social.png" />
@@ -56,7 +56,9 @@
     <header>
   <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
     <div class="container-fluid">
-      <a class="navbar-brand" href="/">Adam Jolicoeur</a>
+      <a class="navbar-brand" href="/">
+        Adam Jolicoeur
+      </a>
       <button class="navbar-toggler"
         type="button"
         data-bs-toggle="collapse"
@@ -94,30 +96,18 @@
   <h1 class="display-5 fw-bold">About</h1>
   <div class="col-lg-6 mx-auto">
     <p class="lead">
-      A little bit about me.
+      Driven and passionate user experience designer, with a background in software development, creating interfaces that allows users to perform their work seamlessly.
     </p>
   </div>
 </header>
 <main>
   <article class="mx-auto">
-    <!-- <ul class="nav justify-content-center">
-  <li class="nav-item">
-    <a class="nav-link" href="#">History</a>
-  </li>
-  <li class="nav-item">
-    <a class="nav-link" href="#">Education</a>
-  </li>
-  <li class="nav-item">
-    <a class="nav-link" href="#">Recognitions</a>
-  </li>
-</ul>
-<hr> -->
-<div class="container pt-3 pb-3">
+    <div class="container pt-3 pb-3">
   <div class="row g-5">
     <div class="col-md-6">
       <h2 id="redhat">Amazon Web Services</h2>
       <p class="mb-0">
-        Senior User Experience Designer, ASBX
+        Senior User Experience Designer, Amazon Software Builder Experience
       </p>
       <p>
         <span class="badge rounded-pill bg-dark">Figma</span>
@@ -175,17 +165,46 @@ <h2 id="redhat">Red Hat, Inc.</h2>
       </ul>
     </div>
     <div class="col-md-6">
-      <p>As a Senior Software Engineer on the User Experience Design team, I am responsible for creating user flows, wireframes, mockups, and proof-of-concepts for a variety of products and websites across the company. I am a core contributor to the PatternFly design system and was the lead designer and developer of the Red Hat Developer Design Manual.</p>
+      <p>As a Senior Software Engineer on the User Experience Design team, my responsibilities included creating user flows, wireframes, mockups, and proof-of-concepts for products and websites across the Red Hat. As part of my role, I became a core contributor to the PatternFly design system, as well as lead the design of the Red Hat Developer Design Manual.</p>
       <ul class="icon-list">
         <li>UX Designer, OpenShift</li>
         <li>designer/developer, developers.redhat.com</li>
         <li>designer/developer, Red Hat Developer Design Manual</li>
-        <li>interaction designer, Red Hat Managed Integration (Integreatly)
-        <li>Core Contributer to <a href="https://www.patternfly.org" target="top" alt="PatternFly website">PatternFly</a></li>
+        <li>interaction designer, Red Hat Managed Integration
+        <li>Core Contributor to <a href="https://www.patternfly.org" target="top" alt="PatternFly website">PatternFly</a></li>
         <li>designer/developer, kubevirt.io</li>
       </ul>
     </div>
   </div>
+<hr class="col-3 col-md-2 mb-5">
+  <div class="row g-5">
+    <div class="col-md-6">
+      <h2>Saylent Technologies</h2>
+      <p class="mb-0">
+        User Experience Designer
+      </p>
+      <p>
+        <span class="badge rounded-pill bg-dark">Photoshop</span>
+        <span class="badge rounded-pill bg-dark">Visual studio</span>
+        <span class="badge rounded-pill bg-dark">HTML</span>
+        <span class="badge rounded-pill bg-dark">CSS</span>
+        <span class="badge rounded-pill bg-dark">Agile</span>
+      </p>
+      <ul class="icon-list">
+        <li>November 2014 - July 2016</li>
+      </ul>
+    </div>
+    <div class="col-md-6">
+      <p>Led the design and user research for the Account360 and Card360 platforms, working with a team of developers to improve product usability. Focused primarily on easy to use and manageable interfaces for the financial industry, utilizing standards from across the industry.</p>
+      <ul class="icon-list">
+        <li>Lead designer, Account360 and Card360 platforms</li>
+        <li>Lead designer, product refreshes/corporate presentations and sales demonstrations</li>
+        <li>Created system for ux prototyping and usability testing</li>
+        <li>Developer, HTML/CSS for use in ASP.net applications</li>
+        <li>Created style guide/css framework for corporate products</li>
+      </ul>
+    </div>
+  </div>
   <hr class="col-3 col-md-2 mb-5">
   <div class="row g-5">
     <div class="col-md-6">
@@ -215,47 +234,17 @@ <h2>Switchback, Inc.</h2>
       </ul>
     </div>
     <div class="col-md-6">
-      <p>Designed and implemented a redesign of an internal financial accounting website, which interacted directly with construction software and daily database updates. Created presentations for senior management in order to demonstrate the full design concepts and gather feedback on direction and feasibility of designs.</p>
+      <p>Designed and implemented a redesign of an internal financial accounting product, interfacing directly with construction software and daily database updates.</p>
       <ul class="icon-list">
         <li>Worked on mobile-first web applications and data input tools for personal inventory systems and portfolios.</li>
-        <li>Created and implemented a redesign of an internal financial accounting website utilizing HTML5, CSS3, jQuery and Bootstrap 2 & Bootstrap 3 frameworks</li>
-        <li>Part of design team from initial conception to finished product – creation of wireframes, photoshop designs, test sites and integration of data</li>
+        <li>Part of design team from initial conception to finished product – creation of wireframes, Photoshop designs, test sites and integration of data</li>
         <li>PHP Development on Desktop and Mobile Browsers</li>
         <li>Built, managed and maintained an internal IIS 7.0 environment</li>
         <li>DMS maintenance and creation – Joomla and Drupal</li>
       </ul>
     </div>
   </div>
   <hr class="col-3 col-md-2 mb-5">
-  <div class="row g-5">
-    <div class="col-md-6">
-      <h2>Saylent Technologies</h2>
-      <p class="mb-0">
-        User Experience Designer
-      </p>
-      <p>
-        <span class="badge rounded-pill bg-dark">Photoshop</span>
-        <span class="badge rounded-pill bg-dark">Visual studio</span>
-        <span class="badge rounded-pill bg-dark">HTML</span>
-        <span class="badge rounded-pill bg-dark">CSS</span>
-        <span class="badge rounded-pill bg-dark">Agile</span>
-      </p>
-      <ul class="icon-list">
-        <li>November 2014 - July 2016</li>
-      </ul>
-    </div>
-    <div class="col-md-6">
-      <p>As a User Experience Designer, I lead the design and user research for the Account360 and Card360 platforms, working with a team of developers to improve product usability. Our primary focus was to provide a easy to use and manageable interfaces for the financial industry, utilizing standards from across the industry.</p>
-      <ul class="icon-list">
-        <li>lead designer, Account360 &amp; Card360 platforms</li>
-        <li>lead designer, product refreshes/corporate presentations &amp; sales demonstrations</li>
-        <li>created system for ux prototyping and usability testing</li>
-        <li>developer, html/css for use in asp.net applications</li>
-        <li>created styleguide/css framework for corporate products</li>
-      </ul>
-    </div>
-  </div>
-  <hr class="col-3 col-md-2 mb-5">
   <div class="row g-5">
     <div class="col-md-6">
       <h2>Black Duck Software</h2>
@@ -276,10 +265,10 @@ <h2>Black Duck Software</h2>
     <div class="col-md-6">
       <p>As a UI Software Engineer, I worked with the development and design teams to turn the visual designs into working applications.</p>
       <ul class="icon-list">
-        <li>developer, software inventory and management system</li>
-        <li>created/developed wireframes/templates/mockups with UX Designer and UI Architect</li>
-        <li>developed/tested initial phases of mobile/tablet design framework</li>
-        <li>daily scrum/agile development practices</li>
+        <li>Developer, software inventory and management system</li>
+        <li>Created and developed wireframes/templates/mockups with UX Designer and UI Architect</li>
+        <li>Developed/tested initial phases of mobile/tablet design framework</li>
+        <li>Daily Agile Scrum development practices</li>
       </ul>
     </div>
   </div>
@@ -351,17 +340,18 @@ <h5>Site</h5>
         <div class="col-6 col-md">
           <h5>External</h5>
           <ul class="list-unstyled text-small">
-            <li><a class="link-secondary" href="https://www.github.com/AdamJ" alt="View GitHub profile">GitHub</a></li>
-            <li><a class="link-secondary" href="https://www.codepen.io/mindreeper2420" alt="View CodePen profile">CodePen</a></li>
-            <li><a class="link-secondary" href="https://dribbble.com/ajolicoeur" alt="View Dribbble profile">Dribbble</a></li>
+            <li><a class="link-secondary" href="https://www.linkedin.com/in/ajjolicoeur/" target="top" alt="View LinkedIn profile">LinkedIn</a></li>
+            <li><a class="link-secondary" href="https://www.github.com/AdamJ" target="top" alt="View GitHub profile">GitHub</a></li>
+            <li><a class="link-secondary" href="https://www.codepen.io/mindreeper2420" target="top" alt="View CodePen profile">CodePen</a></li>
+            <li><a class="link-secondary" href="https://dribbble.com/ajolicoeur" target="top" alt="View Dribbble profile">Dribbble</a></li>
           </ul>
         </div>
         <div class="col-6 col-md">
           <h5>Social</h5>
           <ul class="list-unstyled text-small">
-            <li><a class="link-secondary" href="https://www.linkedin.com/in/ajjolicoeur/">LinkedIn</a></li>
-            <li><a class="link-secondary" href="https://www.twitter.com/AdamJJolicoeur">Twitter</a></li>
-            <li><a class="link-secondary" href="https://keybase.io/mindreeper2420" alt="View Keybase.io profile">Keybase.io</a></li>
+            <li><a class="link-secondary" href="https://mastodon.world/@adamjol" target="top" alt="Say hello on Mastodon.world">Mastodon</a></li>
+            <li><a class="link-secondary" href="https://www.twitter.com/AdamJJolicoeur" target="top" alt="Say hello on Twitter">Twitter</a></li>
+            <li><a class="link-secondary" href="https://keybase.io/mindreeper2420" target="top" alt="View Keybase.io profile">Keybase.io</a></li>
           </ul>
         </div>
       </div>

diff --git a/docs/alfred/workflows/index.html b/docs/alfred/workflows/index.html
@@ -8,7 +8,7 @@
     <title>Alfred Workflows | Adam Jolicoeur</title>
     <meta
       name="description"
-      content="A list of my favorite Alfred workflows."
+      content="A list of my favorite Alfred workflows"
     />
     <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
     <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
@@ -31,7 +31,7 @@
     />
     <meta
       name="twitter:description"
-      content="As a User Experience Designer and Developer, I strive to design and create amazing things."
+      content="Driven and passionate user experience designer with a background in software development. Looking for a role where I can continue to utilize my UX/UI skills and create interfaces that will allows users to perform their work seamlessly."
     />
 
     <meta
@@ -40,7 +40,7 @@
     />
     <meta
       name="og:description"
-      content="A list of my favorite Alfred workflows."
+      content="A list of my favorite Alfred workflows"
     />
     <meta name="twitter:image" content="https://www.adamjolicoeur.com/img/AdamJolicoeur_social.png" />
     <meta property="og:image" content="https://www.adamjolicoeur.com/img/AdamJolicoeur_social.png" />
@@ -56,7 +56,9 @@
     <header>
   <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
     <div class="container-fluid">
-      <a class="navbar-brand" href="/">Adam Jolicoeur</a>
+      <a class="navbar-brand" href="/">
+        Adam Jolicoeur
+      </a>
       <button class="navbar-toggler"
         type="button"
         data-bs-toggle="collapse"
@@ -94,24 +96,24 @@
   <h1 class="display-5 fw-bold">Alfred Workflows</h1>
   <div class="col-lg-6 mx-auto">
     <p class="lead">
-      A list of my favorite Alfred workflows.
+      A list of my favorite Alfred workflows
     </p>
   </div>
 </header>
 <main>
   <article class="mx-auto">
-    <h1 id="alfred-workflows" tabindex="-1">Alfred Workflows<a class="tdbc-anchor" href="#alfred-workflows">#</a></h1>
+    <h1 id="alfred-workflows" tabindex="-1"><a class="header-anchor" href="#alfred-workflows"><span>Alfred Workflows</span></a></h1>
 <p>A list of my favorite <a href="https://www.alfredapp.com/workflows/">Alfred Workflows</a>, broken down by those that I have downloaded and those that I have created or modified.</p>
 <p><em>Note: Requires the <a href="https://www.alfredapp.com/powerpack/">Alfred Powerpack</a> to use.</em></p>
-<h2 id="downloaded" tabindex="-1">Downloaded<a class="tdbc-anchor" href="#downloaded">#</a></h2>
+<h2 id="downloaded" tabindex="-1"><a class="header-anchor" href="#downloaded"><span>Downloaded</span></a></h2>
 <ul>
 <li><a href="https://github.com/nikitavoloboev/alfred-web-searches#readme">Alfred Web Searches</a>
 <ul>
 <li>Created by <a href="https://github.com/nikitavoloboev">nikitavoloboev on GitHub</a> to use Alfred for searching the web.</li>
 </ul>
 </li>
 </ul>
-<h2 id="created---modified" tabindex="-1">Created / Modified<a class="tdbc-anchor" href="#created---modified">#</a></h2>
+<h2 id="created-%2F-modified" tabindex="-1"><a class="header-anchor" href="#created-%2F-modified"><span>Created / Modified</span></a></h2>
 <ul>
 <li>New Obsidian
 <ul>
@@ -164,17 +166,18 @@ <h5>Site</h5>
         <div class="col-6 col-md">
           <h5>External</h5>
           <ul class="list-unstyled text-small">
-            <li><a class="link-secondary" href="https://www.github.com/AdamJ" alt="View GitHub profile">GitHub</a></li>
-            <li><a class="link-secondary" href="https://www.codepen.io/mindreeper2420" alt="View CodePen profile">CodePen</a></li>
-            <li><a class="link-secondary" href="https://dribbble.com/ajolicoeur" alt="View Dribbble profile">Dribbble</a></li>
+            <li><a class="link-secondary" href="https://www.linkedin.com/in/ajjolicoeur/" target="top" alt="View LinkedIn profile">LinkedIn</a></li>
+            <li><a class="link-secondary" href="https://www.github.com/AdamJ" target="top" alt="View GitHub profile">GitHub</a></li>
+            <li><a class="link-secondary" href="https://www.codepen.io/mindreeper2420" target="top" alt="View CodePen profile">CodePen</a></li>
+            <li><a class="link-secondary" href="https://dribbble.com/ajolicoeur" target="top" alt="View Dribbble profile">Dribbble</a></li>
           </ul>
         </div>
         <div class="col-6 col-md">
           <h5>Social</h5>
           <ul class="list-unstyled text-small">
-            <li><a class="link-secondary" href="https://www.linkedin.com/in/ajjolicoeur/">LinkedIn</a></li>
-            <li><a class="link-secondary" href="https://www.twitter.com/AdamJJolicoeur">Twitter</a></li>
-            <li><a class="link-secondary" href="https://keybase.io/mindreeper2420" alt="View Keybase.io profile">Keybase.io</a></li>
+            <li><a class="link-secondary" href="https://mastodon.world/@adamjol" target="top" alt="Say hello on Mastodon.world">Mastodon</a></li>
+            <li><a class="link-secondary" href="https://www.twitter.com/AdamJJolicoeur" target="top" alt="Say hello on Twitter">Twitter</a></li>
+            <li><a class="link-secondary" href="https://keybase.io/mindreeper2420" target="top" alt="View Keybase.io profile">Keybase.io</a></li>
           </ul>
         </div>
       </div>