diff --git a/.gitignore b/.gitignore
new file mode 100644
index 0000000..319d6c3
--- /dev/null
+++ b/.gitignore
@@ -0,0 +1,5 @@
+.sass-cache
+.jekyll-cache
+.jekyll-metadata
+vendor/bundle
+.bundle
diff --git a/_includes/header.html b/_includes/header.html
index 1463039..da12267 100644
--- a/_includes/header.html
+++ b/_includes/header.html
@@ -6,6 +6,13 @@
       <div class="hidden sm:inline">GRAY</div>
     </a>
     <ul class="flex space-x-5 items-center">
+      <li class="flex items-center gap-1">
+        <a
+          href="/about/"
+          class="hover:text-pink-600 dark:hover:text-teal-200{% if page.url == '/about/' %} text-pink-600 dark:text-teal-200 underline underline-offset-4{% endif %}"
+          >About</a
+        >
+      </li>
       <li class="flex items-center gap-1">
         <a
           href="/media/"
diff --git a/_site/about/index.html b/_site/about/index.html
new file mode 100644
index 0000000..08b45d6
--- /dev/null
+++ b/_site/about/index.html
@@ -0,0 +1,359 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>About | Annabel Gray</title>
+
+    <!-- Custom styles -->
+    <link rel="stylesheet" href="/assets/css/styles.css" />
+
+    <!-- Fonts -->
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Raleway:wght@100..900&display=swap"
+      rel="stylesheet"
+    />
+
+    <!-- Tailwind overrides -->
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script>
+      tailwind.config = {
+        darkMode: "selector",
+        theme: {
+          extend: {
+            colors: {},
+            fontFamily: {
+              sans: ['"Raleway"', "Arial", "sans-serif"],
+            },
+          },
+        },
+      };
+    </script>
+    <link
+      rel="apple-touch-icon"
+      sizes="180x180"
+      href="/assets/apple-touch-icon.png"
+    />
+    <link
+      rel="icon"
+      type="image/png"
+      sizes="32x32"
+      href="/assets/favicon-32x32.png"
+    />
+    <link
+      rel="icon"
+      type="image/png"
+      sizes="16x16"
+      href="/assets/favicon-16x16.png"
+    />
+    <link rel="manifest" href="/assets/site.webmanifest" />
+  </head>
+
+  <body class="bg-white dark:bg-neutral-800 text-gray-700 dark:text-gray-100">
+    <!-- Header -->
+    <header class="p-4">
+  <nav class="max-w-7xl mx-auto flex justify-between items-center">
+    <a href="/" class="tracking-wide flex gap-1 items-center">
+      <div class="inline">ANNABEL</div>
+      <div class="h-4 w-4 bg-gray-400 rounded inline-block"></div>
+      <div class="hidden sm:inline">GRAY</div>
+    </a>
+    <ul class="flex space-x-5 items-center">
+      <li class="flex items-center gap-1">
+        <a
+          href="/about/"
+          class="hover:text-pink-600 dark:hover:text-teal-200 text-pink-600 dark:text-teal-200 underline underline-offset-4"
+          >About</a
+        >
+      </li>
+      <li class="flex items-center gap-1">
+        <a
+          href="/media/"
+          class="hover:text-pink-600 dark:hover:text-teal-200"
+          >Media</a
+        >
+      </li>
+      <li class="hidden sm:flex items-center gap-1">
+        <a href="#" class="hover:text-pink-600 dark:hover:text-teal-200"
+          >Photography</a
+        >
+        <div
+          class="px-1 rounded-lg text-xs bg-red-400 text-white dark:bg-emerald-700"
+        >
+          soon
+        </div>
+      </li>
+      <li>
+        <label
+          for="dark-mode-toggle"
+          class="top-1 relative inline-block h-8 w-14 cursor-pointer rounded-full bg-orange-400 transition [-webkit-tap-highlight-color:_transparent] has-[:checked]:bg-neutral-600"
+          aria-label="Toggle dark mode"
+          title="Toggle dark mode"
+        >
+          <input
+            type="checkbox"
+            id="dark-mode-toggle"
+            class="peer sr-only [&:checked_+_span_div[data-checked-icon]]:block [&:checked_+_span_div[data-unchecked-icon]]:hidden"
+          />
+          <span
+            class="absolute inset-y-0 start-0 z-10 m-1 inline-flex size-6 items-center justify-center rounded-full bg-white transition-all peer-checked:start-6"
+          >
+            <div data-unchecked-icon class="">
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                height="18px"
+                viewBox="0 -960 960 960"
+                width="18px"
+                fill="#fb923c"
+              >
+                <path
+                  d="M480-360q50 0 85-35t35-85q0-50-35-85t-85-35q-50 0-85 35t-35 85q0 50 35 85t85 35Zm0 80q-83 0-141.5-58.5T280-480q0-83 58.5-141.5T480-680q83 0 141.5 58.5T680-480q0 83-58.5 141.5T480-280ZM200-440H40v-80h160v80Zm720 0H760v-80h160v80ZM440-760v-160h80v160h-80Zm0 720v-160h80v160h-80ZM256-650l-101-97 57-59 96 100-52 56Zm492 496-97-101 53-55 101 97-57 59Zm-98-550 97-101 59 57-100 96-56-52ZM154-212l101-97 55 53-97 101-59-57Zm326-268Z"
+                />
+              </svg>
+            </div>
+            <div data-checked-icon class="hidden">
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                height="18px"
+                viewBox="0 -960 960 960"
+                width="18px"
+                fill="#262626"
+              >
+                <path
+                  d="M480-120q-150 0-255-105T120-480q0-150 105-255t255-105q14 0 27.5 1t26.5 3q-41 29-65.5 75.5T444-660q0 90 63 153t153 63q55 0 101-24.5t75-65.5q2 13 3 26.5t1 27.5q0 150-105 255T480-120Zm0-80q88 0 158-48.5T740-375q-20 5-40 8t-40 3q-123 0-209.5-86.5T364-660q0-20 3-40t8-40q-78 32-126.5 102T200-480q0 116 82 198t198 82Zm-10-270Z"
+                />
+              </svg>
+            </div>
+          </span>
+        </label>
+      </li>
+    </ul>
+  </nav>
+</header>
+
+
+    <!-- Main content -->
+    <main class="py-8 md:px-4"><!-- Intro -->
+<section class="pt-12 sm:pt-32 pb-16 sm:pb-52 md:flex mx-auto justify-center text-center md:text-left md:pl-10">
+  <h1 class="text-3xl md:text-5xl max-w-xl mx-auto md:mx-0 md:max-w-lg px-4 md:px-0">
+    I'm Annabel and I'm a
+    <span class="line-through old-job">frontend developer</span>
+    <span class="font-extrabold bg-gradient-to-r from-red-400 via-orange-500 to-pink-600 dark:from-emerald-700 dark:via-teal-600 dark:to-slate-400 bg-clip-text text-transparent">product designer</span>, currently at
+    <a href="https://github.com/annabel" class="relative inline-block" style="position:relative; display:inline-block;">
+      Git<span style="position:relative; display:inline-block;">
+        <span>Lab</span>
+        <span class="handwritten-overlay">Hub</span>
+      </span>
+    </a>
+  </h1>
+  <div class="relative top-4 md:-left-20 md:top-14 h-48 w-48 mx-auto md:mx-0">
+    <img src="/assets/images/notion-avatar.png" class="avatar" />
+  </div>
+</section>
+
+<script>
+  window.addEventListener('DOMContentLoaded', function() {
+    setTimeout(function() {
+      var overlay = document.querySelector('.handwritten-overlay');
+      if (overlay) {
+        overlay.classList.add('write-in');
+      }
+    }, 1800);
+  });
+</script>
+
+<!-- Case studies -->
+
+<section class="py-20 md:-mx-4">
+  <div class="px-4 md:px-24 py-8 relative inset-0 h-full w-full bg-white bg-[radial-gradient(#c1c3c7_1px,transparent_1px)] [background-size:16px_16px] dark:bg-neutral-800">
+    <h2 class="text-4xl mb-4">Recent work</h2>
+    <div class="grid grid-cols-1 lg:grid-cols-2 gap-4 text-white text-sm font-semibold leading-6 rounded-lg">
+      
+      <div class="p-4 text-xl rounded-lg min-h-48 case-study bg-gradient-to-r from-red-400 via-orange-500 to-pink-400 dark:from-emerald-800 dark:via-teal-800 dark:to-slate-600">
+        <h3 class="text-2xl mb-4">UX Paper Cuts</h3>
+        <img class="w-108 mb-5 rounded" src="/assets/images/papercuts.png" alt="UX Paper Cuts" />
+        <div class="flex gap-2 flex-wrap">
+          
+          <span class="whitespace-nowrap rounded-full bg-white/25 px-3 py-1 text-sm text-white">Design</span>
+          
+          <span class="whitespace-nowrap rounded-full bg-white/25 px-3 py-1 text-sm text-white">Vue</span>
+          
+          <span class="whitespace-nowrap rounded-full bg-white/25 px-3 py-1 text-sm text-white">Ruby</span>
+          
+          <span class="whitespace-nowrap rounded-full bg-white/25 px-3 py-1 text-sm text-white">Feature flags</span>
+          
+          <span class="whitespace-nowrap rounded-full bg-white/25 px-3 py-1 text-sm text-white">Project management</span>
+          
+        </div>
+      </div>
+      
+      <div class="p-4 text-xl rounded-lg min-h-48 case-study bg-gradient-to-r from-pink-400 via-orange-500 to-red-400 dark:from-slate-600 dark:via-teal-800 dark:to-emerald-800">
+        <h3 class="text-2xl mb-4">Merge requests</h3>
+        <img class="w-108 mb-5 rounded" src="/assets/images/merge-requests.png" alt="Merge requests" />
+        <div class="flex gap-2 flex-wrap">
+          
+          <span class="whitespace-nowrap rounded-full bg-white/25 px-3 py-1 text-sm text-white">UX research</span>
+          
+          <span class="whitespace-nowrap rounded-full bg-white/25 px-3 py-1 text-sm text-white">Design</span>
+          
+        </div>
+      </div>
+      
+    </div>
+  </div>
+</section>
+
+<!-- About -->
+<section class="md:px-10">
+  <div class="px-4 md:px-10 lg:flex">
+    <h2 class="text-4xl mb-4 lg:mr-20 whitespace-nowrap">About me</h2>
+    <div class="flex gap-8 flex-col">
+      <div class="mt-2">
+        <h3 class="text-2xl mb-2 text-pink-600 dark:text-emerald-500">
+          Experience
+        </h3>
+        <p class="text-lg sm:text-2xl max-w-prose">
+          I'm a staff product designer with over 10 years of experience in
+          the tech industry. With a background as a frontend developer, I
+          bring a unique blend of design thinking and technical expertise
+          to every project. I'm passionate about creating intuitive user
+          experiences, and leveraging UX research to inform design
+          decisions. My approach combines a deep understanding of both
+          design and development to craft seamless, user-centered
+          products.
+        </p>
+      </div>
+      <div class="mt-2">
+        <h3 class="text-2xl mb-2 text-pink-600 dark:text-emerald-500">
+          Outside of work
+        </h3>
+        <div class="text-lg sm:text-2xl max-w-prose">
+          When I’m not working, you can usually find me baking, drawing,
+          playing with my kids, or reading a good book.
+          <div class="mt-2">I'm currently reading:</div>
+          <ul class="text-lg sm:text-xl">
+  
+  <li class="list-disc ml-7 my-3">
+    <a href="https://www.goodreads.com/book/show/34002132-oathbringer" class="italic underline underline-offset-4 decoration-1 text-orange-600 dark:text-teal-500" target="_blank">Oathbringer (The Stormlight Archive #3)</a><!-- No space between </a> and next element -->
+    <span class="mx-1">by</span>Brandon Sanderson
+  </li>
+  
+  <li class="list-disc ml-7 my-3">
+    <a href="https://www.goodreads.com/book/show/24.In_a_Sunburned_Country" class="italic underline underline-offset-4 decoration-1 text-orange-600 dark:text-teal-500" target="_blank">In a Sunburned Country</a><!-- No space between </a> and next element -->
+    <span class="mx-1">by</span>Bill Bryson
+  </li>
+  
+  <li class="list-disc ml-7 my-3">
+    <a href="https://www.goodreads.com/book/show/18803640-h-is-for-hawk" class="italic underline underline-offset-4 decoration-1 text-orange-600 dark:text-teal-500" target="_blank">H is for Hawk</a><!-- No space between </a> and next element -->
+    <span class="mx-1">by</span>Helen Macdonald
+  </li>
+  
+</ul>
+
+          <div class="mt-2">...and recently finished:</div>
+          <ul class="text-lg sm:text-xl">
+  
+  <li class="list-disc ml-7 my-3">
+    <a href="https://www.goodreads.com/book/show/65215677-exit-interview" class="italic underline underline-offset-4 decoration-1 text-orange-600 dark:text-teal-500" target="_blank">Exit Interview</a><!-- No space between </a> and next element -->
+    <span class="mx-1">by</span>Kristi Coulter
+  </li>
+  
+  <li class="list-disc ml-7 my-3">
+    <a href="https://www.goodreads.com/book/show/48989372-a-very-punchable-face" class="italic underline underline-offset-4 decoration-1 text-orange-600 dark:text-teal-500" target="_blank">A Very Punchable Face</a><!-- No space between </a> and next element -->
+    <span class="mx-1">by</span>Colin Jost
+  </li>
+  
+  <li class="list-disc ml-7 my-3">
+    <a href="https://www.goodreads.com/book/show/231148075-the-art-of-spending-money" class="italic underline underline-offset-4 decoration-1 text-orange-600 dark:text-teal-500" target="_blank">The Art of Spending Money</a><!-- No space between </a> and next element -->
+    <span class="mx-1">by</span>Morgan Housel
+  </li>
+  
+  <li class="list-disc ml-7 my-3">
+    <a href="https://www.goodreads.com/book/show/7507825-at-home" class="italic underline underline-offset-4 decoration-1 text-orange-600 dark:text-teal-500" target="_blank">At Home: A Short History of Private Life</a><!-- No space between </a> and next element -->
+    <span class="mx-1">by</span>Bill Bryson
+  </li>
+  
+  <li class="list-disc ml-7 my-3">
+    <a href="https://www.goodreads.com/book/show/220239083-a-marriage-at-sea" class="italic underline underline-offset-4 decoration-1 text-orange-600 dark:text-teal-500" target="_blank">A Marriage at Sea</a><!-- No space between </a> and next element -->
+    <span class="mx-1">by</span>Sophie Elmhirst
+  </li>
+  
+</ul>
+
+        </div>
+      </div>
+    </div>
+  </div>
+</section>
+</main>
+
+    <!-- Footer -->
+    <footer class="mt-14">
+  <div
+    class="px-4 md:px-24 py-8 relative inset-0 h-full w-full bg-white bg-[radial-gradient(#c1c3c7_1px,transparent_1px)] [background-size:16px_16px] dark:bg-neutral-800"
+  >
+    <h2 class="text-4xl mb-4">Contact</h2>
+    <div
+      class="text-lg px-4 py-2 rounded-lg case-study bg-gradient-to-r from-pink-400 via-orange-500 to-red-400 dark:from-emerald-800 dark:via-teal-800 dark:to-slate-600 text-white"
+    >
+      <div>
+        <div class="hidden md:inline md:mr-3 font-semibold">
+          Click to copy →
+        </div>
+        <a
+          class="hover:underline cursor-pointer underline-offset-4"
+          id="email"
+          onclick="copyToClipboard()"
+          >annabel.m.gray@gmail.com</a
+        >
+      </div>
+      <div class="hidden md:inline md:mr-3 font-semibold">
+        These links open in new tabs →
+      </div>
+      <ul class="md:inline-flex gap-3">
+        <li>
+          <a
+            class="hover:underline underline-offset-4"
+            href="https://linkedin.com/in/annabelgray"
+            target="_blank"
+            >LinkedIn</a
+          >
+          <span class="hidden md:inline ml-2">·</span>
+        </li>
+        <li>
+          <a
+            class="hover:underline underline-offset-4"
+            href="https://gitlab.com/annabeldunstone"
+            target="_blank"
+            >GitLab</a
+          >
+          <span class="hidden md:inline ml-2">·</span>
+        </li>
+        <li>
+          <a
+            class="hover:underline underline-offset-4"
+            href="https://github.com/annabel"
+            target="_blank"
+            >GitHub</a
+          >
+          <span class="hidden md:inline ml-2">·</span>
+        </li>
+        <li>
+          <a
+            class="hover:underline underline-offset-4"
+            href="https://www.goodreads.com/annabelgray"
+            target="_blank"
+            >Goodreads</a
+          >
+        </li>
+      </ul>
+    </div>
+  </div>
+</footer>
+
+
+    <script src="/assets/js/script.js"></script>
+  </body>
+</html>
diff --git a/_site/assets/main.css.map b/_site/assets/main.css.map
index e411f4d..8272a92 100644
--- a/_site/assets/main.css.map
+++ b/_site/assets/main.css.map
@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["../../../.local/share/mise/installs/ruby/3.4.1/lib/ruby/gems/3.4.0/gems/minima-2.5.2/_sass/minima/_base.scss","../../../.local/share/mise/installs/ruby/3.4.1/lib/ruby/gems/3.4.0/gems/minima-2.5.2/_sass/minima.scss","../../../.local/share/mise/installs/ruby/3.4.1/lib/ruby/gems/3.4.0/gems/minima-2.5.2/_sass/minima/_layout.scss","../../../.local/share/mise/installs/ruby/3.4.1/lib/ruby/gems/3.4.0/gems/minima-2.5.2/_sass/minima/_syntax-highlighting.scss"],"names":[],"mappings":"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","sourcesContent":["/**\n * Reset some basic elements\n */\nbody, h1, h2, h3, h4, h5, h6,\np, blockquote, pre, hr,\ndl, dd, ol, ul, figure {\n  margin: 0;\n  padding: 0;\n}\n\n\n\n/**\n * Basic styling\n */\nbody {\n  font: $base-font-weight #{$base-font-size}/#{$base-line-height} $base-font-family;\n  color: $text-color;\n  background-color: $background-color;\n  -webkit-text-size-adjust: 100%;\n  -webkit-font-feature-settings: \"kern\" 1;\n     -moz-font-feature-settings: \"kern\" 1;\n       -o-font-feature-settings: \"kern\" 1;\n          font-feature-settings: \"kern\" 1;\n  font-kerning: normal;\n  display: flex;\n  min-height: 100vh;\n  flex-direction: column;\n}\n\n\n\n/**\n * Set `margin-bottom` to maintain vertical rhythm\n */\nh1, h2, h3, h4, h5, h6,\np, blockquote, pre,\nul, ol, dl, figure,\n%vertical-rhythm {\n  margin-bottom: $spacing-unit * 0.5;\n}\n\n\n\n/**\n * `main` element\n */\nmain {\n  display: block; /* Default value of `display` of `main` element is 'inline' in IE 11. */\n}\n\n\n\n/**\n * Images\n */\nimg {\n  max-width: 100%;\n  vertical-align: middle;\n}\n\n\n\n/**\n * Figures\n */\nfigure > img {\n  display: block;\n}\n\nfigcaption {\n  font-size: $small-font-size;\n}\n\n\n\n/**\n * Lists\n */\nul, ol {\n  margin-left: $spacing-unit;\n}\n\nli {\n  > ul,\n  > ol {\n    margin-bottom: 0;\n  }\n}\n\n\n\n/**\n * Headings\n */\nh1, h2, h3, h4, h5, h6 {\n  font-weight: $base-font-weight;\n}\n\n\n\n/**\n * Links\n */\na {\n  color: $brand-color;\n  text-decoration: none;\n\n  &:visited {\n    color: darken($brand-color, 15%);\n  }\n\n  &:hover {\n    color: $text-color;\n    text-decoration: underline;\n  }\n\n  .social-media-list &:hover {\n    text-decoration: none;\n\n    .username {\n      text-decoration: underline;\n    }\n  }\n}\n\n\n/**\n * Blockquotes\n */\nblockquote {\n  color: $grey-color;\n  border-left: 4px solid $grey-color-light;\n  padding-left: $spacing-unit * 0.5;\n  @include relative-font-size(1.125);\n  letter-spacing: -1px;\n  font-style: italic;\n\n  > :last-child {\n    margin-bottom: 0;\n  }\n}\n\n\n\n/**\n * Code formatting\n */\npre,\ncode {\n  @include relative-font-size(0.9375);\n  border: 1px solid $grey-color-light;\n  border-radius: 3px;\n  background-color: #eef;\n}\n\ncode {\n  padding: 1px 5px;\n}\n\npre {\n  padding: 8px 12px;\n  overflow-x: auto;\n\n  > code {\n    border: 0;\n    padding-right: 0;\n    padding-left: 0;\n  }\n}\n\n\n\n/**\n * Wrapper\n */\n.wrapper {\n  max-width: -webkit-calc(#{$content-width} - (#{$spacing-unit} * 2));\n  max-width:         calc(#{$content-width} - (#{$spacing-unit} * 2));\n  margin-right: auto;\n  margin-left: auto;\n  padding-right: $spacing-unit;\n  padding-left: $spacing-unit;\n  @extend %clearfix;\n\n  @include media-query($on-laptop) {\n    max-width: -webkit-calc(#{$content-width} - (#{$spacing-unit}));\n    max-width:         calc(#{$content-width} - (#{$spacing-unit}));\n    padding-right: $spacing-unit * 0.5;\n    padding-left: $spacing-unit * 0.5;\n  }\n}\n\n\n\n/**\n * Clearfix\n */\n%clearfix:after {\n  content: \"\";\n  display: table;\n  clear: both;\n}\n\n\n\n/**\n * Icons\n */\n\n.svg-icon {\n    width: 16px;\n    height: 16px;\n    display: inline-block;\n    fill: #{$grey-color};\n    padding-right: 5px;\n    vertical-align: text-top;\n}\n\n.social-media-list {\n  li + li {\n    padding-top: 5px;\n  }\n}\n\n\n\n/**\n * Tables\n */\ntable {\n  margin-bottom: $spacing-unit;\n  width: 100%;\n  text-align: $table-text-align;\n  color: lighten($text-color, 18%);\n  border-collapse: collapse;\n  border: 1px solid $grey-color-light;\n  tr {\n    &:nth-child(even) {\n      background-color: lighten($grey-color-light, 6%);\n    }\n  }\n  th, td {\n    padding: ($spacing-unit * 0.3333333333) ($spacing-unit * 0.5);\n  }\n  th {\n    background-color: lighten($grey-color-light, 3%);\n    border: 1px solid darken($grey-color-light, 4%);\n    border-bottom-color: darken($grey-color-light, 12%);\n  }\n  td {\n    border: 1px solid $grey-color-light;\n  }\n}\n","@charset \"utf-8\";\n\n// Define defaults for each variable.\n\n$base-font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\" !default;\n$base-font-size:   16px !default;\n$base-font-weight: 400 !default;\n$small-font-size:  $base-font-size * 0.875 !default;\n$base-line-height: 1.5 !default;\n\n$spacing-unit:     30px !default;\n\n$text-color:       #111 !default;\n$background-color: #fdfdfd !default;\n$brand-color:      #2a7ae2 !default;\n\n$grey-color:       #828282 !default;\n$grey-color-light: lighten($grey-color, 40%) !default;\n$grey-color-dark:  darken($grey-color, 25%) !default;\n\n$table-text-align: left !default;\n\n// Width of the content area\n$content-width:    800px !default;\n\n$on-palm:          600px !default;\n$on-laptop:        800px !default;\n\n// Use media queries like this:\n// @include media-query($on-palm) {\n//   .wrapper {\n//     padding-right: $spacing-unit / 2;\n//     padding-left: $spacing-unit / 2;\n//   }\n// }\n@mixin media-query($device) {\n  @media screen and (max-width: $device) {\n    @content;\n  }\n}\n\n@mixin relative-font-size($ratio) {\n  font-size: $base-font-size * $ratio;\n}\n\n// Import partials.\n@import\n  \"minima/base\",\n  \"minima/layout\",\n  \"minima/syntax-highlighting\"\n;\n","/**\n * Site header\n */\n.site-header {\n  border-top: 5px solid $grey-color-dark;\n  border-bottom: 1px solid $grey-color-light;\n  min-height: $spacing-unit * 1.865;\n\n  // Positioning context for the mobile navigation icon\n  position: relative;\n}\n\n.site-title {\n  @include relative-font-size(1.625);\n  font-weight: 300;\n  line-height: $base-line-height * $base-font-size * 2.25;\n  letter-spacing: -1px;\n  margin-bottom: 0;\n  float: left;\n\n  &,\n  &:visited {\n    color: $grey-color-dark;\n  }\n}\n\n.site-nav {\n  float: right;\n  line-height: $base-line-height * $base-font-size * 2.25;\n\n  .nav-trigger {\n      display: none;\n  }\n\n  .menu-icon {\n    display: none;\n  }\n\n  .page-link {\n    color: $text-color;\n    line-height: $base-line-height;\n\n    // Gaps between nav items, but not on the last one\n    &:not(:last-child) {\n      margin-right: 20px;\n    }\n  }\n\n  @include media-query($on-palm) {\n    position: absolute;\n    top: 9px;\n    right: $spacing-unit * 0.5;\n    background-color: $background-color;\n    border: 1px solid $grey-color-light;\n    border-radius: 5px;\n    text-align: right;\n\n    label[for=\"nav-trigger\"] {\n      display: block;\n      float: right;\n      width: 36px;\n      height: 36px;\n      z-index: 2;\n      cursor: pointer;\n    }\n\n    .menu-icon {\n      display: block;\n      float: right;\n      width: 36px;\n      height: 26px;\n      line-height: 0;\n      padding-top: 10px;\n      text-align: center;\n\n      > svg {\n        fill: $grey-color-dark;\n      }\n    }\n\n    input ~ .trigger {\n      clear: both;\n      display: none;\n    }\n\n    input:checked ~ .trigger {\n      display: block;\n      padding-bottom: 5px;\n    }\n\n    .page-link {\n      display: block;\n      margin-left: 20px;\n      padding: 5px 10px;\n\n      &:not(:last-child) {\n        margin-right: 0;\n      }\n    }\n  }\n}\n\n\n\n/**\n * Site footer\n */\n.site-footer {\n  border-top: 1px solid $grey-color-light;\n  padding: $spacing-unit 0;\n}\n\n.footer-heading {\n  @include relative-font-size(1.125);\n  margin-bottom: $spacing-unit * 0.5;\n}\n\n.contact-list,\n.social-media-list {\n  list-style: none;\n  margin-left: 0;\n}\n\n.footer-col-wrapper {\n  @include relative-font-size(0.9375);\n  color: $grey-color;\n  margin-left: -$spacing-unit * 0.5;\n  @extend %clearfix;\n}\n\n.footer-col {\n  float: left;\n  margin-bottom: $spacing-unit * 0.5;\n  padding-left: $spacing-unit * 0.5;\n}\n\n.footer-col-1 {\n  width: -webkit-calc(35% - (#{$spacing-unit} / 2));\n  width:         calc(35% - (#{$spacing-unit} / 2));\n}\n\n.footer-col-2 {\n  width: -webkit-calc(20% - (#{$spacing-unit} / 2));\n  width:         calc(20% - (#{$spacing-unit} / 2));\n}\n\n.footer-col-3 {\n  width: -webkit-calc(45% - (#{$spacing-unit} / 2));\n  width:         calc(45% - (#{$spacing-unit} / 2));\n}\n\n@include media-query($on-laptop) {\n  .footer-col-1,\n  .footer-col-2 {\n    width: -webkit-calc(50% - (#{$spacing-unit} / 2));\n    width:         calc(50% - (#{$spacing-unit} / 2));\n  }\n\n  .footer-col-3 {\n    width: -webkit-calc(100% - (#{$spacing-unit} / 2));\n    width:         calc(100% - (#{$spacing-unit} / 2));\n  }\n}\n\n@include media-query($on-palm) {\n  .footer-col {\n    float: none;\n    width: -webkit-calc(100% - (#{$spacing-unit} / 2));\n    width:         calc(100% - (#{$spacing-unit} / 2));\n  }\n}\n\n\n\n/**\n * Page content\n */\n.page-content {\n  padding: $spacing-unit 0;\n  flex: 1;\n}\n\n.page-heading {\n  @include relative-font-size(2);\n}\n\n.post-list-heading {\n  @include relative-font-size(1.75);\n}\n\n.post-list {\n  margin-left: 0;\n  list-style: none;\n\n  > li {\n    margin-bottom: $spacing-unit;\n  }\n}\n\n.post-meta {\n  font-size: $small-font-size;\n  color: $grey-color;\n}\n\n.post-link {\n  display: block;\n  @include relative-font-size(1.5);\n}\n\n\n\n/**\n * Posts\n */\n.post-header {\n  margin-bottom: $spacing-unit;\n}\n\n.post-title {\n  @include relative-font-size(2.625);\n  letter-spacing: -1px;\n  line-height: 1;\n\n  @include media-query($on-laptop) {\n    @include relative-font-size(2.25);\n  }\n}\n\n.post-content {\n  margin-bottom: $spacing-unit;\n\n  h2 {\n    @include relative-font-size(2);\n\n    @include media-query($on-laptop) {\n      @include relative-font-size(1.75);\n    }\n  }\n\n  h3 {\n    @include relative-font-size(1.625);\n\n    @include media-query($on-laptop) {\n      @include relative-font-size(1.375);\n    }\n  }\n\n  h4 {\n    @include relative-font-size(1.25);\n\n    @include media-query($on-laptop) {\n      @include relative-font-size(1.125);\n    }\n  }\n}\n","/**\n * Syntax highlighting styles\n */\n.highlight {\n  background: #fff;\n  @extend %vertical-rhythm;\n\n  .highlighter-rouge & {\n    background: #eef;\n  }\n\n  .c     { color: #998; font-style: italic } // Comment\n  .err   { color: #a61717; background-color: #e3d2d2 } // Error\n  .k     { font-weight: bold } // Keyword\n  .o     { font-weight: bold } // Operator\n  .cm    { color: #998; font-style: italic } // Comment.Multiline\n  .cp    { color: #999; font-weight: bold } // Comment.Preproc\n  .c1    { color: #998; font-style: italic } // Comment.Single\n  .cs    { color: #999; font-weight: bold; font-style: italic } // Comment.Special\n  .gd    { color: #000; background-color: #fdd } // Generic.Deleted\n  .gd .x { color: #000; background-color: #faa } // Generic.Deleted.Specific\n  .ge    { font-style: italic } // Generic.Emph\n  .gr    { color: #a00 } // Generic.Error\n  .gh    { color: #999 } // Generic.Heading\n  .gi    { color: #000; background-color: #dfd } // Generic.Inserted\n  .gi .x { color: #000; background-color: #afa } // Generic.Inserted.Specific\n  .go    { color: #888 } // Generic.Output\n  .gp    { color: #555 } // Generic.Prompt\n  .gs    { font-weight: bold } // Generic.Strong\n  .gu    { color: #aaa } // Generic.Subheading\n  .gt    { color: #a00 } // Generic.Traceback\n  .kc    { font-weight: bold } // Keyword.Constant\n  .kd    { font-weight: bold } // Keyword.Declaration\n  .kp    { font-weight: bold } // Keyword.Pseudo\n  .kr    { font-weight: bold } // Keyword.Reserved\n  .kt    { color: #458; font-weight: bold } // Keyword.Type\n  .m     { color: #099 } // Literal.Number\n  .s     { color: #d14 } // Literal.String\n  .na    { color: #008080 } // Name.Attribute\n  .nb    { color: #0086B3 } // Name.Builtin\n  .nc    { color: #458; font-weight: bold } // Name.Class\n  .no    { color: #008080 } // Name.Constant\n  .ni    { color: #800080 } // Name.Entity\n  .ne    { color: #900; font-weight: bold } // Name.Exception\n  .nf    { color: #900; font-weight: bold } // Name.Function\n  .nn    { color: #555 } // Name.Namespace\n  .nt    { color: #000080 } // Name.Tag\n  .nv    { color: #008080 } // Name.Variable\n  .ow    { font-weight: bold } // Operator.Word\n  .w     { color: #bbb } // Text.Whitespace\n  .mf    { color: #099 } // Literal.Number.Float\n  .mh    { color: #099 } // Literal.Number.Hex\n  .mi    { color: #099 } // Literal.Number.Integer\n  .mo    { color: #099 } // Literal.Number.Oct\n  .sb    { color: #d14 } // Literal.String.Backtick\n  .sc    { color: #d14 } // Literal.String.Char\n  .sd    { color: #d14 } // Literal.String.Doc\n  .s2    { color: #d14 } // Literal.String.Double\n  .se    { color: #d14 } // Literal.String.Escape\n  .sh    { color: #d14 } // Literal.String.Heredoc\n  .si    { color: #d14 } // Literal.String.Interpol\n  .sx    { color: #d14 } // Literal.String.Other\n  .sr    { color: #009926 } // Literal.String.Regex\n  .s1    { color: #d14 } // Literal.String.Single\n  .ss    { color: #990073 } // Literal.String.Symbol\n  .bp    { color: #999 } // Name.Builtin.Pseudo\n  .vc    { color: #008080 } // Name.Variable.Class\n  .vg    { color: #008080 } // Name.Variable.Global\n  .vi    { color: #008080 } // Name.Variable.Instance\n  .il    { color: #099 } // Literal.Number.Integer.Long\n}\n"],"file":"main.css"}
\ No newline at end of file
+{"version":3,"sourceRoot":"","sources":["../vendor/bundle/ruby/3.2.0/gems/minima-2.5.2/_sass/minima/_base.scss","../vendor/bundle/ruby/3.2.0/gems/minima-2.5.2/_sass/minima.scss","../vendor/bundle/ruby/3.2.0/gems/minima-2.5.2/_sass/minima/_layout.scss","../vendor/bundle/ruby/3.2.0/gems/minima-2.5.2/_sass/minima/_syntax-highlighting.scss"],"names":[],"mappings":"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","sourcesContent":["/**\n * Reset some basic elements\n */\nbody, h1, h2, h3, h4, h5, h6,\np, blockquote, pre, hr,\ndl, dd, ol, ul, figure {\n  margin: 0;\n  padding: 0;\n}\n\n\n\n/**\n * Basic styling\n */\nbody {\n  font: $base-font-weight #{$base-font-size}/#{$base-line-height} $base-font-family;\n  color: $text-color;\n  background-color: $background-color;\n  -webkit-text-size-adjust: 100%;\n  -webkit-font-feature-settings: \"kern\" 1;\n     -moz-font-feature-settings: \"kern\" 1;\n       -o-font-feature-settings: \"kern\" 1;\n          font-feature-settings: \"kern\" 1;\n  font-kerning: normal;\n  display: flex;\n  min-height: 100vh;\n  flex-direction: column;\n}\n\n\n\n/**\n * Set `margin-bottom` to maintain vertical rhythm\n */\nh1, h2, h3, h4, h5, h6,\np, blockquote, pre,\nul, ol, dl, figure,\n%vertical-rhythm {\n  margin-bottom: $spacing-unit * 0.5;\n}\n\n\n\n/**\n * `main` element\n */\nmain {\n  display: block; /* Default value of `display` of `main` element is 'inline' in IE 11. */\n}\n\n\n\n/**\n * Images\n */\nimg {\n  max-width: 100%;\n  vertical-align: middle;\n}\n\n\n\n/**\n * Figures\n */\nfigure > img {\n  display: block;\n}\n\nfigcaption {\n  font-size: $small-font-size;\n}\n\n\n\n/**\n * Lists\n */\nul, ol {\n  margin-left: $spacing-unit;\n}\n\nli {\n  > ul,\n  > ol {\n    margin-bottom: 0;\n  }\n}\n\n\n\n/**\n * Headings\n */\nh1, h2, h3, h4, h5, h6 {\n  font-weight: $base-font-weight;\n}\n\n\n\n/**\n * Links\n */\na {\n  color: $brand-color;\n  text-decoration: none;\n\n  &:visited {\n    color: darken($brand-color, 15%);\n  }\n\n  &:hover {\n    color: $text-color;\n    text-decoration: underline;\n  }\n\n  .social-media-list &:hover {\n    text-decoration: none;\n\n    .username {\n      text-decoration: underline;\n    }\n  }\n}\n\n\n/**\n * Blockquotes\n */\nblockquote {\n  color: $grey-color;\n  border-left: 4px solid $grey-color-light;\n  padding-left: $spacing-unit * 0.5;\n  @include relative-font-size(1.125);\n  letter-spacing: -1px;\n  font-style: italic;\n\n  > :last-child {\n    margin-bottom: 0;\n  }\n}\n\n\n\n/**\n * Code formatting\n */\npre,\ncode {\n  @include relative-font-size(0.9375);\n  border: 1px solid $grey-color-light;\n  border-radius: 3px;\n  background-color: #eef;\n}\n\ncode {\n  padding: 1px 5px;\n}\n\npre {\n  padding: 8px 12px;\n  overflow-x: auto;\n\n  > code {\n    border: 0;\n    padding-right: 0;\n    padding-left: 0;\n  }\n}\n\n\n\n/**\n * Wrapper\n */\n.wrapper {\n  max-width: -webkit-calc(#{$content-width} - (#{$spacing-unit} * 2));\n  max-width:         calc(#{$content-width} - (#{$spacing-unit} * 2));\n  margin-right: auto;\n  margin-left: auto;\n  padding-right: $spacing-unit;\n  padding-left: $spacing-unit;\n  @extend %clearfix;\n\n  @include media-query($on-laptop) {\n    max-width: -webkit-calc(#{$content-width} - (#{$spacing-unit}));\n    max-width:         calc(#{$content-width} - (#{$spacing-unit}));\n    padding-right: $spacing-unit * 0.5;\n    padding-left: $spacing-unit * 0.5;\n  }\n}\n\n\n\n/**\n * Clearfix\n */\n%clearfix:after {\n  content: \"\";\n  display: table;\n  clear: both;\n}\n\n\n\n/**\n * Icons\n */\n\n.svg-icon {\n    width: 16px;\n    height: 16px;\n    display: inline-block;\n    fill: #{$grey-color};\n    padding-right: 5px;\n    vertical-align: text-top;\n}\n\n.social-media-list {\n  li + li {\n    padding-top: 5px;\n  }\n}\n\n\n\n/**\n * Tables\n */\ntable {\n  margin-bottom: $spacing-unit;\n  width: 100%;\n  text-align: $table-text-align;\n  color: lighten($text-color, 18%);\n  border-collapse: collapse;\n  border: 1px solid $grey-color-light;\n  tr {\n    &:nth-child(even) {\n      background-color: lighten($grey-color-light, 6%);\n    }\n  }\n  th, td {\n    padding: ($spacing-unit * 0.3333333333) ($spacing-unit * 0.5);\n  }\n  th {\n    background-color: lighten($grey-color-light, 3%);\n    border: 1px solid darken($grey-color-light, 4%);\n    border-bottom-color: darken($grey-color-light, 12%);\n  }\n  td {\n    border: 1px solid $grey-color-light;\n  }\n}\n","@charset \"utf-8\";\n\n// Define defaults for each variable.\n\n$base-font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\" !default;\n$base-font-size:   16px !default;\n$base-font-weight: 400 !default;\n$small-font-size:  $base-font-size * 0.875 !default;\n$base-line-height: 1.5 !default;\n\n$spacing-unit:     30px !default;\n\n$text-color:       #111 !default;\n$background-color: #fdfdfd !default;\n$brand-color:      #2a7ae2 !default;\n\n$grey-color:       #828282 !default;\n$grey-color-light: lighten($grey-color, 40%) !default;\n$grey-color-dark:  darken($grey-color, 25%) !default;\n\n$table-text-align: left !default;\n\n// Width of the content area\n$content-width:    800px !default;\n\n$on-palm:          600px !default;\n$on-laptop:        800px !default;\n\n// Use media queries like this:\n// @include media-query($on-palm) {\n//   .wrapper {\n//     padding-right: $spacing-unit / 2;\n//     padding-left: $spacing-unit / 2;\n//   }\n// }\n@mixin media-query($device) {\n  @media screen and (max-width: $device) {\n    @content;\n  }\n}\n\n@mixin relative-font-size($ratio) {\n  font-size: $base-font-size * $ratio;\n}\n\n// Import partials.\n@import\n  \"minima/base\",\n  \"minima/layout\",\n  \"minima/syntax-highlighting\"\n;\n","/**\n * Site header\n */\n.site-header {\n  border-top: 5px solid $grey-color-dark;\n  border-bottom: 1px solid $grey-color-light;\n  min-height: $spacing-unit * 1.865;\n\n  // Positioning context for the mobile navigation icon\n  position: relative;\n}\n\n.site-title {\n  @include relative-font-size(1.625);\n  font-weight: 300;\n  line-height: $base-line-height * $base-font-size * 2.25;\n  letter-spacing: -1px;\n  margin-bottom: 0;\n  float: left;\n\n  &,\n  &:visited {\n    color: $grey-color-dark;\n  }\n}\n\n.site-nav {\n  float: right;\n  line-height: $base-line-height * $base-font-size * 2.25;\n\n  .nav-trigger {\n      display: none;\n  }\n\n  .menu-icon {\n    display: none;\n  }\n\n  .page-link {\n    color: $text-color;\n    line-height: $base-line-height;\n\n    // Gaps between nav items, but not on the last one\n    &:not(:last-child) {\n      margin-right: 20px;\n    }\n  }\n\n  @include media-query($on-palm) {\n    position: absolute;\n    top: 9px;\n    right: $spacing-unit * 0.5;\n    background-color: $background-color;\n    border: 1px solid $grey-color-light;\n    border-radius: 5px;\n    text-align: right;\n\n    label[for=\"nav-trigger\"] {\n      display: block;\n      float: right;\n      width: 36px;\n      height: 36px;\n      z-index: 2;\n      cursor: pointer;\n    }\n\n    .menu-icon {\n      display: block;\n      float: right;\n      width: 36px;\n      height: 26px;\n      line-height: 0;\n      padding-top: 10px;\n      text-align: center;\n\n      > svg {\n        fill: $grey-color-dark;\n      }\n    }\n\n    input ~ .trigger {\n      clear: both;\n      display: none;\n    }\n\n    input:checked ~ .trigger {\n      display: block;\n      padding-bottom: 5px;\n    }\n\n    .page-link {\n      display: block;\n      margin-left: 20px;\n      padding: 5px 10px;\n\n      &:not(:last-child) {\n        margin-right: 0;\n      }\n    }\n  }\n}\n\n\n\n/**\n * Site footer\n */\n.site-footer {\n  border-top: 1px solid $grey-color-light;\n  padding: $spacing-unit 0;\n}\n\n.footer-heading {\n  @include relative-font-size(1.125);\n  margin-bottom: $spacing-unit * 0.5;\n}\n\n.contact-list,\n.social-media-list {\n  list-style: none;\n  margin-left: 0;\n}\n\n.footer-col-wrapper {\n  @include relative-font-size(0.9375);\n  color: $grey-color;\n  margin-left: -$spacing-unit * 0.5;\n  @extend %clearfix;\n}\n\n.footer-col {\n  float: left;\n  margin-bottom: $spacing-unit * 0.5;\n  padding-left: $spacing-unit * 0.5;\n}\n\n.footer-col-1 {\n  width: -webkit-calc(35% - (#{$spacing-unit} / 2));\n  width:         calc(35% - (#{$spacing-unit} / 2));\n}\n\n.footer-col-2 {\n  width: -webkit-calc(20% - (#{$spacing-unit} / 2));\n  width:         calc(20% - (#{$spacing-unit} / 2));\n}\n\n.footer-col-3 {\n  width: -webkit-calc(45% - (#{$spacing-unit} / 2));\n  width:         calc(45% - (#{$spacing-unit} / 2));\n}\n\n@include media-query($on-laptop) {\n  .footer-col-1,\n  .footer-col-2 {\n    width: -webkit-calc(50% - (#{$spacing-unit} / 2));\n    width:         calc(50% - (#{$spacing-unit} / 2));\n  }\n\n  .footer-col-3 {\n    width: -webkit-calc(100% - (#{$spacing-unit} / 2));\n    width:         calc(100% - (#{$spacing-unit} / 2));\n  }\n}\n\n@include media-query($on-palm) {\n  .footer-col {\n    float: none;\n    width: -webkit-calc(100% - (#{$spacing-unit} / 2));\n    width:         calc(100% - (#{$spacing-unit} / 2));\n  }\n}\n\n\n\n/**\n * Page content\n */\n.page-content {\n  padding: $spacing-unit 0;\n  flex: 1;\n}\n\n.page-heading {\n  @include relative-font-size(2);\n}\n\n.post-list-heading {\n  @include relative-font-size(1.75);\n}\n\n.post-list {\n  margin-left: 0;\n  list-style: none;\n\n  > li {\n    margin-bottom: $spacing-unit;\n  }\n}\n\n.post-meta {\n  font-size: $small-font-size;\n  color: $grey-color;\n}\n\n.post-link {\n  display: block;\n  @include relative-font-size(1.5);\n}\n\n\n\n/**\n * Posts\n */\n.post-header {\n  margin-bottom: $spacing-unit;\n}\n\n.post-title {\n  @include relative-font-size(2.625);\n  letter-spacing: -1px;\n  line-height: 1;\n\n  @include media-query($on-laptop) {\n    @include relative-font-size(2.25);\n  }\n}\n\n.post-content {\n  margin-bottom: $spacing-unit;\n\n  h2 {\n    @include relative-font-size(2);\n\n    @include media-query($on-laptop) {\n      @include relative-font-size(1.75);\n    }\n  }\n\n  h3 {\n    @include relative-font-size(1.625);\n\n    @include media-query($on-laptop) {\n      @include relative-font-size(1.375);\n    }\n  }\n\n  h4 {\n    @include relative-font-size(1.25);\n\n    @include media-query($on-laptop) {\n      @include relative-font-size(1.125);\n    }\n  }\n}\n","/**\n * Syntax highlighting styles\n */\n.highlight {\n  background: #fff;\n  @extend %vertical-rhythm;\n\n  .highlighter-rouge & {\n    background: #eef;\n  }\n\n  .c     { color: #998; font-style: italic } // Comment\n  .err   { color: #a61717; background-color: #e3d2d2 } // Error\n  .k     { font-weight: bold } // Keyword\n  .o     { font-weight: bold } // Operator\n  .cm    { color: #998; font-style: italic } // Comment.Multiline\n  .cp    { color: #999; font-weight: bold } // Comment.Preproc\n  .c1    { color: #998; font-style: italic } // Comment.Single\n  .cs    { color: #999; font-weight: bold; font-style: italic } // Comment.Special\n  .gd    { color: #000; background-color: #fdd } // Generic.Deleted\n  .gd .x { color: #000; background-color: #faa } // Generic.Deleted.Specific\n  .ge    { font-style: italic } // Generic.Emph\n  .gr    { color: #a00 } // Generic.Error\n  .gh    { color: #999 } // Generic.Heading\n  .gi    { color: #000; background-color: #dfd } // Generic.Inserted\n  .gi .x { color: #000; background-color: #afa } // Generic.Inserted.Specific\n  .go    { color: #888 } // Generic.Output\n  .gp    { color: #555 } // Generic.Prompt\n  .gs    { font-weight: bold } // Generic.Strong\n  .gu    { color: #aaa } // Generic.Subheading\n  .gt    { color: #a00 } // Generic.Traceback\n  .kc    { font-weight: bold } // Keyword.Constant\n  .kd    { font-weight: bold } // Keyword.Declaration\n  .kp    { font-weight: bold } // Keyword.Pseudo\n  .kr    { font-weight: bold } // Keyword.Reserved\n  .kt    { color: #458; font-weight: bold } // Keyword.Type\n  .m     { color: #099 } // Literal.Number\n  .s     { color: #d14 } // Literal.String\n  .na    { color: #008080 } // Name.Attribute\n  .nb    { color: #0086B3 } // Name.Builtin\n  .nc    { color: #458; font-weight: bold } // Name.Class\n  .no    { color: #008080 } // Name.Constant\n  .ni    { color: #800080 } // Name.Entity\n  .ne    { color: #900; font-weight: bold } // Name.Exception\n  .nf    { color: #900; font-weight: bold } // Name.Function\n  .nn    { color: #555 } // Name.Namespace\n  .nt    { color: #000080 } // Name.Tag\n  .nv    { color: #008080 } // Name.Variable\n  .ow    { font-weight: bold } // Operator.Word\n  .w     { color: #bbb } // Text.Whitespace\n  .mf    { color: #099 } // Literal.Number.Float\n  .mh    { color: #099 } // Literal.Number.Hex\n  .mi    { color: #099 } // Literal.Number.Integer\n  .mo    { color: #099 } // Literal.Number.Oct\n  .sb    { color: #d14 } // Literal.String.Backtick\n  .sc    { color: #d14 } // Literal.String.Char\n  .sd    { color: #d14 } // Literal.String.Doc\n  .s2    { color: #d14 } // Literal.String.Double\n  .se    { color: #d14 } // Literal.String.Escape\n  .sh    { color: #d14 } // Literal.String.Heredoc\n  .si    { color: #d14 } // Literal.String.Interpol\n  .sx    { color: #d14 } // Literal.String.Other\n  .sr    { color: #009926 } // Literal.String.Regex\n  .s1    { color: #d14 } // Literal.String.Single\n  .ss    { color: #990073 } // Literal.String.Symbol\n  .bp    { color: #999 } // Name.Builtin.Pseudo\n  .vc    { color: #008080 } // Name.Variable.Class\n  .vg    { color: #008080 } // Name.Variable.Global\n  .vi    { color: #008080 } // Name.Variable.Instance\n  .il    { color: #099 } // Literal.Number.Integer.Long\n}\n"],"file":"main.css"}
\ No newline at end of file
diff --git a/_site/feed.xml b/_site/feed.xml
index 52d8047..99a9d80 100644
--- a/_site/feed.xml
+++ b/_site/feed.xml
@@ -1 +1 @@
-<?xml version="1.0" encoding="utf-8"?><feed xmlns="http://www.w3.org/2005/Atom" ><generator uri="https://jekyllrb.com/" version="4.4.1">Jekyll</generator><link href="http://localhost:4000/feed.xml" rel="self" type="application/atom+xml" /><link href="http://localhost:4000/" rel="alternate" type="text/html" /><updated>2026-01-08T16:11:33-07:00</updated><id>http://localhost:4000/feed.xml</id><title type="html">Your awesome title</title><subtitle>Write an awesome description for your new site here. You can edit this line in _con Google search results) and in your feed.xml site description.</subtitle></feed>
\ No newline at end of file
+<?xml version="1.0" encoding="utf-8"?><feed xmlns="http://www.w3.org/2005/Atom" ><generator uri="https://jekyllrb.com/" version="4.4.1">Jekyll</generator><link href="/feed.xml" rel="self" type="application/atom+xml" /><link href="/" rel="alternate" type="text/html" /><updated>2026-01-29T19:34:23+00:00</updated><id>/feed.xml</id><title type="html">Your awesome title</title><subtitle>Write an awesome description for your new site here. You can edit this line in _con Google search results) and in your feed.xml site description.</subtitle></feed>
\ No newline at end of file
diff --git a/_site/index.html b/_site/index.html
index 80c45d6..f86a974 100644
--- a/_site/index.html
+++ b/_site/index.html
@@ -3,7 +3,7 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Home | Annabel Gray</title>
+    <title>Welcome | Annabel Gray</title>
 
     <!-- Custom styles -->
     <link rel="stylesheet" href="/assets/css/styles.css" />
