diff --git a/README.md b/README.md index d87985f..4438409 100644 --- a/README.md +++ b/README.md @@ -6,6 +6,7 @@ The home page, hosted on cloudflare pages. Made with Svelte, SvelteKit and mdsve The code for the website and it's styles is licensed under AGPLv3 (see LICENSE file). Files in `static` are subject to their own copyright terms: + - `posts` folder is available under the same terms as the post in which they appear, or if they have their own LICENSE file in the same location (named `image.LICENSE` where `image` is the filename of the image) - `prism` files have their own copyright on top of the file and are available under MIT license - `screenshots` are under CC-BY-SA, except for `igni.png` and `mangadex.jfif` which are both copyrighted to their respective owners. @@ -21,4 +22,4 @@ Files in `static` are subject to their own copyright terms: ## Attributions - Heaventaker (`static/screenshots/heaventaker.png`) - CC-BY-SA u/hohodo, Daniel Bulant (part of the Heaventaker project) -- design by Carl Hansen +- Original design by Carl Hansen, heavily edited. diff --git a/remark/code.js b/remark/code.js index 7f326c3..7e53d23 100644 --- a/remark/code.js +++ b/remark/code.js @@ -4,15 +4,11 @@ import fs from "fs"; export const prettyCode = createRemarkPlugin({ // Options passed to shiki.getHighlighter() shikiOptions: { - // Link to your VS Code theme JSON file theme: JSON.parse( fs.readFileSync("./shiki/themes/OneDark.json", "utf-8") ), }, - // These are hooks which allow you to style the node. `node` is an element - // using JSDOM, so you can apply any CSS. onVisitLine(node) { - // Style a line node. node.innerHTML = node.innerHTML .replace(/{/g, "{") .replace(/}/g, "}"); @@ -22,13 +18,11 @@ export const prettyCode = createRemarkPlugin({ }); }, onVisitHighlightedLine(node) { - // Style a highlighted line node. Object.assign(node.style, { backgroundColor: "rgba(0,0,0,0.1)", }); }, onVisitHighlightedWord(node) { - // Style a highlighted word node. Object.assign(node.style, { backgroundColor: "rgba(0,0,0,0.5)", padding: "0.25rem", diff --git a/remark/unescapehighlight.js b/remark/unescapehighlight.js index f450e60..f9dd3c9 100644 --- a/remark/unescapehighlight.js +++ b/remark/unescapehighlight.js @@ -1,5 +1,15 @@ import { visit } from "unist-util-visit" +// Allows having highlight in blog posts. + +// Very fun, debugging this stuff.. +// Dirty, but it works. + +// It has the unescape characters because sveltemdx escapes them. It doesn't do that when we use their highlighter - but that +// one doesn't support inline code. +// So we have to unescape those characters back to how they were before, but then escape them again because svelte +// would understand certain characters (namely {}. For some reason, `<>` was fine.) as svelte code. + export function remarkUnescapeHighlight() { return (tree, file) => { visit(tree, ["code"], (node) => { diff --git a/src/lib/apm.ts b/src/lib/apm.ts index 5eb93fc..0ea5d14 100644 --- a/src/lib/apm.ts +++ b/src/lib/apm.ts @@ -5,16 +5,11 @@ var apm_: ApmBase; if(browser) { apm_ = initApm({ - // Set required service name (allowed characters: a-z, A-Z, 0-9, -, _, and space) + // allowed characters: a-z, A-Z, 0-9, -, _, and space serviceName: 'homepage', - - // Set custom APM Server URL (default: http://localhost:8200) serverUrl: 'https://apm.elasticsearch.danbulant.cloud', - - // Set the service version (required for source map feature) + // for source maps, but those are not implemented in this project serviceVersion: import.meta.env.VITE_SENTRY_RELEASE, - - // Set the service environment environment: import.meta.env.VITE_SENTRY_ENVIRONMENT || 'production' }); } diff --git a/src/lib/components/bottombar.svelte b/src/lib/components/bottombar.svelte index 7aa5972..15297c5 100644 --- a/src/lib/components/bottombar.svelte +++ b/src/lib/components/bottombar.svelte @@ -1,10 +1,9 @@ -
+

Daniel Bulant

