.forgejo/workflows/deploy.yml

@@ -1,53 +0,0 @@
-name: deploy
-
-on:
-  push:
-    branches:
-      - main
-    paths:
-      - src/**/*
-      - public/**/*
-      - .forgejo/workflows/deploy.yml
-      - astro.config.mjs
-      - tsconfig.json
-      - package.json
-      - bun.lock
-
-jobs:
-  build:
-    runs-on: trixie
-    env:
-      TERM: dumb
-      NIX_INSTALLER_INIT: "none"
-      NIX_INSTALLER_NO_CONFIRM: "true"
-      NIX_INSTALLER_ENABLE_FLAKES: "true"
-    steps:
-      - name: Checkout repository
-        uses: https://code.forgejo.org/actions/checkout@v6.0.1
-      - name: Setup lix toolchain
-        run: curl -sL https://install.lix.systems/lix | sh -s -- install linux
-      - name: Install bun dependencies
-        run: nix develop -c bun install --frozen-lockfile
-      - name: Build static files for website
-        run: nix develop -c bun run build
-      - name: Upload static files
-        uses: https://code.forgejo.org/forgejo/upload-artifact@v5
-        with:
-          name: website-${{ forge.sha }}
-          retention-days: 1
-          path: dist
-  deploy:
-    needs: [build]
-    runs-on: trixie
-    env: { TERM: "dumb" }
-    container: { image: "node:current" }
-    steps:
-      - name: Download static files
-        uses: https://code.forgejo.org/forgejo/download-artifact@v7
-        with: { name: "website-${{ forge.sha }}", path: "dist" }
-      - name: Deploy website to cloudflare
-        uses: https://github.com/cloudflare/wrangler-action@v3.14.1
-        with:
-          apiToken: ${{ secrets.CLOUDFLARE_API_TOKEN }}
-          accountId: ${{ secrets.CLOUDFLARE_ACCOUNT_ID }}
-          command: pages deploy dist --project-name=website

.gitlab-ci.yml

@@ -0,0 +1,41 @@
+stages:
+  - build
+  - deploy
+
+workflow:
+  rules:
+    - changes:
+        - src/**/*
+        - public/**/*
+        - astro.config.mjs
+        - .gitlab-ci.yml
+        - tsconfig.json
+        - package.json
+        - flake.lock
+        - flake.nix
+        - bun.lock
+
+build:
+  stage: build
+  image: alpine:edge
+  variables:
+    TERM: "dumb"
+    NIX_INSTALLER_NO_CONFIRM: "true"
+    NIX_INSTALLER_ENABLE_FLAKES: "true"
+  before_script:
+    - apk add --no-cache curl bash git xz
+    - curl -sL https://install.lix.systems/lix | sh -s -- install linux --init none
+    - source /nix/var/nix/profiles/default/etc/profile.d/nix-daemon.sh
+  script:
+    - nix develop -c bun install
+    - nix develop -c bun run build
+  artifacts:
+    name: website-$CI_COMMIT_SHA
+    expire_in: 1 day
+    paths: [dist]
+
+deploy:
+  stage: deploy
+  image: node:alpine
+  needs: [build]
+  script: npx wrangler pages deploy dist --project-name=website

README.md

@@ -1,4 +1,4 @@
-# website ![license] ![status]
+# Website
 
 The source code of my personal website and blog, made using the [Astro] static
 site generator.
@@ -13,9 +13,6 @@ Due to the nature of the content in this repository, it uses multiple licenses.
 
 All files that are in this repository must follow these licenses.
 
-[status]: https://badge.hanna.lol/build/hanna/website/main
-[license]: https://badge.hanna.lol/license/MPL-2.0
-
 [astro]: https://astro.build
 [mpl-2.0]: https://choosealicense.com/licenses/mpl-2.0
 [cc by-nc-nd 4.0]: https://creativecommons.org/licenses/by-nc-nd/4.0

astro.config.mjs

