Initial commit

.forgejo/workflows/deploy.yaml

@@ -0,0 +1,20 @@
+name: Deploy
+
+on: [workflow_dispatch]
+
+env:
+  CLOUDFLARE_API_TOKEN: ${secret.CLOUDFLARE_API_TOKEN}
+  CLOUDFLARE_ACCOUNT_ID: ${secret.CLOUDFLARE_ACCOUNT_ID}
+
+jobs:
+  deploy:
+    runs-on: self-hosted
+    timeout-minutes: 10
+    steps:
+      - uses: actions/checkout@v4
+      - name: Install deps
+        run: pnpm i
+      - name: Build
+        run: pnpm build
+      - name: Cloudflare deploy
+        run: wrangler pages --project-name davidontop dist

.gitignore

@@ -0,0 +1,5 @@
+dist/
+.astro/
+node_modules/
+.env
+.env.production

astro.config.mjs

@@ -0,0 +1,17 @@
+// @ts-check
+import { defineConfig } from 'astro/config';
+
+import tailwindcss from '@tailwindcss/vite';
+
+import solidJs from '@astrojs/solid-js';
+
+import mdx from '@astrojs/mdx';
+
+// https://astro.build/config
+export default defineConfig({
+  vite: {
+    plugins: [tailwindcss()]
+  },
+
+  integrations: [solidJs(), mdx()]
+});

package.json

@@ -0,0 +1,24 @@
+{
+  "name": "davidontopa",
+  "type": "module",
+  "version": "0.0.1",
+  "scripts": {
+    "dev": "astro dev",
+    "build": "astro build",
+    "preview": "astro preview",
+    "astro": "astro"
+  },
+  "dependencies": {
+    "@astrojs/mdx": "^4.2.6",
+    "@astrojs/solid-js": "^5.0.10",
+    "@tailwindcss/vite": "^4.1.5",
+    "astro": "^5.7.11",
+    "solid-js": "^1.9.6",
+    "tailwindcss": "^4.1.5"
+  },
+  "devDependencies": {
+    "daisyui": "^5.0.35",
+    "prettier": "^3.5.3",
+    "prettier-plugin-astro": "^0.14.1"
+  }
+}

public/forgejo.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 212 212" width="32" height="32"><style>circle,path{fill:none;stroke:#000;stroke-width:15}path{stroke-width:25}.orange{stroke:#f60}.red{stroke:#d40000}</style><g transform="translate(6 6)"><path d="M58 168V70a50 50 0 0 1 50-50h20" class="orange"/><path d="M58 168v-30a50 50 0 0 1 50-50h20" class="red"/><circle cx="142" cy="20" r="18" class="orange"/><circle cx="142" cy="88" r="18" class="red"/><circle cx="58" cy="180" r="18" class="red"/></g></svg>

public/github.svg

@@ -0,0 +1,14 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 28.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 97.6 96" style="enable-background:new 0 0 97.6 96;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#FFFFFF;}
+</style>
+<path class="st0" d="M48.9,0C21.8,0,0,22,0,49.2C0,71,14,89.4,33.4,95.9c2.4,0.5,3.3-1.1,3.3-2.4c0-1.1-0.1-5.1-0.1-9.1
+	c-13.6,2.9-16.4-5.9-16.4-5.9c-2.2-5.7-5.4-7.2-5.4-7.2c-4.4-3,0.3-3,0.3-3c4.9,0.3,7.5,5.1,7.5,5.1c4.4,7.5,11.4,5.4,14.2,4.1
+	c0.4-3.2,1.7-5.4,3.1-6.6c-10.8-1.1-22.2-5.4-22.2-24.3c0-5.4,1.9-9.8,5-13.2c-0.5-1.2-2.2-6.3,0.5-13c0,0,4.1-1.3,13.4,5.1
+	c3.9-1.1,8.1-1.6,12.2-1.6s8.3,0.6,12.2,1.6c9.3-6.4,13.4-5.1,13.4-5.1c2.7,6.8,1,11.8,0.5,13c3.2,3.4,5,7.8,5,13.2
+	c0,18.9-11.4,23.1-22.3,24.3c1.8,1.5,3.3,4.5,3.3,9.1c0,6.6-0.1,11.9-0.1,13.5c0,1.3,0.9,2.9,3.3,2.4C83.6,89.4,97.6,71,97.6,49.2
+	C97.7,22,75.8,0,48.9,0z"/>
+</svg>

