redesign c:

.astro/settings.json

@@ -1,5 +1,8 @@
 {
 	"devToolbar": {
 		"enabled": false
+	},
+	"_variables": {
+		"lastUpdateCheck": 1716930083693
 	}
 }

.prettierrc.mjs

@@ -0,0 +1,13 @@
+// .prettierrc.mjs
+/** @type {import("prettier").Config} */
+export default {
+  plugins: ["prettier-plugin-astro"],
+  overrides: [
+    {
+      files: "*.astro",
+      options: {
+        parser: "astro",
+      },
+    },
+  ],
+};

astro.config.mjs

@@ -3,13 +3,14 @@ import mdx from "@astrojs/mdx";
 import sitemap from "@astrojs/sitemap";
 
 import tailwind from "@astrojs/tailwind";
+import syntaxTheme from "./syntax-theme.json";
 
 // https://astro.build/config
 export default defineConfig({
   site: "https://zackmyers.io",
   markdown: {
     shikiConfig: {
-      theme: "catppuccin-frappe",
+      theme: syntaxTheme,
     },
   },
   integrations: [mdx(), sitemap(), tailwind()],

package.json

@@ -21,6 +21,8 @@
   },
   "devDependencies": {
     "@catppuccin/tailwindcss": "^0.1.6",
-    "@tailwindcss/typography": "^0.5.12"
+    "@tailwindcss/typography": "^0.5.12",
+    "prettier": "^3.2.5",
+    "prettier-plugin-astro": "^0.14.0"
   }
 }

src/components/BaseHead.astro

@@ -1,7 +1,7 @@
 ---
 // Import the global.css file here so that it is included on
 // all pages through the use of the <BaseHead /> component.
