feat: initial release

.gitignore

@@ -0,0 +1,21 @@
+# build output
+dist/
+
+# dependencies
+node_modules/
+
+# logs
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+
+deploy/ssh_key_dec
+deploy/age_key_priv
+
+# environment variables
+.env
+.env.production
+
+# macOS-specific files
+.DS_Store

.vscode/extensions.json

@@ -0,0 +1,4 @@
+{
+  "recommendations": ["astro-build.astro-vscode"],
+  "unwantedRecommendations": []
+}

.vscode/launch.json

@@ -0,0 +1,11 @@
+{
+  "version": "0.2.0",
+  "configurations": [
+    {
+      "command": "./node_modules/.bin/astro dev",
+      "name": "Development server",
+      "request": "launch",
+      "type": "node-terminal"
+    }
+  ]
+}

.woodpecker/web.yml

@@ -0,0 +1,19 @@
+branches: [ci, master, deploy]
+pipeline:
+  build:
+    image: node:18-alpine
+    commands:
+      - npm ci
+      - npm run build
+  deploy:
+    image: alpine:3
+    commands:
+      - apk add --no-cache rsync openssh age
+      - echo $${AGE_KEY} > ./deploy/age_key_priv
+      - age --decrypt -i ./deploy/age_key_priv -o ./deploy/ssh_key_dec ./deploy/ssh_key
+      - chmod 600 ./deploy/ssh_key_dec
+      - rsync -avz --delete -e "ssh -p 2222 -i $PWD/deploy/ssh_key_dec -o UserKnownHostsFile=$PWD/deploy/known_hosts" dist/ www@192.168.128.90:/www
+      - rm -rf deploy
+    secrets: [age_key]
+    when:
+      branch: [ci, deploy]

LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2023 axelen.xyz contributors
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

README.md

@@ -0,0 +1,2 @@
+# axelen.xyz
+My personal website.

assets/profile.svg