@@ -5,7 +5,4 @@ import mdx from '@astrojs/mdx';
 
 export default defineConfig({
   integrations: [mdx()],
-  image: {
-    service: { entrypoint: 'astro/assets/services/noop' },
-  },
 });

flake.lock

@@ -21,11 +21,11 @@
     },
     "nixpkgs": {
       "locked": {
-        "lastModified": 1766025857,
-        "narHash": "sha256-Lav5jJazCW4mdg1iHcROpuXqmM94BWJvabLFWaJVJp0=",
+        "lastModified": 1765903799,
+        "narHash": "sha256-1wbl0y7U8TvSHxDWME7o92bIspfuhjVaTOs27r54uc4=",
         "owner": "nixos",
         "repo": "nixpkgs",
-        "rev": "def3da69945bbe338c373fddad5a1bb49cf199ce",
+        "rev": "e8d16d2186d6ed9f047eb30948e97e7e01886d10",
         "type": "github"
       },
       "original": {

public/img/calendar.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-calendar-icon lucide-calendar"><path d="M8 2v4"/><path d="M16 2v4"/><rect width="18" height="18" x="3" y="4" rx="2"/><path d="M3 10h18"/></svg>

public/img/emoji.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-smile-plus-icon lucide-smile-plus"><path d="M22 11v1a10 10 0 1 1-9-10"/><path d="M8 14s1.5 2 4 2 4-2 4-2"/><line x1="9" x2="9.01" y1="9" y2="9"/><line x1="15" x2="15.01" y1="9" y2="9"/><path d="M16 5h6"/><path d="M19 2v6"/></svg>

public/img/envelope.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-mail-icon lucide-mail"><path d="m22 7-8.991 5.727a2 2 0 0 1-2.009 0L2 7"/><rect x="2" y="4" width="20" height="16" rx="2"/></svg>

public/img/file-user.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-file-user-icon lucide-file-user"><path d="M6 22a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h8a2.4 2.4 0 0 1 1.704.706l3.588 3.588A2.4 2.4 0 0 1 20 8v12a2 2 0 0 1-2 2z"/><path d="M14 2v5a1 1 0 0 0 1 1h5"/><path d="M16 22a4 4 0 0 0-8 0"/><circle cx="12" cy="15" r="3"/></svg>

public/img/games.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-gamepad-directional-icon lucide-gamepad-directional"><path d="M11.146 15.854a1.207 1.207 0 0 1 1.708 0l1.56 1.56A2 2 0 0 1 15 18.828V21a1 1 0 0 1-1 1h-4a1 1 0 0 1-1-1v-2.172a2 2 0 0 1 .586-1.414z"/><path d="M18.828 15a2 2 0 0 1-1.414-.586l-1.56-1.56a1.207 1.207 0 0 1 0-1.708l1.56-1.56A2 2 0 0 1 18.828 9H21a1 1 0 0 1 1 1v4a1 1 0 0 1-1 1z"/><path d="M6.586 14.414A2 2 0 0 1 5.172 15H3a1 1 0 0 1-1-1v-4a1 1 0 0 1 1-1h2.172a2 2 0 0 1 1.414.586l1.56 1.56a1.207 1.207 0 0 1 0 1.708z"/><path d="M9 3a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v2.172a2 2 0 0 1-.586 1.414l-1.56 1.56a1.207 1.207 0 0 1-1.708 0l-1.56-1.56A2 2 0 0 1 9 5.172z"/></svg>

public/img/gitlab.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-gitlab-icon lucide-gitlab"><path d="m22 13.29-3.33-10a.42.42 0 0 0-.14-.18.38.38 0 0 0-.22-.11.39.39 0 0 0-.23.07.42.42 0 0 0-.14.18l-2.26 6.67H8.32L6.1 3.26a.42.42 0 0 0-.1-.18.38.38 0 0 0-.26-.08.39.39 0 0 0-.23.07.42.42 0 0 0-.14.18L2 13.29a.74.74 0 0 0 .27.83L12 21l9.69-6.88a.71.71 0 0 0 .31-.83Z"/></svg>

public/img/heart.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-heart-icon lucide-heart"><path d="M2 9.5a5.5 5.5 0 0 1 9.591-3.676.56.56 0 0 0 .818 0A5.49 5.49 0 0 1 22 9.5c0 2.29-1.5 4-3 5.5l-5.492 5.313a2 2 0 0 1-3 .019L5 15c-1.5-1.5-3-3.2-3-5.5"/></svg>

public/img/user-lock.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-user-lock-icon lucide-user-lock"><circle cx="10" cy="7" r="4"/><path d="M10.3 15H7a4 4 0 0 0-4 4v2"/><path d="M15 15.5V14a2 2 0 0 1 4 0v1.5"/><rect width="8" height="5" x="13" y="16" rx=".899"/></svg>

src/images/calendar.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-calendar-icon lucide-calendar"><path d="M8 2v4"/><path d="M16 2v4"/><rect width="18" height="18" x="3" y="4" rx="2"/><path d="M3 10h18"/></svg>

src/images/emoji.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-smile-plus-icon lucide-smile-plus"><path d="M22 11v1a10 10 0 1 1-9-10"/><path d="M8 14s1.5 2 4 2 4-2 4-2"/><line x1="9" x2="9.01" y1="9" y2="9"/><line x1="15" x2="15.01" y1="9" y2="9"/><path d="M16 5h6"/><path d="M19 2v6"/></svg>

src/images/envelope.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-mail-icon lucide-mail"><path d="m22 7-8.991 5.727a2 2 0 0 1-2.009 0L2 7"/><rect x="2" y="4" width="20" height="16" rx="2"/></svg>

src/images/file-user.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-file-user-icon lucide-file-user"><path d="M6 22a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h8a2.4 2.4 0 0 1 1.704.706l3.588 3.588A2.4 2.4 0 0 1 20 8v12a2 2 0 0 1-2 2z"/><path d="M14 2v5a1 1 0 0 0 1 1h5"/><path d="M16 22a4 4 0 0 0-8 0"/><circle cx="12" cy="15" r="3"/></svg>

src/images/games.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-gamepad-directional-icon lucide-gamepad-directional"><path d="M11.146 15.854a1.207 1.207 0 0 1 1.708 0l1.56 1.56A2 2 0 0 1 15 18.828V21a1 1 0 0 1-1 1h-4a1 1 0 0 1-1-1v-2.172a2 2 0 0 1 .586-1.414z"/><path d="M18.828 15a2 2 0 0 1-1.414-.586l-1.56-1.56a1.207 1.207 0 0 1 0-1.708l1.56-1.56A2 2 0 0 1 18.828 9H21a1 1 0 0 1 1 1v4a1 1 0 0 1-1 1z"/><path d="M6.586 14.414A2 2 0 0 1 5.172 15H3a1 1 0 0 1-1-1v-4a1 1 0 0 1 1-1h2.172a2 2 0 0 1 1.414.586l1.56 1.56a1.207 1.207 0 0 1 0 1.708z"/><path d="M9 3a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v2.172a2 2 0 0 1-.586 1.414l-1.56 1.56a1.207 1.207 0 0 1-1.708 0l-1.56-1.56A2 2 0 0 1 9 5.172z"/></svg>

src/images/git-branch.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-git-branch-icon lucide-git-branch"><line x1="6" x2="6" y1="3" y2="15"/><circle cx="18" cy="6" r="3"/><circle cx="6" cy="18" r="3"/><path d="M18 9a9 9 0 0 1-9 9"/></svg>

src/images/heart.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-heart-icon lucide-heart"><path d="M2 9.5a5.5 5.5 0 0 1 9.591-3.676.56.56 0 0 0 .818 0A5.49 5.49 0 0 1 22 9.5c0 2.29-1.5 4-3 5.5l-5.492 5.313a2 2 0 0 1-3 .019L5 15c-1.5-1.5-3-3.2-3-5.5"/></svg>

src/images/user-lock.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-user-lock-icon lucide-user-lock"><circle cx="10" cy="7" r="4"/><path d="M10.3 15H7a4 4 0 0 0-4 4v2"/><path d="M15 15.5V14a2 2 0 0 1 4 0v1.5"/><rect width="8" height="5" x="13" y="16" rx=".899"/></svg>

src/layouts/Page.astro

@@ -8,7 +8,6 @@ const { title, desc } = Astro.props;
     <meta charset="utf-8">
     <title>{title}</title>
     <meta name="description" content={desc}>
-    <meta name="theme-color" content="#2986cc">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <link rel="icon" type="image/svg+xml" href="/img/favicon.svg">
     <link rel="stylesheet" href="/css/global.css">
@@ -17,13 +16,13 @@ const { title, desc } = Astro.props;
   <body>
     <div class="navbar">
       <div class="left">
-        <h1><a draggable="false" href="/">Hanna Rose</a></h1>
+        <h1><a href="/">Hanna Rose</a></h1>
       </div>
       <div class="right">
         <ul class="pages">
-          <li><a draggable="false" href="/">Home</a></li>
-          <li><a draggable="false" href="/blog">Blog</a></li>
-          <li><a draggable="false" href="https://liberapay.com/hqnna">Donate</a></li>
+          <li><a href="/">Home</a></li>
+          <li><a href="/blog">Blog</a></li>
+          <li><a href="https://liberapay.com/hqnna">Donate</a></li>
         </ul>
       </div>
     </div>

src/pages/blog/[slug].astro

@@ -11,12 +11,11 @@ export async function getStaticPaths() {
   }));
 }
 