@@ -61,6 +61,13 @@
       <div class="hidden sm:inline">GRAY</div>
     </a>
     <ul class="flex space-x-5 items-center">
+      <li class="flex items-center gap-1">
+        <a
+          href="/about/"
+          class="hover:text-pink-600 dark:hover:text-teal-200"
+          >About</a
+        >
+      </li>
       <li class="flex items-center gap-1">
         <a
           href="/media/"
@@ -128,155 +135,69 @@
 
 
     <!-- Main content -->
-    <main class="py-8 md:px-4"><!-- Intro -->
-<section class="pt-12 sm:pt-32 pb-16 sm:pb-52 md:flex mx-auto justify-center text-center md:text-left md:pl-10">
-  <h1 class="text-3xl md:text-5xl max-w-xl mx-auto md:mx-0 md:max-w-lg px-4 md:px-0">
-    I'm Annabel and I'm a
-    <span class="line-through old-job">frontend developer</span>
-    <span class="font-extrabold bg-gradient-to-r from-red-400 via-orange-500 to-pink-600 dark:from-emerald-700 dark:via-teal-600 dark:to-slate-400 bg-clip-text text-transparent">product designer</span>, currently at
-    <a href="https://github.com/annabel" class="relative inline-block" style="position:relative; display:inline-block;">
-      Git<span style="position:relative; display:inline-block;">
-        <span>Lab</span>
-        <span class="handwritten-overlay">Hub</span>
-      </span>
-    </a>
-  </h1>
-  <div class="relative top-4 md:-left-20 md:top-14 h-48 w-48 mx-auto md:mx-0">
-    <img src="/assets/images/notion-avatar.png" class="avatar" />
-  </div>
-</section>
-
-<script>
-  window.addEventListener('DOMContentLoaded', function() {
-    setTimeout(function() {
-      var overlay = document.querySelector('.handwritten-overlay');
-      if (overlay) {
-        overlay.classList.add('write-in');
-      }
-    }, 1800);
-  });
-</script>
-
-<!-- Case studies -->
+    <main class="py-8 md:px-4"><!-- Welcome Section -->
+<section class="min-h-[70vh] flex items-center justify-center px-4">
+  <div class="max-w-4xl mx-auto text-center">
+    <!-- Greeting -->
+    <div class="mb-8">
+      <h1 class="text-5xl md:text-7xl font-extrabold mb-4">
+        <span class="bg-gradient-to-r from-red-400 via-orange-500 to-pink-600 dark:from-emerald-700 dark:via-teal-600 dark:to-slate-400 bg-clip-text text-transparent">
+          Welcome!
+        </span>
+      </h1>
+      <p class="text-2xl md:text-3xl text-gray-600 dark:text-gray-300 mb-6">
+        I'm Annabel Gray
+      </p>
+      <p class="text-lg md:text-xl text-gray-500 dark:text-gray-400 max-w-2xl mx-auto">
+        A product designer passionate about creating intuitive user experiences and bringing ideas to life through thoughtful design.
+      </p>
+    </div>
 
