🔖 Replaced heroimage with an image of me, fix typo

✨ Latest projects on landing page, moved landing page components
✨ More Catppuccin colours, colour links by default
2025-02-16 13:50:27 +01:00 · 2025-02-16 12:01:51 +01:00 · 2025-02-16 11:49:06 +01:00 · 2025-02-15 23:00:38 +01:00 · 2025-02-15 19:31:44 +01:00 · 2025-02-15 19:29:06 +01:00
68 changed files with 1952 additions and 1809 deletions
--- a/README.md
+++ b/README.md
@ -1,54 +1,5 @@
-# Astro Starter Kit: Basics
+# Homepage / portfolio

-```sh
-npm create astro@latest -- --template basics
-```
+> This repository is mirrored on [Codeberg](https://codeberg.org/martials/martials.no)

-[![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/withastro/astro/tree/latest/examples/basics)
-[![Open with CodeSandbox](https://assets.codesandbox.io/github/button-edit-lime.svg)](https://codesandbox.io/p/sandbox/github/withastro/astro/tree/latest/examples/basics)
-[![Open in GitHub Codespaces](https://github.com/codespaces/badge.svg)](https://codespaces.new/withastro/astro?devcontainer_path=.devcontainer/basics/devcontainer.json)
-
-> 🧑‍🚀 **Seasoned astronaut?** Delete this file. Have fun!
-
-![just-the-basics](https://github.com/withastro/astro/assets/2244813/a0a5533c-a856-4198-8470-2d67b1d7c554)
-
-## 🚀 Project Structure
-
-Inside of your Astro project, you'll see the following folders and files:
-
-```text
-/
-├── public/
-│   └── favicon.svg
-├── src/
-│   ├── components/
-│   │   └── Card.astro
-│   ├── layouts/
-│   │   └── Layout.astro
-│   └── pages/
-│       └── index.astro
-└── package.json
-```
-
-Astro looks for `.astro` or `.md` files in the `src/pages/` directory. Each page is exposed as a route based on its file name.
-
-There's nothing special about `src/components/`, but that's where we like to put any Astro/React/Vue/Svelte/Preact components.
-
-Any static assets, like images, can be placed in the `public/` directory.
-
-## 🧞 Commands
-
-All commands are run from the root of the project, from a terminal:
-
-| Command                   | Action                                           |
-| :------------------------ | :----------------------------------------------- |
-| `npm install`             | Installs dependencies                            |
-| `npm run dev`             | Starts local dev server at `localhost:4321`      |
-| `npm run build`           | Build your production site to `./dist/`          |
-| `npm run preview`         | Preview your build locally, before deploying     |
-| `npm run astro ...`       | Run CLI commands like `astro add`, `astro check` |
-| `npm run astro -- --help` | Get help using the Astro CLI                     |
-
-## 👀 Want to learn more?
-
-Feel free to check [our documentation](https://docs.astro.build) or jump into our [Discord server](https://astro.build/chat).
+More to come!
--- a/TODO.md
+++ b/TODO.md
@ -0,0 +1,52 @@
+# TODO
+
+## Code
+- [ ] day.js for dates
+- [ ] Nix Shell
+
+## SSE
+- [x] Correct Sitemap.xml
+- [x] Correct robots.txt
+- [x] Correct security.txt
+
+## Layout
+- [x] Show current page
+- [x] Correct bg colour on entire page
+- [x] Hamburger menu on mobile
+- [ ] Dark mode toggle
+- [ ] Navigate using pathname / breadcrumbs
+
+## Accessibility
+- [x] Fix colours on buttons
+- [x] Correct contrast
+- [ ] All interactable elements have labels
+- [x] Colour links, also in MDX posts
+
+## ~/
+- [ ] About me description
+- [x] Latest projects
+- [x] Non-cat image
+
+## ~/about
+- [ ] About me
+
+## ~/links
+- [ ] Add Bluesky link
+- [ ] Add MusicBrainz link
+- [ ] Add Archidekt link
+
+## ~/slashes
+- [ ] List of all slashes
+
+## ~/uses
+- [ ] Homelab uses
+- [ ] Raspberry PI uses
+- [ ] Hardware anchor
+
+## ~/certifications
+- [ ] Embed certifications
+
+## ~/tools
+
+### /simplify-truths
+- [ ] Merge simplify truths implementation
--- a/astro.config.mjs
+++ b/astro.config.mjs
@ -1,7 +1,7 @@
 // @ts-check
 import { defineConfig, envField } from "astro/config"
 import paraglide from "@inlang/paraglide-astro"
-import tailwind from "@astrojs/tailwind"
+import tailwindcss from "@tailwindcss/vite"
 import sitemap from "@astrojs/sitemap"
 import svelte from "@astrojs/svelte"
 import node from "@astrojs/node"
@ -10,39 +10,40 @@ import icon from "astro-icon"

 import { loadEnv } from "vite"

-const { url } = process.env.URL
-  ? loadEnv(process.env.URL, process.cwd(), "")
-  : { url: "http://localhost:3000" }
+const { URL } = process.env.NODE_ENV
+  ? loadEnv(process.env.NODE_ENV, process.cwd(), "")
+  : { URL: "http://localhost:3000" }

 // https://astro.build/config
 export default defineConfig({
-  site: url,
+  site: URL,
  output: "server",
  i18n: {
    defaultLocale: "nb",
-    locales: ["nb", "en"]
+    locales: ["nb", "en"],
  },
  integrations: [
-    tailwind(),
    sitemap(),
    mdx(),
    svelte(),
    icon(),
    paraglide({
-      // recommended settings
      project: "./project.inlang",
-      outdir: "./src/paraglide" //where your files should be
-    })
+      outdir: "./src/paraglide",
+    }),
  ],
  adapter: node({
-    mode: "standalone"
+    mode: "standalone",
  }),
+  vite: {
+    plugins: [tailwindcss()],
+  },
  env: {
    schema: {
      DOMAIN: envField.string({ context: "client", access: "public" }),
      URL: envField.string({ context: "client", access: "public" }),
      GIT_URL: envField.string({ context: "client", access: "public" }),
-      STATUS_URL: envField.string({ context: "client", access: "public" })
-    }
-  }
+      STATUS_URL: envField.string({ context: "client", access: "public" }),
+    },
+  },
 })
--- a/messages/en.json
+++ b/messages/en.json
@ -2,16 +2,18 @@
  "$schema": "https://inlang.com/schema/inlang-message-format",
  "hiIm": "Hi, I'm",
  "position": "Software Engineer",
-  "aboutMe": "Some bullshit about me",
+  "aboutMe": "Dedicated developer currently working at Capgemini Bergen.",
  "home": "Home",
  "contactMe": "Contact me",
  "myLinks": "My links",
  "myProjects": "My projects",
+  "uses": "Uses",
  "hardware": "Hardware",
  "accessories": "Accessories",
  "sourceCode": "Source code",
  "createdAt": "Created at",
  "updatedAt": "Updated at",
+  "forMirrors": "For mirrors of Gitea",
  "forPersonalProjects": "For personal projects",
  "status": "Status",
  "name": "Name",
--- a/messages/nb.json
+++ b/messages/nb.json
@ -2,16 +2,18 @@
  "$schema": "https://inlang.com/schema/inlang-message-format",
  "hiIm": "Hei, jeg er",
  "position": "Programvareutvikler",
-  "aboutMe": "Bunntekst",
+  "aboutMe": "Engasjert utvikler som for tiden jobber hos Capgemini Bergen.",
  "home": "Hjem",
  "contactMe": "Kontakt meg",
  "myLinks": "Mine lenker",
  "myProjects": "Mine prosjekter",
+  "uses": "Uses",
  "hardware": "Maskinvare",
  "accessories": "Tilbehør",
  "sourceCode": "Kildekode",
  "createdAt": "Opprettet",
  "updatedAt": "Oppdatert",
+  "forMirrors": "For mirrors av Gitea",
  "forPersonalProjects": "For personlige prosjekter",
  "status": "Status",
  "name": "Navn",
--- a/package.json
+++ b/package.json
@ -1,41 +1,42 @@
 {
  "name": "martials-no-v2",
  "type": "module",
-  "version": "0.0.1",
+  "version": "1.0.0",
  "scripts": {
    "dev": "astro dev",
    "start": "astro dev",
    "build": "paraglide-js compile --project ./project.inlang --outdir ./src/paraglide && astro check && astro build",
    "preview": "astro preview",
    "astro": "astro",
+    "type-check": "astro check",
    "postinstall": "paraglide-js compile --project ./project.inlang --outdir ./src/paraglide",
    "format": "prettier --write \"./src/**/*.{js,mjs,ts,astro,svelte,css,md,json}\"",
    "watch-messages": "paraglide-js compile --watch --project ./project.inlang --outdir ./src/paraglide"
  },
  "dependencies": {
    "@astrojs/check": "^0.9.4",
-    "@astrojs/mdx": "4.0.0-beta.2",
-    "@astrojs/node": "9.0.0-beta.2",
+    "@astrojs/mdx": "^4.0.8",
+    "@astrojs/node": "9.1.0",
    "@astrojs/sitemap": "^3.2.1",
-    "@astrojs/svelte": "6.0.0-beta.1",
-    "@astrojs/tailwind": "^5.1.2",
-    "@iconify-json/pajamas": "^1.2.3",
-    "@inlang/paraglide-astro": "^0.2.2",
-    "@inlang/paraglide-js": "1.11.2",
-    "@tailwindcss/typography": "^0.5.15",
-    "astro": "5.0.0-beta.5",
-    "astro-icon": "^1.1.1",
+    "@astrojs/svelte": "^7.0.4",
+    "@iconify-json/pajamas": "^1.2.5",
+    "@inlang/paraglide-astro": "^0.3.5",
+    "@inlang/paraglide-js": "1.11.8",
+    "@tailwindcss/typography": "^0.5.16",
+    "@tailwindcss/vite": "^4.0.6",
+    "astro": "5.3.0",
+    "astro-icon": "^1.1.5",
    "sharp": "^0.33.5",
-    "svelte": "^4.2.19",
-    "tailwindcss": "^3.4.13",
-    "typescript": "^5.6.3"
+    "svelte": "^5.20.1",
+    "tailwindcss": "^4.0.6",
+    "typescript": "^5.7.3"
  },
  "devDependencies": {
-    "daisyui": "^4.12.13",
-    "prettier": "^3.3.3",
+    "daisyui": "^5.0.0-beta.8",
+    "prettier": "^3.5.1",
    "prettier-plugin-astro": "^0.14.1",
-    "prettier-plugin-svelte": "^3.2.7",
-    "vite": "^5.4.8"
+    "prettier-plugin-svelte": "^3.3.3",
+    "vite": "^6.1.0"
  },
  "prettier": {
    "semi": false,
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
--- a/public/favicon.jpg
+++ b/public/favicon.jpg
--- a/public/favicon.svg
+++ b/public/favicon.svg
@ -1,9 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 128 128">
-    <path d="M50.4 78.5a75.1 75.1 0 0 0-28.5 6.9l24.2-65.7c.7-2 1.9-3.2 3.4-3.2h29c1.5 0 2.7 1.2 3.4 3.2l24.2 65.7s-11.6-7-28.5-7L67 45.5c-.4-1.7-1.6-2.8-2.9-2.8-1.3 0-2.5 1.1-2.9 2.7L50.4 78.5Zm-1.1 28.2Zm-4.2-20.2c-2 6.6-.6 15.8 4.2 20.2a17.5 17.5 0 0 1 .2-.7 5.5 5.5 0 0 1 5.7-4.5c2.8.1 4.3 1.5 4.7 4.7.2 1.1.2 2.3.2 3.5v.4c0 2.7.7 5.2 2.2 7.4a13 13 0 0 0 5.7 4.9v-.3l-.2-.3c-1.8-5.6-.5-9.5 4.4-12.8l1.5-1a73 73 0 0 0 3.2-2.2 16 16 0 0 0 6.8-11.4c.3-2 .1-4-.6-6l-.8.6-1.6 1a37 37 0 0 1-22.4 2.7c-5-.7-9.7-2-13.2-6.2Z" />
-    <style>
-        path { fill: #000; }
-        @media (prefers-color-scheme: dark) {
-            path { fill: #FFF; }
-        }
-    </style>
-</svg>
--- a/src/components/ContactMeForm.astro
+++ b/src/components/ContactMeForm.astro
@ -4,14 +4,28 @@ import * as m from "@/paraglide/messages.js"
 // TODO self-host email server
 ---

-<form class="flex flex-col gap-2 max-w-[500px] mx-auto" method="post" action="https://formspree.io/f/mknykgbn">
+<div class="max-w-[500px] mx-auto">
+  <form
+    class="flex flex-col gap-2 w-full"
+    method="post"
+    action="https://formspree.io/f/mknykgbn"
+  >
    <Input label={m.name()} type="text" name="name" required />
    <Input label={m.subject()} name="subject" required />
    <Input label={m.email()} name="_replyto" />
-  <input name="_gotcha" type="text" class={"hidden"} /> { /*Honeypot spam filter*/}
+    {/*Honeypot spam filter*/}
+    <input name="_gotcha" type="text" class={"hidden"} />
    <label class="flex flex-col">
      {m.message()}
-    <textarea name="message" class="textarea textarea-bordered" required></textarea>
+      <textarea
+        name="message"
+        class="textarea textarea-bordered w-full bg-cat-base"
+        required></textarea>
    </label>
-  <button type="submit">{m.send()}</button>
  </form>
+  <button
+    type="submit"
+    class="btn mt-2 bg-cat-base border-cat-surface0"
+    title={m.send()}>{m.send()}</button
+  >
+</div>
--- a/src/components/Footer.astro
+++ b/src/components/Footer.astro
@ -9,12 +9,22 @@ import * as m from "@/paraglide/messages"
 const giteaLink = `${GIT_URL}/martials/martials.no`
 ---

-<div class="divider" />
-<div class="py-5 flex flex-row gap-1 justify-around w-full items-center">
+<div class="divider bg-inherit"></div>
+<div
+  class="max-w-[1000px] sm:min-w-[500px] mx-auto py-5 flex flex-row flex-wrap gap-5 justify-around items-center bg-inherit px-5"
+>
  <div>
-    <GiteaLink href={giteaLink} />
-    <ExternalLink href={STATUS_URL} class="flex items-center" title="Status">
-      <PajamasIcon name="pajamas:status-health" class="w-6 h-6 mr-2" />
+    <GiteaLink href={giteaLink} class="!text-cat-text" />
+    <ExternalLink
+      href={STATUS_URL}
+      class="flex items-center !text-cat-text"
+      title="Status"
+    >
+      <PajamasIcon
+        name="pajamas:status-health"
+        class="w-6 h-6 mr-2"
+        aria-label="Status health icon"
+      />
      {m.status()}
    </ExternalLink>
  </div>
--- a/src/components/HardwarePage.svelte
+++ b/src/components/HardwarePage.svelte
@ -1,34 +0,0 @@
-<script lang="ts">
-  import Select from "./Select.svelte"
-  import * as m from "@/paraglide/messages"
-  import CollapseList from "@/components/collapse/CollapseList.svelte"
-
-  export let hardware: any[] = []
-
-  const hardwareOptions = hardware.map((item) => ({
-    key: item.id,
-    value: item.data.title
-  }))
-
-  let selectedHardwareKey: string = hardware[0].id
-  $: selectedHardware = hardware.find((item) => item.id === selectedHardwareKey)!
-
-  // TODO bind to component
-  function onChange({ detail }: CustomEvent<string>) {
-    selectedHardwareKey = detail
-  }
-
-</script>
-<div class="px-2 max-w-[750px] sm:min-w-[750px] w-screen">
-  <h1 class="text-center">{m.hardware()}</h1>
-  <div>
-    <Select options={hardwareOptions} on:change={onChange} class="mx-auto w-max" />
-  </div>
-  <br />
-
-  <CollapseList items={selectedHardware.data.hardware} title={m.hardware()} />
-  <div class="my-2" />
-  {#if (selectedHardware.data.accessories)}
-    <CollapseList items={selectedHardware.data.accessories} title={m.accessories()} />
-  {/if}
-</div>
--- a/src/components/Input.astro
+++ b/src/components/Input.astro
@ -16,10 +16,10 @@ const {
 } = Astro.props
 ---

-<label class="flex flex-col">
+<label class="flex flex-col w-full">
  {label}
  <input
-    class="input input-bordered"
+    class="input input-bordered w-full bg-cat-base"
    type={type}
    name={name}
    required={required}
--- a/src/components/LanguageButtonGroup.astro
+++ b/src/components/LanguageButtonGroup.astro
@ -2,10 +2,26 @@
 import LocaleLink from "./links/LocaleLink.astro"
 import { type NavLink, resolvePathname } from "@/utils/linking"

-const currentPath = resolvePathname(Astro.url.pathname)
+const pathname = Astro.url.pathname
+const currentPath = resolvePathname(pathname)
+const isEnglish = pathname.startsWith("/en")
 ---

 <div class="join">
-  <LocaleLink to={currentPath as NavLink} lang="nb" class="btn join-item">Norsk</LocaleLink>
-  <LocaleLink to={currentPath as NavLink} lang="en" class="btn join-item">English</LocaleLink>
+  <LocaleLink
+    to={currentPath as NavLink}
+    lang="nb"
+    class:list={[
+      "btn join-item !text-cat-text border-cat-surface0",
+      !isEnglish ? "bg-cat-mantle" : "bg-cat-base",
+    ]}>Norsk</LocaleLink
+  >
+  <LocaleLink
+    to={currentPath as NavLink}
+    lang="en"
+    class:list={[
+      "btn join-item !text-cat-text border-cat-surface0",
+      isEnglish ? "bg-cat-mantle" : "bg-cat-base",
+    ]}>English</LocaleLink
+  >
 </div>
--- a/src/components/Navbar.astro
+++ b/src/components/Navbar.astro
@ -1,14 +0,0 @@
---
-import LocaleLink from "./links/LocaleLink.astro"
-import Links from "@/links"
---
-
-<div class="flex justify-end">
-  {
-    Links.map(({ to, label }) => (
-      <LocaleLink to={to} class="m-2 hover:underline">
-        {label()}
-      </LocaleLink>
-    ))
-  }
-</div>
--- a/src/components/Select.svelte
+++ b/src/components/Select.svelte
@ -1,20 +1,22 @@
 <script lang="ts">
-  import { createEventDispatcher } from "svelte"
-
  // TODO move to types?
-  interface Option {
-    key: string
+  interface Option<Key> {
+    key: Key
    value: string
  }

-  export let options: Option[] = []
-  // TODO bind data instead of dispatching events
-  const dispatch = createEventDispatcher<{ change: string }>()
+  interface Props<Key = string> {
+    selected: Key
+    options?: Option<Key>[]
+    class?: string
+  }
+
+  let { selected = $bindable(), options = [], class: clazz }: Props = $props()
 </script>

 <select
-  class="select select-bordered w-full max-w-xs ${$$restProps.class}"
-  on:change={(value) => dispatch("change", value.currentTarget.value)}
+  bind:value={selected}
+  class="select select-bordered w-full max-w-xs ${clazz}"
 >
  {#each options as { key, value }}
    <option value={key}>{value}</option>
--- a/src/components/UsesPage.astro
+++ b/src/components/UsesPage.astro
@ -0,0 +1,30 @@
+---
+import * as m from "@/paraglide/messages"
+import CollapseList from "@/components/collapse/CollapseList.svelte"
+import type { CollectionEntry } from "astro:content"
+
+interface Props {
+  uses: ReadonlyArray<CollectionEntry<"uses">>
+}
+
+const { uses } = Astro.props
+// TODO set url anchor to selected hardware
+---
+
+<div class="px-2 max-w-[750px] sm:min-w-[750px] w-screen">
+  {
+    uses.map((hardware) => (
+      <div class="my-5">
+        <h3>{hardware.data.title}</h3>
+        <CollapseList items={hardware.data.hardware} title={m.hardware()} />
+        <div class="my-2" />
+        {hardware.data.accessories && (
+          <CollapseList
+            items={hardware.data.accessories}
+            title={m.accessories()}
+          />
+        )}
+      </div>
+    ))
+  }
+</div>
--- a/src/components/badge/Badge.astro
+++ b/src/components/badge/Badge.astro
@ -5,4 +5,4 @@ interface Props {
 const { tag } = Astro.props
 ---

-<div class="badge badge-outline">{tag}</div>
+<div class="badge badge-outline !text-cat-lavender">{tag}</div>
--- a/src/components/badge/BadgeList.astro
+++ b/src/components/badge/BadgeList.astro
@ -7,6 +7,6 @@ interface Props {
 const { tags } = Astro.props
 ---

-<div class="flex flex-wrap gap-1">
+<div class="flex flex-wrap gap-1 py-0.5">
  {tags.map((tag) => <Badge tag={tag} />)}
 </div>
--- a/src/components/collapse/Collapse.svelte
+++ b/src/components/collapse/Collapse.svelte
@ -1,10 +1,17 @@
 <script lang="ts">
-  export let title: string = ""
+  import type { Snippet } from "svelte"
+
+  interface Props {
+    title?: string
+    children: Snippet
+  }
+
+  const { title = "", children }: Props = $props()
 </script>

 <details class="collapse collapse-arrow bg-base-200">
  <summary class="collapse-title text-xl font-medium">{title}</summary>
  <div class="collapse-content">
-    <slot />
+    {@render children()}
  </div>
 </details>
--- a/src/components/collapse/CollapseList.svelte
+++ b/src/components/collapse/CollapseList.svelte
@ -1,12 +1,15 @@
 <script lang="ts">
  import Collapse from "@/components/collapse/Collapse.svelte"

-  export let items: string[] = []
-  export let title: string = ""
+  interface Props {
+    items?: string[]
+    title?: string
+  }

+  const { items = [], title = "" }: Props = $props()
 </script>

-<Collapse title={title}>
+<Collapse {title}>
  <ul>
    {#each items as item}
      <li class="list-disc ml-5">{item}</li>
--- a/src/components/header/HamburgerMenuButton.astro
+++ b/src/components/header/HamburgerMenuButton.astro
@ -0,0 +1,17 @@
+---
+import PajamasIcon from "@/components/icons/PajamasIcon.astro"
+
+interface Props {
+  id: string
+}
+
+const { id } = Astro.props
+---
+
+<label for={id} aria-label="open sidebar" class="btn btn-square btn-ghost">
+  <PajamasIcon
+    name="pajamas:hamburger"
+    class="w-6 h-6"
+    aria-label="Hamburger menu"
+  />
+</label>
--- a/src/components/header/Header.astro
+++ b/src/components/header/Header.astro
@ -0,0 +1,38 @@
+---
+import Navbar from "./Navbar.astro"
+import NavbarDrawer from "./NavbarDrawer.astro"
+import HamburgerMenuButton from "./HamburgerMenuButton.astro"
+import { resolvePathname } from "@/utils/linking"
+
+const currentPath = `~${resolvePathname(Astro.originPathname)}`
+---
+
+<div class="sm:m-auto">
+  <div class="drawer drawer-end">
+    <input id="my-drawer-3" type="checkbox" class="drawer-toggle" />
+    <div class="drawer-content flex flex-col">
+      <!-- Navbar -->
+      <div class="navbar w-full justify-end">
+        <div class="flex justify-between items-center w-full h-full sm:hidden">
+          <h1 class="!text-2xl h-5">
+            {currentPath}
+          </h1>
+          <HamburgerMenuButton id="my-drawer-3" />
+        </div>
+        <div class="hidden flex-none sm:block">
+          <Navbar />
+        </div>
+      </div>
+    </div>
+    <div class="drawer-side z-50">
+      <label for="my-drawer-3" aria-label="close sidebar" class="drawer-overlay"
+      ></label>
+      <ul class="menu bg-cat-base min-h-full w-80 p-4">
+        <li class="text-xl font-bold my-5">
+          {currentPath}
+        </li>
+        <NavbarDrawer />
+      </ul>
+    </div>
+  </div>
+</div>
--- a/src/components/header/Navbar.astro
+++ b/src/components/header/Navbar.astro
@ -0,0 +1,17 @@
+---
+import LocaleLink from "@/components/links/LocaleLink.astro"
+import Links from "@/links"
+---
+
+<div class="flex justify-end">
+  {
+    Links.map(({ to, label }) => (
+      <LocaleLink
+        to={to}
+        class={"m-2 not-hover:!text-cat-text font-bold font-mono"}
+      >
+        ~/{label()}
+      </LocaleLink>
+    ))
+  }
+</div>
--- a/src/components/header/NavbarDrawer.astro
+++ b/src/components/header/NavbarDrawer.astro
@ -0,0 +1,12 @@
+---
+import Links from "../../links"
+import LocaleLink from "../links/LocaleLink.astro"
+---
+
+{
+  Links.map((link) => (
+    <li>
+      <LocaleLink to={link.to}>{link.label}</LocaleLink>
+    </li>
+  ))
+}
--- a/src/components/icons/Gitea.astro
+++ b/src/components/icons/Gitea.astro
@ -1,10 +0,0 @@
---
-import PajamasIcon from "./PajamasIcon.astro"
-interface Props {
-  class?: string
-}
-
-const { class: clazz } = Astro.props
---
-
-<PajamasIcon name="pajamas:gitea" class={clazz}></PajamasIcon>
--- a/src/components/landing/Greeting.astro
+++ b/src/components/landing/Greeting.astro
@ -1,13 +1,13 @@
 ---
 import { Image } from "astro:assets"
-import me from "@/images/polite-cat.jpg"
+import me from "@/images/me.jpg"
 import * as m from "@/paraglide/messages.js"
 import "@/styles/global.css"
 ---

 <div class="flex items-center justify-around flex-wrap">
  <div class="m-5">
-    <h1 class="sm:text-7xl font-bold">
+    <h1>
      {m.hiIm()}
      <br />
      Martin Berg Alstad
@ -16,7 +16,14 @@ import "@/styles/global.css"
    </h1>
    <p class="mx-1 sm:my-10">{m.aboutMe()}</p>
  </div>
-  <Image src={me} alt="Me on a hike" width="400" height="400" class="p-5 mx-auto" loading={"eager"} />
+  <Image
+    src={me}
+    alt="Me on a stand in front of a poster that says 'anbudsassistent'"
+    width="400"
+    height="400"
+    class="p-5 mx-auto rounded-full"
+    loading={"eager"}
+  />
 </div>
 <!-- Mastodon verification -->
 <a rel="me" href="https://snabelen.no/@Martials" class="hidden">Mastodon</a>
--- a/src/components/landing/IndexPage.astro
+++ b/src/components/landing/IndexPage.astro
@ -0,0 +1,7 @@
+---
+import Greeting from "./Greeting.astro"
+import LatestProjects from "./LatestProjects.astro"
+---
+
+<Greeting />
+<LatestProjects />
--- a/src/components/landing/LatestProjects.astro
+++ b/src/components/landing/LatestProjects.astro
@ -0,0 +1,10 @@
+---
+import { getCollection } from "astro:content"
+import ProjectGrid from "@/components/projects/ProjectGrid.astro"
+
+const projects = await getCollection("projects")
+---
+
+<div class="divider"></div>
+
+<ProjectGrid projects={projects} />
--- a/src/components/links/ExternalLink.astro
+++ b/src/components/links/ExternalLink.astro
@ -7,6 +7,12 @@ interface Props extends LinkProps {
 const { href, noStyle = false, class: clazz, ...props } = Astro.props
 ---

-<a href={href} target="_blank" rel="noopener" class:list={[noStyle ? "" : "link", clazz]} {...props}>
+<a
+  href={href}
+  target="_blank"
+  rel="noopener"
+  class:list={[noStyle ? "" : "link", clazz]}
+  {...props}
+>
  <slot />
 </a>
--- a/src/components/links/GiteaLink.astro
+++ b/src/components/links/GiteaLink.astro
@ -1,16 +1,21 @@
 ---
 import ExternalLink from "./ExternalLink.astro"
 import * as m from "@/paraglide/messages"
-import Gitea from "../icons/Gitea.astro"
+import PajamasIcon from "../icons/PajamasIcon.astro"
 interface Props {
  href: string
+  class?: string
 }
-const { href } = Astro.props
+const { href, class: clazz } = Astro.props
 ---

 <div>
-  <ExternalLink href={href} class="flex items-center gap-1">
-    <Gitea class="w-6 h-6" />
+  <ExternalLink
+    href={href}
+    class:list={["flex items-center gap-1", clazz]}
+    title="Gitea"
+  >
+    <PajamasIcon name="pajamas:gitea" class="w-6 h-6" aria-label="Gitea icon" />
    {m.sourceCode()}
  </ExternalLink>
 </div>
--- a/src/components/myLinks/LinkCard.astro
+++ b/src/components/myLinks/LinkCard.astro
@ -8,12 +8,27 @@ interface Props extends MyLink {
 }

 const { title, message, url, icon, class: clazz } = Astro.props
+const iconStyle = "w-6 h-6"
 ---

 <ExternalLink href={url} noStyle>
-  <div class:list={["card bg-neutral", clazz]}>
+  <div class:list={["card bg-cat-mantle text-cat-text", clazz]}>
    <div class="card-body p-5 flex flex-row items-center">
-      <PajamasIcon name={icon ?? "pajamas:link"} class="w-6 h-6" />
+      {
+        icon ? (
+          <PajamasIcon
+            name={icon.src}
+            class={iconStyle}
+            aria-label={icon.alt}
+          />
+        ) : (
+          <PajamasIcon
+            name={"pajamas:link"}
+            class={iconStyle}
+            aria-label="Link icon"
+          />
+        )
+      }
      <div>
        <h5 class="card-title">{title}</h5>
        <p class="prose">{message}</p>
--- a/src/components/myLinks/LinksPage.astro
+++ b/src/components/myLinks/LinksPage.astro
@ -2,10 +2,8 @@
 import links from "./myLinks"
 import LinkCard from "./LinkCard.astro"
 import "@/styles/global.css"
-import * as m from "@/paraglide/messages"
 ---

-<h1 class="text-center">{m.myLinks()}</h1>
 <div class="flex flex-col mx-auto w-fit gap-5">
  {
    links.map((link) => (
--- a/src/components/myLinks/myLinks.ts
+++ b/src/components/myLinks/myLinks.ts
@ -3,44 +3,68 @@ import { GIT_URL } from "astro:env/client"
 import * as m from "@/paraglide/messages"

 export interface MyLink {
-  title: string;
-  url: string;
-  message?: string;
-  icon?: PajamasIcon
+  title: string
+  url: string
+  message?: string
+  icon?: {
+    src: PajamasIcon
+    alt: string
+  }
 }

 export default [
  {
-    title: "GitHub",
-    url: "https://github.com/emberal",
-    icon: "pajamas:github"
+    title: "Codeberg",
+    url: "https://codeberg.org/martials",
+    message: m.forMirrors(),
+    icon: {
+      src: "pajamas:git",
+      alt: "Git icon",
+    },
  },
  {
    title: "Gitea",
    url: `${GIT_URL}/martials`,
    message: m.forPersonalProjects(),
-    icon: "pajamas:gitea"
+    icon: {
+      src: "pajamas:gitea",
+      alt: "Gitea icon",
+    },
+  },
+  {
+    title: "GitHub",
+    url: "https://github.com/emberal",
+    icon: {
+      src: "pajamas:github",
+      alt: "GitHub icon",
+    },
  },
  {
    title: "LinkedIn",
    url: "https://www.linkedin.com/in/martin-b-2a69391a3/",
-    icon: "pajamas:linkedin"
+    icon: {
+      src: "pajamas:linkedin",
+      alt: "LinkedIn icon",
+    },
  },
  {
-    title: "Mastodon (Snabelen)",
+    title: "Mastodon (Snabelen.no)",
    url: "https://snabelen.no/@Martials",
-    icon: "pajamas:mastodon"
+    icon: {
+      src: "pajamas:mastodon",
+      alt: "Mastodon icon",
+    },
  },
  {
    title: "Pixelfed",
-    url: "https://pixelfed.social/i/web/profile/261454857934868480"
+    url: "https://pixelfed.social/i/web/profile/261454857934868480",
  },
  {
    title: "Steam",
-    url: "https://steamcommunity.com/id/martials/"
+    url: "https://steamcommunity.com/id/martials/",
  },
  {
    title: "Trakt.tv",
-    url: "https://trakt.tv/users/martials"
-  }
+    url: "https://trakt.tv/users/martials",
+  },
 ] satisfies MyLink[]
--- a/src/components/projects/MyProjectsPage.astro
+++ b/src/components/projects/MyProjectsPage.astro
@ -1,37 +1,12 @@
 ---
-import ProjectCard from "./ProjectCard.astro"
-import * as m from "@/paraglide/messages"
+import ProjectGrid from "./ProjectGrid.astro"
 import { type CollectionEntry } from "astro:content"
-import { type NavLink } from "@/utils/linking"

 interface Props {
  projects: CollectionEntry<"projects">[]
 }

 const { projects } = Astro.props
-
-const baseUrl: NavLink = "/projects"
 ---

-<h1 class="text-4xl font-bold text-center sm:my-10 mt-2">{m.myProjects()}</h1>
-<div class="flex flex-wrap justify-around">
-  {
-    projects.map(
-      ({
-         data: { title, description, tags, heroImage, heroImageAlt },
-         id
-       }) => (
-        <div class="my-5 px-2">
-          <ProjectCard
-            title={title}
-            linkTo={`${baseUrl}/${id}`}
-            description={description}
-            tags={tags}
-            image={heroImage}
-            imageAlt={heroImageAlt}
-          />
-        </div>
-      )
-    )
-  }
-</div>
+<ProjectGrid projects={projects} />
--- a/src/components/projects/ProjectCard.astro
+++ b/src/components/projects/ProjectCard.astro
@ -19,12 +19,13 @@ const { title, description, tags, image, imageAlt, linkTo } = Astro.props

 <LocaleLink
  to={linkTo}
-  class="card bg-base-100 max-w-96 shadow-xl hover:scale-105 transition"
+  class="card bg-cat-base max-w-96 shadow-xl hover:scale-105 transition border border-cat-surface0"
 >
  <figure>
    <Image src={image} alt={imageAlt} />
+    <figcaption class="sr-only">{imageAlt}</figcaption>
  </figure>
-  <div class="card-body">
+  <div class="card-body text-cat-text">
    <h2 class="card-title">
      {title}
    </h2>
--- a/src/components/projects/ProjectGrid.astro
+++ b/src/components/projects/ProjectGrid.astro
@ -0,0 +1,32 @@
+---
+import type { Project } from "@/types/types"
+import type { NavLink } from "@/utils/linking"
+import ProjectCard from "./ProjectCard.astro"
+
+interface Props {
+  projects: ReadonlyArray<Project>
+}
+
+const { projects } = Astro.props
+
+const baseUrl: NavLink = "/projects"
+---
+
+<div class="flex flex-wrap justify-around">
+  {
+    projects.map(
+      ({ data: { title, description, tags, heroImage, heroImageAlt }, id }) => (
+        <div class="my-5 px-2">
+          <ProjectCard
+            title={title}
+            linkTo={`${baseUrl}/${id}`}
+            description={description}
+            tags={tags}
+            image={heroImage}
+            imageAlt={heroImageAlt}
+          />
+        </div>
+      ),
+    )
+  }
+</div>
--- a/src/components/projects/ProjectPage.astro
+++ b/src/components/projects/ProjectPage.astro
@ -1,11 +1,11 @@
 ---
 import Layout from "@/layouts/Layout.astro"
-import { Image } from "astro:assets"
-import { getEntry, render } from "astro:content"
-import BadgeList from "../badge/BadgeList.astro"
-import * as m from "@/paraglide/messages"
+import BadgeList from "@/components/badge/BadgeList.astro"
+import GiteaLink from "@/components/links/GiteaLink.astro"
 import { languageTag } from "@/paraglide/runtime"
-import GiteaLink from "../links/GiteaLink.astro"
+import { getEntry, render } from "astro:content"
+import { Image } from "astro:assets"
+import * as m from "@/paraglide/messages"
 import "@/styles/global.css"

 interface Props {
@ -15,7 +15,7 @@ interface Props {
 const { project } = Astro.props

 const entry = await getEntry("projects", project)
-const { Content } = await render(entry)
+const { Content } = await render(entry!)
 const {
  title,
  description,
@ -24,15 +24,15 @@ const {
  heroImageAlt,
  source,
  createdAt,
-  updatedAt
+  updatedAt,
 } = entry!.data
 ---

-<!--TODO day.js for dates?-->
+<!--TODO day.js / Temporal API for dates?-->
 <Layout title={title} class="mx-auto max-w-[750px]">
  <div class="flex justify-between my-2">
    <div>
-      <h1>{title}</h1>
+      <h2>{title}</h2>
      <BadgeList tags={tags} />
    </div>
    <div class="flex flex-col items-end">
@ -44,9 +44,9 @@ const {
      </p>
    </div>
  </div>
-  <Image src={heroImage} alt={heroImageAlt} />
+  <Image src={heroImage} alt={heroImageAlt} class="m-auto" />

-  <GiteaLink href={source} />
+  <GiteaLink href={source} class="my-2" />

  <p class="my-2">{description}</p>
  <Content />
--- a/src/content/config.ts
+++ b/src/content/config.ts
@ -10,22 +10,22 @@ const projectCollection = defineCollection({
      heroImage: image(),
      heroImageAlt: z.string(),
      tags: z.array(z.string()),
-      source: z.string(),
-      createdAt: z.string(),
-      updatedAt: z.string()
-    })
+      source: z.string().url(),
+      createdAt: z.string().date(),
+      updatedAt: z.string().date(),
+    }),
 })

-const hardwareCollection = defineCollection({
-  loader: glob({ pattern: "**\/*.yaml", base: "./src/content/hardware" }),
+const usesCollection = defineCollection({
+  loader: glob({ pattern: "**\/*.yaml", base: "./src/content/uses" }),
  schema: z.object({
    title: z.string(),
    accessories: z.optional(z.array(z.string())),
-    hardware: z.array(z.string())
-  })
+    hardware: z.array(z.string()),
+  }),
 })

 export const collections = {
  projects: projectCollection,
-  hardware: hardwareCollection
+  uses: usesCollection,
 }
--- a/src/content/projects/Calendar
+++ b/src/content/projects/Calendar
--- a/src/content/projects/Simplify-truths-website.png
+++ b/src/content/projects/Simplify-truths-website.png
--- a/src/content/projects/assets/recursive-meme.png
+++ b/src/content/projects/assets/recursive-meme.png
--- a/src/content/projects/homepage.mdx
+++ b/src/content/projects/homepage.mdx
@ -1,14 +1,17 @@
 ---
-title: "Hjemmeside"
-description: "Hjemmesiden"
-heroImage: "./kevin-james.jpg"
-heroImageAlt: "The homepage of this site"
-tags: [Astro, Svelte, TypeScript, I18n]
-source: "https://example.com"
+title: "Welcome"
+description: "Welcome to my homepage / portfolio"
+heroImage: "assets/recursive-meme.png"
+heroImageAlt: "A recursive meme that says: Self-reference, recursive meme is self-referential"
+tags: [Astro, Svelte, TypeScript, I18n, TailwindCSS, Docker]
+source: "https://git.martials.no/martials/martials.no"
 createdAt: "2024-09-22"
-updatedAt: "2024-09-22"
+updatedAt: "2025-02-15"
 ---

-This is a short meta post about the homepage of this site.
-It is a simple landing page with a short introduction to the site and a list of the latest posts.
-The site is not built with GatsbyJS and Contentful.
+This is a short meta post about my homepage which you are looking at right now.
+
+This page is going to be a simple site where I will share my projects, stuff i've accomplished and things about me.
+It is still a work in progress, so it will be updated for the forseable future.
+
+In the meantime, you can see what i'm working on at [Gitea](https://git.martials.no/martials?tab=activity).
--- a/src/content/projects/hvl-ics-simplifier.mdx
+++ b/src/content/projects/hvl-ics-simplifier.mdx
@ -1,16 +0,0 @@
---
-title: "API for å forenkle TimeEdit iCalendar filer"
-description: "Et API som forenkler tittler i ICS filer fra TimeEdit"
-heroImage: "./Calendar before and after.png"
-heroImageAlt: "En kalender før og etter APIet har blitt brukt. Venstre side er før, høyre etter."
-tags: [API, Kotlin, Spring Boot, Tomcat, iCal4j, CI/CD]
-source: "https://github.com/emberal/hvl_ics_simplifier"
-createdAt: "2023-08-08"
-updatedAt: "2024-10-20"
---
-
-Ble lei av hvor vanskelig det var å lese iCalendar filer fra HVL sin kalender i TimeEdit, så jeg lagde et API som gjør det enklere.
-Data for tittelen blir hentet fra den gamle tittelen.
-For å finne hvilken type hendselse det er, sjekkes beskrivelsen og lokasjonen.
-
-APIet er skrevet i Kotlin med Spring boot, og hosted på en selvhostet tomcat server.
--- a/src/content/projects/kevin-james.jpg
+++ b/src/content/projects/kevin-james.jpg
--- a/src/content/projects/simplify-truths.mdx
+++ b/src/content/projects/simplify-truths.mdx
@ -1,26 +0,0 @@
---
-title: "Forenkle sannhetsverdier og sannhetstabeller"
-description: "Forenkle sannhetsuttrykk og opprette sannhetstabeller"
-heroImage: "./Simplify-truths-website.png"
-heroImageAlt: "Nettsiden med en sannhetstabell"
-tags: [TypeScript, SolidJS, Tailwind css, Nettside, Java, API, Spring Boot, Raspberry Pi, Apache, Tomcat]
-source: "https://github.com/h600878/martials.no"
-createdAt: "2022-11-08"
-updatedAt: "2024-10-20"
---
-{/* TODO change to Rust */}
-Noen sannhetsverdier kan bli ganske store, og kompliserte. Derfor har jeg laget dette programmet for å forenkle uttrykk mest mulig.
-Programmet bruker flere kjente metoder for å skrive om uttrykkene. Hvilke uttrykk som er brukt og hvilke endringer de gjorde,
-kan vises i menyen under søkefeltet.
-<br />
-I tillegg til å bare forenkle uttrykk, kan man også generere en sannhetstabell med alle mulige verdier i uttrykket.
-Hvis man ikke ønsker å forenkle uttrykket, men bare generere tabellen, kan man enkelt skru av forenkling. I tillegg har
-man muligheten til å filtrere resultat, enten ved å skjule sanne eller usanne verdier. Eller ved å sortere etter sanne
-eller usanne først.
-<br />
-Nettsiden er laget med TypeScript, SolidJS og Tailwind CSS. API-et er laget med Java og Spring Boot.
-Begge kjører på min egen raspberry pi 4, nettsiden er hostet på en apache2 tjener, mens API-et ligger på en tomcat tjener.
-<a href={"https://martials.no/simplify-truths.html"}>Lenke til nettsiden.</a>
-<br />
-Spørringer kan gjøres mot API-et kan utføres med GET eller POST. API-et returnerer JSON.
-[Lenke til API-docs](https://api.martials.no/simplify-truths)
--- a/src/content/hardware/desktop.yaml
+++ b/src/content/hardware/desktop.yaml
@ -2,8 +2,8 @@ title: Desktop
 accessories:
  - Gaming chair | Arozzi Mezzo V2 Gaming chair Fabric Black/Red # https://www.komplett.no/product/1079732?noredirect=true
  - Headset | Logitech PRO X LIGHTSPEED Wireless Gaming Headset # https://www.komplett.no/product/1162749?noredirect=true
-  - Keyboard | Logitech G710
-  - Monitor 1 | AOC 27" LED FreeSync G2790PX # https://www.komplett.no/product/975642?noredirect=true
+  - Keyboard | Keychron K8 Pro QMK/VIA RGB Gateron Red # https://www.komplett.no/product/1303473/gaming/gaming-utstyr/gamingtastatur/keychron-k8-pro-qmkvia-rgb-gateron-red-traadloest-gamingtastatur-sort
+  - Monitor 1 | Philips 34" 34M2C6500/00 # https://www.komplett.no/product/1307753/gaming/gaming-utstyr/gamingskjermer/philips-34-gamingskjerm-34m2c650000
  - Monitor 2 | Asus 28" 4K LED PB287Q # https://www.komplett.no/product/815114?noredirect=true
  - Mouse | Logitech G502 HERO Gaming Mouse
  - Mousepad | Svive Styx ESGR Gaming Mousepad XXL # https://www.komplett.no/product/985884?noredirect=true
--- a/src/content/hardware/homeServer.yaml
+++ b/src/content/hardware/homeServer.yaml
@ -1,3 +1,3 @@
-title: Home Server
+title: Homelab
 hardware:
  - b # Graphics cards, CPUs, etc.
--- a/src/content/hardware/raspberryPi.yaml
+++ b/src/content/hardware/raspberryPi.yaml
--- a/src/images/me.jpg
+++ b/src/images/me.jpg
--- a/src/layouts/Layout.astro
+++ b/src/layouts/Layout.astro
@ -1,13 +1,16 @@
 ---
-import Navbar from "@/components/Navbar.astro"
 import Footer from "@/components/Footer.astro"
+import Header from "@/components/header/Header.astro"
 import { languageTag } from "@/paraglide/runtime"
+import { resolvePathname } from "@/utils/linking"

 interface Props {
  title: string
  class?: string
 }
 const { title, class: clazz } = Astro.props
+const mainClass =
+  "grow max-w-[1000px] m-auto sm:min-w-[500px] not-sm:w-full px-5"
 ---

 <!doctype html>
@ -17,14 +20,19 @@ const { title, class: clazz } = Astro.props
    <meta name="description" content="Astro description" />
    <meta name="viewport" content="width=device-width" />
    <link rel="sitemap" href="/sitemap-index.xml" />
-  <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+    <link rel="icon" type="image/jpg" href="/favicon.jpg" />
    <meta name="generator" content={Astro.generator} />
-  <title>{title}</title>
+    <title>{title} | Martin Berg Alstad</title>
  </head>
-<body class="flex flex-col h-screen">
-<Navbar />
-<main class:list={["grow", clazz]}>
+  <body class="flex flex-col min-h-screen bg-cat-base text-cat-text">
+    <Header />
+    <main class:list={[mainClass, clazz]}>
+      <h1 class="text-center not-sm:hidden">
+        ~{resolvePathname(Astro.originPathname)}
+      </h1>
+      <div class="my-5">
        <slot />
+      </div>
    </main>
    <Footer />
  </body>
--- a/src/links.ts
+++ b/src/links.ts
@ -9,24 +9,20 @@ interface Link {
 const Links: Link[] = [
  {
    label: m.home,
-    to: "/"
+    to: "/",
  },
  {
    label: m.myProjects,
-    to: "/projects"
+    to: "/projects",
  },
  {
    label: m.myLinks,
-    to: "/links"
-  },
-  {
-    label: m.hardware,
-    to: "/hardware"
+    to: "/links",
  },
  {
    label: m.contactMe,
-    to: "/contact"
-  }
+    to: "/contact",
+  },
 ]

 export default Links
--- a/src/pages/404.astro
+++ b/src/pages/404.astro
@ -1,5 +1,6 @@
 ---
 import Layout from "../layouts/Layout.astro"
+import "@/styles/global.css"
 ---

 <Layout title="404">
--- a/src/pages/en/index.astro
+++ b/src/pages/en/index.astro
@ -1,8 +1,9 @@
 ---
-import OnePager from "../../components/Greeting.astro"
-import Layout from "../../layouts/Layout.astro"
+import IndexPage from "@/components/landing/IndexPage.astro"
+import Layout from "@/layouts/Layout.astro"
+import "@/styles/global.css"
 ---

 <Layout title="Welcome">
-  <OnePager />
+  <IndexPage />
 </Layout>
--- a/src/pages/en/links.astro
+++ b/src/pages/en/links.astro
@ -1,7 +1,9 @@
 ---
 import Layout from "@/layouts/Layout.astro"
 import LinksPage from "@/components/myLinks/LinksPage.astro"
+import "@/styles/global.css"
 ---
+
 <Layout title="My links">
  <LinksPage />
 </Layout>
--- a/src/pages/en/projects/[project].astro
+++ b/src/pages/en/projects/[project].astro
@ -1,16 +1,13 @@
 ---
 import ProjectPage from "@/components/projects/ProjectPage.astro"
 import { type GetStaticPathsResult } from "astro"
+import "@/styles/global.css"

 // Prerender the page as static HTML during build
 export const prerender = true

 export function getStaticPaths(): GetStaticPathsResult {
-  return [
-    { params: { project: "hvl-ics-simplifier" } },
-    { params: { project: "homepage" } },
-    { params: { project: "simplify-truths" } }
-  ]
+  return [{ params: { project: "homepage" } }]
 }

 const { project } = Astro.params
--- a/src/pages/en/projects/index.astro
+++ b/src/pages/en/projects/index.astro
@ -2,6 +2,7 @@
 import { getCollection } from "astro:content"
 import Layout from "@/layouts/Layout.astro"
 import MyProjectsPage from "@/components/projects/MyProjectsPage.astro"
+import "@/styles/global.css"

 const projects = await getCollection("projects")
 ---
--- a/src/pages/en/hardware.astro
+++ b/src/pages/en/hardware.astro
@ -1,12 +1,12 @@
 ---
 import Layout from "@/layouts/Layout.astro"
-import HardwarePage from "@/components/HardwarePage.svelte"
+import UsesPage from "@/components/UsesPage.astro"
 import "@/styles/global.css"
 import { getCollection } from "astro:content"

-const hardware = await getCollection("hardware")
+const uses = await getCollection("uses")
 ---

 <Layout title="Hardware" class="mx-auto max-w-[750px]">
-  <HardwarePage server:defer hardware={hardware} />
+  <UsesPage uses={uses} />
 </Layout>
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@ -1,8 +1,9 @@
 ---
-import Layout from "../layouts/Layout.astro"
-import Greeting from "../components/Greeting.astro"
+import IndexPage from "@/components/landing/IndexPage.astro"
+import Layout from "@/layouts/Layout.astro"
+import "@/styles/global.css"
 ---

 <Layout title="Velkommen">
-  <Greeting />
+  <IndexPage />
 </Layout>
--- a/src/pages/links.astro
+++ b/src/pages/links.astro
@ -1,7 +1,9 @@
 ---
 import Layout from "@/layouts/Layout.astro"
 import LinksPage from "@/components/myLinks/LinksPage.astro"
+import "@/styles/global.css"
 ---
+
 <Layout title="Mine lenker">
  <LinksPage />
 </Layout>
--- a/src/pages/projects/[project].astro
+++ b/src/pages/projects/[project].astro
@ -1,16 +1,13 @@
 ---
 import ProjectPage from "@/components/projects/ProjectPage.astro"
 import { type GetStaticPathsResult } from "astro"
+import "@/styles/global.css"

 // Prerender the page as static HTML during build
 export const prerender = true

 export function getStaticPaths(): GetStaticPathsResult {
-  return [
-    { params: { project: "hvl-ics-simplifier" } },
-    { params: { project: "homepage" } },
-    { params: { project: "simplify-truths" } }
-  ]
+  return [{ params: { project: "homepage" } }]
 }

 const { project } = Astro.params
--- a/src/pages/projects/index.astro
+++ b/src/pages/projects/index.astro
@ -2,6 +2,7 @@
 import { getCollection } from "astro:content"
 import Layout from "@/layouts/Layout.astro"
 import MyProjectsPage from "@/components/projects/MyProjectsPage.astro"
+import "@/styles/global.css"

 const projects = await getCollection("projects")
 ---
--- a/src/pages/hardware.astro
+++ b/src/pages/hardware.astro
@ -1,12 +1,12 @@
 ---
 import Layout from "@/layouts/Layout.astro"
-import HardwarePage from "@/components/HardwarePage.svelte"
+import UsesPage from "@/components/UsesPage.astro"
 import "@/styles/global.css"
 import { getCollection } from "astro:content"

-const hardware = await getCollection("hardware")
+const uses = await getCollection("uses")
 ---

 <Layout title="Hardware" class="mx-auto max-w-[750px]">
-  <HardwarePage server:defer hardware={hardware} />
+  <UsesPage uses={uses} />
 </Layout>
--- a/src/styles/global.css
+++ b/src/styles/global.css
@ -1,6 +1,28 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
+@import "tailwindcss";
+
+@plugin "@tailwindcss/typography";
+@plugin "daisyui";
+
+@theme {
+    --color-cat-rosewater: #f5e0dc;
+    --color-cat-flamingo: #f2cdcd;
+    --color-cat-pink: #f5c2e7;
+    --color-cat-mauve: #cba6f7;
+    --color-cat-red: #f38ba8;
+    --color-cat-maroon: #eba0ac;
+    --color-cat-peach: #fab387;
+    --color-cat-yellow: #f9e2af;
+    --color-cat-green: #a6e3a1;
+    --color-cat-teal: #94e2d5;
+    --color-cat-sky: #89dceb;
+    --color-cat-sapphire: #74c7ec;
+    --color-cat-blue: #89b4fa;
+    --color-cat-lavender: #b4befe;
+    --color-cat-text: #cdd6f4;
+    --color-cat-surface0: #313244;
+    --color-cat-base: #1e1e2e;
+    --color-cat-mantle: #181825;
+}

@layer utilities {
    .debug {
@ -8,7 +30,6 @@
    }
 }

-@layer base {
 br {
    @apply my-0.5;
 }
@ -21,8 +42,12 @@
    @apply text-3xl font-bold mb-2;
 }

+h3 {
+    @apply text-2xl font-bold mb-2;
+}
+
 /* TODO change default style*/
 a {
-        @apply link
-    }
+    @apply link text-cat-mauve;
+    text-decoration-line: none;
 }
--- a/src/types/icons.ts
+++ b/src/types/icons.ts
@ -1,3 +1,14 @@
-export type Icon = "gitea" | "github" | "mastodon" | "linkedin" | "link" | "status-health"
+/**
+ * @see https://icon-sets.iconify.design/pajamas/
+ */
+export type Icon =
+  | "git"
+  | "gitea"
+  | "github"
+  | "mastodon"
+  | "linkedin"
+  | "link"
+  | "status-health"
+  | "hamburger"

 export type PajamasIcon = `pajamas:${Icon}`
--- a/src/types/props.ts
+++ b/src/types/props.ts
@ -1,8 +1,8 @@
 export interface ComponentProps {
-  class?: string;
-  title?: string;
+  class?: string
+  title?: string
 }

 export interface LinkProps extends ComponentProps {
-  href: string;
+  href: string
 }
--- a/src/utils/linking.ts
+++ b/src/utils/linking.ts
@ -7,19 +7,19 @@ interface TranslatedPathnames {
 }

 export type NavLink =
-  "/"
+  | "/"
  | "/contact"
  | "/projects"
  | `/projects/${Project["id"]}`
  | "/links"
-  | "/hardware"
+  | "/uses"

 const paths: Set<NavLink> = new Set([
  "/",
  "/contact",
  "/projects",
  "/links",
-  "/hardware"
+  "/uses",
 ])

 /**
@ -33,13 +33,13 @@ const pathnames: Record<AbsolutePathname, TranslatedPathnames> = {}
 for (const path of paths) {
  pathnames[path] = {
    nb: path,
-    en: `/en${path}`
+    en: `/en${path}`,
  }
 }

 export function localizePathname(
  pathname: NavLink,
-  locale: AvailableLanguageTag
+  locale: AvailableLanguageTag,
 ): string {
  const pathnameParts = pathname.split("/")
  const firstSegment: AbsolutePathname = `/${pathnameParts[1]}`
--- a/tailwind.config.mjs
+++ b/tailwind.config.mjs
@ -1,8 +0,0 @@
-/** @type {import("tailwindcss").Config} */
-export default {
-  content: ["./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}"],
-  theme: {
-    extend: {}
-  },
-  plugins: [require("@tailwindcss/typography"), require("daisyui")]
-}
Author	SHA1	Message	Date
Martin Berg Alstad	25a38d2f0e	🔖 Replaced heroimage with an image of me, fix typo All checks were successful Build and deploy website / build (push) Successful in 32s Details	2025-02-16 13:50:27 +01:00
Martin Berg Alstad	e1c3ae7d87	✨ Latest projects on landing page, moved landing page components All checks were successful Build and deploy website / build (push) Successful in 34s Details	2025-02-16 12:01:51 +01:00
Martin Berg Alstad	22cdc634f9	✨ More Catppuccin colours, colour links by default	2025-02-16 11:49:06 +01:00
Martin Berg Alstad	1b3c6c629e	✨ More mobile friendly, fix wrong URL, Hamburger menu All checks were successful Build and deploy website / build (push) Successful in 33s Details - Hamburger menu on mobile - title is moved into header on mobile - Smaller titles on mobile - Fix wrong import of env in config - Cleaned up unused imports	2025-02-15 23:00:38 +01:00
Martin Berg Alstad	ff2f65bf59	🚑 Fix build error All checks were successful Build and deploy website / build (push) Successful in 32s Details Signed-off-by: Martin Berg Alstad <git@martials.no>	2025-02-15 19:31:44 +01:00
Martin Berg Alstad	54db411930	✨ More style changes, removed test projects, favicon Some checks failed Build and deploy website / build (push) Failing after 22s Details - Fix missing aria-labels - Fix breadcrumbs on specific projects - Removed uses from NavBar - Center image on project page - Colour link on project page - Initial README Signed-off-by: Martin Berg Alstad <git@martials.no>	2025-02-15 19:29:06 +01:00
Martin Berg Alstad	023c8b7c85	✨ Update general style - Smaller width of page - Center navbar - Fonts - Catppuccin Mocha colours - TODO.md - Show all uses at the same time - and more...	2025-02-15 18:01:17 +01:00
Martin Berg Alstad	cb00252364	🎨 Format files, Added codeberg to links,lighter colour for linkcards All checks were successful Build and deploy website / build (push) Successful in 33s Details	2025-02-15 14:59:32 +01:00
Martin Berg Alstad	04f279dab3	👽️ Updated legacy svelte components to runes All checks were successful Build and deploy website / build (push) Successful in 1m7s Details	2025-02-15 14:34:47 +01:00
Martin Berg Alstad	7c5b228e59	📦️ Updated Tailwind to v4, updated hardware to uses	2025-02-15 13:29:01 +01:00
Martin Berg Alstad	cfd11a98ec	Fixed Type error All checks were successful Build and deploy website / build (push) Successful in 35s Details	2025-01-19 20:07:26 +01:00
Martin Berg Alstad	89a349b4fd	⬆ Updated all packages to latest stable, changed hardware url to /uses Some checks failed Build and deploy website / build (push) Failing after 42s Details	2025-01-19 20:04:06 +01:00
Martin Berg Alstad	2fc18f642d	Updated keyboard in hardware config All checks were successful Build and deploy website / build (push) Successful in 1m1s Details	2025-01-04 17:50:25 +01:00