ci: configure forgejo ci for deployment

.forgejo/workflows/deploy.yml

@@ -0,0 +1,53 @@
+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

@@ -1,41 +0,0 @@
-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
+# website ![license] ![status]
 
 The source code of my personal website and blog, made using the [Astro] static
 site generator.
@@ -13,6 +13,9 @@ 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,4 +5,7 @@ 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": 1765903799,
-        "narHash": "sha256-1wbl0y7U8TvSHxDWME7o92bIspfuhjVaTOs27r54uc4=",
+        "lastModified": 1766025857,
+        "narHash": "sha256-Lav5jJazCW4mdg1iHcROpuXqmM94BWJvabLFWaJVJp0=",
         "owner": "nixos",
         "repo": "nixpkgs",
-        "rev": "e8d16d2186d6ed9f047eb30948e97e7e01886d10",
+        "rev": "def3da69945bbe338c373fddad5a1bb49cf199ce",
         "type": "github"
       },
       "original": {

public/img/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="#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

@@ -1 +0,0 @@
-<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

@@ -1 +0,0 @@
-<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

@@ -1 +0,0 @@
-<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

@@ -1 +0,0 @@
-<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

@@ -1 +0,0 @@
-<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

@@ -1 +0,0 @@
-<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

@@ -1 +0,0 @@
-<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

@@ -0,0 +1 @@
+<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

@@ -0,0 +1 @@
+<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

@@ -0,0 +1 @@
+<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

@@ -0,0 +1 @@
+<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

@@ -0,0 +1 @@
+<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

@@ -0,0 +1 @@
+<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

@@ -0,0 +1 @@
+<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

@@ -0,0 +1 @@
+<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,6 +8,7 @@ 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">
@@ -16,13 +17,13 @@ const { title, desc } = Astro.props;
   <body>
     <div class="navbar">
       <div class="left">
-        <h1><a href="/">Hanna Rose</a></h1>
+        <h1><a draggable="false" href="/">Hanna Rose</a></h1>
       </div>
       <div class="right">
         <ul class="pages">
-          <li><a href="/">Home</a></li>
-          <li><a href="/blog">Blog</a></li>
-          <li><a href="https://liberapay.com/hqnna">Donate</a></li>
+          <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>
         </ul>
       </div>
     </div>

src/pages/blog/[slug].astro

@@ -11,11 +11,12 @@ export async function getStaticPaths() {
   }));
 }
 
-const fmtDate = (date) => new Date(date).toLocaleString('en-US', {
-  month: '2-digit',
-  day: '2-digit',
-  year: 'numeric'
-});
+const fmtDate = (date: Date) =>
+  new Date(date).toLocaleString('en-US', {
+    month: '2-digit',
+    day: '2-digit',
+    year: 'numeric',
+  });
 
 const { post } = Astro.props;
 const { Content, headings } = await post.render();
@@ -31,27 +32,33 @@ const { Content, headings } = await post.render();
       </div>
     </div>
 
-    <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 href={`#${h.slug}`}>{h.text}</a>
-          </li>
-        ))}
-      </ul>
-    </details>
+    <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>
+            </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 />
-      <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>
+
+    <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>
   </div>
 </Page>
 
@@ -102,16 +109,63 @@ const { Content, headings } = await post.render();
       }
     }
 
-    .toc {
+    .sidebar {
       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;
-      width: 250px;
+      flex: 1;
+      max-height: calc(100vh - 200px);
 
       & summary {
         font-size: 14px;
@@ -147,7 +201,6 @@ 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;
@@ -171,12 +224,9 @@ const { Content, headings } = await post.render();
 
       @media only screen and (max-width: 1400px) {
         margin-top: 12px;
-        position: relative;
         overflow: visible;
         max-height: none;
-        width: calc(100% - 22px);
-        left: 0;
-        top: 0;
+        flex: none;
 
         &:not([open]) {
           margin-bottom: 0;
@@ -330,7 +380,8 @@ const { Content, headings } = await post.render();
       text-decoration-color: transparent;
       text-underline-offset: 2px;
       color: var(--accent-blue);
-      transition: text-decoration-color 0.25s ease-out;
+      -webkit-user-drag: none;
+      user-drag: none;
     }
 
     & :global(a:hover) {
@@ -399,17 +450,5 @@ 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,23 +1,25 @@
 ---
 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) => new Date(date).toLocaleString('en-US', {
-  month: '2-digit',
-  day: '2-digit',
-  year: 'numeric'
-});
+const fmtDate = (date: Date) =>
+  new Date(date).toLocaleString('en-US', {
+    month: '2-digit',
+    day: '2-digit',
+    year: 'numeric',
+  });
 ---
 
-<Page title="Blog" desc="">
+<Page title="Blog" desc="A list of all the blog posts I've written">
   <div class="content">
     <section>
       <h1>Here be dragons.</h1>
@@ -31,11 +33,11 @@ const fmtDate = (date) => new Date(date).toLocaleString('en-US', {
     <section>
       <ul class="posts">
         {posts.map((post) => (
-        <li><a href={`/blog/${post.slug}`}>
+        <li><a draggable="false" href={`/blog/${post.slug}`}>
           <div class="metadata">
             <h1>{post.data.title}</h1>
             <p>
-              <img src="/img/calendar.svg" alt="calendar icon">
+              <CalendarIcon class="icon" />
               {fmtDate(post.data.date)}
             </p>
           </div>
@@ -127,9 +129,10 @@ const fmtDate = (date) => new Date(date).toLocaleString('en-US', {
             max-height: 23px;
             color: var(--text-muted);
 
-            & > img {
+            & > .icon {
               margin-right: var(--space-xs);
               height: 12px;
+              width: 12px;
             }
           }
         }

src/pages/index.astro

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