-<section class="py-20 md:-mx-4">
-  <div class="px-4 md:px-24 py-8 relative inset-0 h-full w-full bg-white bg-[radial-gradient(#c1c3c7_1px,transparent_1px)] [background-size:16px_16px] dark:bg-neutral-800">
-    <h2 class="text-4xl mb-4">Recent work</h2>
-    <div class="grid grid-cols-1 lg:grid-cols-2 gap-4 text-white text-sm font-semibold leading-6 rounded-lg">
-      
-      <div class="p-4 text-xl rounded-lg min-h-48 case-study bg-gradient-to-r from-red-400 via-orange-500 to-pink-400 dark:from-emerald-800 dark:via-teal-800 dark:to-slate-600">
-        <h3 class="text-2xl mb-4">UX Paper Cuts</h3>
-        <img class="w-108 mb-5 rounded" src="/assets/images/papercuts.png" alt="UX Paper Cuts" />
-        <div class="flex gap-2 flex-wrap">
-          
-          <span class="whitespace-nowrap rounded-full bg-white/25 px-3 py-1 text-sm text-white">Design</span>
-          
-          <span class="whitespace-nowrap rounded-full bg-white/25 px-3 py-1 text-sm text-white">Vue</span>
-          
-          <span class="whitespace-nowrap rounded-full bg-white/25 px-3 py-1 text-sm text-white">Ruby</span>
-          
-          <span class="whitespace-nowrap rounded-full bg-white/25 px-3 py-1 text-sm text-white">Feature flags</span>
-          
-          <span class="whitespace-nowrap rounded-full bg-white/25 px-3 py-1 text-sm text-white">Project management</span>
-          
-        </div>
-      </div>
-      
-      <div class="p-4 text-xl rounded-lg min-h-48 case-study bg-gradient-to-r from-pink-400 via-orange-500 to-red-400 dark:from-slate-600 dark:via-teal-800 dark:to-emerald-800">
-        <h3 class="text-2xl mb-4">Merge requests</h3>
-        <img class="w-108 mb-5 rounded" src="/assets/images/merge-requests.png" alt="Merge requests" />
-        <div class="flex gap-2 flex-wrap">
-          
-          <span class="whitespace-nowrap rounded-full bg-white/25 px-3 py-1 text-sm text-white">UX research</span>
-          
-          <span class="whitespace-nowrap rounded-full bg-white/25 px-3 py-1 text-sm text-white">Design</span>
-          
-        </div>
-      </div>
-      
+    <!-- Branding Element -->
+    <div class="flex justify-center items-center gap-2 mb-12">
+      <div class="text-3xl font-bold tracking-wide text-gray-700 dark:text-gray-200">ANNABEL</div>
+      <div class="h-6 w-6 bg-gradient-to-br from-orange-400 to-pink-500 dark:from-emerald-600 dark:to-teal-500 rounded-full"></div>
+      <div class="text-3xl font-bold tracking-wide text-gray-700 dark:text-gray-200">GRAY</div>
     </div>