public/mail.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="white" class="size-6">
+  <path stroke-linecap="round" stroke-linejoin="round" d="M21.75 6.75v10.5a2.25 2.25 0 0 1-2.25 2.25h-15a2.25 2.25 0 0 1-2.25-2.25V6.75m19.5 0A2.25 2.25 0 0 0 19.5 4.5h-15a2.25 2.25 0 0 0-2.25 2.25m19.5 0v.243a2.25 2.25 0 0 1-1.07 1.916l-7.5 4.615a2.25 2.25 0 0 1-2.36 0L3.32 8.91a2.25 2.25 0 0 1-1.07-1.916V6.75" />
+</svg>

src/components/Heading.astro

@@ -0,0 +1,9 @@
+---
+const { class: classname } = Astro.props;
+let classmod = "font-bold text-4xl text-center ";
+if (classname) {
+    classmod = classmod.concat(classname);
+}
+---
+
+<h1 class={classmod}><slot /></h1><br />

src/components/Nav.astro

@@ -0,0 +1,35 @@
+<div
+    class="z-[5] flex justify-around items-center bg-bckgl fixed top-0 h-12 w-full"
+>
+    <div>
+        <img src="/logo-transparent.png" alt="DavidOnTop" class="max-h-10" />
+    </div>
+    <div>
+        <a href="/" class="hover:text-accent btn btn-ghost !min-h-8 h-1 px-3"
+            >Home</a
+        >
+        <a
+            href="/about"
+            class="hover:text-accent btn btn-ghost !min-h-8 h-1 px-3">About</a
+        >
+        <a
+            href="https://git.davidon.top"
+            class="hover:text-accent btn btn-ghost !min-h-8 h-1 px-3"
+            >Projects</a
+        >
+    </div>
+    <div class="dropdown dropdown-hover dropdown-end">
+        <div
+            role="button"
+            tabindex="-1"
+            class="text-white btn btn-ghost !min-h-8 h-1 px-3"
+        >
+            Contact Me
+        </div>
+        <div tabindex="-1" class="menu dropdown-content z-10 pl-10 pb-7">
+            <ul tabindex="-1" class="shadow rounded-box bg-bckgl mt-1 p-1">
+                <li><a href="mailto:me@davidon.top">Mail</a></li>
+            </ul>
+        </div>
+    </div>
+</div>

src/components/Text.astro

@@ -0,0 +1,11 @@
+---
+const { class: classname } = Astro.props;
+let classmod = "max-w-[800px] mx-auto text-justify p-5 ";
+if (classname) {
+    classmod = classmod.concat(classname);
+}
+---
+
+<div class={classmod}>
+    <slot />
+</div>

src/layouts/Layout.astro

@@ -0,0 +1,23 @@
+---
+import Nav from "../components/Nav.astro";
+import "../styles/global.css";
+import { ClientRouter } from "astro:transitions";
+---
+
+<!doctype html>
+<html lang="en" class="text-white bg-bckg">
+	<head>
+		<meta charset="UTF-8" />
+		<meta name="viewport" content="width=device-width" />
+		<link rel="icon" type="image/png" href="/logo-notext-transparent.png" />
+		<meta name="generator" content={Astro.generator} />
+		<ClientRouter />
+		<title>DavidOnTop</title>
+	</head>
+	<body class="text-white bg-bckg p-0 m-0">
+		<nav transition:persist>
+			<Nav />
+		</nav>
+		<slot />
+	</body>
+</html>

src/pages/404.astro

@@ -0,0 +1,15 @@
+---
+import Layout from "../layouts/Layout.astro";
+---
+
+<Layout>
+    <div
+        class="fixed inset-x-0 inset-y-0 mx-auto my-auto flex flex-wrap flex-col justify-center items-center"
+    >
+        <h1 class="text-6xl font-bold text-center">404 Not Found</h1>
+        <p class="text-xl text-center">
+            Whatever you're looking for isn't here or isn't done yet.<br /> Unless
+            you were looking for this message.
+        </p>
+    </div>
+</Layout>

src/pages/about.astro