-const fmtDate = (date: Date) =>
-  new Date(date).toLocaleString('en-US', {
+const fmtDate = (date) => new Date(date).toLocaleString('en-US', {
   month: '2-digit',
   day: '2-digit',
-    year: 'numeric',
-  });
+  year: 'numeric'
+});
 
 const { post } = Astro.props;
 const { Content, headings } = await post.render();
@@ -32,33 +31,27 @@ const { Content, headings } = await post.render();
       </div>
     </div>
 
-    <div class="sidebar">
     <details class="toc" open>
       <summary>Table of Contents</summary>
       <ul>
         {headings.filter(h => h.depth > 1 && h.depth < 4).map(h => (
           <li class={`depth-${h.depth}`}>
-              <a draggable="false" href={`#${h.slug}`}>{h.text}</a>
+            <a href={`#${h.slug}`}>{h.text}</a>
           </li>
         ))}
       </ul>
     </details>
-      <p class="copyright">
-        This blog post is licensed under
-        <a draggable="false" href="https://creativecommons.org/licenses/by-nc-nd/4.0/">
-          CC BY-NC-ND 4.0</a>.
-      </p>
-    </div>
 
     <section class="article">
       <Content />
-    </section>
-
-    <p class="copyright mobile">
-      This blog post is licensed under
-      <a draggable="false" href="https://creativecommons.org/licenses/by-nc-nd/4.0/">
-        CC BY-NC-ND 4.0</a>.
+      <p class="copyright">
+        This article is licensed under the
+        <a href="https://creativecommons.org/licenses/by-nc-nd/4.0/">
+          CC BY-NC-ND 4.0
+        </a>
+        license.
       </p>