-  </div>
-</section>
 
-<!-- About -->
-<section class="md:px-10">
-  <div class="px-4 md:px-10 lg:flex">
-    <h2 class="text-4xl mb-4 lg:mr-20 whitespace-nowrap">About me</h2>
-    <div class="flex gap-8 flex-col">
-      <div class="mt-2">
-        <h3 class="text-2xl mb-2 text-pink-600 dark:text-emerald-500">
-          Experience
-        </h3>
-        <p class="text-lg sm:text-2xl max-w-prose">
-          I'm a staff product designer with over 10 years of experience in
-          the tech industry. With a background as a frontend developer, I
-          bring a unique blend of design thinking and technical expertise
-          to every project. I'm passionate about creating intuitive user
-          experiences, and leveraging UX research to inform design
-          decisions. My approach combines a deep understanding of both
-          design and development to craft seamless, user-centered
-          products.
+    <!-- Navigation Cards -->
+    <div class="grid md:grid-cols-2 gap-6 max-w-2xl mx-auto">
+      <!-- About Card -->
+      <a href="/about/" class="group p-8 bg-gradient-to-br from-orange-50 to-pink-50 dark:from-neutral-700 dark:to-neutral-800 rounded-2xl hover:shadow-xl transition-all duration-300 hover:scale-105">
+        <div class="mb-4">
+          <svg xmlns="http://www.w3.org/2000/svg" class="h-12 w-12 mx-auto text-pink-600 dark:text-emerald-500" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" />
+          </svg>
+        </div>
+        <h2 class="text-2xl font-bold mb-2 text-gray-800 dark:text-gray-100 group-hover:text-pink-600 dark:group-hover:text-emerald-400">
+          About Me
+        </h2>
+        <p class="text-gray-600 dark:text-gray-300">
+          Learn about my journey, experience, and what I'm passionate about
         </p>
