🔖 Replaced heroimage with an image of me, fix typo

- 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

.dockerignore

@@ -0,0 +1,5 @@
+.astro
+.gitea
+.DS_Store
+node_modules
+dist

.env

@@ -1 +1,3 @@
-GIT_URL="https://git.martials.no"
+DOMAIN="martials.no"
+GIT_URL=https://git.$DOMAIN
+STATUS_URL="https://status.$DOMAIN/status/home"

.gitea/workflows/build.yaml

@@ -1,40 +0,0 @@
-name: Build and deploy website
-
-on:
-  push:
-    branches:
-      - master
-  pull_request:
-    branches:
-      - master
-
-jobs:
-  build:
-    runs-on: ubuntu-latest
-
-    steps:
-      - name: Check out repository code
-        uses: actions/checkout@v4
-      - name: Install dependencies
-        run: echo y | npm exec -- pnpm install
-      - name: Build
-        run: npm exec -- pnpm build
-      - name: Upload artifacts
-        uses: actions/upload-artifact@v3 # Deprecated and v4+ is not supported for GHES
-        with:
-          name: dist
-          path: dist
-
-  deploy:
-    runs-on: host
-
-    steps:
-      - name: Download artifacts
-        uses: actions/download-artifact@v3
-        with:
-          name: dist
-          path: dist
-      - name: Move files to server
-        run: |
-          rm -rf /var/www/beta.martials.no/*
-          cp -r dist/* /var/www/beta.martials.no

.gitea/workflows/deploy.yaml

@@ -0,0 +1,19 @@
+name: Build and deploy website
+
+on:
+  push:
+    branches:
+      - master
+  pull_request:
+    branches:
+      - master
+
+jobs:
+  build:
+    runs-on: host
+
+    steps:
+      - name: Check out repository code
+        uses: actions/checkout@v4
+      - name: Run docker-compose
+        run: docker compose up -d --build

Dockerfile

@@ -0,0 +1,26 @@
+FROM node:lts-alpine AS base
+WORKDIR /app
+
+# By copying only the package.json and package-lock.json here, we ensure that the following `-deps` steps are independent of the source code.
+# Therefore, the `-deps` steps will be skipped if only the source code changes.
+COPY package.json pnpm-lock.yaml ./
+COPY project.inlang ./project.inlang
+
+FROM base AS prod-deps
+RUN echo y | npm exec -- pnpm install --prod
+
+FROM base AS build-deps
+RUN npm exec -- pnpm install
+
+FROM build-deps AS build
+COPY . .
+RUN npm exec -- pnpm run build
+
+FROM base AS runtime
+COPY --from=prod-deps /app/node_modules ./node_modules
+COPY --from=build /app/dist ./dist
+
+ENV HOST=0.0.0.0
+ENV PORT=4321
+EXPOSE 4321
+CMD node ./dist/server/entry.mjs

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!

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

astro.config.mjs

@@ -1,21 +1,49 @@
 // @ts-check
-import { defineConfig } from "astro/config"
-import tailwind from "@astrojs/tailwind"
+import { defineConfig, envField } from "astro/config"
+import paraglide from "@inlang/paraglide-astro"
+import tailwindcss from "@tailwindcss/vite"
 import sitemap from "@astrojs/sitemap"
-import { loadEnv } from "vite"
-import mdx from "@astrojs/mdx"
 import svelte from "@astrojs/svelte"
+import node from "@astrojs/node"
+import mdx from "@astrojs/mdx"
+import icon from "astro-icon"
 
-const { url } = process.env.URL
-  ? loadEnv(process.env.URL, process.cwd(), "")
-  : { url: "http://localhost:3000" }
+import { loadEnv } from "vite"
+
+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: [
+    sitemap(),
+    mdx(),
+    svelte(),
+    icon(),
+    paraglide({
+      project: "./project.inlang",
+      outdir: "./src/paraglide",
+    }),
+  ],
+  adapter: node({
+    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" }),
+    },
   },
-  integrations: [tailwind(), sitemap(), mdx(), svelte()]
 })

docker-compose.yml

@@ -0,0 +1,9 @@
+services:
+  web:
+    container_name: martials.no
+    restart: always
+    build:
+      context: .
+      dockerfile: Dockerfile
+    ports:
+      - "4321:4321"

messages/en.json

@@ -2,13 +2,26 @@
   "$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"
+  "updatedAt": "Updated at",
+  "forMirrors": "For mirrors of Gitea",
+  "forPersonalProjects": "For personal projects",
+  "status": "Status",
+  "name": "Name",
+  "subject": "Subject",
+  "email": "Email",
+  "message": "Message",
+  "send": "Send",
+  "auto": "Auto",
+  "norwegian": "Norwegian",
+  "english": "English"
 }

messages/nb.json

@@ -2,13 +2,26 @@
   "$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"
+  "updatedAt": "Oppdatert",
+  "forMirrors": "For mirrors av Gitea",
+  "forPersonalProjects": "For personlige prosjekter",
+  "status": "Status",
+  "name": "Navn",
+  "subject": "Emne",
+  "email": "E-post",
+  "message": "Melding",
+  "send": "Send",
+  "auto": "Auto",
+  "norwegian": "Norsk",
+  "english": "Engelsk"
 }

package.json

@@ -1,36 +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}\""
+    "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.3",
-    "@astrojs/mdx": "^3.1.7",
-    "@astrojs/sitemap": "^3.1.6",
-    "@astrojs/svelte": "^5.7.1",
-    "@astrojs/tailwind": "^5.1.1",
-    "@tailwindcss/typography": "^0.5.15",
-    "astro": "^4.15.9",
+    "@astrojs/check": "^0.9.4",
+    "@astrojs/mdx": "^4.0.8",
+    "@astrojs/node": "9.1.0",
+    "@astrojs/sitemap": "^3.2.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.2"
+    "svelte": "^5.20.1",
+    "tailwindcss": "^4.0.6",
+    "typescript": "^5.7.3"
   },
   "devDependencies": {
-    "@inlang/paraglide-js": "1.11.2",
-    "daisyui": "^4.12.10",
-    "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,

public/.well-known/security.txt

@@ -0,0 +1,4 @@
+Contact: mailto:security@martials.no
+Expires: 2029-12-31T23:00:00.000Z
+Preferred-Languages: no,en
+Canonical: https://martials.no/.well-known/security.txt

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>

src/components/ContactMeForm.astro

@@ -1,37 +1,31 @@
 ---
-// TODO form
+import Input from "@/components/Input.astro"
+import * as m from "@/paraglide/messages.js"
 // TODO self-host email server
-import "../styles/global.css"
-import Input from "../components/Input.astro"
-import * as console from "node:console"
-
-if (Astro.request.method === "POST") {
-  try {
-    const data = await Astro.request.formData()
-    const name = data.get("name")
-    const subject = data.get("subject")
-    const email = data.get("email")
-    const message = data.get("message")
-    // TODO Do something with the data
-    console.info({ name, subject, email, message })
-  } catch (error) {
-    if (error instanceof Error) {
-      console.error(error.message)
-    }
-  }
-}
 ---
 
-<div class="text-red-600 text-center">In development</div>
-
-<form class="flex flex-col gap-2 max-w-[500px] mx-auto" method="post">
-  <Input label="Name" type="text" name="name" required />
-  <Input label="Subject" name="subject" required />
-  <Input label="Email" name="email" />
-  <label class="flex flex-col"
-    >Message
-    <textarea name="message" class="textarea textarea-bordered" required
-    ></textarea>
+<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" />
+    {/*Honeypot spam filter*/}
+    <input name="_gotcha" type="text" class={"hidden"} />
+    <label class="flex flex-col">
+      {m.message()}
+      <textarea
+        name="message"
+        class="textarea textarea-bordered w-full bg-cat-base"
+        required></textarea>
     </label>