@@ -29,7 +28,7 @@ width: 100%; background: white; } - .dark.bottombar { + :global(.dark) .bottombar { background: rgb(28, 28, 33); } } @@ -41,7 +40,7 @@ font-weight: bold; margin: 0; } - .dark h3 { + :global(.dark) h3 { color: rgb(191, 191, 191); } h3 { diff --git a/src/lib/components/button.svelte b/src/lib/components/button.svelte index 0d8d30f..3f95bf4 100644 --- a/src/lib/components/button.svelte +++ b/src/lib/components/button.svelte @@ -1,6 +1,4 @@ {#if href} - + {:else} - + {/if} - diff --git a/src/lib/components/hero.svelte b/src/lib/components/hero.svelte index 43e1474..108e45e 100644 --- a/src/lib/components/hero.svelte +++ b/src/lib/components/hero.svelte @@ -18,19 +18,16 @@
-
- - - - -
-
-
- - - - -
+ {#each [0, 1, 2] as i} +
+ {#if i !== 1} + + + + + {/if} +
+ {/each}
@@ -42,7 +39,6 @@ padding: 40px 120px; padding: 40px min(120px, 10vw); margin: 2rem auto; - /* min-height: calc(100vh - 129px - 80px + 5px); */ max-height: 1080px; max-width: 1500px; } diff --git a/src/lib/components/heroPost.svelte b/src/lib/components/heroPost.svelte index 59b1830..7f9993f 100644 --- a/src/lib/components/heroPost.svelte +++ b/src/lib/components/heroPost.svelte @@ -1,13 +1,11 @@ + +
+
+

+ I helped many projects come to life. Here are some examples: +

+ + Heaventaker - Helltaker fan game + +

+ Heaventaker is a helltaker fan-game visual novel and puzzle game. +

+

+ Heaventaker currently has 3 different puzzles and 4 angels to collect. Playable online on the website, or on Android devices (application installable from Google Play Store) +

+ + + + Animasher - Platform for creating and sharing animations + +

+ Animasher is a work in progress platform for creating and sharing animations online. +

+

+ It allows people to easily create animations inside the website, and then share it with the world, as well as communicate with other creators to improve themselves. +

+ + +
+
+
+ + Mangades - Mangadex viewer + +

+ A Mangadex client, with EPUB/CBZ download options, and a sleek UI. +

+ + + + Ultimate tictactoe - Online Tic-Tac-Toe, with a twist + +

+ Online Tic-Tac-Toe game that can be played with a friend locally or online. + Play across 3x3 boards, each with a "classic" 3x3 grid inside. + When you play your move, the next player has to play in the board that corresponds to the cell you played in. + The corresponding grid is highlighted when you hover over a cell. + Please note that the rules are slightly different that what's normally known as utlimate tictactoe. +

+ + +
+
+ + \ No newline at end of file diff --git a/src/lib/components/technologyDetails.svelte b/src/lib/components/home/technologyDetails.svelte similarity index 92% rename from src/lib/components/technologyDetails.svelte rename to src/lib/components/home/technologyDetails.svelte index 3e927d7..750b520 100644 --- a/src/lib/components/technologyDetails.svelte +++ b/src/lib/components/home/technologyDetails.svelte @@ -1,5 +1,5 @@ -
shouldClose = true} on:mousemove={() => shouldClose = false} on:mouseup={close}> +{#if selected} +
shouldClose = true} on:mousemove={() => shouldClose = false} on:mouseup={close}>
{#if selected === "typescript"}

Typescript

@@ -41,14 +42,14 @@

I'm learning C# at my school, in addition to learning Unity and looking into the osu!framework.

Currently, I don't have any project worth sharing.

{:else if selected === "git"} -

Git + GitHub

+

Git & GitHub

I use Git version control system for all of my projects, even if I don't upload them to GitHub. Most of my projects can be found on GitHub.

My GitHub profile is @danbulant.

The source code of this website is available here

{:else if selected === "docker"} -

Docker + Docker compose + Docker desktop

+

Docker, Docker compose & Docker desktop

Docker is the most widely used container runtime. Docker compose makes it easy to orchestrate multiple containers, and finally, Docker desktop is the easiest way to get Docker on Windows.

Most of my projects that I run on a server run in Docker, to make it easy to replicate environment, as well as make deployments easier via Nomad.

{:else if selected === "react"} @@ -102,7 +103,7 @@

Node.js is a javascript runtime for servers and desktop applications (via selected="electron"} on:keydown={() => selected="electron"}>Electron).

I use Node.js in nearly all of my projects. In case of websites, as a build platform, and in case of backend servers or desktop applications, as the primary runtime.

-

I used Node.js from simply rollup scripts (used in this website), to backend servers and APIs (in case of Animasher and igni website), to Linux Window Manager and Discord Bots.

+

I used Node.js from backend servers and APIs (in case of Animasher and igni website), to Linux Window Manager and Discord Bots.

{:else if selected === "deno"}

Deno

Deno is an alternative to selected="node"} on:keydown={() => selected="node"}>Node.js by the same authors, written in selected="rust"} on:keydown={() => selected="rust"}>Rust.

@@ -131,16 +132,13 @@ Click to close.
+{/if} - \ No newline at end of file diff --git a/src/lib/components/home/technologyList.svelte b/src/lib/components/home/technologyList.svelte new file mode 100644 index 0000000..772032c --- /dev/null +++ b/src/lib/components/home/technologyList.svelte @@ -0,0 +1,179 @@ + + +
+ +

I also worked with the following:

+ + {typeof window !== "undefined" && window.matchMedia("(hover: none) and (pointer: coarse)").matches ? "Touch" : "Click"} each technology for more details about why I'm using it. +
technologyListHovered = true} on:mouseleave={() => technologyListHovered = false}> +
    +
  • technologySelected = "typescript"} on:keydown={() => technologySelected = "typescript"}> + + Typescript +
    • +
  • technologySelected = "rust"} on:keydown={() => technologySelected = "rust"}> + + Rust +
    • +
  • technologySelected = "x11"} on:keydown={() => technologySelected = "x11"}> + + X11 +
    • +
  • technologySelected = "cs"} on:keydown={() => technologySelected = "cs"}> + + C# +
    • +
  • technologySelected = "git"} on:keydown={() => technologySelected = "git"}> + + Git + GitHub +
    • +
  • technologySelected = "docker"} on:keydown={() => technologySelected = "docker"}> + + Docker + Docker compose +
    • +
  • technologySelected = "react"} on:keydown={() => technologySelected = "react"}> + + React +
    • +
  • technologySelected = "nomad"} on:keydown={() => technologySelected = "nomad"}> + + Nomad +
    • +
  • technologySelected = "consul"} on:keydown={() => technologySelected = "consul"}> + + Consul +
    • +
  • technologySelected = "discord"} on:keydown={() => technologySelected = "discord"}> + + Discord bots +
    • +
