annabel · Copilot · Jan 29, 2026 · Jan 29, 2026 · Jan 29, 2026 · Jan 29, 2026
diff --git a/.gitignore 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
@@ -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
@@ -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
diff --git 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>
+<?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>
Original file line number	Diff line number	Diff line change
		@@ -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>
		<?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>