-  <button type="submit">Send</button>
   </form>
+  <button
+    type="submit"
+    class="btn mt-2 bg-cat-base border-cat-surface0"
+    title={m.send()}>{m.send()}</button
+  >
+</div>

src/components/Footer.astro

@@ -1,9 +1,32 @@
 ---
 import GiteaLink from "./links/GiteaLink.astro"
-const gitUrl = import.meta.env.GIT_URL
+import PajamasIcon from "./icons/PajamasIcon.astro"
+import ExternalLink from "./links/ExternalLink.astro"
+import LanguageButtonGroup from "./LanguageButtonGroup.astro"
+import { GIT_URL, STATUS_URL } from "astro:env/client"
+import * as m from "@/paraglide/messages"
+
+const giteaLink = `${GIT_URL}/martials/martials.no`
 ---
 
-<div class="divider"></div>
-<div class="mx-auto">
-  <GiteaLink href={gitUrl} />
+<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} 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>
+  <LanguageButtonGroup />
 </div>

src/components/Greeting.astro

@@ -1,20 +0,0 @@
----
-import { Image } from "astro:assets"
-import me from "../images/me.jpg"
-import * as m from "../paraglide/messages.js"
-import "../styles/global.css"
----
-
-<div class="flex items-center justify-around">
-  <div class="m-5">
-    <h1 class="text-7xl font-bold">
-      {m.hiIm()}
-      <br />
-      Martin Berg Alstad
-      <br />
-      {m.position()}
-    </h1>
-    <p class="mx-1 my-10">{m.aboutMe()}</p>
-  </div>
-  <Image src={me} alt="Me on a hike" width="400" height="400" class="m-5" />
-</div>

src/components/HardwarePage.svelte

@@ -1,23 +0,0 @@
-<script lang="ts">
-  import Select from "./Select.svelte"
-  import { getCollection } from "astro:content"
-
-  getCollection("hardware")
-    .then((collection) => {
-      console.log(collection)
-    })
-
-  // TODO fetch selected hardware from content collection
-  let selectedHardware: string = "CPU"
-
-  function onChange({ detail }: CustomEvent<string>) {
-    console.log(detail)
-    selectedHardware = detail
-  }
-
-  // TODO show the selected hardware
-</script>
-<div>
-  <h2>{selectedHardware}</h2>
-  <Select options={["CPU", "GPU", "RAM"]} on:change={onChange} />
-</div>

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}

src/components/LanguageButtonGroup.astro

@@ -0,0 +1,27 @@
+---
+import LocaleLink from "./links/LocaleLink.astro"
+import { type NavLink, resolvePathname } from "@/utils/linking"
+
+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: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>

src/components/Navbar.astro

@@ -1,13 +0,0 @@
----
-import Links from "../links"
----
-
-<div class="flex justify-end">
-  {
-    Links.map(({ to, label }) => (
-      <a href={to} class="m-2 hover:underline">
-        {label}
-      </a>
-    ))
-  }
-</div>

src/components/Select.svelte

@@ -1,15 +1,24 @@
 <script lang="ts">
-  import { createEventDispatcher } from "svelte"
+  // TODO move to types?
+  interface Option<Key> {
+    key: Key
+    value: string
+  }
 
-  export let options: string[] = []
-  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"
-  on:change={(value) => dispatch("change", value.currentTarget.value)}
+  bind:value={selected}
+  class="select select-bordered w-full max-w-xs ${clazz}"
 >