+
    +
  • technologySelected = "electron"} on:keydown={() => technologySelected = "electron"}> + + Electron +
    • +
  • technologySelected = "svelte"} on:keydown={() => technologySelected = "svelte"}> + + Svelte + SvelteKit +
    • +
  • technologySelected = "mysql"} on:keydown={() => technologySelected = "mysql"}> + + MySQL/MariaDB +
    • +
  • technologySelected = "mongodb"} on:keydown={() => technologySelected = "mongodb"}> + + MongoDB +
    • +
  • technologySelected = "postgresql"} on:keydown={() => technologySelected = "postgresql"}> + + PostgreSQL +
    • +
  • technologySelected = "node"} on:keydown={() => technologySelected = "node"}> + + Node.js +
    • +
  • technologySelected = "deno"} on:keydown={() => technologySelected = "deno"}> + + Deno +
    • +
  • technologySelected = "linux"} on:keydown={() => technologySelected = "linux"}> + + Linux +
    • +
  • technologySelected = "nginx"} on:keydown={() => technologySelected = "nginx"}> + + Nginx +
    • +
  • technologySelected = "cloudflare"} on:keydown={() => technologySelected = "cloudflare"}> + + Cloudflare +
    • +
+
+
+ + \ No newline at end of file diff --git a/src/lib/components/navbar.svelte b/src/lib/components/navbar.svelte index d99816b..73bee94 100644 --- a/src/lib/components/navbar.svelte +++ b/src/lib/components/navbar.svelte @@ -3,6 +3,7 @@ import { onMount } from "svelte"; import Button from "./button.svelte"; import Split from "./split.svelte"; + import { browser } from "$app/environment"; function toggle() { $darkmode = !$darkmode; @@ -16,15 +17,17 @@ }; document.addEventListener("scroll", handleScroll); + handleScroll(); + return () => { document.removeEventListener("scroll", handleScroll); }; }); - $: progress = typeof window === "undefined" ? 1 : Math.min(1, scrollTop / 40); + $: progress = !browser ? 1 : Math.min(1, scrollTop / 40); -
- \ No newline at end of file diff --git a/src/lib/components/xterm.svelte b/src/lib/components/xterm.svelte index 2dd9547..9c449a5 100644 --- a/src/lib/components/xterm.svelte +++ b/src/lib/components/xterm.svelte @@ -1,4 +1,6 @@ -
+
Daniel Bulant - Blog posts CC-BY-SA (unless otherwise specified)
- \ No newline at end of file diff --git a/src/lib/stores/darkmode.js b/src/lib/stores/darkmode.js index a0c46dc..3d64e43 100644 --- a/src/lib/stores/darkmode.js +++ b/src/lib/stores/darkmode.js @@ -1,5 +1,9 @@ import { writable } from "svelte/store"; +// no idea how to make this better. +// it works! But isn't very performant - darkmode is switched after loading the page, not very friendly +// could probably set a cookie and have the class be set in SSR as well, I don't really want to spend the time on that now. +// TODO: make this use cookies and SSR const darkmode = writable( typeof window === "undefined" ? false : (JSON.parse(localStorage.getItem("darkmode")) || window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte index 2c97fc4..d5ed3e2 100644 --- a/src/routes/+layout.svelte +++ b/src/routes/+layout.svelte @@ -3,7 +3,6 @@ import PageTransition from "$lib/components/pageTransition.svelte"; import "virtual:windi.css"; import { browser, dev } from "$app/environment"; - import * as Sentry from '@sentry/browser'; import { apm } from "$lib/apm"; import { navigating, page } from "$app/stores"; import Spinner from "$lib/components/icons/spinner.svelte"; @@ -21,7 +20,7 @@ {#if $navigating} -
+ {/if} @@ -32,8 +31,11 @@
- \ No newline at end of file diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte index 59f1139..d9579e8 100644 --- a/src/routes/+page.svelte +++ b/src/routes/+page.svelte @@ -4,12 +4,9 @@ import Contact from "$lib/components/contact.svelte"; import Hero from "$lib/components/hero.svelte"; import Posts from "$lib/components/posts.svelte"; - import Project from "$lib/components/project.svelte"; - import TechnologyDetails from "$lib/components/technologyDetails.svelte"; - import darkmode from "$lib/stores/darkmode"; + import TechnologyList from "$lib/components/home/technologyList.svelte"; + import Projects from "$lib/components/home/projects.svelte"; - var technologySelected = null; - var technologyHover = false; /** @type {null | "websites" | "applications" | "bots"} */ var appTypeHover = null; @@ -21,7 +18,7 @@ - Daniel Bulant - Homepage + Daniel Bulant @@ -35,11 +32,11 @@ -
+
-