-      </div>
-      <div class="mt-2">
-        <h3 class="text-2xl mb-2 text-pink-600 dark:text-emerald-500">
-          Outside of work
-        </h3>
-        <div class="text-lg sm:text-2xl max-w-prose">
-          When I’m not working, you can usually find me baking, drawing,
-          playing with my kids, or reading a good book.
-          <div class="mt-2">I'm currently reading:</div>
-          <ul class="text-lg sm:text-xl">
-  
-  <li class="list-disc ml-7 my-3">
-    <a href="https://www.goodreads.com/book/show/34002132-oathbringer" class="italic underline underline-offset-4 decoration-1 text-orange-600 dark:text-teal-500" target="_blank">Oathbringer (The Stormlight Archive #3)</a><!-- No space between </a> and next element -->
-    <span class="mx-1">by</span>Brandon Sanderson
-  </li>
-  
-  <li class="list-disc ml-7 my-3">
-    <a href="https://www.goodreads.com/book/show/24.In_a_Sunburned_Country" class="italic underline underline-offset-4 decoration-1 text-orange-600 dark:text-teal-500" target="_blank">In a Sunburned Country</a><!-- No space between </a> and next element -->
-    <span class="mx-1">by</span>Bill Bryson
-  </li>
-  
-  <li class="list-disc ml-7 my-3">
-    <a href="https://www.goodreads.com/book/show/18803640-h-is-for-hawk" class="italic underline underline-offset-4 decoration-1 text-orange-600 dark:text-teal-500" target="_blank">H is for Hawk</a><!-- No space between </a> and next element -->
-    <span class="mx-1">by</span>Helen Macdonald
-  </li>
-  
-</ul>
-
-          <div class="mt-2">...and recently finished:</div>
-          <ul class="text-lg sm:text-xl">
-  
-  <li class="list-disc ml-7 my-3">
-    <a href="https://www.goodreads.com/book/show/65215677-exit-interview" class="italic underline underline-offset-4 decoration-1 text-orange-600 dark:text-teal-500" target="_blank">Exit Interview</a><!-- No space between </a> and next element -->
-    <span class="mx-1">by</span>Kristi Coulter
-  </li>
-  
-  <li class="list-disc ml-7 my-3">
-    <a href="https://www.goodreads.com/book/show/48989372-a-very-punchable-face" class="italic underline underline-offset-4 decoration-1 text-orange-600 dark:text-teal-500" target="_blank">A Very Punchable Face</a><!-- No space between </a> and next element -->
-    <span class="mx-1">by</span>Colin Jost
-  </li>
-  
-  <li class="list-disc ml-7 my-3">
-    <a href="https://www.goodreads.com/book/show/231148075-the-art-of-spending-money" class="italic underline underline-offset-4 decoration-1 text-orange-600 dark:text-teal-500" target="_blank">The Art of Spending Money</a><!-- No space between </a> and next element -->
-    <span class="mx-1">by</span>Morgan Housel
-  </li>
-  
-  <li class="list-disc ml-7 my-3">
-    <a href="https://www.goodreads.com/book/show/7507825-at-home" class="italic underline underline-offset-4 decoration-1 text-orange-600 dark:text-teal-500" target="_blank">At Home: A Short History of Private Life</a><!-- No space between </a> and next element -->
-    <span class="mx-1">by</span>Bill Bryson
-  </li>
-  
-  <li class="list-disc ml-7 my-3">
-    <a href="https://www.goodreads.com/book/show/220239083-a-marriage-at-sea" class="italic underline underline-offset-4 decoration-1 text-orange-600 dark:text-teal-500" target="_blank">A Marriage at Sea</a><!-- No space between </a> and next element -->
-    <span class="mx-1">by</span>Sophie Elmhirst
-  </li>
-  
-</ul>
+      </a>
 
+      <!-- Media Card -->
+      <a href="/media/" class="group p-8 bg-gradient-to-br from-purple-50 to-blue-50 dark:from-neutral-700 dark:to-neutral-800 rounded-2xl hover:shadow-xl transition-all duration-300 hover:scale-105">
+        <div class="mb-4">
+          <svg xmlns="http://www.w3.org/2000/svg" class="h-12 w-12 mx-auto text-pink-600 dark:text-emerald-500" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 20H5a2 2 0 01-2-2V6a2 2 0 012-2h10a2 2 0 012 2v1m2 13a2 2 0 01-2-2V7m2 13a2 2 0 002-2V9a2 2 0 00-2-2h-2m-4-3H9M7 16h6M7 8h6v4H7V8z" />
+          </svg>
         </div>
-      </div>
+        <h2 class="text-2xl font-bold mb-2 text-gray-800 dark:text-gray-100 group-hover:text-pink-600 dark:group-hover:text-emerald-400">
+          Media
+        </h2>
+        <p class="text-gray-600 dark:text-gray-300">
+          Explore my publications, videos, and featured work
+        </p>
+      </a>
+    </div>
+
+    <!-- Additional Message -->
+    <div class="mt-12">
+      <p class="text-gray-500 dark:text-gray-400 italic">
+        Thanks for visiting! Feel free to explore and get in touch.
+      </p>
     </div>
   </div>
 </section>
diff --git a/_site/media/index.html b/_site/media/index.html
index 664c3a5..499d082 100644
--- a/_site/media/index.html
+++ b/_site/media/index.html
@@ -61,6 +61,13 @@
       <div class="hidden sm:inline">GRAY</div>
     </a>
     <ul class="flex space-x-5 items-center">
+      <li class="flex items-center gap-1">
+        <a
+          href="/about/"
+          class="hover:text-pink-600 dark:hover:text-teal-200"
+          >About</a
+        >
+      </li>
       <li class="flex items-center gap-1">
         <a
           href="/media/"
diff --git a/about.markdown b/about.markdown
new file mode 100644
index 0000000..0a8309f
--- /dev/null
+++ b/about.markdown
@@ -0,0 +1,88 @@
+---
+layout: default
+title: About
+permalink: /about/
+---
+
+<!-- Intro -->
+<section
+  class="pt-12 sm:pt-32 pb-16 sm:pb-52 md:flex mx-auto justify-center text-center md:text-left md:pl-10"
+>
+  <h1
+    class="text-3xl md:text-5xl max-w-xl mx-auto md:mx-0 md:max-w-lg px-4 md:px-0"
+  >
+    I'm Annabel and I'm a
+    <span class="line-through old-job">frontend developer</span>
+    <span
+      class="font-extrabold bg-gradient-to-r from-red-400 via-orange-500 to-pink-600 dark:from-emerald-700 dark:via-teal-600 dark:to-slate-400 bg-clip-text text-transparent"
+      >product designer</span
+    >, currently at
+    <a
+      href="https://github.com/annabel"
+      class="relative inline-block"
+      style="position:relative; display:inline-block;"
+    >
+      Git<span style="position:relative; display:inline-block;">
+        <span>Lab</span>
+        <span class="handwritten-overlay">Hub</span>
+      </span>
+    </a>
+  </h1>
+  <div
+    class="relative top-4 md:-left-20 md:top-14 h-48 w-48 mx-auto md:mx-0"
+  >
+    <img src="/assets/images/notion-avatar.png" class="avatar" />
+  </div>
+</section>
+
+<script>
+  window.addEventListener('DOMContentLoaded', function() {
+    setTimeout(function() {
+      var overlay = document.querySelector('.handwritten-overlay');
+      if (overlay) {
+        overlay.classList.add('write-in');
+      }
+    }, 1800);
+  });
+</script>
+
+<!-- Case studies -->
+
+{% include case_study.html cases=site.data.case_studies %}
+
+<!-- About -->
+<section class="md:px-10">
+  <div class="px-4 md:px-10 lg:flex">
+    <h2 class="text-4xl mb-4 lg:mr-20 whitespace-nowrap">About me</h2>
+    <div class="flex gap-8 flex-col">
+      <div class="mt-2">
+        <h3 class="text-2xl mb-2 text-pink-600 dark:text-emerald-500">
+          Experience
+        </h3>
+        <p class="text-lg sm:text-2xl max-w-prose">
+          I'm a staff product designer with over 10 years of experience in
+          the tech industry. With a background as a frontend developer, I
+          bring a unique blend of design thinking and technical expertise
+          to every project. I'm passionate about creating intuitive user
+          experiences, and leveraging UX research to inform design
+          decisions. My approach combines a deep understanding of both
+          design and development to craft seamless, user-centered
+          products.
+        </p>
+      </div>
+      <div class="mt-2">
+        <h3 class="text-2xl mb-2 text-pink-600 dark:text-emerald-500">
+          Outside of work
+        </h3>
+        <div class="text-lg sm:text-2xl max-w-prose">
+          When I’m not working, you can usually find me baking, drawing,
+          playing with my kids, or reading a good book.
+          <div class="mt-2">I'm currently reading:</div>
+          {% include book_list.html books=site.data.books.currently_reading %}
+          <div class="mt-2">...and recently finished:</div>
+          {% include book_list.html books=site.data.books.recently_finished %}
+        </div>
+      </div>
+    </div>
+  </div>
+</section>
diff --git a/index.markdown b/index.markdown
index 37dd12c..aba7b88 100644
--- a/index.markdown
+++ b/index.markdown
@@ -1,87 +1,101 @@
 ---
 layout: default
-title: Home
+title: Welcome
 ---
 
-<!-- Intro -->
-<section
-  class="pt-12 sm:pt-32 pb-16 sm:pb-52 md:flex mx-auto justify-center text-center md:text-left md:pl-10"
->
-  <h1
-    class="text-3xl md:text-5xl max-w-xl mx-auto md:mx-0 md:max-w-lg px-4 md:px-0"
-  >
-    I'm Annabel and I'm a
-    <span class="line-through old-job">frontend developer</span>
-    <span
-      class="font-extrabold bg-gradient-to-r from-red-400 via-orange-500 to-pink-600 dark:from-emerald-700 dark:via-teal-600 dark:to-slate-400 bg-clip-text text-transparent"
-      >product designer</span
-    >, currently at
-    <a
-      href="https://github.com/annabel"
-      class="relative inline-block"
-      style="position:relative; display:inline-block;"
-    >
-      Git<span style="position:relative; display:inline-block;">
-        <span>Lab</span>
-        <span class="handwritten-overlay">Hub</span>
-      </span>
-    </a>
-  </h1>
-  <div
-    class="relative top-4 md:-left-20 md:top-14 h-48 w-48 mx-auto md:mx-0"
-  >
-    <img src="/assets/images/notion-avatar.png" class="avatar" />
-  </div>
-</section>
-
-<script>
-  window.addEventListener('DOMContentLoaded', function() {
-    setTimeout(function() {
-      var overlay = document.querySelector('.handwritten-overlay');
-      if (overlay) {
-        overlay.classList.add('write-in');
-      }
-    }, 1800);
-  });
-</script>
-
-<!-- Case studies -->
+<!-- Welcome Section -->
+<section class="min-h-[70vh] flex items-center justify-center px-4">
+  <div class="max-w-4xl mx-auto text-center">
+    <!-- Greeting -->
+    <div class="mb-8">
+      <h1 class="text-5xl md:text-7xl font-extrabold mb-4">
+        <span class="bg-gradient-to-r from-red-400 via-orange-500 to-pink-600 dark:from-emerald-700 dark:via-teal-600 dark:to-slate-400 bg-clip-text text-transparent">
+          Welcome!
+        </span>
+      </h1>
+      <p class="text-2xl md:text-3xl text-gray-600 dark:text-gray-300 mb-6">
+        I'm Annabel Gray
+      </p>
+      <p class="text-lg md:text-xl text-gray-500 dark:text-gray-400 max-w-2xl mx-auto">
+        A product designer passionate about creating intuitive user experiences and bringing ideas to life through thoughtful design.
+      </p>
+    </div>
 
-{% include case_study.html cases=site.data.case_studies %}
+    <!-- Branding Element -->
+    <div class="flex justify-center items-center gap-2 mb-12">
+      <div class="text-3xl font-bold tracking-wide text-gray-700 dark:text-gray-200">ANNABEL</div>
+      <div class="h-6 w-6 bg-gradient-to-br from-orange-400 to-pink-500 dark:from-emerald-600 dark:to-teal-500 rounded-full"></div>
+      <div class="text-3xl font-bold tracking-wide text-gray-700 dark:text-gray-200">GRAY</div>
+    </div>
 
-<!-- About -->
-<section class="md:px-10">
-  <div class="px-4 md:px-10 lg:flex">
-    <h2 class="text-4xl mb-4 lg:mr-20 whitespace-nowrap">About me</h2>
-    <div class="flex gap-8 flex-col">
-      <div class="mt-2">
-        <h3 class="text-2xl mb-2 text-pink-600 dark:text-emerald-500">
-          Experience
-        </h3>
-        <p class="text-lg sm:text-2xl max-w-prose">
-          I'm a staff product designer with over 10 years of experience in
-          the tech industry. With a background as a frontend developer, I
-          bring a unique blend of design thinking and technical expertise
-          to every project. I'm passionate about creating intuitive user
-          experiences, and leveraging UX research to inform design
-          decisions. My approach combines a deep understanding of both
-          design and development to craft seamless, user-centered
-          products.
+    <!-- Navigation Cards -->
+    <div class="grid md:grid-cols-2 gap-6 max-w-2xl mx-auto">
+      <!-- About Card -->
+      <a
+        href="/about/"
+        class="group p-8 bg-gradient-to-br from-orange-50 to-pink-50 dark:from-neutral-700 dark:to-neutral-800 rounded-2xl hover:shadow-xl transition-all duration-300 hover:scale-105"
+      >
+        <div class="mb-4">
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            class="h-12 w-12 mx-auto text-pink-600 dark:text-emerald-500"
+            fill="none"
+            viewBox="0 0 24 24"
+            stroke="currentColor"
+            aria-hidden="true"
+          >
+            <path
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              stroke-width="2"
+              d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"
+            />
+          </svg>
+        </div>
+        <h2 class="text-2xl font-bold mb-2 text-gray-800 dark:text-gray-100 group-hover:text-pink-600 dark:group-hover:text-emerald-400">
+          About Me
+        </h2>
+        <p class="text-gray-600 dark:text-gray-300">
+          Learn about my journey, experience, and what I'm passionate about
         </p>
-      </div>
-      <div class="mt-2">
-        <h3 class="text-2xl mb-2 text-pink-600 dark:text-emerald-500">
-          Outside of work
-        </h3>
-        <div class="text-lg sm:text-2xl max-w-prose">
-          When I’m not working, you can usually find me baking, drawing,
-          playing with my kids, or reading a good book.
-          <div class="mt-2">I'm currently reading:</div>
-          {% include book_list.html books=site.data.books.currently_reading %}
-          <div class="mt-2">...and recently finished:</div>
-          {% include book_list.html books=site.data.books.recently_finished %}
+      </a>
+
+      <!-- Media Card -->
+      <a
+        href="/media/"
+        class="group p-8 bg-gradient-to-br from-purple-50 to-blue-50 dark:from-neutral-700 dark:to-neutral-800 rounded-2xl hover:shadow-xl transition-all duration-300 hover:scale-105"
+      >
+        <div class="mb-4">
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            class="h-12 w-12 mx-auto text-pink-600 dark:text-emerald-500"
+            fill="none"
+            viewBox="0 0 24 24"
+            stroke="currentColor"
+            aria-hidden="true"
+          >
+            <path
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              stroke-width="2"
+              d="M19 20H5a2 2 0 01-2-2V6a2 2 0 012-2h10a2 2 0 012 2v1m2 13a2 2 0 01-2-2V7m2 13a2 2 0 002-2V9a2 2 0 00-2-2h-2m-4-3H9M7 16h6M7 8h6v4H7V8z"
+            />
+          </svg>
         </div>
-      </div>
+        <h2 class="text-2xl font-bold mb-2 text-gray-800 dark:text-gray-100 group-hover:text-pink-600 dark:group-hover:text-emerald-400">
+          Media
+        </h2>
+        <p class="text-gray-600 dark:text-gray-300">
+          Explore my publications, videos, and featured work
+        </p>
+      </a>
+    </div>
+
+    <!-- Additional Message -->
+    <div class="mt-12">
+      <p class="text-gray-500 dark:text-gray-400 italic">
+        Thanks for visiting! Feel free to explore and get in touch.
+      </p>
     </div>
   </div>
 </section>