@@ -0,0 +1,135 @@
+---
+import Layout from "../layouts/Layout.astro";
+import Text from "../components/Text.astro";
+import Heading from "../components/Heading.astro";
+---
+
+<Layout>
+    <Text class="mt-12 pt-12">
+        <Heading>About me</Heading>
+        My name is David. I live in Middle Europe. I am 20 years old. I like programming,
+        gaming, maths, and the number pi (I know 32 decimal digits of pi.). I was
+        a working student at <a
+            class="text-accent underline"
+            href="https://softwareag.com">Software<sup>AG</sup></a
+        >. I worked there for a year. I quit to focus on school. I have been
+        using Linux since around 2017/2018. I have been a hobby developer since
+        around 2018/2019.
+
+        <br /><br />
+        Programing languages i know relativly well:
+        <ul class="pl-10">
+            <li
+                class="tooltip tooltip-right"
+                data-tip="My favourite language right now"
+            >
+                ● F#
+            </li><br />
+            <li
+                class="tooltip tooltip-right"
+                data-tip="Complexity, foundation drama, realization that i don't need the performance and mainly compile times made me go to f#."
+            >
+                ● Rust
+            </li><br />
+            <li
+                class="tooltip tooltip-right"
+                data-tip="Functional, jvm ecosystem, MACROS, powerfull language features. What more could you ask for"
+            >
+                ● Scala
+            </li><br />
+            <li class="tooltip tooltip-right" data-tip="Please no.">
+                ● TypeScript/JavaScript
+            </li><br />
+            <li class="tooltip tooltip-right" data-tip="Minecraft modding.">
+                ● Java
+            </li><br />
+            <li
+                class="tooltip tooltip-right"
+                data-tip="Better then java with many functional features."
+            >
+                ● Kotlin
+            </li><br />
+        </ul><br />
+        Programing languages i have used in the past or ones that i know a fair bit:
+        <ul class="pl-10">
+            <li class="tooltip tooltip-right" data-tip="Linux shell.">
+                ● Zsh/Bash
+            </li><br />
+            <li
+                class="tooltip tooltip-right"
+                data-tip="Too complex. What the fuck is a virtual constructor."
+            >
+                ● C++
+            </li><br />
+            <li
+                class="tooltip tooltip-right"
+                data-tip="Java with better ecosystem and tooling. (Aspecialy if your on windows which im not.)"
+            >
+                ● C#
+            </li><br />
+            <li
+                class="tooltip tooltip-right"
+                data-tip="I don't need a language thats just for servers. Almost every language has ok server libraries."
+            >
+                ● Go
+            </li><br />
+            <li class="tooltip tooltip-right" data-tip="Neovim config.">
+                ● Lua
+            </li><br />
+            <li
+                class="tooltip tooltip-right"
+                data-tip="The best language there is imo. Just shitty ecosystem and tooling."
+            >
+                ● Nim
+            </li><br />
+            <li
+                class="tooltip tooltip-right"
+                data-tip="C replacement. I just wish it could interop with c++ as seamlesly as with c."
+            >
+                ● Zig
+            </li><br />
+            <li
+                class="tooltip tooltip-right"
+                data-tip="The first programing language i learned."
+            >
+                ● Python
+            </li><br />
+        </ul><br />
+        <p class="text-sm">
+            You can hover over a language to see my opinion of it/why i use it.
+        </p>
+
+        <br /><br />
+        <p
+            class="tooltip tooltip-right"
+            data-tip="if creating a project i default to thease"
+        >
+            Favourite libraries and technologies:
+        </p>
+        <ul class="pl-10">
+            <li
+                class="tooltip tooltip-right"
+                data-tip="Default db, i'm running my own redundunt cluster"
+            >
+                ● Postgres
+            </li><br />
+            <li class="tooltip tooltip-right" data-tip="Queues for days">
+                ● Rabbitmq
+            </li><br />
+            <li
+                class="tooltip tooltip-right"
+                data-tip="I'm not touching react if i don't have to"
+            >
+                ● Solidjs
+            </li><br />
+            <li class="tooltip tooltip-right" data-tip="s3">● Minio</li><br />
+            <li
+                class="tooltip tooltip-right"
+                data-tip="The things that you can do with the flows, policies and property mappings are insane."
+            >
+                ● Authentik
+            </li><br />
+        </ul>
+        <br /><br />
+    </Text>
+</Layout>

src/pages/index.astro