-  {#each options as option}
-    <option value={option}>{option}</option>
+  {#each options as { key, value }}
+    <option value={key}>{value}</option>
   {/each}
 </select>

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>

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>

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>

src/components/collapse/Collapse.svelte

@@ -0,0 +1,17 @@
+<script lang="ts">
+  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">
+    {@render children()}
+  </div>
+</details>

src/components/collapse/CollapseList.svelte

@@ -0,0 +1,18 @@
+<script lang="ts">
+  import Collapse from "@/components/collapse/Collapse.svelte"
+
+  interface Props {
+    items?: string[]
+    title?: string
+  }
+
+  const { items = [], title = "" }: Props = $props()
+</script>
+
+<Collapse {title}>
+  <ul>
+    {#each items as item}
+      <li class="list-disc ml-5">{item}</li>
+    {/each}
+  </ul>
+</Collapse>

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>

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>

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>

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>
+  ))
+}

src/components/icons/PajamasIcon.astro

@@ -0,0 +1,12 @@
+---
+import type { PajamasIcon } from "@/types/icons"
+import type { ComponentProps } from "@/types/props"
+import { Icon } from "astro-icon/components"
+interface Props extends ComponentProps {
+  name: PajamasIcon
+}
+
+const { name, class: clazz, ...props } = Astro.props
+---
+
+<Icon name={name} class:list={[clazz]} {...props} />

src/components/landing/Greeting.astro

@@ -0,0 +1,29 @@
+---
+import { Image } from "astro:assets"
+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>
+      {m.hiIm()}
+      <br />
+      Martin Berg Alstad
+      <br />
+      {m.position()}
+    </h1>
+    <p class="mx-1 sm:my-10">{m.aboutMe()}</p>
+  </div>
+  <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>

src/components/landing/IndexPage.astro

@@ -0,0 +1,7 @@
+---
+import Greeting from "./Greeting.astro"
+import LatestProjects from "./LatestProjects.astro"
+---
+
+<Greeting />
+<LatestProjects />

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} />

src/components/links/ExternalLink.astro

@@ -1,12 +1,18 @@
 ---