I'm making appTypeHover = "websites"} on:mouseleave={() => appTypeHover == "websites" && (appTypeHover = null)}>websites, - appTypeHover = "applications"} on:mouseleave={() => appTypeHover == "applications" && (appTypeHover = null)}>mobile applications and - appTypeHover = "bots"} on:mouseleave={() => appTypeHover == "bots" && (appTypeHover = null)}>discord bots.

+

I'm making appTypeHover = "websites"} on:mouseleave={() => appTypeHover === "websites" && (appTypeHover = null)}>websites, + appTypeHover = "applications"} on:mouseleave={() => appTypeHover === "applications" && (appTypeHover = null)}>mobile applications and + appTypeHover = "websites"} on:mouseleave={() => appTypeHover === "website" && (appTypeHover = null)}>online games.

@@ -57,186 +54,11 @@
-
-
-

- I helped many projects come to life. Here are some examples: -

- - Heaventaker - Helltaker fan game - -

- Heaventaker is a helltaker fan-game visual novel and puzzle game. -

-

- Heaventaker currently has 3 different puzzles and 4 angels to collect. Playable online on the website, or on Android devices (application installable from Google Play Store) -

- - - - Animasher - Platform for creating and sharing animations - -

- Animasher is a work in progress platform for creating and sharing animations online. -