@@ -0,0 +1,78 @@
+---
+import Layout from "../layouts/Layout.astro";
+---
+
+<Layout>
+    <div
+        class="fixed inset-x-0 inset-y-0 mx-auto my-auto flex justify-center items-center"
+    >
+        <div>
+            <p class="text-2xl font-bold">&nbsp&nbspHello there, I'm David.</p>
+            <div class="flex justify-around items-center text-4xl pr-3">
+                <a
+                    href="mailto:me@davidon.top"
+                    class="p-3 tooltip tooltip-bottom"
+                    data-tip="me@davidon.top"
+                    ><img src="/mail.svg" class="h-8" /></a
+                >
+                <a
+                    href="https://l.davidon.top/pubkey"
+                    class="p-3 tooltip tooltip-bottom"
+                    data-tip="GPG pubkey"
+                    ><img src="/gnupg.png" class="h-8" /></a
+                >
+                <a
+                    id="discord-btn"
+                    class="p-3 tooltip tooltip-bottom"
+                    data-tip="davidon_top"
+                    ><img src="/discord.png" class="h-8" /></a
+                >
+                <a
+                    href="https://git.davidon.top"
+                    class="p-3 tooltip tooltip-bottom"
+                    data-tip="Personal forgejo instance"
+                    ><img src="/forgejo.svg" class="h-8" /></a
+                >
+                <a
+                    href="https://github.com/davidon-top"
+                    class="p-3 tooltip tooltip-bottom"
+                    data-tip="Github"><img src="/github.svg" class="h-8" /></a
+                >
+            </div>
+        </div>
+    </div>
+
+    <dialog id="discord-modal" class="modal">
+        <div class="modal-box">
+            <form method="dialog">
+                <button class="btn btn-circle btn-ghost absolute right-2 top-2"
+                    >X</button
+                >
+            </form>
+            <input
+                readonly
+                id="discord-inp"
+                type="text"
+                value="davidon_top"
+                class="input"
+            />
+        </div>
+    </dialog>
+</Layout>
+
+<script>
+    function discordOnClick() {
+        const modal: any = document.getElementById("discord-modal");
+        modal.showModal();
+        let inp: any = document.getElementById("discord-inp")!;
+        inp.focus();
+        inp.select();
+        document.execCommand("copy");
+    }
+    document.onload = function () {
+        document.getElementById("discord-btn").onclick = discordOnClick;
+    };
+    document.addEventListener("astro:page-load", function () {
+        document.getElementById("discord-btn").onclick = discordOnClick;
+    });
+</script>

src/styles/global.css

@@ -0,0 +1,49 @@
+@import "tailwindcss";
+
+@plugin "daisyui" {
+    themes: dark;
+}
+
+@plugin "daisyui/theme" {
+    name: "dark";
+    default: true;
+    prefersdark: true;
+    color-scheme: "dark";
+    --color-base-100: oklch(25.33% 0.016 252.42);
+    --color-base-200: oklch(23.26% 0.014 253.1);
+    --color-base-300: oklch(21.15% 0.012 254.09);
+    --color-base-content: oklch(97.807% 0.029 256.847);
+    --color-primary: oklch(58% 0.233 277.117);
+    --color-primary-content: oklch(96% 0.018 272.314);
+    --color-secondary: oklch(65% 0.241 354.308);
+    --color-secondary-content: oklch(94% 0.028 342.258);
+    --color-accent: oklch(77% 0.152 181.912);
+    --color-accent-content: oklch(38% 0.063 188.416);
+    --color-neutral: oklch(14% 0.005 285.823);
+    --color-neutral-content: oklch(92% 0.004 286.32);
+    --color-info: oklch(74% 0.16 232.661);
+    --color-info-content: oklch(29% 0.066 243.157);
+    --color-success: oklch(76% 0.177 163.223);
+    --color-success-content: oklch(37% 0.077 168.94);
+    --color-warning: oklch(82% 0.189 84.429);
+    --color-warning-content: oklch(41% 0.112 45.904);
+    --color-error: oklch(71% 0.194 13.428);
+    --color-error-content: oklch(27% 0.105 12.094);
+    --radius-selector: 0.5rem;
+    --radius-field: 0.25rem;
+    --radius-box: 0.5rem;
+    --size-selector: 0.25rem;
+    --size-field: 0.25rem;
+    --border: 1px;
+    --depth: 1;
+    --noise: 0;
+}
+
+@theme {
+    --color-bckg: oklch(0.1448 0 0);
+    --color-bckgd: oklch(0.1149 0 0);
+    --color-bckgl: oklch(0.2603 0 0);
+    --color-bckgll: oklch(0.36 0 0);
+
+    --color-accent: oklch(0.6271 0.1699 149.21);
+}

tsconfig.json

@@ -0,0 +1,14 @@
+{
+  "extends": "astro/tsconfigs/strict",
+  "include": [
+    ".astro/types.d.ts",
+    "**/*"
+  ],
+  "exclude": [
+    "dist"
+  ],
+  "compilerOptions": {
+    "jsx": "preserve",
+    "jsxImportSource": "solid-js"
+  }
+}