-interface Props {
-  href: string
-  class?: string
+import type { LinkProps } from "@/types/props"
+interface Props extends LinkProps {
+  noStyle?: boolean
 }
 
-const { href, class: clazz } = Astro.props
+const { href, noStyle = false, class: clazz, ...props } = Astro.props
 ---
 
-<a href={href} target="_blank" rel="noopener" class:list={["link", clazz]}>
+<a
+  href={href}
+  target="_blank"
+  rel="noopener"
+  class:list={[noStyle ? "" : "link", clazz]}
+  {...props}
+>
   <slot />
 </a>

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 * as m from "@/paraglide/messages"
+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>

src/components/links/LocaleLink.astro

@@ -0,0 +1,16 @@
+---
+import { languageTag, type AvailableLanguageTag } from "@/paraglide/runtime"
+import { localizePathname, type NavLink } from "@/utils/linking"
+import type { ComponentProps } from "@/types/props"
+
+interface Props extends ComponentProps {
+  to: NavLink
+  lang?: AvailableLanguageTag
+}
+
+const { to, class: clazz, lang = languageTag() } = Astro.props
+---
+
+<a href={localizePathname(to, lang)} class={clazz}>
+  <slot />
+</a>

src/components/myLinks/LinkCard.astro

@@ -0,0 +1,38 @@
+---
+import ExternalLink from "../links/ExternalLink.astro"
+import PajamasIcon from "../icons/PajamasIcon.astro"
+import type { MyLink } from "./myLinks"
+
+interface Props extends MyLink {
+  class?: string
+}
+
+const { title, message, url, icon, class: clazz } = Astro.props
+const iconStyle = "w-6 h-6"
+---
+
+<ExternalLink href={url} noStyle>
+  <div class:list={["card bg-cat-mantle text-cat-text", clazz]}>
+    <div class="card-body p-5 flex flex-row items-center">
+      {
+        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>
+      </div>
+    </div>
+  </div>
+</ExternalLink>

src/components/myLinks/LinksPage.astro

@@ -0,0 +1,13 @@
+---
+import links from "./myLinks"
+import LinkCard from "./LinkCard.astro"
+import "@/styles/global.css"
+---
+
+<div class="flex flex-col mx-auto w-fit gap-5">
+  {
+    links.map((link) => (
+      <LinkCard {...link} class="max-w-[500px] sm:min-w-96" />
+    ))
+  }
+</div>

src/components/myLinks/myLinks.ts

@@ -0,0 +1,70 @@
+import type { PajamasIcon } from "@/types/icons.ts"
+import { GIT_URL } from "astro:env/client"
+import * as m from "@/paraglide/messages"
+
+export interface MyLink {
+  title: string
+  url: string
+  message?: string
+  icon?: {
+    src: PajamasIcon
+    alt: string
+  }
+}
+
+export default [
+  {
+    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: {
+      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: {
+      src: "pajamas:linkedin",
+      alt: "LinkedIn icon",
+    },
+  },
+  {
+    title: "Mastodon (Snabelen.no)",
+    url: "https://snabelen.no/@Martials",
+    icon: {
+      src: "pajamas:mastodon",
+      alt: "Mastodon icon",
+    },
+  },
+  {
+    title: "Pixelfed",
+    url: "https://pixelfed.social/i/web/profile/261454857934868480",
+  },
+  {
+    title: "Steam",
+    url: "https://steamcommunity.com/id/martials/",
+  },
+  {
+    title: "Trakt.tv",
+    url: "https://trakt.tv/users/martials",
+  },
+] satisfies MyLink[]

src/components/projects/MyProjectsPage.astro

@@ -0,0 +1,12 @@
+---
+import ProjectGrid from "./ProjectGrid.astro"
+import { type CollectionEntry } from "astro:content"
+
+interface Props {
+  projects: CollectionEntry<"projects">[]
+}
+
+const { projects } = Astro.props
+---
+
+<ProjectGrid projects={projects} />

src/components/projects/ProjectCard.astro

@@ -1,7 +1,9 @@
 ---
 import { Image } from "astro:assets"
 import { type ImageMetadata } from "astro"
-import BadgeList from "./badge/BadgeList.astro"
+import BadgeList from "../badge/BadgeList.astro"
+import LocaleLink from "../links/LocaleLink.astro"
+import { type NavLink } from "@/utils/linking"
 
 interface Props {
   title: string
@@ -9,24 +11,25 @@ interface Props {
   tags: string[]
   image: ImageMetadata
   imageAlt: string
-  linkTo: string
+  linkTo: NavLink
 }
 
 const { title, description, tags, image, imageAlt, linkTo } = Astro.props
 ---
 
-<a
-  href={linkTo}
-  class="card bg-base-100 w-96 shadow-xl hover:scale-105 transition"
+<LocaleLink
+  to={linkTo}
+  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>
     <p>{description}</p>
     <BadgeList tags={tags} />
   </div>
-</a>
+</LocaleLink>

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>

src/components/projects/ProjectPage.astro

@@ -1,14 +1,12 @@
 ---
-import Layout from "../layouts/Layout.astro"
+import Layout from "@/layouts/Layout.astro"
+import BadgeList from "@/components/badge/BadgeList.astro"
+import GiteaLink from "@/components/links/GiteaLink.astro"
+import { languageTag } from "@/paraglide/runtime"
+import { getEntry, render } from "astro:content"
 import { Image } from "astro:assets"
-import { getEntry } from "astro:content"
-import BadgeList from "./badge/BadgeList.astro"
-import ExternalLink from "./links/ExternalLink.astro"
-import * as m from "../paraglide/messages"
-import { languageTag } from "../paraglide/runtime"
-import Gitea from "../icons/Gitea.astro"
-import "../styles/global.css"
-import GiteaLink from "./links/GiteaLink.astro"
+import * as m from "@/paraglide/messages"
+import "@/styles/global.css"
 
 interface Props {
   project: string // TODO typeof project slug
@@ -17,7 +15,7 @@ interface Props {
 const { project } = Astro.props
 
 const entry = await getEntry("projects", project)
-const { Content } = await entry!.render()
+const { Content } = await render(entry!)
 const {
   title,
   description,
@@ -30,11 +28,11 @@ const {
 } = 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">
@@ -46,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 />

src/content/config.ts

@@ -1,7 +1,8 @@
 import { defineCollection, z } from "astro:content"
+import { glob } from "astro/loaders"
 
 const projectCollection = defineCollection({
-  type: "content",
+  loader: glob({ pattern: "**\/*.mdx", base: "./src/content/projects" }),
   schema: ({ image }) =>
     z.object({
       title: z.string(),
@@ -9,21 +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({
-  type: "data",
+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,
 }

src/content/hardware/desktop.yaml

@@ -1,4 +0,0 @@
-accessories:
-  - a # Screens, keyboards, mice, etc.
-hardware:
-  - b # Graphics cards, CPUs, etc.

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).

src/content/projects/hotelService.mdx

@@ -1,12 +0,0 @@
----
-title: "Hotel Service"
-description: "REST API for managing hotels"
-heroImage: "./kevin-james.jpg"
-heroImageAlt: "The homepage of this site"
-tags: [Rust, Axum, Postgres, REST]
-source: "https://example.com"
-createdAt: "2024-09-22"
-updatedAt: "2024-09-22"
----
-
-Hello

src/content/uses/desktop.yaml

@@ -0,0 +1,23 @@
+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 | 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
+  - Speakers | Creative T6 Series II # https://www.komplett.no/product/808450?noredirect=true
+hardware:
+  - Case | Fractal Design Define R5 (Black) # https://www.fractal-design.com/products/cases/define/define-r5/black/
+  - CPU | Intel Core i5-10600K CPU # https://www.komplett.no/product/1155669?noredirect=true
+  - CPU cooler | Noctua ...
+  - Fans | 4x Fractal Design R3 140mm Silent fan # https://www.komplett.no/product/836971?noredirect=true
+  - GPU | Palit GeForce RTX 2070 SUPER JetStream # https://www.komplett.no/product/1134511?noredirect=true
+  - HDD | Seagate Barracuda 3TB 3.5" # https://www.komplett.no/product/653074?noredirect=true
+  - Motherboard | Gigabyte H470 HD3 # https://www.komplett.no/product/1161192?noredirect=true
+  - Network card | TP-Link Archer TX3000E # https://www.komplett.no/product/1146481?noredirect=true
+  - Ram | 2x Corsair Vengeance LPX DDR4 3200MHz 16GB (black) # https://www.komplett.no/product/893831?noredirect=true
+  - SSD | Samsung 960 PRO 512GB M.2 PCIe SSD # https://www.komplett.no/product/903118?noredirect=true
+  - SSD | Corsair Force Series MP510 960GB M.2 NVMe SSD 960GB # https://www.komplett.no/product/1153863?noredirect=true
+  - PSU | Corsair CX750M, 750W PSU # https://www.komplett.no/product/773377?noredirect=true

src/content/uses/homelab.yaml

@@ -1,2 +1,3 @@
+title: Homelab
 hardware:
   - b # Graphics cards, CPUs, etc.

src/content/uses/raspberryPi.yaml

@@ -1,3 +1,4 @@
+title: Raspberry Pi 4
 accessories:
   - a # Screens, keyboards, mice, etc.
 hardware:

src/env.d.ts

@@ -1,11 +0,0 @@
-/// <reference path="../.astro/types.d.ts" />
-/// <reference types="astro/client" />
-
-interface ImportMetaEnv {
-  readonly URL: string
-  readonly GIT_URL: string
-}
-
-interface ImportMeta {
-  readonly env: ImportMetaEnv
-}

src/icons/ExternalLink.astro

@@ -1,18 +0,0 @@
----
-// By GitLab SVGs
-const props = Astro.props
----
-
-<svg
-  xmlns="http://www.w3.org/2000/svg"
-  width="1em"
-  height="1em"
-  viewBox="0 0 16 16"
-  {...props}
->
-  <path
-    fill="currentColor"
-    fill-rule="evenodd"
-    d="M10.75 1a.75.75 0 0 0 0 1.5h1.69L8.22 6.72a.75.75 0 0 0 1.06 1.06l4.22-4.22v1.69a.75.75 0 0 0 1.5 0V1zM2.5 4v9a.5.5 0 0 0 .5.5h9a.5.5 0 0 0 .5-.5V8.75a.75.75 0 0 1 1.5 0V13a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h4.25a.75.75 0 0 1 0 1.5H3a.5.5 0 0 0-.5.5"
-    clip-rule="evenodd"></path>
-</svg>

src/icons/GitHub.astro

@@ -1,18 +0,0 @@
----
-// By GitLab SVGs
-const props = Astro.props
----
-
-<svg
-  xmlns="http://www.w3.org/2000/svg"
-  width="1em"
-  height="1em"
-  viewBox="0 0 16 16"
-  {...props}
->
-  <path
-    fill="currentColor"
-    fill-rule="evenodd"
-    d="M7.976 0A7.977 7.977 0 0 0 0 7.976c0 3.522 2.3 6.507 5.431 7.584c.392.049.538-.196.538-.392v-1.37c-2.201.49-2.69-1.076-2.69-1.076c-.343-.93-.881-1.175-.881-1.175c-.734-.489.048-.489.048-.489c.783.049 1.224.832 1.224.832c.734 1.223 1.859.88 2.3.685c.048-.538.293-.88.489-1.076c-1.762-.196-3.621-.881-3.621-3.964c0-.88.293-1.566.832-2.153c-.05-.147-.343-.978.098-2.055c0 0 .685-.196 2.201.832c.636-.196 1.322-.245 2.007-.245s1.37.098 2.006.245c1.517-1.027 2.202-.832 2.202-.832c.44 1.077.146 1.908.097 2.104a3.16 3.16 0 0 1 .832 2.153c0 3.083-1.86 3.719-3.62 3.915c.293.244.538.733.538 1.467v2.202c0 .196.146.44.538.392A7.98 7.98 0 0 0 16 7.976C15.951 3.572 12.38 0 7.976 0"
-    clip-rule="evenodd"></path>
-</svg>

src/icons/Gitea.astro

@@ -1,18 +0,0 @@
----
-// By GitLab SVGs
-const props = Astro.props
----
-
-<svg
-  xmlns="http://www.w3.org/2000/svg"
-  width="1em"
-  height="1em"
-  viewBox="0 0 16 16"
-  {...props}
->
-  <path
-    fill="currentColor"
-    fill-rule="evenodd"
-    d="M15.46 3.206s.14-.003.245.102l.01.01c.064.06.258.244.285 1.074c0 2.902-1.405 5.882-1.405 5.882a9 9 0 0 1-.359.713c-.458.802-.786 1.153-.786 1.153s-.318.379-.675.595c-.415.265-.72.263-.72.263L7.247 13c-.636-.079-1.29-.736-1.927-1.578c-.47-.677-.779-1.413-.779-1.413s-2.51.034-3.675-1.394C.235 7.895.103 7.067.06 6.769q0-.012-.004-.029c-.05-.324-.285-1.873.821-2.86c.517-.496 1.148-.638 1.37-.684c.371-.081.667-.06.903-.044l.09.006c.391.035 3.99.216 3.99.216s1.532.066 2.27.056c0 0 .003 1.853.003 2.78q.105.048.211.1l.212.1V3.427q.494-.005.996-.017h.011c1.545-.036 4.528-.204 4.528-.204ZM2.113 8.026s.28.26.94.477c.43.152 1.094.231 1.094.231S3.699 7.5 3.516 6.757c-.22-.886-.4-2.398-.4-2.398s-.438-.015-.789.079c-.766.19-.98.763-.98.763s-.384.688.036 1.813c.244.672.73 1.013.73 1.013Zm8.084 3.607c.344-.023.499-.392.499-.392s1.24-2.486 1.4-2.878a.7.7 0 0 0 .046-.438c-.07-.267-.39-.412-.39-.412l-1.926-.935l-.165.339l-.18.369a.46.46 0 0 1 .128.341s.433.186.743.387c0 0 .257.135.32.425c.075.273-.04.488-.066.539l-.002.003s-.216.51-.343.774l-.004.007q-.07.144-.139.28a.454.454 0 1 1-.32-.15s.41-.84.468-1.033c0 0 .096-.24.048-.38a.47.47 0 0 0-.19-.188a6 6 0 0 0-.678-.34s-.076.068-.18.09a.5.5 0 0 1-.158.014l-.611 1.25a.46.46 0 0 1 .046.587a.46.46 0 0 1-.578.138a.46.46 0 0 1-.232-.51a.46.46 0 0 1 .44-.35L8.8 7.886a.457.457 0 0 1 .361-.744l.185-.375l.167-.341l-.579-.281s-.251-.125-.458-.072a.6.6 0 0 0-.114.039c-.189.084-.31.33-.31.33L6.668 9.293s-.124.254-.068.46c.048.252.325.397.325.397l2.874 1.4l.135.054s.114.04.262.03Z"
-    clip-rule="evenodd"></path>
-</svg>

src/icons/Hamburger.astro

@@ -1,18 +0,0 @@
----
-// By GitLab SVGs
-const props = Astro.props
----
-
-<svg
-  xmlns="http://www.w3.org/2000/svg"
-  width="1em"
-  height="1em"
-  viewBox="0 0 16 16"
-  {...props}
->
-  <path
-    fill="currentColor"
-    fill-rule="evenodd"
-    d="M0 3.75A.75.75 0 0 1 .75 3h14.5a.75.75 0 0 1 0 1.5H.75A.75.75 0 0 1 0 3.75M0 8a.75.75 0 0 1 .75-.75h14.5a.75.75 0 0 1 0 1.5H.75A.75.75 0 0 1 0 8m.75 3.5a.75.75 0 0 0 0 1.5h14.5a.75.75 0 0 0 0-1.5z"
-    clip-rule="evenodd"></path>
-</svg>

src/icons/LinkedIn.astro

@@ -1,18 +0,0 @@
----
-// By GitLab SVGs
-const props = Astro.props
----
-
-<svg
-  xmlns="http://www.w3.org/2000/svg"
-  width="1em"
-  height="1em"
-  viewBox="0 0 16 16"
-  {...props}
->
-  <path
-    fill="currentColor"
-    fill-rule="evenodd"
-    d="M3 1a2 2 0 0 0-2 2v10a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V3a2 2 0 0 0-2-2zm1.102 4.297a1.195 1.195 0 1 0 0-2.39a1.195 1.195 0 0 0 0 2.39m1 7.516V6.234h-2v6.579zM6.43 6.234h2v.881c.295-.462.943-1.084 2.148-1.084c1.438 0 2.219.953 2.219 2.766c0 .087.008.484.008.484v3.531h-2v-3.53c0-.485-.102-1.438-1.18-1.438c-1.079 0-1.17 1.198-1.195 1.982v2.986h-2z"
-    clip-rule="evenodd"></path>
-</svg>

src/icons/Mastodon.astro

@@ -1,17 +0,0 @@
----
-// By GitLab SVGs
-const props = Astro.props
----
-
-<svg
-  xmlns="http://www.w3.org/2000/svg"
-  width="1em"
-  height="1em"
-  viewBox="0 0 16 16"
-  {...props}
->
-  <path
-    fill="currentColor"
-    d="M15.498 3.706C15.264 1.986 13.749.632 11.954.37C11.65.325 10.503.164 7.844.164h-.02c-2.66 0-3.23.161-3.533.206C2.546.625.951 1.842.565 3.582C.379 4.438.359 5.388.393 6.259C.443 7.51.453 8.756.567 10q.12 1.242.414 2.454c.368 1.49 1.856 2.731 3.314 3.237a9 9 0 0 0 4.848.253q.265-.06.525-.141c.39-.123.849-.26 1.186-.502l.01-.013l.005-.016v-1.206l-.004-.015a.04.04 0 0 0-.024-.02h-.016c-1.03.244-2.087.366-3.146.364c-1.824 0-2.314-.856-2.455-1.212a3.7 3.7 0 0 1-.213-.955a.035.035 0 0 1 .028-.036h.016a13.3 13.3 0 0 0 3.095.364q.375.002.751-.007c1.049-.03 2.154-.082 3.186-.281l.073-.016c1.627-.31 3.176-1.28 3.333-3.736c.006-.097.02-1.013.02-1.113c.002-.342.112-2.42-.015-3.697m-2.505 6.13h-1.71V5.69c0-.873-.368-1.318-1.116-1.318c-.822 0-1.234.526-1.234 1.566v2.27h-1.7v-2.27c0-1.04-.413-1.566-1.235-1.566c-.744 0-1.115.445-1.116 1.318v4.145h-1.71v-4.27q0-1.31.677-2.08c.464-.513 1.074-.776 1.83-.776q1.316 0 1.979.999l.426.706l.426-.706c.441-.666 1.103-.999 1.977-.999c.756 0 1.366.263 1.832.776q.675.77.676 2.08z"
-  ></path>
-</svg>

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
-
-import { languageTag } from "../paraglide/runtime"
-import Footer from "../components/Footer.astro"
+const mainClass =
+  "grow max-w-[1000px] m-auto sm:min-w-[500px] not-sm:w-full px-5"
 ---
 
 <!doctype html>
@@ -17,14 +20,19 @@ import Footer from "../components/Footer.astro"
     <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>

src/links.ts

@@ -1,22 +1,27 @@
-import * as m from "./paraglide/messages.js"
+import * as m from "@/paraglide/messages.js"
+import type { NavLink } from "@/utils/linking.ts"
 
 interface Link {
-  label: string
-  to: string
+  label: () => string
+  to: NavLink
 }
 
 const Links: Link[] = [
   {
-    label: m.home(),
+    label: m.home,
     to: "/",
   },
   {
-    label: m.myProjects(),
-    to: "/project",
+    label: m.myProjects,
+    to: "/projects",
   },
   {
-    label: m.contactMe(),
-    to: "/contact-me",
+    label: m.myLinks,
+    to: "/links",
+  },
+  {
+    label: m.contactMe,
+    to: "/contact",
   },
 ]
 

src/pages/.well-known/security.txt.ts

@@ -0,0 +1,15 @@
+import type { APIRoute } from "astro"
+
+function getSecurityTxt(site?: URL) {
+  const canonical = new URL("/.well-known/security.txt", site)
+  return `
+Contact: mailto:security@martials.no
+Expires: 2029-12-31T23:00:00.000Z
+Preferred-Languages: no,en
+Canonical: ${canonical.href}
+`
+}
+
+export const GET: APIRoute = ({ site }) => {
+  return new Response(getSecurityTxt(site))
+}

src/pages/404.astro

@@ -1,5 +1,6 @@
 ---
 import Layout from "../layouts/Layout.astro"
+import "@/styles/global.css"
 ---
 
 <Layout title="404">

src/pages/contact-me.astro

@@ -1,11 +0,0 @@
----
-// TODO form
-// TODO self-host email server
-import "../styles/global.css"
-import ContactMeForm from "../components/ContactMeForm.astro"
-import Layout from "../layouts/Layout.astro"
----
-
-<Layout title="Kontakt meg">
-  <!--<ContactMeForm client:load />-->
-</Layout>

src/pages/contact.astro

@@ -0,0 +1,9 @@
+---
+import ContactMeForm from "@/components/ContactMeForm.astro"
+import Layout from "@/layouts/Layout.astro"
+import "@/styles/global.css"
+---
+
+<Layout title="Kontakt meg">
+  <ContactMeForm />
+</Layout>

src/pages/en/contact-me.astro

@@ -1,3 +0,0 @@
----
-
----

src/pages/en/contact.astro

@@ -0,0 +1,9 @@
+---
+import ContactMeForm from "@/components/ContactMeForm.astro"
+import Layout from "@/layouts/Layout.astro"
+import "@/styles/global.css"
+---
+
+<Layout title="Kontakt meg">
+  <ContactMeForm />
+</Layout>

src/pages/en/hardware.astro

@@ -1,10 +0,0 @@
----
-import Layout from "../../layouts/Layout.astro"
-import HardwarePage from "../../components/HardwarePage.svelte"
-import "../../styles/global.css"
----
-
-<Layout title="Hardware" class="mx-auto max-w-[750px]">
-  <h1 class="text-center">Hardware</h1>
-  <HardwarePage client:load />
-</Layout>

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>

src/pages/en/links.astro

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

src/pages/en/project/[project].astro

@@ -1,15 +0,0 @@
----
-import ProjectPage from "../../../components/ProjectPage.astro"
-import { type GetStaticPathsResult } from "astro"
-
-export function getStaticPaths(): GetStaticPathsResult {
-  return [
-    { params: { project: "hotelservice" } },
-    { params: { project: "homepage" } },
-  ]
-}
-
-const { project } = Astro.params
----
-
-<ProjectPage project={project as string} />

src/pages/en/project/index.astro

@@ -1,5 +0,0 @@
----
-
----
-
-<p>These are all my projects</p>

src/pages/en/projects/[project].astro

@@ -0,0 +1,16 @@
+---
+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: "homepage" } }]
+}
+
+const { project } = Astro.params
+---
+
+<ProjectPage project={project as string} />

src/pages/en/projects/index.astro

@@ -0,0 +1,12 @@
+---
+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")
+---
+
+<Layout title="Projects">
+  <MyProjectsPage projects={projects} />
+</Layout>

src/pages/en/uses.astro

@@ -0,0 +1,12 @@
+---
+import Layout from "@/layouts/Layout.astro"
+import UsesPage from "@/components/UsesPage.astro"
+import "@/styles/global.css"
+import { getCollection } from "astro:content"
+
+const uses = await getCollection("uses")
+---
+
+<Layout title="Hardware" class="mx-auto max-w-[750px]">
+  <UsesPage uses={uses} />
+</Layout>

src/pages/hardware.astro

@@ -1,10 +0,0 @@
----
-import Layout from "../layouts/Layout.astro"
-import HardwarePage from "../components/HardwarePage.svelte"
-import "../styles/global.css"
----
-
-<Layout title="Hardware" class="mx-auto max-w-[750px]">
-  <h1 class="text-center">Hardware</h1>
-  <HardwarePage client:load />
-</Layout>

src/pages/index.astro

@@ -1,21 +1,9 @@
 ---
-import Layout from "../layouts/Layout.astro"
-import OnePager from "../components/Greeting.astro"
+import IndexPage from "@/components/landing/IndexPage.astro"
+import Layout from "@/layouts/Layout.astro"
+import "@/styles/global.css"
 ---
 
-<!--
-One-pager
-- Quick overview of me.
-- Image
-- Contact
-  - Email
-  - LinkedIn
-  - GitHub
-- Education
-- Experience
-- Skills
-- Certifications
--->
 <Layout title="Velkommen">
-  <OnePager />
+  <IndexPage />
 </Layout>

src/pages/links.astro

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

src/pages/project/[project].astro

@@ -1,15 +0,0 @@
----
-import ProjectPage from "../../components/ProjectPage.astro"
-import { type GetStaticPathsResult } from "astro"
-
-export function getStaticPaths(): GetStaticPathsResult {
-  return [
-    { params: { project: "hotelservice" } },
-    { params: { project: "homepage" } },
-  ]
-}
-
-const { project } = Astro.params
----
-
-<ProjectPage project={project as string} />

src/pages/project/index.astro

@@ -1,32 +0,0 @@
----
-import { getCollection } from "astro:content"
-import ProjectCard from "../../components/ProjectCard.astro"
-import Layout from "../../layouts/Layout.astro"
-
-const projects = await getCollection("projects")
----
-
-<Layout title="Projects">
-  <h1 class="text-4xl font-bold text-center my-10">Projects</h1>
-  <div class="flex flex-wrap justify-around">
-    {
-      projects.map(
-        ({
-          data: { title, description, tags, heroImage, heroImageAlt },
-          slug,
-        }) => (
-          <div class="my-5">
-            <ProjectCard
-              title={title}
-              linkTo={`/project/${slug}`}
-              description={description}
-              tags={tags}
-              image={heroImage}
-              imageAlt={heroImageAlt}
-            />
-          </div>
-        ),
-      )
-    }
-  </div>
-</Layout>

src/pages/projects/[project].astro

@@ -0,0 +1,16 @@
+---
+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: "homepage" } }]
+}
+
+const { project } = Astro.params
+---
+
+<ProjectPage project={project as string} />

src/pages/projects/index.astro

@@ -0,0 +1,12 @@
+---
+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")
+---
+
+<Layout title="Prosjekter">
+  <MyProjectsPage projects={projects} />
+</Layout>

src/pages/uses.astro

@@ -0,0 +1,12 @@
+---
+import Layout from "@/layouts/Layout.astro"
+import UsesPage from "@/components/UsesPage.astro"
+import "@/styles/global.css"
+import { getCollection } from "astro:content"
+
+const uses = await getCollection("uses")
+---
+
+<Layout title="Hardware" class="mx-auto max-w-[750px]">
+  <UsesPage uses={uses} />
+</Layout>

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,8 +30,24 @@
     }
 }
 
-@layer base {
+br {
+    @apply my-0.5;
+}
+
 h1 {
     @apply text-4xl font-bold mb-2;
 }
+
+h2 {
+    @apply text-3xl font-bold mb-2;
+}
+
+h3 {
+    @apply text-2xl font-bold mb-2;
+}
+
+/* TODO change default style*/
+a {
+    @apply link text-cat-mauve;
+    text-decoration-line: none;
 }

src/types/icons.ts

@@ -0,0 +1,14 @@
+/**
+ * @see https://icon-sets.iconify.design/pajamas/
+ */
+export type Icon =
+  | "git"
+  | "gitea"
+  | "github"
+  | "mastodon"
+  | "linkedin"
+  | "link"
+  | "status-health"
+  | "hamburger"
+
+export type PajamasIcon = `pajamas:${Icon}`

src/types/props.ts

@@ -0,0 +1,8 @@
+export interface ComponentProps {
+  class?: string
+  title?: string
+}
+
+export interface LinkProps extends ComponentProps {
+  href: string
+}

src/types/types.ts

@@ -0,0 +1,5 @@
+import type { CollectionEntry } from "astro:content"
+
+export type AbsolutePathname = `/${string}`
+
+export type Project = CollectionEntry<"projects">

src/utils/linking.ts

@@ -0,0 +1,65 @@
+import type { AvailableLanguageTag } from "@/paraglide/runtime.js"
+import type { AbsolutePathname, Project } from "@/types/types.ts"
+
+interface TranslatedPathnames {
+  nb: AbsolutePathname
+  en: `/en${AbsolutePathname}`
+}
+
+export type NavLink =
+  | "/"
+  | "/contact"
+  | "/projects"
+  | `/projects/${Project["id"]}`
+  | "/links"
+  | "/uses"
+
+const paths: Set<NavLink> = new Set([
+  "/",
+  "/contact",
+  "/projects",
+  "/links",
+  "/uses",
+])
+
+/**
+ * Defines the localized pathnames for the site.
+ * The key must be used to navigate to the correct path.
+ * The value is the path that will be used for the given locale.
+ *
+ * @see https://inlang.com/m/iljlwzfs/paraglide-astro-i18n
+ */
+const pathnames: Record<AbsolutePathname, TranslatedPathnames> = {}
+for (const path of paths) {
+  pathnames[path] = {
+    nb: path,
+    en: `/en${path}`,
+  }
+}
+
+export function localizePathname(
+  pathname: NavLink,
+  locale: AvailableLanguageTag,
+): string {
+  const pathnameParts = pathname.split("/")
+  const firstSegment: AbsolutePathname = `/${pathnameParts[1]}`
+
+  if (pathnames[firstSegment]) {
+    const localizedPathname = pathnames[firstSegment][locale]
+
+    const rest = pathnameParts.slice(2)
+    if (rest.length > 0) {
+      return `${localizedPathname}/${rest.join("/")}`
+    } else {
+      return localizedPathname
+    }
+  }
+  return pathname
+}
+
+export function resolvePathname(pathname: string): AbsolutePathname {
+  if (pathname.startsWith("/en")) {
+    return pathname.slice(3) as AbsolutePathname
+  }
+  return pathname as AbsolutePathname
+}

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")]
-}

tsconfig.json

@@ -1,11 +1,22 @@
 {
   "extends": "astro/tsconfigs/strict",
-  "include": ["src/**/*.ts", "src/**/*.astro", "src/**/*.svelte"],
+  "include": [
+    ".astro/types.d.ts",
+    "src/**/*.ts",
+    "src/**/*.astro",
+    "src/**/*.svelte"
+  ],
+  "exclude": [
+    "dist"
+  ],
   "compilerOptions": {
     "strictNullChecks": true,
     "allowJs": true,
+    "baseUrl": ".",
     "paths": {
-      "@/*": ["./src/*"]
+      "@/*": [
+        "./src/*"
+      ]
     }
   }
 }