-

- It allows people to easily create animations inside the website, and then share it with the world, as well as communicate with other creators to improve themselves. -

- - -
-
-
- - Mangades - Mangadex downloader and viewer - -

- Mangades is a manga downloader from Mangadex. -

-

- It can download mangas to EPUB or CBZ files online from browsers -

- - - - igni - The universal Discord bot - -

- igni is a universal Discord bot, making managing Discord communities easy. -

-

- It includes customizability, music playback (Youtube, SoundCloud, Spotify), moderation commands, anime, automation, games and more. -

- - -
-
-
- In addition, this website is open-source and available on GitHub -
-
- -

I also worked with the following:

- - {typeof window !== "undefined" && window.matchMedia("(hover: none) and (pointer: coarse)").matches ? "Touch" : "Click"} each technology for more details about why I'm using it. -
technologyHover = true} on:mouseleave={() => technologyHover = false}> -
    -
  • technologySelected = "typescript"} on:keydown={() => technologySelected = "typescript"}> - - Typescript -
    • -
  • technologySelected = "rust"} on:keydown={() => technologySelected = "rust"}> - - Rust -
    • -
  • technologySelected = "x11"} on:keydown={() => technologySelected = "x11"}> - - X11 -
    • -
  • technologySelected = "cs"} on:keydown={() => technologySelected = "cs"}> - - C# -
    • -
  • technologySelected = "git"} on:keydown={() => technologySelected = "git"}> - - Git + GitHub -
    • -
  • technologySelected = "docker"} on:keydown={() => technologySelected = "docker"}> - - Docker + Docker compose -
    • -
  • technologySelected = "react"} on:keydown={() => technologySelected = "react"}> - - React -
    • -
  • technologySelected = "nomad"} on:keydown={() => technologySelected = "nomad"}> - - Nomad -
    • -
  • technologySelected = "consul"} on:keydown={() => technologySelected = "consul"}> - - Consul -
    • -
  • technologySelected = "discord"} on:keydown={() => technologySelected = "discord"}> - - Discord bots -
    • -
-
    -
  • technologySelected = "electron"} on:keydown={() => technologySelected = "electron"}> - - Electron -
    • -
  • technologySelected = "svelte"} on:keydown={() => technologySelected = "svelte"}> - - Svelte + SvelteKit -
    • -
  • technologySelected = "mysql"} on:keydown={() => technologySelected = "mysql"}> - - MySQL/MariaDB -
    • -
  • technologySelected = "mongodb"} on:keydown={() => technologySelected = "mongodb"}> - - MongoDB -
    • -
  • technologySelected = "postgresql"} on:keydown={() => technologySelected = "postgresql"}> - - PostgreSQL -
    • -
  • technologySelected = "node"} on:keydown={() => technologySelected = "node"}> - - Node.js -
    • -
  • technologySelected = "deno"} on:keydown={() => technologySelected = "deno"}> - - Deno -
    • -
  • technologySelected = "linux"} on:keydown={() => technologySelected = "linux"}> - - Linux -
    • -
  • technologySelected = "nginx"} on:keydown={() => technologySelected = "nginx"}> - - Nginx -
    • -
  • technologySelected = "cloudflare"} on:keydown={() => technologySelected = "cloudflare"}> - - Cloudflare -
    • -
