Update Contact page (#268)

Author: AdamJ

docs/about/index.html

@@ -190,24 +190,12 @@ <h2 class="mt-0 mb-5">How I got here</h2>
           </div>
           <div class="col-12 col-md-8 text-md-end text-center">
             <a class="footer-link icon-link" href="https://www.linkedin.com/in/ajjolicoeur/" target="top" alt="View my LinkedIn profile">
-              <span class="fa-stack">
-                <i class="fa-solid fa-circle fa-stack-2x"></i>
-                <i class="fa-brands fa-linkedin fa-stack-1x fa-inverse"></i>
-              </span>
               <span class="d-none d-sm-none d-md-block">LinkedIn</span>
             </a>
             <a class="footer-link icon-link" href="https://github.com/AdamJ" target="top" alt="View my GitHub profile">
-              <span class="fa-stack">
-                <i class="fa-solid fa-circle fa-stack-2x"></i>
-                <i class="fa-brands fa-github fa-stack-1x fa-inverse"></i>
-              </span>
               <span class="d-none d-sm-none d-md-block">GitHub</span>
             </a>
             <a class="footer-link icon-link" href="https://dev.to/adamj" target="top" alt="View my Dev.to profile">
-              <span class="fa-stack">
-                <i class="fa-solid fa-circle fa-stack-2x"></i>
-                <i class="fa-brands fa-dev fa-stack-1x fa-inverse"></i>
-              </span>
               <span class="d-none d-sm-none d-md-block">Dev</span>
             </a>
           </div>

docs/alfred/workflows/index.html

@@ -131,24 +131,12 @@ <h2 id="created-%2F-modified" tabindex="-1"><a class="header-anchor" href="#crea
           </div>
           <div class="col-12 col-md-8 text-md-end text-center">
             <a class="footer-link icon-link" href="https://www.linkedin.com/in/ajjolicoeur/" target="top" alt="View my LinkedIn profile">
-              <span class="fa-stack">
-                <i class="fa-solid fa-circle fa-stack-2x"></i>
-                <i class="fa-brands fa-linkedin fa-stack-1x fa-inverse"></i>
-              </span>
               <span class="d-none d-sm-none d-md-block">LinkedIn</span>
             </a>
             <a class="footer-link icon-link" href="https://github.com/AdamJ" target="top" alt="View my GitHub profile">
-              <span class="fa-stack">
-                <i class="fa-solid fa-circle fa-stack-2x"></i>
-                <i class="fa-brands fa-github fa-stack-1x fa-inverse"></i>
-              </span>
               <span class="d-none d-sm-none d-md-block">GitHub</span>
             </a>
             <a class="footer-link icon-link" href="https://dev.to/adamj" target="top" alt="View my Dev.to profile">
-              <span class="fa-stack">
-                <i class="fa-solid fa-circle fa-stack-2x"></i>
-                <i class="fa-brands fa-dev fa-stack-1x fa-inverse"></i>
-              </span>
               <span class="d-none d-sm-none d-md-block">Dev</span>
             </a>
           </div>

docs/code/redesign/index.html

@@ -112,24 +112,12 @@ <h2 class="mt-0">What I used</h2>
           </div>
           <div class="col-12 col-md-8 text-md-end text-center">
             <a class="footer-link icon-link" href="https://www.linkedin.com/in/ajjolicoeur/" target="top" alt="View my LinkedIn profile">
-              <span class="fa-stack">
-                <i class="fa-solid fa-circle fa-stack-2x"></i>
-                <i class="fa-brands fa-linkedin fa-stack-1x fa-inverse"></i>
-              </span>
               <span class="d-none d-sm-none d-md-block">LinkedIn</span>
             </a>
             <a class="footer-link icon-link" href="https://github.com/AdamJ" target="top" alt="View my GitHub profile">
-              <span class="fa-stack">
-                <i class="fa-solid fa-circle fa-stack-2x"></i>
-                <i class="fa-brands fa-github fa-stack-1x fa-inverse"></i>
-              </span>
               <span class="d-none d-sm-none d-md-block">GitHub</span>
             </a>
             <a class="footer-link icon-link" href="https://dev.to/adamj" target="top" alt="View my Dev.to profile">
-              <span class="fa-stack">
-                <i class="fa-solid fa-circle fa-stack-2x"></i>
-                <i class="fa-brands fa-dev fa-stack-1x fa-inverse"></i>
-              </span>
               <span class="d-none d-sm-none d-md-block">Dev</span>
             </a>
           </div>

docs/contact/index.html

@@ -8,7 +8,7 @@
     <title>contact | Adam Jolicoeur</title>
     <meta
       name="description"
-      content="make first contact"
+      content="The portfolio site for Adam Jolicoeur."
     />
     <meta name="generator" content="Eleventy">
     <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
@@ -43,7 +43,7 @@
     />
     <meta
       name="og:description"
-      content="make first contact"
+      content="The portfolio site for Adam Jolicoeur."
     />
     <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" />
@@ -86,63 +86,64 @@
 <div class="container-xxl intro py-3 px-0 px-md-5 text-center">
   <h1 class="display-1 fw-bold text-break">contact</h1>
   <p class="sub-header text-break px-2 px-md-0">
-    make first contact
+    
   </p></div>
 
 <content>
   <div class="container-xxl mb-2 py-2 px-md-5">
-  <div class="row px-3 pb-3 justify-content-between gap-2">
-    <div class="col-12 col-md card mb-3 px-0">
-      <div class="row g-0">
-        <div class="col-12 col-lg-4">
-          <img src="/img/headshot-hires.jpg" class="img-fluid rounded-start" alt="Headshot image" height="150px" width="234px">
-        </div>
-        <div class="col-12 col-lg-8">
+  <div class="row">
+    <div class="col-8">
+      <div class="row mb-2">
+        <div class="">
           <div class="card-body">
-            <h5 class="card-title">LinkedIn</h5>
-            <p class="card-text">Lead Program Manager and UX Designer</p>
-            <a class="btn btn-dark" href="https://www.linkedin.com/in/ajjolicoeur/" target="top" alt="Link to my LinkedIn profile">View profile</a>
+            <h2 class="card-title">Reach out, let's connect</h2>
+            <hr />
+            <ul class="list-group pb-2">
+              <li class="list-group-item d-flex align-items-center gap-2">
+                <i class="fa-brands fa-linkedin fa-2x"></i>
+                <div class="ms-2 me-auto">
+                  <div class="fw-bold">
+                    LinkedIn
+                  </div>
+                  <a class="link-offset-2 link-offset-3-hover link-underline link-underline-opacity-0 link-underline-opacity-75-hover" href="https://www.linkedin.com/in/ajjolicoeur/" target="top" alt="Link to my LinkedIn profile">AJJolicoeur</a>
+                </div>
+              </li>
+            </ul>
+            <ul class="list-group pb-2">
+              <li class="list-group-item d-flex align-items-center gap-2">
+                <i class="fa-brands fa-github fa-2x"></i>
+                <div class="ms-2 me-auto">
+                  <div class="fw-bold">GitHub</div>
+                  <a class="link-offset-2 link-offset-3-hover link-underline link-underline-opacity-0 link-underline-opacity-75-hover" href="https://github.com/AdamJ" target="top" alt="View my GitHub profile">
+                    AdamJ
+                  </a>
+                </div>
+              </li>
+            </ul>
+            <ul class="list-group pb-2">
+              <li class="list-group-item d-flex align-items-center gap-2">
+                <i class="fa-brands fa-dev fa-2x"></i>
+                <div class="ms-2 me-auto">
+                  <div class="fw-bold">
+                    Dev
+                  </div>
+                  <a class="link-offset-2 link-offset-3-hover link-underline link-underline-opacity-0 link-underline-opacity-75-hover" href="https://dev.to/adamj" target="top" alt="Link to my Dev.To profile">AdamJ</a>
+                </div>
+              </li>
+            </ul>
           </div>
         </div>
       </div>
     </div>
-    <div class="col-12 col-md card mb-3 px-0">
-      <div class="row g-0">
-        <div class="col-12 col-lg-4">
-          <img src="/img/avatar-hires.jpg" class="img-fluid rounded-start" alt="Avatar image">
-        </div>
-        <div class="col-12 col-lg-8">
-          <div class="card-body">
-            <h5 class="card-title">GitHub</h5>
-            <p class="card-text">Follow my work in the open source community.</p>
-            <a class="btn btn-dark" href="https://github.com/AdamJ" target="top" alt="Link to my GitHub profile">View profile</a>
-          </div>
+    <div class="col-4">
+      <div class="row">
+        <div class="col-12 pb-4 text-align-center">
+          <img src="/img/headshot-hires.jpg" class="img-thumbnail img-fluid rounded" alt="Headshot image" width="50%">
         </div>
       </div>
     </div>
   </div>
 </div>
-<!-- <div class="container-xxl mb-2 py-2 px-md-5">
-  <div class="row px-3 pb-3 justify-content-center">
-    <div class="col-12 col-md-8 col-lg-6">
-      <div class="card">
-        <h5 class="card-header">
-          Contact form
-        </h5>
-        <div class="card-body">
-          <script charset="utf-8" type="text/javascript" src="//js.hsforms.net/forms/embed/v2.js"></script>
-          <script>
-            hbspt.forms.create({
-              region: "na1",
-              portalId: "39536419",
-              formId: "5a4a2b2c-734a-47e2-ad79-26ad4c69e172"
-            });
-          </script>
-        </div>
-      </div>
-    </div>
-  </div>
-</div> -->
 
 </content>
 
@@ -155,24 +156,12 @@ <h5 class="card-header">
           </div>
           <div class="col-12 col-md-8 text-md-end text-center">
             <a class="footer-link icon-link" href="https://www.linkedin.com/in/ajjolicoeur/" target="top" alt="View my LinkedIn profile">
-              <span class="fa-stack">
-                <i class="fa-solid fa-circle fa-stack-2x"></i>
-                <i class="fa-brands fa-linkedin fa-stack-1x fa-inverse"></i>
-              </span>
               <span class="d-none d-sm-none d-md-block">LinkedIn</span>
             </a>
             <a class="footer-link icon-link" href="https://github.com/AdamJ" target="top" alt="View my GitHub profile">
-              <span class="fa-stack">
-                <i class="fa-solid fa-circle fa-stack-2x"></i>
-                <i class="fa-brands fa-github fa-stack-1x fa-inverse"></i>
-              </span>
               <span class="d-none d-sm-none d-md-block">GitHub</span>
             </a>
             <a class="footer-link icon-link" href="https://dev.to/adamj" target="top" alt="View my Dev.to profile">
-              <span class="fa-stack">
-                <i class="fa-solid fa-circle fa-stack-2x"></i>
-                <i class="fa-brands fa-dev fa-stack-1x fa-inverse"></i>
-              </span>
               <span class="d-none d-sm-none d-md-block">Dev</span>
             </a>
           </div>

docs/designs/alm/index.html

@@ -215,24 +215,12 @@ <h3 class="mt-3">Prototyping</h3>
           </div>
           <div class="col-12 col-md-8 text-md-end text-center">
             <a class="footer-link icon-link" href="https://www.linkedin.com/in/ajjolicoeur/" target="top" alt="View my LinkedIn profile">
-              <span class="fa-stack">
-                <i class="fa-solid fa-circle fa-stack-2x"></i>
-                <i class="fa-brands fa-linkedin fa-stack-1x fa-inverse"></i>
-              </span>
               <span class="d-none d-sm-none d-md-block">LinkedIn</span>
             </a>
             <a class="footer-link icon-link" href="https://github.com/AdamJ" target="top" alt="View my GitHub profile">
-              <span class="fa-stack">
-                <i class="fa-solid fa-circle fa-stack-2x"></i>
-                <i class="fa-brands fa-github fa-stack-1x fa-inverse"></i>
-              </span>
               <span class="d-none d-sm-none d-md-block">GitHub</span>
             </a>
             <a class="footer-link icon-link" href="https://dev.to/adamj" target="top" alt="View my Dev.to profile">
-              <span class="fa-stack">
-                <i class="fa-solid fa-circle fa-stack-2x"></i>
-                <i class="fa-brands fa-dev fa-stack-1x fa-inverse"></i>
-              </span>
               <span class="d-none d-sm-none d-md-block">Dev</span>
             </a>
           </div>

docs/designs/customer-engagement/index.html

@@ -176,24 +176,12 @@ <h2>Navigation</h2>
           </div>
           <div class="col-12 col-md-8 text-md-end text-center">
             <a class="footer-link icon-link" href="https://www.linkedin.com/in/ajjolicoeur/" target="top" alt="View my LinkedIn profile">
-              <span class="fa-stack">
-                <i class="fa-solid fa-circle fa-stack-2x"></i>
-                <i class="fa-brands fa-linkedin fa-stack-1x fa-inverse"></i>
-              </span>
               <span class="d-none d-sm-none d-md-block">LinkedIn</span>
             </a>
             <a class="footer-link icon-link" href="https://github.com/AdamJ" target="top" alt="View my GitHub profile">
-              <span class="fa-stack">
-                <i class="fa-solid fa-circle fa-stack-2x"></i>
-                <i class="fa-brands fa-github fa-stack-1x fa-inverse"></i>
-              </span>
               <span class="d-none d-sm-none d-md-block">GitHub</span>
             </a>
             <a class="footer-link icon-link" href="https://dev.to/adamj" target="top" alt="View my Dev.to profile">
-              <span class="fa-stack">
-                <i class="fa-solid fa-circle fa-stack-2x"></i>
-                <i class="fa-brands fa-dev fa-stack-1x fa-inverse"></i>
-              </span>
               <span class="d-none d-sm-none d-md-block">Dev</span>
             </a>
           </div>

docs/designs/district25/index.html

@@ -102,24 +102,12 @@ <h1 class="display-1 fw-bold text-break">District 25 website</h1>
           </div>
           <div class="col-12 col-md-8 text-md-end text-center">
             <a class="footer-link icon-link" href="https://www.linkedin.com/in/ajjolicoeur/" target="top" alt="View my LinkedIn profile">
-              <span class="fa-stack">
-                <i class="fa-solid fa-circle fa-stack-2x"></i>
-                <i class="fa-brands fa-linkedin fa-stack-1x fa-inverse"></i>
-              </span>
               <span class="d-none d-sm-none d-md-block">LinkedIn</span>
             </a>
             <a class="footer-link icon-link" href="https://github.com/AdamJ" target="top" alt="View my GitHub profile">
-              <span class="fa-stack">
-                <i class="fa-solid fa-circle fa-stack-2x"></i>
-                <i class="fa-brands fa-github fa-stack-1x fa-inverse"></i>
-              </span>
               <span class="d-none d-sm-none d-md-block">GitHub</span>
             </a>
             <a class="footer-link icon-link" href="https://dev.to/adamj" target="top" alt="View my Dev.to profile">
-              <span class="fa-stack">
-                <i class="fa-solid fa-circle fa-stack-2x"></i>
-                <i class="fa-brands fa-dev fa-stack-1x fa-inverse"></i>
-              </span>
               <span class="d-none d-sm-none d-md-block">Dev</span>
             </a>
           </div>

docs/designs/index.html

@@ -236,24 +236,12 @@ <h5 class="card-title">Atom.io PatternFly syntax</h5>
           </div>
           <div class="col-12 col-md-8 text-md-end text-center">
             <a class="footer-link icon-link" href="https://www.linkedin.com/in/ajjolicoeur/" target="top" alt="View my LinkedIn profile">
-              <span class="fa-stack">
-                <i class="fa-solid fa-circle fa-stack-2x"></i>
-                <i class="fa-brands fa-linkedin fa-stack-1x fa-inverse"></i>
-              </span>
               <span class="d-none d-sm-none d-md-block">LinkedIn</span>
             </a>
             <a class="footer-link icon-link" href="https://github.com/AdamJ" target="top" alt="View my GitHub profile">
-              <span class="fa-stack">
-                <i class="fa-solid fa-circle fa-stack-2x"></i>
-                <i class="fa-brands fa-github fa-stack-1x fa-inverse"></i>
-              </span>
               <span class="d-none d-sm-none d-md-block">GitHub</span>
             </a>
             <a class="footer-link icon-link" href="https://dev.to/adamj" target="top" alt="View my Dev.to profile">
-              <span class="fa-stack">
-                <i class="fa-solid fa-circle fa-stack-2x"></i>
-                <i class="fa-brands fa-dev fa-stack-1x fa-inverse"></i>
-              </span>
               <span class="d-none d-sm-none d-md-block">Dev</span>
             </a>
           </div>

docs/designs/presentations/colorPicker/index.html

@@ -153,24 +153,12 @@ <h1 class="display-1 fw-bold text-break">Color Picker presentation</h1>
           </div>
           <div class="col-12 col-md-8 text-md-end text-center">
             <a class="footer-link icon-link" href="https://www.linkedin.com/in/ajjolicoeur/" target="top" alt="View my LinkedIn profile">
-              <span class="fa-stack">
-                <i class="fa-solid fa-circle fa-stack-2x"></i>
-                <i class="fa-brands fa-linkedin fa-stack-1x fa-inverse"></i>
-              </span>
               <span class="d-none d-sm-none d-md-block">LinkedIn</span>
             </a>
             <a class="footer-link icon-link" href="https://github.com/AdamJ" target="top" alt="View my GitHub profile">
-              <span class="fa-stack">
-                <i class="fa-solid fa-circle fa-stack-2x"></i>
-                <i class="fa-brands fa-github fa-stack-1x fa-inverse"></i>
-              </span>
               <span class="d-none d-sm-none d-md-block">GitHub</span>
             </a>
             <a class="footer-link icon-link" href="https://dev.to/adamj" target="top" alt="View my Dev.to profile">
-              <span class="fa-stack">
-                <i class="fa-solid fa-circle fa-stack-2x"></i>
-                <i class="fa-brands fa-dev fa-stack-1x fa-inverse"></i>
-              </span>
               <span class="d-none d-sm-none d-md-block">Dev</span>
             </a>
           </div>

docs/designs/presentations/portfolio/index.html

@@ -172,24 +172,12 @@ <h1 class="display-1 fw-bold text-break">Portfolio presentation</h1>
           </div>
           <div class="col-12 col-md-8 text-md-end text-center">
             <a class="footer-link icon-link" href="https://www.linkedin.com/in/ajjolicoeur/" target="top" alt="View my LinkedIn profile">
-              <span class="fa-stack">
-                <i class="fa-solid fa-circle fa-stack-2x"></i>
-                <i class="fa-brands fa-linkedin fa-stack-1x fa-inverse"></i>
-              </span>
               <span class="d-none d-sm-none d-md-block">LinkedIn</span>
             </a>
             <a class="footer-link icon-link" href="https://github.com/AdamJ" target="top" alt="View my GitHub profile">
-              <span class="fa-stack">
-                <i class="fa-solid fa-circle fa-stack-2x"></i>
-                <i class="fa-brands fa-github fa-stack-1x fa-inverse"></i>
-              </span>
               <span class="d-none d-sm-none d-md-block">GitHub</span>
             </a>
             <a class="footer-link icon-link" href="https://dev.to/adamj" target="top" alt="View my Dev.to profile">
-              <span class="fa-stack">
-                <i class="fa-solid fa-circle fa-stack-2x"></i>
-                <i class="fa-brands fa-dev fa-stack-1x fa-inverse"></i>
-              </span>
               <span class="d-none d-sm-none d-md-block">Dev</span>
             </a>
           </div>