From e415c0aaad802973e2291b76583010e7def69648 Mon Sep 17 00:00:00 2001 From: TJ Maynes Date: Sun, 31 Dec 2023 06:18:02 -0600 Subject: [PATCH] chore: add svg link icons from tabler-icons, move around page order --- .../{images => image}/backgrounds/404.webp | Bin .../backgrounds/contact.webp | Bin .../{images => image}/backgrounds/home.webp | Bin .../{images => image}/backgrounds/links.webp | Bin .../{images => image}/backgrounds/posts.webp | Bin src/assets/{images => image}/favicon.ico | Bin src/assets/{images => image}/me.webp | Bin src/assets/{images => image}/me2.webp | Bin .../{stylesheets => stylesheet}/style.scss | 38 +++++++------ src/assets/svg/github.svg | 1 + src/assets/svg/linkedin.svg | 1 + src/assets/svg/medium.svg | 1 + src/index.pug | 50 ++++++++++++------ webpack.config.js | 13 +++-- 14 files changed, 69 insertions(+), 35 deletions(-) rename src/assets/{images => image}/backgrounds/404.webp (100%) rename src/assets/{images => image}/backgrounds/contact.webp (100%) rename src/assets/{images => image}/backgrounds/home.webp (100%) rename src/assets/{images => image}/backgrounds/links.webp (100%) rename src/assets/{images => image}/backgrounds/posts.webp (100%) rename src/assets/{images => image}/favicon.ico (100%) rename src/assets/{images => image}/me.webp (100%) rename src/assets/{images => image}/me2.webp (100%) rename src/assets/{stylesheets => stylesheet}/style.scss (85%) create mode 100644 src/assets/svg/github.svg create mode 100644 src/assets/svg/linkedin.svg create mode 100644 src/assets/svg/medium.svg diff --git a/src/assets/images/backgrounds/404.webp b/src/assets/image/backgrounds/404.webp similarity index 100% rename from src/assets/images/backgrounds/404.webp rename to src/assets/image/backgrounds/404.webp diff --git a/src/assets/images/backgrounds/contact.webp b/src/assets/image/backgrounds/contact.webp similarity index 100% rename from src/assets/images/backgrounds/contact.webp rename to src/assets/image/backgrounds/contact.webp diff --git a/src/assets/images/backgrounds/home.webp b/src/assets/image/backgrounds/home.webp similarity index 100% rename from src/assets/images/backgrounds/home.webp rename to src/assets/image/backgrounds/home.webp diff --git a/src/assets/images/backgrounds/links.webp b/src/assets/image/backgrounds/links.webp similarity index 100% rename from src/assets/images/backgrounds/links.webp rename to src/assets/image/backgrounds/links.webp diff --git a/src/assets/images/backgrounds/posts.webp b/src/assets/image/backgrounds/posts.webp similarity index 100% rename from src/assets/images/backgrounds/posts.webp rename to src/assets/image/backgrounds/posts.webp diff --git a/src/assets/images/favicon.ico b/src/assets/image/favicon.ico similarity index 100% rename from src/assets/images/favicon.ico rename to src/assets/image/favicon.ico diff --git a/src/assets/images/me.webp b/src/assets/image/me.webp similarity index 100% rename from src/assets/images/me.webp rename to src/assets/image/me.webp diff --git a/src/assets/images/me2.webp b/src/assets/image/me2.webp similarity index 100% rename from src/assets/images/me2.webp rename to src/assets/image/me2.webp diff --git a/src/assets/stylesheets/style.scss b/src/assets/stylesheet/style.scss similarity index 85% rename from src/assets/stylesheets/style.scss rename to src/assets/stylesheet/style.scss index 2715763..0803292 100644 --- a/src/assets/stylesheets/style.scss +++ b/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; + } } } diff --git a/src/assets/svg/github.svg b/src/assets/svg/github.svg new file mode 100644 index 0000000..03e8712 --- /dev/null +++ b/src/assets/svg/github.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/assets/svg/linkedin.svg b/src/assets/svg/linkedin.svg new file mode 100644 index 0000000..3c4900d --- /dev/null +++ b/src/assets/svg/linkedin.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/assets/svg/medium.svg b/src/assets/svg/medium.svg new file mode 100644 index 0000000..ea7c79a --- /dev/null +++ b/src/assets/svg/medium.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/index.pug b/src/index.pug index 695a7f0..f401bc3 100644 --- a/src/index.pug +++ b/src/index.pug @@ -11,7 +11,7 @@ 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", @@ -19,14 +19,40 @@ html(lang="en") ) 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] diff --git a/webpack.config.js b/webpack.config.js index 992bb65..9a5a2d0 100644 --- a/webpack.config.js +++ b/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]", }, }, ],