+    </section>
   </div>
 </Page>
 
@@ -109,63 +102,16 @@ const { Content, headings } = await post.render();
       }
     }
 
-    .sidebar {
+    .toc {
       position: fixed;
       left: max(20px, calc(50% - 24rem - 300px));
       max-height: calc(100vh - 140px);
-      width: 250px;
-      display: flex;
-      flex-direction: column;
-
-      & > .copyright {
-        color: rgba(194, 200, 204, 0.4);
-        padding-top: var(--space-sm);
-        font-size: 10px;
-
-        & > a {
-          color: var(--text-muted);
-          text-decoration: none;
-        }
-      }
-
-      @media only screen and (max-width: 1400px) {
-        position: relative;
-        max-height: none;
-        width: 100%;
-        left: 0;
-
-        & > .copyright {
-          display: none;
-        }
-      }
-    }
-
-    .copyright.mobile {
-      display: none;
-      color: rgba(194, 200, 204, 0.4);
-      font-size: 10px;
-      border-top: 1px solid rgba(194, 200, 204, 0.1);
-      padding-top: 8px;
-      margin-top: var(--space-sm);
-
-      & > a {
-        color: var(--text-muted);
-        text-decoration: none;
-      }
-
-      @media only screen and (max-width: 1400px) {
-        display: block;
-      }
-    }
-
-    .toc {
       border: 1px solid var(--border);
       background: var(--bg-secondary);
       border-radius: var(--radius);
       padding: var(--space-sm);
       overflow-y: auto;
-      flex: 1;
-      max-height: calc(100vh - 200px);
+      width: 250px;
 
       & summary {
         font-size: 14px;
@@ -201,6 +147,7 @@ const { Content, headings } = await post.render();
         font-size: 13px;
         display: block;
         padding: 2px 0;
+        transition: color 0.2s;
         white-space: nowrap;
         overflow: hidden;
         text-overflow: ellipsis;
@@ -224,9 +171,12 @@ const { Content, headings } = await post.render();
 
       @media only screen and (max-width: 1400px) {
         margin-top: 12px;
+        position: relative;
         overflow: visible;
         max-height: none;
-        flex: none;
+        width: calc(100% - 22px);
+        left: 0;
+        top: 0;
 
         &:not([open]) {
           margin-bottom: 0;
@@ -380,8 +330,7 @@ const { Content, headings } = await post.render();
       text-decoration-color: transparent;
       text-underline-offset: 2px;
       color: var(--accent-blue);
-      -webkit-user-drag: none;
-      user-drag: none;
+      transition: text-decoration-color 0.25s ease-out;
     }
 
     & :global(a:hover) {
@@ -450,5 +399,17 @@ const { Content, headings } = await post.render();
     & :global(blockquote p) {
       margin: 0px;
     }
+
+    & > .copyright {
+      border-top: 1px solid rgba(194, 200, 204, 0.1);
+      color: rgba(194, 200, 204, 0.4);
+      padding-top: 8px;
+      font-size: 10px;
+
+      & > a {
+        color: var(--text-muted);
+        text-decoration: none;
+      }
+    }
   }
 </style>

src/pages/blog/index.astro

@@ -1,25 +1,23 @@
 ---
 import { getCollection } from 'astro:content';
-import CalendarIcon from '../../images/calendar.svg';
 import Page from '../../layouts/Page.astro';
 
 const posts = (await getCollection('posts'))
-  .filter((post) => !post.data.draft)
+  .filter(post => !post.data.draft)
   .sort((a, b) => {
     const firstDate = new Date(a.data.date).valueOf();
     const secondDate = new Date(b.data.date).valueOf();
     return secondDate - firstDate;
   });
 
-const fmtDate = (date: Date) =>
-  new Date(date).toLocaleString('en-US', {
+const fmtDate = (date) => new Date(date).toLocaleString('en-US', {
   month: '2-digit',
   day: '2-digit',
-    year: 'numeric',
-  });
+  year: 'numeric'
+});
 ---
 
-<Page title="Blog" desc="A list of all the blog posts I've written">
+<Page title="Blog" desc="">
   <div class="content">
     <section>
       <h1>Here be dragons.</h1>
@@ -33,11 +31,11 @@ const fmtDate = (date: Date) =>
     <section>
       <ul class="posts">
         {posts.map((post) => (
-        <li><a draggable="false" href={`/blog/${post.slug}`}>
+        <li><a href={`/blog/${post.slug}`}>
           <div class="metadata">
             <h1>{post.data.title}</h1>
             <p>
-              <CalendarIcon class="icon" />
+              <img src="/img/calendar.svg" alt="calendar icon">
               {fmtDate(post.data.date)}
             </p>
           </div>
@@ -129,10 +127,9 @@ const fmtDate = (date: Date) =>
             max-height: 23px;
             color: var(--text-muted);
 
-            & > .icon {
+            & > img {
               margin-right: var(--space-xs);
               height: 12px;
-              width: 12px;
             }
           }
         }

src/pages/index.astro

@@ -1,52 +1,42 @@
 ---
-import { Image } from 'astro:assets';
 import Page from '../layouts/Page.astro';
 
-import Avatar from '../images/avatar.png';
-import EmojiIcon from '../images/emoji.svg';
-import EnvelopeIcon from '../images/envelope.svg';
-import FileUserIcon from '../images/file-user.svg';
-import UserLockIcon from '../images/user-lock.svg';
-import GitBranchIcon from '../images/git-branch.svg';
-import GamesIcon from '../images/games.svg';
-import HeartIcon from '../images/heart.svg';
-
 const links = [
   {
-    name: 'GitDab',
-    icon: GitBranchIcon,
-    url: 'https://gitdab.com/hanna',
+    name: 'GitLab',
+    icon: 'gitlab',
+    url: 'https://gitlab.com/hqnna',
   },
   {
     name: 'Emojis',
-    icon: EmojiIcon,
+    icon: 'emoji',
     url: 'https://discord.gg/qZQmTM5Skk',
   },
   {
     name: 'Steam',
-    icon: GamesIcon,
+    icon: 'games',
     url: 'https://steamcommunity.com/id/sapphicdoll',
   },
   {
     name: 'GPG Key',
-    icon: UserLockIcon,
+    icon: 'user-lock',
     url: '/files/key.txt',
   },
   {
     name: 'Resume',
-    icon: FileUserIcon,
+    icon: 'file-user',
     url: '/files/resume.pdf',
   },
   {
     name: 'Contact',
-    icon: EnvelopeIcon,
+    icon: 'envelope',
     url: 'mailto:me@hanna.lol',
   },
   {
     name: 'Donate',
-    icon: HeartIcon,
+    icon: 'heart',
     url: 'https://liberapay.com/hqnna',
-  },
+  }
 ];
 ---
 
@@ -56,15 +46,15 @@ const links = [
   <div class="center">
     <div class="container">
       <div class="details">
-        <Image src={Avatar} alt="avatar" loading="eager" />
+        <img src="/img/avatar.png" alt="avatar">
         <div class="about">
           <h1>Hanna Rose</h1>
           <h2>Just your average software engineer</h2>
           <ul class="socials">
             {links.map(link => (
               <li>
-                <a draggable="false" href={link.url} aria-label={link.name}>
-                  <link.icon class="icon" />
+                <a draggable="false" href={link.url}>
+                  <img src={`/img/${link.icon}.svg`} alt={`${link.name} icon`}>
                   <span class="label">{link.name}</span>
                 </a>
               </li>
@@ -77,10 +67,6 @@ const links = [
 </Page>
 
 <style>
-  html > body {
-    overflow-y: hidden;
-  }
-
   .background {
     background-image: url("/img/background.jpg");
     background-position: center;
@@ -101,7 +87,7 @@ const links = [
     align-items: center;
 
     @media only screen and (max-width: 800px) {
-      padding-top: 20px;
+      padding-top: 24px;
       max-height: 100%;
     }
   }
@@ -198,7 +184,7 @@ const links = [
         width: 32px;
         height: 32px;
 
-        & .icon {
+        & img {
           width: 16px;
         }
 
@@ -207,8 +193,16 @@ const links = [
           border-color: var(--accent-blue);
           color: var(--accent-blue);
 
-          & .icon {
-            stroke: var(--accent-blue);
+          & img {
+            filter:
+              brightness(0)
+              saturate(100%)
+              invert(70%)
+              sepia(37%)
+              saturate(4975%)
+              hue-rotate(200deg)
+              brightness(106%)
+              contrast(101%);
           }
         }
       }