joshfinnie · joshfinnie · Jun 15, 2023 · Jun 13, 2023 · Jun 14, 2023 · Jun 14, 2023
diff --git a/astro.config.ts b/astro.config.ts
@@ -1,4 +1,4 @@
-import { defineConfig } from "astro/config";
+import { defineConfig, sharpImageService } from "astro/config";
 
 import mdx from "@astrojs/mdx";
 import preact from "@astrojs/preact";
@@ -12,6 +12,12 @@ import rehypeSlug from 'rehype-slug'
 export default defineConfig({
   site: "https://www.joshfinnie.com/",
   trailingSlash: "always",
+  experimental: {
+    assets: true,
+  },
+  image: {
+    service: sharpImageService(),
+  },
   integrations: [mdx(), preact(), sitemap(), tailwind({
     config: {
       path: "./tailwind.config.cjs"

diff --git a/public/assets/blog/12weekyear.webp b/public/assets/blog/12weekyear.webp
diff --git a/public/assets/blog/2017.webp b/public/assets/blog/2017.webp
diff --git a/public/assets/blog/2018.webp b/public/assets/blog/2018.webp
diff --git a/public/assets/blog/IE6-blocked.webp b/public/assets/blog/IE6-blocked.webp
diff --git a/public/assets/blog/advent.webp b/public/assets/blog/advent.webp
diff --git a/public/assets/blog/arrow.webp b/public/assets/blog/arrow.webp
diff --git a/public/assets/blog/astro.webp b/public/assets/blog/astro.webp
diff --git a/public/assets/blog/bad_ux.webp b/public/assets/blog/bad_ux.webp
diff --git a/public/assets/blog/beerledge-2014-stats.webp b/public/assets/blog/beerledge-2014-stats.webp
diff --git a/public/assets/blog/bootstrap_example.webp b/public/assets/blog/bootstrap_example.webp
diff --git a/public/assets/blog/bootstrapped-hello-react.webp b/public/assets/blog/bootstrapped-hello-react.webp
diff --git a/public/assets/blog/cabin.webp b/public/assets/blog/cabin.webp
diff --git a/public/assets/blog/calendar.webp b/public/assets/blog/calendar.webp
diff --git a/public/assets/blog/chart.webp b/public/assets/blog/chart.webp
diff --git a/public/assets/blog/chrome.webp b/public/assets/blog/chrome.webp
diff --git a/public/assets/blog/coffee.webp b/public/assets/blog/coffee.webp
diff --git a/public/assets/blog/command-center.webp b/public/assets/blog/command-center.webp
diff --git a/public/assets/blog/construction.webp b/public/assets/blog/construction.webp
diff --git a/public/assets/blog/cssed-jobs-component.webp b/public/assets/blog/cssed-jobs-component.webp
diff --git a/public/assets/blog/filled-out-job-component.webp b/public/assets/blog/filled-out-job-component.webp
diff --git a/public/assets/blog/fish.webp b/public/assets/blog/fish.webp
diff --git a/public/assets/blog/fog.webp b/public/assets/blog/fog.webp
diff --git a/public/assets/blog/grave.webp b/public/assets/blog/grave.webp
diff --git a/public/assets/blog/hacktoberfest-2018.webp b/public/assets/blog/hacktoberfest-2018.webp
diff --git a/public/assets/blog/hacktoberfest-2019.webp b/public/assets/blog/hacktoberfest-2019.webp
diff --git a/public/assets/blog/hello-express.webp b/public/assets/blog/hello-express.webp
diff --git a/public/assets/blog/hello-react-component.webp b/public/assets/blog/hello-react-component.webp
diff --git a/public/assets/blog/hello-react.webp b/public/assets/blog/hello-react.webp
diff --git a/public/assets/blog/hello-world-react.webp b/public/assets/blog/hello-world-react.webp
diff --git a/public/assets/blog/hello-world.webp b/public/assets/blog/hello-world.webp
diff --git a/public/assets/blog/homepage-screenshot.webp b/public/assets/blog/homepage-screenshot.webp
diff --git a/public/assets/blog/introducing-astro.webp b/public/assets/blog/introducing-astro.webp
diff --git a/public/assets/blog/iterm_tmux_setup.webp b/public/assets/blog/iterm_tmux_setup.webp
diff --git a/public/assets/blog/jobbing.webp b/public/assets/blog/jobbing.webp
diff --git a/public/assets/blog/joshfinnie-2014-stats.webp b/public/assets/blog/joshfinnie-2014-stats.webp
diff --git a/public/assets/blog/mask.webp b/public/assets/blog/mask.webp
diff --git a/public/assets/blog/math.webp b/public/assets/blog/math.webp
diff --git a/public/assets/blog/new-social-icons.webp b/public/assets/blog/new-social-icons.webp
diff --git a/public/assets/blog/old-books.webp b/public/assets/blog/old-books.webp
diff --git a/public/assets/blog/padlock.webp b/public/assets/blog/padlock.webp
diff --git a/public/assets/blog/python.webp b/public/assets/blog/python.webp
diff --git a/public/assets/blog/reflection.webp b/public/assets/blog/reflection.webp
diff --git a/public/assets/blog/rust-react-device-analytics.webp b/public/assets/blog/rust-react-device-analytics.webp
diff --git a/public/assets/blog/rust-stack.webp b/public/assets/blog/rust-stack.webp
diff --git a/public/assets/blog/rusty-react-big-comp.webp b/public/assets/blog/rusty-react-big-comp.webp
diff --git a/public/assets/blog/rusty-react-hello-name.webp b/public/assets/blog/rusty-react-hello-name.webp
diff --git a/public/assets/blog/snake.webp b/public/assets/blog/snake.webp
diff --git a/public/assets/blog/sorting.webp b/public/assets/blog/sorting.webp
diff --git a/public/assets/blog/stars.webp b/public/assets/blog/stars.webp
diff --git a/public/assets/blog/truffles.webp b/public/assets/blog/truffles.webp
diff --git a/public/assets/blog/twitter.webp b/public/assets/blog/twitter.webp
diff --git a/public/assets/blog/typewriter.webp b/public/assets/blog/typewriter.webp
diff --git a/public/assets/blog/web-assembly-support.webp b/public/assets/blog/web-assembly-support.webp
diff --git a/public/assets/blog/wtf-recruiters-part-2.webp b/public/assets/blog/wtf-recruiters-part-2.webp
diff --git a/public/assets/josh.webp b/public/assets/josh.webp
diff --git a/public/assets/projects/beerledge-settings.webp b/public/assets/projects/beerledge-settings.webp
diff --git a/public/assets/projects/beerledge.webp b/public/assets/projects/beerledge.webp
diff --git a/public/assets/projects/cubecobra-cube-list.webp b/public/assets/projects/cubecobra-cube-list.webp
diff --git a/public/assets/projects/cubecobra.webp b/public/assets/projects/cubecobra.webp
diff --git a/public/assets/projects/hoitmc.webp b/public/assets/projects/hoitmc.webp
diff --git a/public/assets/projects/pbsorg.webp b/public/assets/projects/pbsorg.webp
diff --git a/public/assets/projects/pushfile.webp b/public/assets/projects/pushfile.webp
diff --git a/public/assets/blog/12weekyear.jpg → src/assets/blog/12weekyear.jpg b/public/assets/blog/12weekyear.jpg → src/assets/blog/12weekyear.jpg
diff --git a/public/assets/blog/2017.jpg → src/assets/blog/2017.jpg b/public/assets/blog/2017.jpg → src/assets/blog/2017.jpg
diff --git a/public/assets/blog/2018.jpg → src/assets/blog/2018.jpg b/public/assets/blog/2018.jpg → src/assets/blog/2018.jpg
diff --git a/public/assets/blog/IE6-blocked.png → src/assets/blog/IE6-blocked.png b/public/assets/blog/IE6-blocked.png → src/assets/blog/IE6-blocked.png
diff --git a/public/assets/blog/advent.jpg → src/assets/blog/advent.jpg b/public/assets/blog/advent.jpg → src/assets/blog/advent.jpg
diff --git a/public/assets/blog/arrow.jpg → src/assets/blog/arrow.jpg b/public/assets/blog/arrow.jpg → src/assets/blog/arrow.jpg
diff --git a/public/assets/blog/astro.jpg → src/assets/blog/astro.jpg b/public/assets/blog/astro.jpg → src/assets/blog/astro.jpg
diff --git a/public/assets/blog/bad_ux.png → src/assets/blog/bad_ux.png b/public/assets/blog/bad_ux.png → src/assets/blog/bad_ux.png
diff --git a/public/assets/blog/beerledge-2014-stats.png → src/assets/blog/beerledge-2014-stats.png b/public/assets/blog/beerledge-2014-stats.png → src/assets/blog/beerledge-2014-stats.png
diff --git a/public/assets/blog/bootstrap_example.png → src/assets/blog/bootstrap_example.png b/public/assets/blog/bootstrap_example.png → src/assets/blog/bootstrap_example.png
diff --git a/.../assets/blog/bootstrapped-hello-react.png → src/assets/blog/bootstrapped-hello-react.png b/.../assets/blog/bootstrapped-hello-react.png → src/assets/blog/bootstrapped-hello-react.png
diff --git a/public/assets/blog/cabin.jpg → src/assets/blog/cabin.jpg b/public/assets/blog/cabin.jpg → src/assets/blog/cabin.jpg
diff --git a/public/assets/blog/calendar.jpg → src/assets/blog/calendar.jpg b/public/assets/blog/calendar.jpg → src/assets/blog/calendar.jpg
diff --git a/public/assets/blog/chart.jpg → src/assets/blog/chart.jpg b/public/assets/blog/chart.jpg → src/assets/blog/chart.jpg
diff --git a/public/assets/blog/chrome.jpg → src/assets/blog/chrome.jpg b/public/assets/blog/chrome.jpg → src/assets/blog/chrome.jpg
diff --git a/public/assets/blog/coffee.jpg → src/assets/blog/coffee.jpg b/public/assets/blog/coffee.jpg → src/assets/blog/coffee.jpg
diff --git a/public/assets/blog/command-center.jpg → src/assets/blog/command-center.jpg b/public/assets/blog/command-center.jpg → src/assets/blog/command-center.jpg
diff --git a/public/assets/blog/construction.jpg → src/assets/blog/construction.jpg b/public/assets/blog/construction.jpg → src/assets/blog/construction.jpg
diff --git a/public/assets/blog/cssed-jobs-component.png → src/assets/blog/cssed-jobs-component.png b/public/assets/blog/cssed-jobs-component.png → src/assets/blog/cssed-jobs-component.png
diff --git a/.../assets/blog/filled-out-job-component.png → src/assets/blog/filled-out-job-component.png b/.../assets/blog/filled-out-job-component.png → src/assets/blog/filled-out-job-component.png
diff --git a/public/assets/blog/fish.jpg → src/assets/blog/fish.jpg b/public/assets/blog/fish.jpg → src/assets/blog/fish.jpg
diff --git a/public/assets/blog/fog.jpg → src/assets/blog/fog.jpg b/public/assets/blog/fog.jpg → src/assets/blog/fog.jpg
diff --git a/public/assets/blog/grave.jpg → src/assets/blog/grave.jpg b/public/assets/blog/grave.jpg → src/assets/blog/grave.jpg
diff --git a/public/assets/blog/hacktoberfest-2018.jpg → src/assets/blog/hacktoberfest-2018.jpg b/public/assets/blog/hacktoberfest-2018.jpg → src/assets/blog/hacktoberfest-2018.jpg
diff --git a/public/assets/blog/hacktoberfest-2019.jpg → src/assets/blog/hacktoberfest-2019.jpg b/public/assets/blog/hacktoberfest-2019.jpg → src/assets/blog/hacktoberfest-2019.jpg
diff --git a/public/assets/blog/hello-express.png → src/assets/blog/hello-express.png b/public/assets/blog/hello-express.png → src/assets/blog/hello-express.png
diff --git a/public/assets/blog/hello-react-component.png → src/assets/blog/hello-react-component.png b/public/assets/blog/hello-react-component.png → src/assets/blog/hello-react-component.png
diff --git a/public/assets/blog/hello-react.png → src/assets/blog/hello-react.png b/public/assets/blog/hello-react.png → src/assets/blog/hello-react.png
diff --git a/public/assets/blog/hello-world-react.png → src/assets/blog/hello-world-react.png b/public/assets/blog/hello-world-react.png → src/assets/blog/hello-world-react.png
diff --git a/public/assets/blog/hello-world.png → src/assets/blog/hello-world.png b/public/assets/blog/hello-world.png → src/assets/blog/hello-world.png
diff --git a/public/assets/blog/homepage-screenshot.png → src/assets/blog/homepage-screenshot.png b/public/assets/blog/homepage-screenshot.png → src/assets/blog/homepage-screenshot.png
diff --git a/public/assets/blog/introducing-astro.jpg → src/assets/blog/introducing-astro.jpg b/public/assets/blog/introducing-astro.jpg → src/assets/blog/introducing-astro.jpg
diff --git a/public/assets/blog/iterm_tmux_setup.png → src/assets/blog/iterm_tmux_setup.png b/public/assets/blog/iterm_tmux_setup.png → src/assets/blog/iterm_tmux_setup.png
diff --git a/public/assets/blog/jobbing.jpg → src/assets/blog/jobbing.jpg b/public/assets/blog/jobbing.jpg → src/assets/blog/jobbing.jpg
diff --git a/public/assets/blog/joshfinnie-2014-stats.png → src/assets/blog/joshfinnie-2014-stats.png b/public/assets/blog/joshfinnie-2014-stats.png → src/assets/blog/joshfinnie-2014-stats.png
diff --git a/public/assets/blog/mask.jpg → src/assets/blog/mask.jpg b/public/assets/blog/mask.jpg → src/assets/blog/mask.jpg
diff --git a/public/assets/blog/math.jpg → src/assets/blog/math.jpg b/public/assets/blog/math.jpg → src/assets/blog/math.jpg
diff --git a/public/assets/blog/new-social-icons.png → src/assets/blog/new-social-icons.png b/public/assets/blog/new-social-icons.png → src/assets/blog/new-social-icons.png
diff --git a/public/assets/blog/old-books.jpg → src/assets/blog/old-books.jpg b/public/assets/blog/old-books.jpg → src/assets/blog/old-books.jpg
diff --git a/public/assets/blog/padlock.jpg → src/assets/blog/padlock.jpg b/public/assets/blog/padlock.jpg → src/assets/blog/padlock.jpg
diff --git a/public/assets/blog/python.jpg → src/assets/blog/python.jpg b/public/assets/blog/python.jpg → src/assets/blog/python.jpg
diff --git a/public/assets/blog/reflection.jpg → src/assets/blog/reflection.jpg b/public/assets/blog/reflection.jpg → src/assets/blog/reflection.jpg
diff --git a/...sets/blog/rust-react-device-analytics.png → ...sets/blog/rust-react-device-analytics.png b/...sets/blog/rust-react-device-analytics.png → ...sets/blog/rust-react-device-analytics.png
diff --git a/public/assets/blog/rust-stack.jpg → src/assets/blog/rust-stack.jpg b/public/assets/blog/rust-stack.jpg → src/assets/blog/rust-stack.jpg
diff --git a/public/assets/blog/rusty-react-big-comp.png → src/assets/blog/rusty-react-big-comp.png b/public/assets/blog/rusty-react-big-comp.png → src/assets/blog/rusty-react-big-comp.png
diff --git a/...ic/assets/blog/rusty-react-hello-name.png → src/assets/blog/rusty-react-hello-name.png b/...ic/assets/blog/rusty-react-hello-name.png → src/assets/blog/rusty-react-hello-name.png
diff --git a/public/assets/blog/snake.jpg → src/assets/blog/snake.jpg b/public/assets/blog/snake.jpg → src/assets/blog/snake.jpg
diff --git a/public/assets/blog/sorting.jpg → src/assets/blog/sorting.jpg b/public/assets/blog/sorting.jpg → src/assets/blog/sorting.jpg
diff --git a/public/assets/blog/stars.jpg → src/assets/blog/stars.jpg b/public/assets/blog/stars.jpg → src/assets/blog/stars.jpg
diff --git a/public/assets/blog/truffles.jpg → src/assets/blog/truffles.jpg b/public/assets/blog/truffles.jpg → src/assets/blog/truffles.jpg
diff --git a/public/assets/blog/twitter.jpg → src/assets/blog/twitter.jpg b/public/assets/blog/twitter.jpg → src/assets/blog/twitter.jpg
diff --git a/public/assets/blog/typewriter.jpg → src/assets/blog/typewriter.jpg b/public/assets/blog/typewriter.jpg → src/assets/blog/typewriter.jpg
diff --git a/public/assets/blog/web-assembly-support.png → src/assets/blog/web-assembly-support.png b/public/assets/blog/web-assembly-support.png → src/assets/blog/web-assembly-support.png
diff --git a/public/assets/blog/wtf-recruiters-part-2.png → src/assets/blog/wtf-recruiters-part-2.png b/public/assets/blog/wtf-recruiters-part-2.png → src/assets/blog/wtf-recruiters-part-2.png
diff --git a/src/assets/icons/angularjs.png b/src/assets/icons/angularjs.png
diff --git a/src/assets/icons/aws.png b/src/assets/icons/aws.png
diff --git a/src/assets/icons/bootstrap.png b/src/assets/icons/bootstrap.png
diff --git a/src/assets/icons/digital-ocean.png b/src/assets/icons/digital-ocean.png
diff --git a/src/assets/icons/django.png b/src/assets/icons/django.png
diff --git a/src/assets/icons/foursquare.png b/src/assets/icons/foursquare.png
diff --git a/src/assets/icons/github.png b/src/assets/icons/github.png
diff --git a/src/assets/icons/golang.png b/src/assets/icons/golang.png
diff --git a/src/assets/icons/google.png b/src/assets/icons/google.png
diff --git a/src/assets/icons/nodejs.png b/src/assets/icons/nodejs.png
diff --git a/src/assets/icons/python.png b/src/assets/icons/python.png
diff --git a/src/assets/icons/reactjs.png b/src/assets/icons/reactjs.png
diff --git a/src/assets/icons/sass.png b/src/assets/icons/sass.png
diff --git a/public/assets/josh.jpg → src/assets/josh.jpg b/public/assets/josh.jpg → src/assets/josh.jpg
diff --git a/...ic/assets/projects/beerledge-settings.png → src/assets/projects/beerledge-settings.png b/...ic/assets/projects/beerledge-settings.png → src/assets/projects/beerledge-settings.png
diff --git a/public/assets/projects/beerledge.png → src/assets/projects/beerledge.png b/public/assets/projects/beerledge.png → src/assets/projects/beerledge.png
diff --git a/...c/assets/projects/cubecobra-cube-list.png → src/assets/projects/cubecobra-cube-list.png b/...c/assets/projects/cubecobra-cube-list.png → src/assets/projects/cubecobra-cube-list.png
diff --git a/public/assets/projects/cubecobra.png → src/assets/projects/cubecobra.png b/public/assets/projects/cubecobra.png → src/assets/projects/cubecobra.png
diff --git a/public/assets/projects/hoitmc.png → src/assets/projects/hoitmc.png b/public/assets/projects/hoitmc.png → src/assets/projects/hoitmc.png
diff --git a/public/assets/projects/pbsorg.png → src/assets/projects/pbsorg.png b/public/assets/projects/pbsorg.png → src/assets/projects/pbsorg.png
diff --git a/public/assets/projects/pushfile.png → src/assets/projects/pushfile.png b/public/assets/projects/pushfile.png → src/assets/projects/pushfile.png
diff --git a/src/content/blog/svg/job-sankey.svg → src/assets/svg/job-sankey.svg b/src/content/blog/svg/job-sankey.svg → src/assets/svg/job-sankey.svg
diff --git a/src/components/AlsoLike.astro b/src/components/AlsoLike.astro
@@ -1,5 +1,5 @@
 ---
-import { collectionEntry, getCollection } from 'astro:content';
+import { CollectionEntry, getCollection } from 'astro:content';
 
 import BlogPostPreviewLite from './BlogPostPreviewLite.astro'
 
@@ -28,7 +28,9 @@ const posts = allPosts
 
 ---
 
-<div class="prose dark:prose-invert mt-5 p-5 rounded-lg max-w-none bg-gray-200 dark:bg-gray-900">
-    <h2 class="text-center">You might also enjoy?</h2>
-    {posts.map((post) => <BlogPostPreviewLite {post} />)}
-</div>
+{posts.length ?
+    <div class="prose dark:prose-invert mt-5 p-5 rounded-lg max-w-none bg-gray-200 dark:bg-gray-900">
+        <h2 class="text-center">You might also enjoy?</h2>
+        {posts.map((post) => <BlogPostPreviewLite {post} />)}
+    </div> : <></>
+}
diff --git a/src/components/BlogPost.astro b/src/components/BlogPost.astro
@@ -1,15 +1,18 @@
 ---
+import { Image } from "astro:assets";
+
 import AlsoLike from "./AlsoLike.astro";
 import Date from "./Date.astro";
 import Tag from "./Tags.astro";
 import Unsplash from "./Unsplash.astro";
+import HeroImage from './BlogPostHeroImage.astro';
 
 const { title, date, tags, slug, heroImage, unsplash, unsplashURL } = Astro.props;
 ---
 
 <article>
   <header>
-    {heroImage && <img class="rounded-md" src={heroImage.replace("jpg", "webp")} alt={title} />}
+    <HeroImage title={title} heroImage={heroImage} />
     <div id="main-content" class="flex flex-col items-center mb-10 max-w-none prose dark:prose-invert">
       <h1 class="font-bold text-4xl mb-5 mt-5" set:html={title}></h1>
       <Date {date} />

diff --git a/src/components/BlogPostHeroImage.astro b/src/components/BlogPostHeroImage.astro
@@ -0,0 +1,7 @@
+---
+import { Image } from 'astro:assets';
+
+const { title, heroImage } = Astro.props;
+---
+
+{heroImage && <Image class="rounded-md" src={heroImage} alt={title} width="780" />}
diff --git a/src/components/BlogPostPreview.astro b/src/components/BlogPostPreview.astro
@@ -1,5 +1,7 @@
 ---
+import { Image } from "astro:assets";
 import Date from "./Date.astro";
+import HeroImage from './BlogPostHeroImage.astro';
 
 const { post } = Astro.props;
 ---
@@ -15,7 +17,7 @@ const { post } = Astro.props;
         {post.data.heroImage ?
          <>
              <a href={`/blog/${post.slug}/`} title={post.data.title}>
-                 <img src={post.data.heroImage.replace("jpg", "webp")} alt={post.data.title} class="rounded-md" />
+                 <HeroImage title={post.data.title} heroImage={post.data.heroImage} />
              </a>
          </> :
          <>

diff --git a/src/components/Hero.astro b/src/components/Hero.astro
@@ -1,5 +1,10 @@
+---
+import { Image } from "astro:assets";
+
+import headshot from "@assets/josh.jpg";
+---
 <div id="main-content" class="flex flex-col sm:flex-row my-10 items-center bg-gray-200 dark:bg-gray-900 dark:text-white p-5 shadow-lg rounded-lg">
-  <img class="rounded-lg flex-none w-1/4 h-1/4" src="/assets/josh.webp" alt="Josh Finnie Headshot" />
+  <Image class="rounded-lg flex-none w-1/4 h-1/4" src={headshot} alt="Josh Finnie Headshot" width="175" />
   <div class="flex-grow">
     <h1 class="font-bold text-2xl my-5 ml-5">Hello, I am Josh!</h1>
     <p class="prose max-w-none ml-5 dark:prose-invert">

diff --git a/src/components/ProjectHero.astro b/src/components/ProjectHero.astro
@@ -1,9 +1,11 @@
 ---
+import { Image } from "astro:assets";
+
 const {title, heroImage, summary, technologies} = Astro.props;
 ---
 <h1 class="font-bold text-3xl mb-10 mt-5 dark:text-white">{title}</h1>
 <hr class="my-2">
-{ heroImage && <img src={heroImage} alt={title} /> }
+{ heroImage && <Image src={heroImage} alt={title} /> }
 <p class="dark:text-white">{ summary }</p>
 <div class="mt-5 flex gap-5 justify-center items-center dark:text-white">
     <span class="font-bold">Technologies Used:</span>

diff --git a/src/content/blog/2014_in_review.md → src/content/blog/2014_in_review.mdx b/src/content/blog/2014_in_review.md → src/content/blog/2014_in_review.mdx
@@ -9,6 +9,9 @@ slug: "2014-in-review"
 expires: false
 ---
 
+import beerLedge from '@assets/blog/beerledge-2014-stats.png';
+import joshFinnie from '@assets/blog/joshfinnie-2014-stats.png';
+
 Better late than never, I wanted to give a personal 2014 Year in Review.
 And what a year this has been!
 I changed jobs, got married, double-downed on my open source efforts...
@@ -22,11 +25,11 @@ I hope this becomes a place for reflection in the upcoming years, so here it goe
 - 1 new wife. I was finally able to marry the woman of my dreams after 10 years of being together and 4 years of engagement! Woot!
 - Pretty good adoption of [BeerLedge](https://www.beerledge.com). Even though I am hoping for 2015 to be the breakout year for BeerLedge, I was excited by the improvements it was.
 
-<img width="100%" loading="lazy" src="/assets/blog/beerledge-2014-stats.png" alt="beerledge.com analytics stats" />
+<img src={beerLedge.src} alt="beerledge.com analytics stats" />
 
 - Similarly good adoption of this site. My [goal](/blog/new-years-resolutions-for-2015-and-2014-review/) is to blog a lot more, so hopefully that number goes up drastically!
 
-<img width="100%" loading="lazy" src="/assets/blog/joshfinnie-2014-stats.png" alt="joshfinnie.com analytics stats" />
+<img src={joshFinnie.src} alt="joshfinnie.com analytics stats" />
 
 - I had about 750 commits to open-source projects in 2014 with another 400 commits to private repos on GitHub.
 - I gave [5 talks](/talks/) in 2014.

diff --git a/src/content/blog/a-command-line-application-in-rust.md b/src/content/blog/a-command-line-application-in-rust.md
@@ -6,7 +6,7 @@ tags:
   - "command-line"
   - "tutorial"
 slug: "a-command-line-application-in-rust"
-heroImage: "/assets/blog/command-center.jpg"
+heroImage: "@assets/blog/command-center.jpg"
 unsplash: "Ugi K."
 unsplashURL: "wizzyfx"
 description: "In this blog post we start from scratch and write a full command-line application written in Rust. We use Clap for argument parsing, and Reqwest for hitting the API."

diff --git a/src/content/blog/banning_ie6.md → src/content/blog/banning_ie6.mdx b/src/content/blog/banning_ie6.md → src/content/blog/banning_ie6.mdx
@@ -8,11 +8,12 @@ tags:
 slug: "banning-ie6"
 expires: true
 ---
-
-<img width="100%" loading="lazy" src="/assets/blog/IE6-blocked.png" alt="IE6 is blocked" />
+import ie6Blocked from '@assets/blog/IE6-blocked.png';
 
 I really don’t understand why people have decided that I am not allowed to see their website. Sure, I understand that IE6 is overly out-of-date, but there has to be a reason that I am running it. For example, my office has not upgraded yet; so because of that I am not allowed to see your site?
 
+<img src={ie6Blocked.src} alt="IE6 is blocked" />
+
 Given the fact that IE in general has a lot of little hacks required to make a website look good, I come to your websites with an understanding that my view of your website might not be ideal. I even understand that I might not have all the functionality that I should given how IE reacts to javascript and your beautiful ajax-y stuff. But I like content. I don’t run javascript; I don’t run flash. But you don’t have a problem with that. Just that I run IE6.
 
 Stop with this trend of blocking IE6 and allow people, who most likely understand that they are running an out-of-date browser but can’t do anything about it, to read the content that you worked so hard to write! Please?
diff --git a/src/content/blog/basic-python-dockerfile.md b/src/content/blog/basic-python-dockerfile.md
@@ -7,7 +7,7 @@ tags:
   - "open-source"
   - "tutorial"
 slug: "my-basic-python-dockerfile"
-heroImage: "/assets/blog/python.jpg"
+heroImage: "@assets/blog/python.jpg"
 expires: true
 unsplash: "Marius Masalar"
 unsplashURL: "marius"

diff --git a/...tent/blog/book-review-the-12-week-year.md → ...ent/blog/book-review-the-12-week-year.mdx b/...tent/blog/book-review-the-12-week-year.md → ...ent/blog/book-review-the-12-week-year.mdx
@@ -7,16 +7,18 @@ tags:
   - "book-review"
   - "self-help"
 slug: "book-review-the-12-week-year"
-heroImage: "/assets/blog/calendar.jpg"
+heroImage: "@assets/blog/calendar.jpg"
 unsplash: "Debby Hudson"
 unsplashURL: "hudsoncrafted"
 ---
 
+import bookCover from '@assets/blog/12weekyear.jpg'
+
 As October approachs I usually start thinking of my New Year resolutions. However, a few months ago I read [The 12 Week Year](https://www.goodreads.com/book/show/10009377-the-12-week-year) and it changed my thoughts on resolutions. Below are some of my thoughts on this book and how I plan on integrating the lessons learned.
 
 ## Review
 
-<img src="/assets/blog/12weekyear.jpg" alt="The 12 Week Year" class="mx-auto"/>
+<img src={bookCover.src} alt="The 12 Week Year" class="mx-auto"/>
 
 The 12 Week Year is a mindset change where one seeks quarterly goal setting as a solution to the drawbacks of annual resolutions. It’s right there in the title. Take your annual New Year resolutions and break them down into 4 “12 week years” to give a larger sense of urgency to your goals. I have had my fair share of failures among my New Year resolutions, so this book spoke to my issues! When you break your goals down to 12 weeks, you don’t have the ability to become complacent with your goals. Time is short; you need to constantly work on completing your goals in the given 12 weeks. We’ve all been there, we set our New Year resolutions and then forget about them until October. You race to complete some of them, but also realize that many of those resolutions were scoped impossibly large. You have destined yourself for failure. But when you scope your goals to 12 weeks, every passing day creates a sense of urgency to complete what you’ve set out to do.
 

diff --git a/src/content/blog/chrome-extensions-i-use-in-2022.md b/src/content/blog/chrome-extensions-i-use-in-2022.md
@@ -6,7 +6,7 @@ tags:
   - "extensions"
   - "setup"
 slug: "chrome-extensions-i-use-in-2022"
-heroImage: "/assets/blog/chrome.webp"
+heroImage: "@assets/blog/chrome.jpg"
 unsplash: "Lucian Alexe"
 unsplashURL: "lucian_alexe"
 description: "Showing off my top Chrome extensions for 2022."

diff --git a/src/content/blog/creating-a-also-enjoy-component.md b/src/content/blog/creating-a-also-enjoy-component.md
@@ -7,7 +7,7 @@ tags:
   - "tutorial"
   - "web-development"
 slug: "creating-a-similar-posts-component-in-astrojs"
-heroImage: "/assets/blog/reflection.jpg"
+heroImage: "@assets/blog/reflection.jpg"
 unsplash: "Tim Stief"
 unsplashURL: "timstief"
 description: "This blog post shares my Astro.js component to share similar posts to readers. It's nice, simple and gives an extra layer of discoverability to my readers!"

diff --git a/src/content/blog/current-thoughts-on-mobile-website-support.md b/src/content/blog/current-thoughts-on-mobile-website-support.md
@@ -7,7 +7,7 @@ tags:
   - "web design"
   - "lesson"
 slug: "current-thoughts-on-mobile-website-support"
-heroImage: "/assets/blog/chart.jpg"
+heroImage: "@assets/blog/chart.jpg"
 unsplash: "Jess Bailey"
 unsplashURL: "jessbaileydesigns"
 description: "I recently had a viral blog post and I wanted to share a surprising discovery of the current state of mobile website support! Over the course of the month, nearly 50% of my visitors were using a mobile browswer of some sort. What does this mean for me going forward?"

diff --git a/src/content/blog/font_awesome_is_awesome.md → src/content/blog/font_awesome_is_awesome.mdx b/src/content/blog/font_awesome_is_awesome.md → src/content/blog/font_awesome_is_awesome.mdx
@@ -10,6 +10,9 @@ slug: "font-awesome-is-awesome"
 expires: true
 ---
 
+import homepageScreenshot from '@assets/blog/homepage-screenshot.png';
+import newSocialIcons from '@assets/blog/new-social-icons.png';
+
 ## Help a Programmer Out
 
 I do not call myself a designer by any stretch of the imagination. And this site is a testiment to that fact. However, I do try and make it somewhat pretty and with [Twitter Bootstrap](http://getbootstrap.com/) it is easier than ever. Today I made a little change to my site using another awesome library, [Font Awesome](http://fontawesome.io/). From my understanding, this is a iconic font designed for Bootstrap. Perfect.
@@ -18,7 +21,7 @@ I do not call myself a designer by any stretch of the imagination. And this site
 
 The change is small, but using Font Awesome I was able to get rid of the 8 images that were used on my homepage.
 
-<img width="100%" loading="lazy" src="/assets/blog/homepage-screenshot.png" alt="Fontawesome test screenshot" />
+<img src={homepageScreenshot.src} alt="Fontawesome test screenshot" />
 
 The four awesome social network icons were provided by [Neil Orange Peel](http://www.neilorangepeel.com/free-social-icons/), but with images comes a lot of weight to your network connection. Each icon has two states, its normal state and a hover state. This means that there are 8 images for this simple visual representation.
 
@@ -71,7 +74,7 @@ This gives me all the power granted with using Font Awesome. Reading through the
 
 This code gives me a very nice copy of the icons I was using before:
 
-<img width="100%" loading="lazy" src="/assets/blog/new-social-icons.png" alt="Fontawesom social icon example" />
+<img src={newSocialIcons.src} alt="Fontawesom social icon example" />
 
 They are very similar to what I had, except of course the different icons for [Github](http://github.com). This is unfortunate since I kind of really enjoyed Niel Orange Peel's version better than Font Awesome's version. Oh well.
 

diff --git a/src/content/blog/getting-truffle-and-ganache-working-with-docker.md b/src/content/blog/getting-truffle-and-ganache-working-with-docker.md
@@ -6,7 +6,7 @@ tags:
   - "docker"
   - "tutorial"
 slug: "getting-truffle-and-ganache-working-with-docker"
-heroImage: "/assets/blog/truffles.jpg"
+heroImage: "@assets/blog/truffles.jpg"
 unsplash: "Jessica Loaiza"
 unsplashURL: "jessicaloaizar"
 description: "I recently had an issue installing Truffle locally on my computer. There was an issue with my version of Node.js or NPM... Instead of messing up or polluting my global NPM installs further, I took to Docker to get Truffle and Ganache working for me. This post details that journey."

diff --git a/src/content/blog/hacktoberfest-is-awesome.md b/src/content/blog/hacktoberfest-is-awesome.md
@@ -6,7 +6,7 @@ tags:
   - "hacktoberfest"
   - "coding"
 slug: "hacktoberfest-is-awesome-2"
-heroImage: "/assets/blog/hacktoberfest-2019.jpg"
+heroImage: "@assets/blog/hacktoberfest-2019.jpg"
 expires: false
 ---
 

diff --git a/src/content/blog/i_am_still_here.md b/src/content/blog/i_am_still_here.md
@@ -6,7 +6,7 @@ tags:
   - "update"
 slug: "still-here"
 expires: true
-heroImage: "/assets/blog/fog.jpg"
+heroImage: "@assets/blog/fog.jpg"
 unsplash: "Nicholas Kampouris"
 ---
 

diff --git a/src/content/blog/isort-setup.md b/src/content/blog/isort-setup.md
@@ -7,7 +7,7 @@ tags:
   - "coding"
   - "code-review"
 slug: "my-basic-isort-configuration"
-heroImage: "/assets/blog/sorting.jpg"
+heroImage: "@assets/blog/sorting.jpg"
 expires: true
 unsplash: "Sophie Elvis"
 unsplashURL: "thetechomaid"

diff --git a/src/content/blog/job-search-journey.mdx b/src/content/blog/job-search-journey.mdx
@@ -7,13 +7,13 @@ tags:
   - "news"
   - "recruiters"
 slug: "my-2023-job-search-journey"
-heroImage: "/assets/blog/jobbing.jpg"
+heroImage: "@assets/blog/jobbing.jpg"
 unsplash: "Andrew Neel"
 unsplashURL: "andrewtneel"
 description: "A brief review of my job search journey in the 2023 market. I applied to over 150 jobs and it was exhausting!"
 ---
 
-import sankey from './svg/job-sankey.svg';
+import sankey from '@assets/svg/job-sankey.svg';
 
 The job market for software engineers in 2023 will be one to remember.
 Not only are we witnessing a record number of large software companies like Google and Facebook laying off tens of percentages of their staff, but we are also witnessing a drying up of access to monetary resources, leading startups to experience slow growth or downsize.
@@ -147,8 +147,7 @@ I am still getting some rejections trickling in, so the "Never Heard Anything" c
 
 ### My Journey Visually
 
-<img src={sankey} />
-
+<img src={sankey.src} alt="Sankey diagram of job search journey" />
 
 ## An Aside
 

diff --git a/src/content/blog/latex-through-docker.md b/src/content/blog/latex-through-docker.md
@@ -9,7 +9,7 @@ tags:
   - "tutorial"
   - "projects"
 slug: "latex-through-docker"
-heroImage: "/assets/blog/math.jpg"
+heroImage: "@assets/blog/math.jpg"
 expires: true
 unsplash: "Roman Mager"
 unsplashURL: "roman_lazygeek"

diff --git a/src/content/blog/leaving-twitter-for-mastodon.md b/src/content/blog/leaving-twitter-for-mastodon.md
@@ -7,7 +7,7 @@ tags:
   - "twitter"
   - "mastodon"
 slug: "leaving-twitter-for-mastodon"
-heroImage: "/assets/blog/twitter.jpg"
+heroImage: "@assets/blog/twitter.jpg"
 unsplash: "Gauravdeep Singh Bansal"
 unsplashURL: "gauravdsb"
 description: "Twitter has had a rough couple of weeks since Elon Musk took over. I feel like it is time this tweeter flew the coop and found a new place to build a community. This post talks briefly about what Mastodon is and how I set myself up for success."

diff --git a/src/content/blog/moving-from-oh-my-zsh-to-starship-and-fish-shell.md b/src/content/blog/moving-from-oh-my-zsh-to-starship-and-fish-shell.md
@@ -7,7 +7,7 @@ tags:
   - "fish shell"
   - "starship"
 slug: "moving-from-oh-my-zsh-to-starship-and-fish-shell"
-heroImage: "/assets/blog/fish.jpg"
+heroImage: "@assets/blog/fish.jpg"
 unsplash: "Milos Prelevic"
 unsplashURL: "prelevicm"
 description: "I changed my prompt configurator from Oh-My-Zsh to Starship.rs and with that changed my shell to Fish. This blog post tells the story of my upgrade and the pitfalls and benefits of moving to Fish Shell."

diff --git a/...ent/blog/my-2020-react-startup-process.md → ...nt/blog/my-2020-react-startup-process.mdx b/...ent/blog/my-2020-react-startup-process.md → ...nt/blog/my-2020-react-startup-process.mdx
@@ -6,12 +6,14 @@ tags:
   - "react.js"
   - "tutorial"
 slug: "my-2020-react-startup-process"
-heroImage: "/assets/blog/typewriter.jpg"
+heroImage: "@assets/blog/typewriter.jpg"
 expires: true
 unsplash: "RetroSuppy"
 unsplashURL: "retrosupply"
 ---
 
+import helloWorld from '@assets/blog/hello-world.png';
+
 Over the past couple of years I have narrowed my frontend workflow to React with Typescript. There are a lot of frameworks that are fighting for the top spot of one's frontend workflow. In the end, I am most comfortable with React for rapid development so it is the one I will focus on here. In this blog post I will walk through my 2020 React workflow. This post will help you get up and running with the same setup that I am currently using.
 
 ## Installing React with Typescript
@@ -26,7 +28,7 @@ $ npm start
 
 This is a screenshot of what see with when we visit http://localhost:3000 after running the above commands.
 
-<img width="100%" loading='lazy' src='/assets/blog/hello-world.png' alt="React's Hello World!" />
+<img src={helloWorld.src} alt="React's Hello World!" />
 
 ## Installing ESLint/Prettier
 

diff --git a/src/content/blog/my-2021-books-in-review.md b/src/content/blog/my-2021-books-in-review.md
@@ -6,7 +6,7 @@ tags:
   - "books"
   - "book-review"
 slug: "my-2021-books-in-review"
-heroImage: "/assets/blog/old-books.jpg"
+heroImage: "@assets/blog/old-books.jpg"
 unsplash: "Chris Lawton"
 unsplashURL: "chrislawton"
 description: "This is a review of the books I read in 2021 and which ones I'd recommend giving a try."

diff --git a/src/content/blog/my-switch-from-gatsby-to-astro.md b/src/content/blog/my-switch-from-gatsby-to-astro.md
@@ -10,7 +10,7 @@ tags:
 slug: "my-switch-from-gatsby-to-astro"
 unsplashURL: denisdegioanni
 unsplash: Denis Degioanni
-heroImage: "/assets/blog/stars.jpg"
+heroImage: "@assets/blog/stars.jpg"
 ---
 
 A while ago I switched from using [Pelican](https://blog.getpelican.com/) (a static site generator written in Python) to [Gatsby](https://www.gatsbyjs.com/). I was drawn to the up-and-coming technology Gatsby promised. I also thought it was a good time to refresh my site with updated CSS and user experience. The conversion to Gatsby was a success. The documentation built by the Gatsby team was top-notch and I loved my experience with it. Yet, there was always an underlying feeling that the infrastructure was complex and overweight. Earlier this year, we had a team lunch-and-learn on [Astro](https://astro.build/), and the pitch spoke to me.

diff --git a/src/content/blog/my_coffee_setup.md b/src/content/blog/my_coffee_setup.md
@@ -6,7 +6,7 @@ tags:
   - "non-tech"
   - "setup"
 slug: "my-coffee-setup"
-heroImage: "/assets/blog/coffee.jpg"
+heroImage: "@assets/blog/coffee.jpg"
 expires: false
 unsplash: "Mike Kenneally"
 ---

diff --git a/src/content/blog/new_years_resolutions_for_2017_and_2016_review.md b/src/content/blog/new_years_resolutions_for_2017_and_2016_review.md
@@ -7,7 +7,7 @@ tags:
   - "open-source"
   - "programming"
 slug: "new-years-resolutions-for-2017-and-2016-review"
-heroImage: "/assets/blog/2017.jpg"
+heroImage: "@assets/blog/2017.jpg"
 expires: false
 unsplash: "freestock.org"
 ---