chore: add svg link icons from tabler-icons, move around page order

src/assets/stylesheets/style.scss → src/assets/stylesheet/style.scss

@@ -90,21 +90,21 @@ header {
   display: flex;
   flex-flow: column nowrap;
   align-items: center;
+}
 
-  img {
-    margin-bottom: 30px;
-    max-width: 150px;
-    border-radius: 5em;
-    -webkit-border-radius: 5em;
-    -moz-border-radius: 5em;
-    -moz-box-shadow: 0 0 3px 3px #001219;
-    -webkit-box-shadow: 0 0 3px 3px #001219;
-    box-shadow: 0 0 3px 3px #001219;
-  }
+.profile {
+  margin-bottom: 30px;
+  max-width: 150px;
+  border-radius: 5em;
+  -webkit-border-radius: 5em;
+  -moz-border-radius: 5em;
+  -moz-box-shadow: 0 0 3px 3px #001219;
+  -webkit-box-shadow: 0 0 3px 3px #001219;
+  box-shadow: 0 0 3px 3px #001219;
 }
 
 article {
-  padding: 1.5rem 0 0.9rem 0;
+  padding: 1.5rem 0;
 
   div {
     padding-bottom: 1.5rem;
@@ -114,7 +114,8 @@ article {
     }
   }
 
-  p, li {
+  p,
+  li {
     padding-top: 6px;
   }
 
@@ -144,12 +145,17 @@ footer {
   justify-content: center;
   list-style-type: none;
   padding-top: 10px;
-  padding-bottom: 15px;
 
   li {
     padding: 0 10px;
-    margin: 0 5px;
-    border: 3px #001219 solid;
-    // background-color: #ee9b00;
+
+    &:first-child {
+      padding-left: 0;
+    }
+
+    &:last-child {
+      border: none;
+      padding-right: 0;
+    }
   }
 }

src/index.pug

@@ -11,22 +11,48 @@ html(lang="en")
     meta(name="description", content="a small website on the internet.")
     meta(name="keywords", content="TJ Maynes, tjmaynes")
     meta(name="author", content="TJ Maynes")
-    style= require("assets/stylesheets/style.scss?inline")
+    style= require("assets/stylesheet/style.scss?inline")
     script(
       src=require("assets/javascript/main.js"),
       type="text/javascript",
       defer="defer"
     )
   body
     header
-      img(
-        src=require("assets/images/me2.webp"),
+      img.profile(
+        src=require("assets/image/me2.webp"),
         width="150px",
         height="150px",
         alt="me"
       )
       h1 👋 Hi, I'm TJ Maynes.
       p Software Developer & XP Practitioner
+      nav
+        ul.links
+          li
+            a(href="https://tjmaynes.medium.com/")
+              img(
+                src=require("assets/svg/medium.svg"),
+                width="24px",
+                height="24px",
+                alt="medium blog"
+              )
+          li
+            a(href="https://github.com/tjmaynes")
+              img(
+                src=require("assets/svg/github.svg"),
+                width="24px",
+                height="24px",
+                alt="github"
+              )
+          li
+            a(href="https://linkedin.com/in/tjmaynes")
+              img(
+                src=require("assets/svg/linkedin.svg"),
+                width="24px",
+                height="24px",
+                alt="linkedin"
+              )
     main
       article
         div
@@ -35,28 +61,20 @@ html(lang="en")
             | I build web experiences at Kohl's Technology Center using TypeScript and React.
             | I'm also an Extreme Programming (XP) coach helping Kohl's engineering teams grow their XP chops.
           p I 💖 product development, developer enablement 🤝, and automating the hard things 🤖
-        div
-          h2 🚀 What I'm learning
-          p 
-            | I'm learning how to design and implement scalable #[a(href="https://nextjs.org/docs") Nextjs] web experiences 🧪.
-            | Also, learning how to compose techno music using #[a(href="https://vcvrack.com/") VCV Rack] (modular synthesis) 🎛️.
         div
           h2 👨‍🚀 Some projects I'm proud of
           ul
             li #[a(href="https://image-analyzer.tjmaynes.com") Image Analyzer] - a NextJS app that allows users to analyze images using MobileNet (via TensorflowJS), ChatGPT (for image descriptions), and Cloudflare Pages
             li #[a(href="https://github.com/tjmaynes/playbooks") Playbooks] - Ansible playbooks for managing my developer workstations across Macos & Ubuntu
             li #[a(href="https://github.com/tjmaynes/career") Career] - My resume & CV written in LaTeX
+        div
+          h2 🚀 What I'm learning
+          p
+            | I'm learning how to design and implement scalable #[a(href="https://nextjs.org/docs") Nextjs] web experiences 🧪.
+            | Also, learning how to compose techno music using #[a(href="https://vcvrack.com/") VCV Rack] (modular synthesis) 🎛️.
         div
           h2 🌍 Where I'm coding from
           p Rochester, Minnesota (Central Timezone)
     footer
-      nav
-        ul.links
-          li
-            a(href="https://tjmaynes.medium.com/") Blog
-          li
-            a(href="https://github.com/tjmaynes") GitHub
-          li
-            a(href="https://linkedin.com/in/tjmaynes") LinkedIn
       div
         p Built using #[a(href="https://github.com/tjmaynes/tjmaynes.com") Webpack & Pugjs]

webpack.config.js

@@ -23,7 +23,7 @@ module.exports = {
       },
     }),
     new CopyWebpackPlugin({
-      patterns: [{ from: "src/assets/images/favicon.ico" }],
+      patterns: [{ from: "src/assets/image/favicon.ico" }],
     }),
   ],
   module: {
@@ -40,14 +40,21 @@ module.exports = {
         test: /\.(png|jpg|jpeg|ico|webp)/,
         type: "asset/resource",
         generator: {
-          filename: "assets/images/[name].[hash:8][ext]",
+          filename: "assets/image/[name].[hash:8][ext]",
         },
       },
       {
         test: /\.(woff|woff2|eot|ttf|otf|svg)$/i,
         type: "asset/resource",
         generator: {
-          filename: "assets/fonts/[name][ext][query]",
+          filename: "assets/font/[name][ext][query]",
+        },
+      },
+      {
+        test: /\.(svg)$/i,
+        type: "asset/resource",
+        generator: {
+          filename: "assets/svg/[name][ext][query]",
         },
       },
     ],