@@ -0,0 +1,39 @@
+<svg width="430" height="430" viewBox="0 0 430 430" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M204.03 7.86282C210.82 4.05282 219.18 4.05282 225.96 7.86282C259.51 26.6928 360.47 83.3728 394.03 102.203C400.82 106.003 405 113.043 405 120.663C405 158.323 405 271.673 405 309.333C405 316.953 400.82 323.993 394.03 327.803C360.48 346.633 259.52 403.313 225.96 422.143C219.17 425.953 210.81 425.953 204.03 422.143C170.48 403.313 69.52 346.633 35.96 327.803C29.18 323.993 25 316.963 25 309.343C25 271.683 25 158.333 25 120.673C25 113.053 29.18 106.013 35.97 102.203C69.51 83.3728 170.49 26.6928 204.03 7.86282Z" fill="url(#paint0_linear_0_3)"/>
+<mask id="mask0_0_3" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="25" y="5" width="380" height="421">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M204.03 7.86282C210.82 4.05282 219.18 4.05282 225.96 7.86282C259.51 26.6928 360.47 83.3728 394.03 102.203C400.82 106.003 405 113.043 405 120.663C405 158.323 405 271.673 405 309.333C405 316.953 400.82 323.993 394.03 327.803C360.48 346.633 259.52 403.313 225.96 422.143C219.17 425.953 210.81 425.953 204.03 422.143C170.48 403.313 69.52 346.633 35.96 327.803C29.18 323.993 25 316.963 25 309.343C25 271.683 25 158.333 25 120.673C25 113.053 29.18 106.013 35.97 102.203C69.51 83.3728 170.49 26.6928 204.03 7.86282Z" fill="#6B0001"/>
+</mask>
+<g mask="url(#mask0_0_3)">
+<path d="M753.203 188.809L265.775 -92.6084L172.572 184.079L468.046 365.761L753.203 188.809Z" fill="url(#paint1_linear_0_3)"/>
+<path d="M-7.35422 342.306L480.075 60.8893L287.057 -158.17L-18.021 6.87653L-7.35422 342.306Z" fill="#ED2736"/>
+<g filter="url(#filter0_di_0_3)">
+<path d="M120.15 315.786L191.975 104.861H240.075L308.975 315.786H268.675L254.05 270.286H175.725L160.775 315.786H120.15ZM185.475 241.361H244.95L215.375 150.686L185.475 241.361Z" fill="#FFDFDF"/>
+</g>
+</g>
+<defs>
+<filter id="filter0_di_0_3" x="111.15" y="95.8608" width="206.825" height="228.925" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset/>
+<feGaussianBlur stdDeviation="4.5"/>
+<feComposite in2="hardAlpha" operator="out"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0.976471 0 0 0 0 0.901961 0 0 0 0 0.901961 0 0 0 0.8 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_0_3"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_0_3" result="shape"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="-2"/>
+<feGaussianBlur stdDeviation="1.5"/>
+<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0.439216 0 0 0 0 0.117647 0 0 0 0 0.184314 0 0 0 0.35 0"/>
+<feBlend mode="normal" in2="shape" result="effect2_innerShadow_0_3"/>
+</filter>
+<linearGradient id="paint0_linear_0_3" x1="215" y1="126.652" x2="215" y2="465.035" gradientUnits="userSpaceOnUse">
+<stop stop-color="#B31F21"/>
+<stop offset="1" stop-color="#401D38"/>
+</linearGradient>
+<linearGradient id="paint1_linear_0_3" x1="191.818" y1="35.4872" x2="679.247" y2="316.904" gradientUnits="userSpaceOnUse">
+<stop stop-color="#C22A45"/>
+<stop offset="1" stop-color="#BA0021"/>
+</linearGradient>
+</defs>
+</svg>

astro.config.mjs

@@ -0,0 +1,18 @@
+import path from 'path';
+import { defineConfig } from 'astro/config';
+// import mdx from '@astrojs/mdx';
+// import sitemap from '@astrojs/sitemap';
+
+// https://astro.build/config
+import svelte from "@astrojs/svelte";
+import tailwind from "@astrojs/tailwind";
+import image from "@astrojs/image";
+
+// https://astro.build/config
+export default defineConfig({
+  site: 'https://axelen.xyz',
+  build: {
+    format: 'directory',
+  },
+  integrations: [svelte(), tailwind(), image()],
+});

deploy/age_key_pub

@@ -0,0 +1 @@
+age1hmsngqw2u630c90z9p8nd2meslkfpvkyqhg4mzwe02080vsxtf7qq7u5a5

deploy/known_hosts

@@ -0,0 +1 @@
+[192.168.128.90]:2222 ssh-ed25519 AAAAC3NzaC1lZDI1NTE5AAAAIMOsoyWzBvwnrX3UqUIfxwzKwI3iHrA1MB+ZeY1+EToM

package.json

@@ -0,0 +1,32 @@
+{
+  "name": "ax333l-site",
+  "type": "module",
+  "version": "0.0.1",
+  "private": true,
+  "scripts": {
+    "dev": "astro dev",
+    "start": "astro dev",
+    "build": "astro build",
+    "preview": "astro preview",
+    "astro": "astro"
+  },
+  "dependencies": {
+    "@astrojs/image": "^0.12.1",
+    "@astrojs/mdx": "^0.11.6",
+    "@astrojs/rss": "^1.0.3",
+    "@astrojs/sitemap": "^1.0.0",
+    "@astrojs/svelte": "^1.0.2",
+    "@astrojs/tailwind": "^2.1.3",
+    "@swup/a11y-plugin": "^2.1.0",
+    "@swup/head-plugin": "^1.2.1",
+    "@swup/preload-plugin": "^1.0.6",
+    "@swup/slide-theme": "^1.0.5",
+    "astro": "^1.8.0",
+    "svelte": "^3.53.1",
+    "swup": "^2.0.19",
+    "tailwindcss": "^3.2.4"
+  },
+  "devDependencies": {
+    "sass": "^1.56.1"
+  }
+}

public/favicon.svg

@@ -0,0 +1 @@
+../assets/profile.svg

src/components/Footer.svelte

@@ -0,0 +1,28 @@
+<script lang="ts">
+import type { Link } from '$/types';
+
+const links: Link[] = [
+  {
+    url: "https://git.axelen.xyz/Ax333l/site/src/branch/master/LICENSE.md",
+    name: `© ${new Date().getFullYear()}`,
+  },
+  {
+    url: "https://github.com/Axelen123/site",
+    name: "src code",
+  },
+  {
+    url: "https://links.axelen.xyz",
+    name: "contact",
+  },
+];
+</script>
+
+<footer class="w-screen h-14 bg-stone-700 flex justify-between">
+  {#each links as link}
+    <a class="site-item-size m-auto text-red-100" href={link.url}>{link.name}</a>
+  {/each}
+</footer>
+
+<style lang="scss">
+  @use "./edge.scss";
+</style>

src/components/Navigation.svelte

@@ -0,0 +1,55 @@
+<script lang="ts">
+import type { Link } from '$/types';
+
+export let pathname: string;
+
+function remove_suffixes(s: string) {
+  const suffixes = ["index.html", ".html"];
+
+  for (const suffix of suffixes) {
+    if (!s.endsWith(suffix)) {
+      continue;
+    }
+
+    s = s.substring(0, s.length - suffix.length);
+  }
+  return s;
+}
+
+// TODO: add unit tests for this.
+function is_selected(a: string, b: string) {
+  return remove_suffixes(a) === remove_suffixes(b);
+}
+
+const links: Link[] = [
+  {
+    url: "https://links.axelen.xyz",
+    name: "links",
+  },
+  {
+    url: "https://github.com/Axelen123",
+    name: "my stuff",
+  },
+];
+</script>
+
+<nav class="swup w-screen h-20 top-0 flex justify-center items-center border-red-400 border-t-8 mb-8">
+  <div class="site-view inline-block">
+    <a href="/" class="text-red-400 site-larger-item-size float-left">
+      axelen.xyz
+    </a>
+    <div id="nav-links" class="float-right space-x-12">
+      {#each links as link}
+	      <a class="site-item-size text-red-100" data-swup-preload class:site-selected={is_selected(pathname, link.url)} href={link.url}>{link.name}</a>
+      {/each}
+    <div>
+  </div>
+</nav>
+
+<style lang="scss">
+  @use "./edge.scss";
+
+  .site-selected {
+    @apply font-semibold underline underline-offset-4 decoration-red-500 decoration-4;
+  }
+</style>

src/components/edge.scss

@@ -0,0 +1,7 @@
+.site-larger-item-size {
+    @apply text-xl md:text-2xl lg:text-3xl;
+}
+
+.site-item-size {
+    @apply text-lg md:text-xl lg:text-2xl;
+}

src/content/Home.svelte

@@ -0,0 +1,26 @@
+<script>
+  import profile from '$assets/profile.svg';
+</script>
+
+<main class="swup swup-slide grid site-view mx-auto">
+<!-- Note: I think the text breakpoints are fine, but the header needs some work. -->
+  <header class="h-96 flex justify-start">
+    <div class="my-auto">
+      <h1 class="text-3xl md:text-6xl font-semibold">I am <span class="font-bold text-red-400">Axel.</span></h1>
+      <h2 class="text-xs md:text-sm text-red-200">@ax333l:chat.axelen.xyz / Ax333l#9147</h2>
+    </div>
+  </header>
+
+  <!-- This should probably break to a new line on smaller screens... -->
+  <figure aria-hidden="true" class="my-auto flex justify-end">
+    <img alt="Profile" class="w-[185px]" src={profile} />
+  </figure>
+
+  <!-- There is probably a better way to do the CSS here... -->
+  <section id="about" class="col-span-2">
+    <p class="text-base md:text-lg md:text-left whitespace-pre-line">
+      Swedish computer science student, technology nerd and open-source contributor who loves Linux, self-hosting, programming and modding.
+      I always go out of my way to avoid proprietary software and internet services whenever possible.
+    </p>
+  </section>
+</main>

src/env.d.ts

@@ -0,0 +1 @@
+/// <reference types="astro/client" />

src/layouts/Base.astro

@@ -0,0 +1,54 @@
+---
+import '$styles/global.scss';
+
+import Navigation from '$components/Navigation.svelte';
+import Footer from '$components/Footer.svelte';
+
+const {title, description} = Astro.props;
+---
+
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <title>{title}</title>
+	  <meta charset="UTF-8" />
+	  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+	  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+	  <meta name="title" content={title} />
+    <meta name="description" content={description} />
+    <meta name="theme-color" content="#F04855" />
+	  <meta property="og:title" content={title} />
+    <meta property="og:image" content="/embed.png" />
+    <meta property="og:description" content={description} />
+    <link rel="icon" href="/favicon.ico" sizes="any" />
+    <link rel="icon" href="/favicon.svg" type="image/svg+xml" />
+  </head>
+  <body class="min-h-screen grid">
+    {/* <script> */}
+    {/*     import Swup from 'swup'; */}
+    {/*     import SwupHeadPlugin from '@swup/head-plugin'; */}
+    {/*     import SwupSlideTheme from '@swup/slide-theme' */}
+    {/*     import SwupPreloadPlugin from '@swup/preload-plugin'; */}
+    {/*     import SwupA11yPlugin from '@swup/a11y-plugin'; */}
+
+    {/*     // Would be nice if I could speed up the slide transition. */}
+    {/*     const swup = new Swup({ */}
+    {/*         plugins: [new SwupA11yPlugin(), new SwupPreloadPlugin(), new SwupSlideTheme({ mainElement: '.swup-slide' }), new SwupHeadPlugin()], */}
+    {/*         containers: [".swup"] */}
+    {/*     }); */}
+    {/* </script> */}
+
+    <Navigation pathname={Astro.url.pathname} />
+    {/* Need to do this or else main page breaks. */}
+    <div id="content">
+      <slot />
+    </div>
+    <Footer />
+  </body>
+</html>
+
+<style>
+  body {
+    grid-template-rows: auto 1fr auto;
+  }
+</style>

src/layouts/Main.astro

@@ -0,0 +1,9 @@
+---
+import Base from './Base.astro';
+---
+
+<Base {...Astro.props}>
+  <main class="swup swup-slide site-view mx-auto">
+    <slot />
+  </main>
+</Base>

src/pages/index.astro

@@ -0,0 +1,8 @@
+---
+import Base from '$layouts/Base.astro';
+import Home from '../content/Home.svelte';
+---
+
+<Base title="Ax333l" description="Ax333l's website">
+    <Home />
+</Base>

src/styles/fonts.css

@@ -0,0 +1,54 @@
+/*
+based website
+https://google-webfonts-helper.herokuapp.com/
+*/
+
+/* fira-code-300 - latin */
+@font-face {
+  font-family: 'Fira Code';
+  font-style: normal;
+  font-weight: 300;
+  src: local(''),
+       url('./fonts/fira-code-v21-latin-300.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
+       url('./fonts/fira-code-v21-latin-300.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
+}
+
+/* fira-code-regular - latin */
+@font-face {
+  font-family: 'Fira Code';
+  font-style: normal;
+  font-weight: 400;
+  src: local(''),
+       url('./fonts/fira-code-v21-latin-regular.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
+       url('./fonts/fira-code-v21-latin-regular.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
+}
+
+/* fira-code-500 - latin */
+@font-face {
+  font-family: 'Fira Code';
+  font-style: normal;
+  font-weight: 500;
+  src: local(''),
+       url('./fonts/fira-code-v21-latin-500.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
+       url('./fonts/fira-code-v21-latin-500.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
+}
+
+/* fira-code-600 - latin */
+@font-face {
+  font-family: 'Fira Code';
+  font-style: normal;
+  font-weight: 600;
+  src: local(''),
+       url('./fonts/fira-code-v21-latin-600.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
+       url('./fonts/fira-code-v21-latin-600.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
+}
+
+/* fira-code-700 - latin */
+@font-face {
+  font-family: 'Fira Code';
+  font-style: normal;
+  font-weight: 700;
+  src: local(''),
+       url('./fonts/fira-code-v21-latin-700.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
+       url('./fonts/fira-code-v21-latin-700.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
+}

src/styles/global.scss

@@ -0,0 +1,39 @@
+// This file just imports the fonts and defines some defaults.
+
+@import "./fonts.css";
+
+$red-400: #f87171;
+$stone-800: #292524;
+$scroll-size: 5px;
+
+:root {
+    scrollbar-color: $red-400 $stone-800;
+    scrollbar-width: $scroll-size;
+}
+
+// Doesn't quite look right... I need to change either the color, geometry or both.
+::-webkit-scrollbar {
+    width: $scroll-size;
+    height: $scroll-size;
+}
+
+::-webkit-scrollbar-thumb {
+    background: $red-400;
+}
+
+::-webkit-scrollbar-track {
+    background: $stone-800;
+}
+
+body {
+  @apply p-0 m-auto w-screen text-center text-base leading-normal break-words bg-stone-800 text-red-50;
+  font-family: Fira Code, sans-serif;
+}
+
+img {
+  @apply max-w-full h-auto;
+}
+
+.site-view {
+  @apply w-11/12 md:w-2/3;
+}

src/types.ts

@@ -0,0 +1,4 @@
+export interface Link {
+  url: string;
+  name: string;
+}

tailwind.config.cjs

@@ -0,0 +1,8 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+	content: ['./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}'],
+	theme: {
+		extend: { },
+	},
+	plugins: [],
+}

tsconfig.json

@@ -0,0 +1,15 @@
+{
+    "extends": "astro/tsconfigs/strictest",
+    "compilerOptions": {
+        "baseUrl": ".",
+        "paths": {
+            "$/*": [
+                "src/*"
+            ],
+            "$components/*": ["src/components/*"],
+            "$layouts/*": ["src/layouts/*"],
+            "$styles/*": ["src/styles/*"],
+            "$assets/*": ["assets/*"]
+        }
+    }
+}