-import '../styles/global.css';
+import "../styles/global.css";
 
 interface Props {
   title: string;
@@ -11,7 +11,7 @@ interface Props {
 
 const canonicalURL = new URL(Astro.url.pathname, Astro.site);
 
-const { title, description, image = '/blog-placeholder-2.jpg' } = Astro.props;
+const { title, description, image = "/blog-placeholder-2.jpg" } = Astro.props;
 ---
 
 <!-- Global Metadata -->
@@ -20,7 +20,7 @@ const { title, description, image = '/blog-placeholder-2.jpg' } = Astro.props;
 <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
 <meta name="generator" content={Astro.generator} />
 
-<link rel="stylesheet" href="/fonts/Iosevka.css">
+<link rel="stylesheet" href="/fonts/Iosevka.css" />
 
 <!-- Canonical URL -->
 <link rel="canonical" href={canonicalURL} />

src/components/Footer.astro

@@ -2,12 +2,18 @@
 const today = new Date();
 ---
 
-<footer>
+<footer class="flex flex-col items-center w-full">
+  <p>
     &copy; {today.getFullYear()} Zachary Myers. All rights reserved.
-	<div class="social-links">
+    <div class="flex mt-4 space-x-3">
       <a href="https://twitter.com/_zackartz" target="_blank">
         <span class="sr-only">Follow Zack on Twitter</span>
-			<svg viewBox="0 0 16 16" aria-hidden="true" width="32" height="32" astro-icon="social/twitter"
+        <svg
+          viewBox="0 0 16 16"
+          aria-hidden="true"
+          width="32"
+          height="32"
+          astro-icon="social/twitter"
           ><path
             fill="currentColor"
             d="M5.026 15c6.038 0 9.341-5.003 9.341-9.334 0-.14 0-.282-.006-.422A6.685 6.685 0 0 0 16 3.542a6.658 6.658 0 0 1-1.889.518 3.301 3.301 0 0 0 1.447-1.817 6.533 6.533 0 0 1-2.087.793A3.286 3.286 0 0 0 7.875 6.03a9.325 9.325 0 0 1-6.767-3.429 3.289 3.289 0 0 0 1.018 4.382A3.323 3.323 0 0 1 .64 6.575v.045a3.288 3.288 0 0 0 2.632 3.218 3.203 3.203 0 0 1-.865.115 3.23 3.23 0 0 1-.614-.057 3.283 3.283 0 0 0 3.067 2.277A6.588 6.588 0 0 1 .78 13.58a6.32 6.32 0 0 1-.78-.045A9.344 9.344 0 0 0 5.026 15z"
@@ -16,7 +22,12 @@ const today = new Date();
       </a>
       <a href="https://github.com/zackartz" target="_blank">
         <span class="sr-only">Go to Zacks's GitHub repo</span>
-			<svg viewBox="0 0 16 16" aria-hidden="true" width="32" height="32" astro-icon="social/github"
+        <svg
+          viewBox="0 0 16 16"
+          aria-hidden="true"
+          width="32"
+          height="32"
+          astro-icon="social/github"
           ><path
             fill="currentColor"
             d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.012 8.012 0 0 0 16 8c0-4.42-3.58-8-8-8z"
@@ -24,25 +35,13 @@ const today = new Date();
         >
       </a>
     </div>
-</footer>
+  </p>
-<style>
+  <style>
     footer {
       padding: 2em 1em 6em 1em;
       background: linear-gradient(var(--gray-gradient)) no-repeat;
       color: rgb(var(--gray));
       text-align: center;
     }
-	.social-links {
+  </style>
-		display: flex;
+</footer>
-		justify-content: center;
-		gap: 1em;
-		margin-top: 1em;
-	}
-	.social-links a {
-		text-decoration: none;
-		color: rgb(var(--gray));
-	}
-	.social-links a:hover {
-		color: rgb(var(--gray-dark));
-	}
-</style>

src/components/FormattedDate.astro

@@ -8,10 +8,10 @@ const { date } = Astro.props;
 
 <time class="text-ctp-sky" datetime={date.toISOString()}>
   {
-		date.toLocaleDateString('en-us', {
+    date.toLocaleDateString("en-us", {
-			year: 'numeric',
+      year: "numeric",
-			month: 'short',
+      month: "short",
-			day: 'numeric',
+      day: "numeric",
     })
   }
 </time>

src/components/Header.astro

@@ -1,21 +1,26 @@
 ---
-import HeaderLink from './HeaderLink.astro';
+import HeaderLink from "./HeaderLink.astro";
-import { SITE_TITLE } from '../consts';
+import { SITE_TITLE } from "../consts";
 ---
 
 <header>
-	<nav>
+  <nav class="flex relative justify-center pb-16 w-full">
-		<h2 class="p-5 font-bold"><a href="/">{SITE_TITLE}</a></h2>
+    <h2 class="absolute left-0 p-5 font-bold"><a href="/">{SITE_TITLE}</a></h2>
-		<div class="absolute w-screen flex justify-center top-0 p-5 space-x-4">
+    <div class="flex absolute top-0 justify-center p-5 space-x-4">
       <HeaderLink href="/">Home</HeaderLink>
       <HeaderLink href="/blog">Blog</HeaderLink>
       <HeaderLink href="/about">About</HeaderLink>
       <HeaderLink target="_blank" href="https://cv.zackster.zip">CV</HeaderLink>
     </div>
-		<div class="p-5 flex absolute top-0 right-0 space-x-4">
+    <div class="flex absolute top-0 right-0 p-5 space-x-4">
       <a href="https://twitter.com/_zackartz" target="_blank">
         <span class="sr-only">Follow Zack on Twitter</span>
-			<svg viewBox="0 0 16 16" aria-hidden="true" width="19" height="19" astro-icon="social/twitter"
+        <svg
+          viewBox="0 0 16 16"
+          aria-hidden="true"
+          width="19"
+          height="19"
+          astro-icon="social/twitter"
           ><path
             fill="currentColor"
             d="M5.026 15c6.038 0 9.341-5.003 9.341-9.334 0-.14 0-.282-.006-.422A6.685 6.685 0 0 0 16 3.542a6.658 6.658 0 0 1-1.889.518 3.301 3.301 0 0 0 1.447-1.817 6.533 6.533 0 0 1-2.087.793A3.286 3.286 0 0 0 7.875 6.03a9.325 9.325 0 0 1-6.767-3.429 3.289 3.289 0 0 0 1.018 4.382A3.323 3.323 0 0 1 .64 6.575v.045a3.288 3.288 0 0 0 2.632 3.218 3.203 3.203 0 0 1-.865.115 3.23 3.23 0 0 1-.614-.057 3.283 3.283 0 0 0 3.067 2.277A6.588 6.588 0 0 1 .78 13.58a6.32 6.32 0 0 1-.78-.045A9.344 9.344 0 0 0 5.026 15z"
@@ -24,7 +29,12 @@ import { SITE_TITLE } from '../consts';
       </a>
       <a href="https://github.com/zackartz" target="_blank">
         <span class="sr-only">Go to Zacks's GitHub repo</span>
-			<svg viewBox="0 0 16 16" aria-hidden="true" width="19" height="19" astro-icon="social/github"
+        <svg
+          viewBox="0 0 16 16"
+          aria-hidden="true"
+          width="19"
+          height="19"
+          astro-icon="social/github"
           ><path
             fill="currentColor"
             d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.012 8.012 0 0 0 16 8c0-4.42-3.58-8-8-8z"
@@ -34,4 +44,3 @@ import { SITE_TITLE } from '../consts';
     </div>
   </nav>
 </header>
-

src/components/HeaderLink.astro

@@ -1,13 +1,13 @@
 ---
-import type { HTMLAttributes } from 'astro/types';
+import type { HTMLAttributes } from "astro/types";
 
-type Props = HTMLAttributes<'a'>;
+type Props = HTMLAttributes<"a">;
 
 const { href, class: className, ...props } = Astro.props;
 
 const { pathname } = Astro.url;
 const subpath = pathname.match(/[^\/]+/g);
-const isActive = href === pathname || href === '/' + subpath?.[0];
+const isActive = href === pathname || href === "/" + subpath?.[0];
 ---
 
 <a href={href} class:list={[className, { active: isActive }]} {...props}>

src/layouts/BlogPost.astro

@@ -1,17 +1,13 @@
 ---
-import BaseHead from '../components/BaseHead.astro';
+import FormattedDate from "../components/FormattedDate.astro";
-import Header from '../components/Header.astro';
-import Footer from '../components/Footer.astro';
-import FormattedDate from '../components/FormattedDate.astro';
 
 type Props = any;
 
-const { title, description, pubDate, updatedDate, heroImage } = Astro.props;
+const { title, pubDate, updatedDate, heroImage } = Astro.props;
 ---
 
 <html lang="en" class="ctp-mocha bg-ctp-base">
   <head>
-		<BaseHead title={title} description={description} />
     <style>
       .hero-image {
         width: 100%;
@@ -48,9 +44,7 @@ const { title, description, pubDate, updatedDate, heroImage } = Astro.props;
     </style>
   </head>
 
-	<body class="bg-base">
+  <main class="px-8 bg-base">
-		<Header />
-		<main class="px-8">
     <article>
       <div class="hero-image">
         {heroImage && <img width={1020} height={510} src={heroImage} alt="" />}
@@ -74,6 +68,6 @@ const { title, description, pubDate, updatedDate, heroImage } = Astro.props;
       </div>
     </article>
   </main>
-		<Footer />
+
-	</body>
+
 </html>

src/layouts/Layout.astro

@@ -0,0 +1,21 @@
+---
+import BaseHead from "../components/BaseHead.astro";
+import Header from "../components/Header.astro";
+import Footer from "../components/Footer.astro";
+
+const { title, description } = Astro.props;
+---
+
+<!doctype html>
+<html lang="en" class="ctp-mocha">
+  <head>
+    <BaseHead title={title} description={description} />
+  </head>
+  <body class="flex justify-center bg-ctp-crust">
+    <div class="relative w-full max-w-6xl min-h-screen bg-ctp-base">
+      <Header />
+      <slot />
+      <Footer />
+    </div>
+  </body>
+</html>

src/pages/about.astro

@@ -1,14 +1,21 @@
 ---
-import Layout from '../layouts/BlogPost.astro';
+import Layout from "../layouts/Layout.astro";
+import BlogPost from "../layouts/BlogPost.astro";
 ---
 
-<Layout
+<Layout title="About Me" description="About Zachary Myers">
-	title="About Me"
+  <BlogPost title="About" description="About Zachary" pubDate={new Date()}>
-	description="About Zachary Myers"
-	pubDate={new Date('April 13 2024')}
->
     <article>
       <h3 class="">Hey there!</h3>
-		<p class="">My name is Zachary Myers, I am a software engineer from Honolulu, now living in Saint Joseph, MI. I am most interested in backend programming, and primarily use languages like Rust and Go, though also have plenty of experience with JavaScript and TypeScript as well. I am looking for work! Feel free to <a href="https://cv.zackster.zip" target="_blank">check out my cv</a> and <a href="mailto:me@zackmyers.io">reach out</a> if you are interested!</p>
+      <p class="">
+        My name is Zachary Myers, I am a software engineer from Honolulu, now
+        living in Saint Joseph, MI. I am most interested in backend programming,
+        and primarily use languages like Rust and Go, though also have plenty of
+        experience with JavaScript and TypeScript as well. I am looking for
+        work! Feel free to <a href="https://cv.zackster.zip" target="_blank"
+          >check out my cv</a
+        > and <a href="mailto:me@zackmyers.io">reach out</a> if you are interested!
+      </p>
     </article>
+  </BlogPost>
 </Layout>

src/pages/blog/[...slug].astro

@@ -1,9 +1,10 @@
 ---
-import { getCollection } from 'astro:content';
+import { getCollection } from "astro:content";
-import BlogPost from '../../layouts/BlogPost.astro';
+import Layout from "../../layouts/Layout.astro";
+import BlogPost from "../../layouts/BlogPost.astro";
 
 export async function getStaticPaths() {
-	const posts: any[] = await getCollection('blog');
+  const posts: any[] = await getCollection("blog");
   return posts.map((post) => ({
     params: { slug: post.slug },
     props: post,
@@ -14,6 +15,8 @@ const post: any = Astro.props;
 const { Content } = await post.render();
 ---
 
-<BlogPost class="prose lg:prose-xl" {...post.data}>
+<Layout>
+  <BlogPost class="prose lg:prose-xl" {...post.data}>
     <Content />
-</BlogPost>
+  </BlogPost>
+</Layout>

src/pages/blog/index.astro

@@ -1,43 +1,57 @@
 ---
-import BaseHead from '../../components/BaseHead.astro';
+import Layout from "../../layouts/Layout.astro";
-import Header from '../../components/Header.astro';
+import FormattedDate from "../../components/FormattedDate.astro";
-import Footer from '../../components/Footer.astro';
+import { SITE_TITLE, SITE_DESCRIPTION } from "../../consts";
-import { SITE_TITLE, SITE_DESCRIPTION } from '../../consts';
+import { getCollection } from "astro:content";
-import { getCollection } from 'astro:content';
-import FormattedDate from '../../components/FormattedDate.astro';
 
-const posts: any[] = (await getCollection('blog')).sort(
+const posts: any[] = (await getCollection("blog")).sort(
-	(a: any, b: any) => a.data.pubDate.valueOf() - b.data.pubDate.valueOf()
+  (a: any, b: any) => a.data.pubDate.valueOf() - b.data.pubDate.valueOf(),
 );
 ---
 
-<!doctype html>
+<Layout title={SITE_TITLE} description={SITE_DESCRIPTION}>
-<html lang="en" class="ctp-mocha bg-ctp-base">
+  <main class="flex relative justify-center w-full">
-	<head>
+    {
-		<BaseHead title={SITE_TITLE} description={SITE_DESCRIPTION} />
+      posts.length === 0 && (
-		</head>
+        <p class="py-48">Sorry! No posts at the minute, coming soon!</p>
-	<body>
+      )
-		<Header />
+    }
-		<main class="w-full flex justify-center">
+    <section class="p-16">
-{posts.length === 0 && <p class="py-48">Sorry! No posts at the minute, coming soon!</p>}
+      <h1 class="pb-8 w-3/4 text-4xl font-bold leading-gi">
-			<section>
+        My thoughts on NixOS, Rust, and other software tools.
+      </h1>
+      <h2 class="pb-24 text-lg">
+        My thoughts & experiences collected into one place.
+      </h2>
+      <div class="border-l border-ctp-surface0">
         <ul class="space-y-4">
           {
-						posts.sort((a, b) => b.data.pubDate - a.data.pubDate).map((post) => (
+            posts
-							<li class="p-4 rounded-xl shadow-lg border border-ctp-surface2">
+              .sort((a, b) => b.data.pubDate - a.data.pubDate)
-								<a href={`/blog/${post.slug}/`}>
+              .map((post) => (
-									<img class="rounded-lg" width={720} height={360} src={post.data.heroImage} alt="" />
+                <div class="flex">
-									<h4 class="text-2xl p-3 font-bold text-center text-ctp-mauve">{post.data.title}</h4>
+                  <div class="p-4 my-auto w-[164px]">
-									<p class="text-center">
                     <FormattedDate date={post.data.pubDate} />
+                  </div>
+
+                  <li class="w-full">
+                    <div class="flex flex-col p-8 w-full rounded-xl border transition-all border-ctp-base hover:border-ctp-surface0">
+                      <a href={`/blog/${post.slug}/`}>
+                        <h4 class="text-lg font-bold text-ctp-mauve">
+                          {post.data.title}
+                        </h4>
+                        <h5 class="mt-2 text-sm">{post.data.description}</h5>
+                        <p class="pt-2 text-sm font-bold text-ctp-blue">
+                          Read ->
                         </p>
                       </a>
+                    </div>
                   </li>
+                </div>
               ))
           }
         </ul>
+      </div>
     </section>
   </main>
-		<Footer />
+</Layout>
-	</body>
-</html>

src/pages/index.astro

@@ -1,30 +1,44 @@
 ---
-import BaseHead from '../components/BaseHead.astro';
+import BaseHead from "../components/BaseHead.astro";
-import Header from '../components/Header.astro';
+import Header from "../components/Header.astro";
-import Footer from '../components/Footer.astro';
+import Footer from "../components/Footer.astro";
-import { SITE_TITLE, SITE_DESCRIPTION } from '../consts';
+import { SITE_TITLE, SITE_DESCRIPTION } from "../consts";
 ---
 
 <!doctype html>
-<html lang="en" class="ctp-mocha bg-ctp-base"> 
+<html lang="en" class="ctp-mocha bg-ctp-crust">
   <head>
     <BaseHead title={SITE_TITLE} description={SITE_DESCRIPTION} />
   </head>
-	<body class="h-screen bg-base relative">
+  <body class="relative h-screen">
     <Header />
     <main class="p-16 flex flex-col w-full h-[84%]
 			justify-center items-center">
       <div class="flex flex-col items-center space-y-4">
-				<h1 class="font-bold text-ctp-text text-5xl">Zachary Myers</h1>
+        <h1 class="text-5xl font-bold text-ctp-text">Zachary Myers</h1>
-				<p class="py-4 text-ctp-blue">Software Engineer, Hardware Hacker, Photographer</p>
+        <p class="py-4 text-ctp-blue">
+          Software Engineer, Hardware Hacker, Photographer
+        </p>
       </div>
       <a href="/about">
-			<button class="rounded-full bg-ctp-blue text-black w-32 mt-4 flex px-4 py-3 justify-center">About me <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
+        <button
-  <path stroke-linecap="round" stroke-linejoin="round" d="M17.25 8.25 21 12m0 0-3.75 3.75M21 12H3" />
+          class="flex justify-center py-3 px-4 mt-4 w-32 text-black rounded-full bg-ctp-blue"
-</svg>
+          >About me <svg
-</button>
+            xmlns="http://www.w3.org/2000/svg"
+            fill="none"
+            viewBox="0 0 24 24"
+            stroke-width="1.5"
+            stroke="currentColor"
+            class="w-6 h-6"
+          >
+            <path
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              d="M17.25 8.25 21 12m0 0-3.75 3.75M21 12H3"></path>
+          </svg>
+        </button>
       </a>
-<div class="absolute bottom-5">
+      <div class="absolute bottom-5">
         <Footer />
       </div>
     </main>

src/styles/global.css

@@ -6,6 +6,10 @@
   --gray-dark: var(--ctp-text);
 }
 
+::selection {
+  @apply bg-ctp-mauve text-ctp-base;
+}
+
 @layer base {
   html {
     @apply text-ctp-text;