-
+ +
+ In addition, this website is open-source and available on GitHub
+ {#if posts} {/if} @@ -251,143 +73,12 @@ background: white; border-radius: 50%; } - .center { - text-align: center; - } - .relative { - position: relative; - } - .text-center { - text-align: center; - } - .also > span { - transition: color .3s; - } - .text-gray { - color: rgb(150, 150, 150); - } - .text-gray img { - filter: grayscale(70%); - transition: filter .3s; - } - .text-white { - color: black; - } - .dark .text-white { - color: white; - } main { margin: 0 min(50px, 5%) 0 min(50px, 5%); width: calc(100% - min(100px, 10%)); } - .projects { - max-width: 1380px; - } - .projects { - display: flex; - flex-wrap: wrap; - justify-content: space-between; - margin: 0 20px 0px 20px; - } - .also { - margin: 50px auto 0 auto; - max-width: 850px; - border-radius: 15px; - } - .also h2 { - margin-block-end: 0; - margin-bottom: 0; - } - .also > span { - margin-bottom: 25px; - display: block; - } - .split { - display: flex; - flex-wrap: wrap; - justify-content: space-between; - } - .split ul { - min-width: 340px; - margin: 0 auto; - padding-left: 20px; - list-style-type: none; - } - .also li { - height: 32px; - position: relative; - display: flex; - align-items: center; - justify-content: left; - cursor: pointer; - transition: transform .3s, color .2s; - } - .also li:hover { - color: black; - } - .also li:hover img { - filter: grayscale(0%); - } - .dark .also li:hover { - color: white; - } - .also li:active { - transform: scale(0.95); - } - .also li::before { - content: ""; - position: absolute; - top: 13px; - left: -20px; - width: 6px; - height: 6px; - border-radius: 6px; - background-color: black; - transition: background-color .3s; - } - .dark .also li::before { - background-color: white; - } - .also li img { - height: 24px; - width: 24px; - margin-right: 6px; - } - @media (min-width: 1520px) { - .projects { - margin: 0 auto 0px auto; - } - } - .projects > div { - width: calc(50% - 40px); - } - .projects .pad { - margin-top: 110px; - } - @media (max-width: 860px) { - .projects > div { - width: calc(100% - 80px); - margin: auto; - } - .projects .pad { - margin-top: 0px; - } - .projects h2 { - margin: 1em 0 1em 10px; - } - } - .projects h2 { - font-size: 29px; - font-weight: 400; - margin-block-start: 1em; - margin-block-end: 1em; - margin-inline-start: 40px; - margin-inline-end: 40px; - } h1 { color: #282B29; - } - h1 { font-size: 64px; } @media (max-width: 1100px) { diff --git a/src/routes/.well-known/security.txt/+page.txt b/src/routes/.well-known/security.txt/+page.txt index e053ec1..750bad3 100644 --- a/src/routes/.well-known/security.txt/+page.txt +++ b/src/routes/.well-known/security.txt/+page.txt @@ -1,5 +1,6 @@ # Hey there. # I don't think there's a valid vulnerability given this website is static, but I still put the file here just in case -Contact: mailto:danbulant@danbulant.eu +Contact: mailto:me@danbulant.eu +Contact: matrix:@/:danbulant.cz Preferred-Languages: en, cs Canonical: https://danbulant.eu/.well-known/security.txt \ No newline at end of file diff --git a/src/routes/posts/+page.svelte b/src/routes/posts/+page.svelte index a160741..9dc3f4b 100644 --- a/src/routes/posts/+page.svelte +++ b/src/routes/posts/+page.svelte @@ -1,7 +1,6 @@ -*I seem to like storytelling a bit too much.* -
- - -
+{#if browser} + *I seem to like storytelling a bit too much.* +
+ + +
+{/if} > I really do enjoy reading blog posts like these, so I figured I'd try writing few of my own as well. I hope you'll enjoy it, if so, leave a comment below. diff --git a/src/routes/posts/writing-personal-home-page/_comp/bidiExample.svelte b/src/routes/posts/writing-personal-home-page/_comp/bidiExample.svelte index 13d5609..d9f7169 100644 --- a/src/routes/posts/writing-personal-home-page/_comp/bidiExample.svelte +++ b/src/routes/posts/writing-personal-home-page/_comp/bidiExample.svelte @@ -1,15 +1,14 @@ - + <=> - + - \ No newline at end of file diff --git a/src/routes/posts/writing-personal-home-page/_comp/simpleExample.svelte b/src/routes/posts/writing-personal-home-page/_comp/simpleExample.svelte index 67cc395..396154a 100644 --- a/src/routes/posts/writing-personal-home-page/_comp/simpleExample.svelte +++ b/src/routes/posts/writing-personal-home-page/_comp/simpleExample.svelte @@ -1,6 +1,4 @@