dan/design
1
0
Fork 0
mirror of https://github.com/danbulant/design synced 2026-05-24 12:23:57 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

fix warnings, fix site

Browse source
This commit is contained in:
Daniel Bulant 2023-03-18 14:36:03 +01:00
parent bfacf839be
commit 505dec96b5
13 changed files with 112 additions and 105 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
remark/code.js
View file

@ -16,10 +16,6 @@ export const prettyCode = createRemarkPlugin({
node.innerHTML = node.innerHTML node.innerHTML = node.innerHTML
.replace(/{/g, "{") .replace(/{/g, "{")
.replace(/}/g, "}"); .replace(/}/g, "}");
// console.log(node.innerHTML);
// console.log(node.innerHTML
// .replace(/{/g, "{")
// .replace(/}/g, "}"));
Object.assign(node.style, { Object.assign(node.style, {
margin: "0 -1.5rem", margin: "0 -1.5rem",
padding: "0 1.5rem", padding: "0 1.5rem",

14
src/lib/components/contact.svelte
View file

@ -22,28 +22,32 @@
Prague, Czech Republic Prague, Czech Republic
</a> </a>
<div class="profiles"> <div class="profiles">
<a href="https://github.com/danbulant" use:goatCounter data-goatcounter-click="contact-github" rel="me" target="_blank"> <!-- svelte-ignore security-anchor-rel-noreferrer -->
<a href="https://github.com/danbulant" use:goatCounter data-goatcounter-click="contact-github" rel="me noopener" target="_blank">
<span class="platform">GitHub</span> <span class="platform">GitHub</span>
<div class="main"> <div class="main">
<img src="/tech/github.png" alt="" draggable={false}> <img src="/tech/github.png" alt="" draggable={false}>
<span class="name">danbulant</span> <span class="name">danbulant</span>
</div> </div>
</a> </a>
<a href="https://www.linkedin.com/in/danbulant/" use:goatCounter data-goatcounter-click="contact-linkedin" rel="me" target="_blank"> <!-- svelte-ignore security-anchor-rel-noreferrer -->
<a href="https://www.linkedin.com/in/danbulant/" use:goatCounter data-goatcounter-click="contact-linkedin" rel="me noopener" target="_blank">
<span class="platform">LinkedIn</span> <span class="platform">LinkedIn</span>
<div class="main"> <div class="main">
<img src="/tech/linkedin.png" class="rounded-1" alt="" draggable={false}> <img src="/tech/linkedin.png" class="rounded-1" alt="" draggable={false}>
<span class="name">danbulant</span> <span class="name">danbulant</span>
</div> </div>
</a> </a>
<a href="https://discord.gg/XKPbz5xRuK" use:goatCounter data-goatcounter-click="contact-discord" target="_blank"> <!-- svelte-ignore security-anchor-rel-noreferrer -->
<a href="https://discord.gg/XKPbz5xRuK" use:goatCounter data-goatcounter-click="contact-discord" rel="noopener" target="_blank">
<span class="platform">Discord</span> <span class="platform">Discord</span>
<div class="main"> <div class="main">
<img src="/tech/discord.png" alt="" draggable={false}> <img src="/tech/discord.png" alt="" draggable={false}>
<span class="name">TechmandanCZ#3372</span> <span class="name">TechmandanCZ#3372</span>
</div> </div>
</a> </a>
<a href="https://twitter.com/danbulant" use:goatCounter data-goatcounter-click="contact-twitter" rel="me" target="_blank"> <!-- svelte-ignore security-anchor-rel-noreferrer -->
<a href="https://twitter.com/danbulant" use:goatCounter data-goatcounter-click="contact-twitter" rel="me noopener" target="_blank">
<span class="platform">Twitter</span> <span class="platform">Twitter</span>
<div class="main"> <div class="main">
<img src="/tech/twitter.png" alt="" draggable={false}> <img src="/tech/twitter.png" alt="" draggable={false}>
@ -78,7 +82,7 @@
</div> </div>
</div> </div>
<style> <style lang="postcss">
.platform { .platform {
@apply text-gray-400; @apply text-gray-400;
} }

50
src/lib/components/navbar.svelte
View file

@ -1,31 +1,46 @@
<script> <script>
import darkmode from "$lib/stores/darkmode"; import darkmode from "$lib/stores/darkmode";
import Bar from "./bar.svelte"; import { onMount } from "svelte";
import Button from "./button.svelte"; import Button from "./button.svelte";
import Split from "./split.svelte"; import Split from "./split.svelte";
function toggle() { function toggle() {
$darkmode = !$darkmode; $darkmode = !$darkmode;
} }
var scrollTop = 0;
onMount(() => {
const handleScroll = () => {
scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
};
document.addEventListener("scroll", handleScroll);
return () => {
document.removeEventListener("scroll", handleScroll);
};
});
$: progress = typeof window === "undefined" ? 1 : Math.min(1, scrollTop / 40);
</script> </script>
<div class="bar fixed top-0 left-0 z-99 w-100vw mx-auto mb-30px" class:dark={$darkmode}> <nav class="bar fixed top-0 left-0 z-99 w-100vw mx-auto mb-30px" class:dark={$darkmode}
<Bar> style:background="rgba({$darkmode ? "28,28,33" : "255,255,255"}, {progress * 0.2})"
<div class="subbar w-full flex items-center justify-between max-w-8xl m-auto"> style:backdrop-filter="blur({progress*20}px)">
<a href="/"><h3>Daniel Bulant</h3></a> <div class="subbar w-full flex items-center justify-between max-w-8xl m-auto">
<Split /> <a href="/"><h3>Daniel Bulant</h3></a>
<Button text on:click={toggle}>{$darkmode ? "Light" : "Dark"} mode</Button> <Split />
<div class="big"> <Button text on:click={toggle}>{$darkmode ? "Light" : "Dark"} mode</Button>
<Button text href="/#contact" class="big">Contact</Button> <div class="big">
<Button text href="/posts" class="big">Blog</Button> <Button text href="/#contact" class="big">Contact</Button>
</div> <Button text href="/posts" class="big">Blog</Button>
</div> </div>
</Bar> </div>
</div> </nav>
<div class="h-19"></div> <div class="h-19"></div>
<style> <style lang="postcss">
@media (max-width: 570px) { @media (max-width: 570px) {
.bar .big { .bar .big {
display: none; display: none;
@ -33,8 +48,12 @@
} }
.bar { .bar {
@apply w-full flex flex-between items-center p-2;
background: rgba(255,255,255, 0.2); background: rgba(255,255,255, 0.2);
} }
.dark.bar {
background: rgba(28, 28, 33, 0.8);
}
.bar .subbar > * { .bar .subbar > * {
margin: 5px 10px; margin: 5px 10px;
} }
@ -43,9 +62,6 @@
width: 100vw; width: 100vw;
} }
} }
.dark.bar {
background: rgba(28, 28, 33, 0.8);
}
.bar h3 { .bar h3 {
font-size: 18px; font-size: 18px;
font-weight: bold; font-weight: bold;

1
src/lib/components/posts/a.svelte
View file

@ -26,7 +26,6 @@
} }
newtitle = options.get("title") || ""; newtitle = options.get("title") || "";
favicon = options.get("favicon") || defaultfavicon; favicon = options.get("favicon") || defaultfavicon;
console.log(options);
} else { } else {
newtitle = title; newtitle = title;
favicon = defaultfavicon; favicon = defaultfavicon;

7
src/lib/components/posts/callout.svelte
View file

@ -16,8 +16,6 @@
let brightness = 0; let brightness = 0;
$: brightness = brightnessByColor(mix(color, $darkmode ? "#000" : "#fff", 0.5)); $: brightness = brightnessByColor(mix(color, $darkmode ? "#000" : "#fff", 0.5));
$: console.log(brightness, color);
let isDark = false; let isDark = false;
$: isDark = brightness < 0.5; $: isDark = brightness < 0.5;
</script> </script>
@ -34,7 +32,7 @@
</div> </div>
</div> </div>
<style> <style lang="postcss">
.color-shadow { .color-shadow {
box-shadow: 0 0 1rem 0.25rem var(--shadow-color), -4px 0 1rem 0.25rem var(--shadow-color); box-shadow: 0 0 1rem 0.25rem var(--shadow-color), -4px 0 1rem 0.25rem var(--shadow-color);
} }
@ -56,7 +54,4 @@
.header.dark-bg { .header.dark-bg {
@apply text-white; @apply text-white;
} }
.dark .content {
@apply bg-dark-300/40;
}
</style> </style>

5
src/lib/components/project.svelte
View file

@ -71,7 +71,7 @@
</div> </div>
</a> </a>
<style> <style lang="postcss">
.project { .project {
width: 100%; width: 100%;
margin-bottom: 30px; margin-bottom: 30px;
@ -119,7 +119,4 @@
h3 { h3 {
@apply font-normal text-xl; @apply font-normal text-xl;
} }
.bottom {
color: gray;
}
</style> </style>

63
src/lib/components/technologyDetails.svelte
View file

@ -17,21 +17,25 @@
<div class="main"> <div class="main">
{#if selected === "typescript"} {#if selected === "typescript"}
<h2>Typescript</h2> <h2>Typescript</h2>
<p><a href="https://typescriptlang.org" target="_blank">Typescript</a> prevents bugs and makes it easier to develop new functionality, as good IDEs will show types without having to go through documentation.</p> <p><a href="https://typescriptlang.org" target="_blank" rel="noopener noreferrer">Typescript</a> prevents bugs and makes it easier to develop new functionality, as good IDEs will show types without having to go through documentation.</p>
<!-- svelte-ignore security-anchor-rel-noreferrer -->
<p>Most of my new projects use Typescript. And those that don't have native Typescript have type definitions, like for example <a href="https://github.com/iceproductions/Commando" target="_blank">Commando</a>.</p> <p>Most of my new projects use Typescript. And those that don't have native Typescript have type definitions, like for example <a href="https://github.com/iceproductions/Commando" target="_blank">Commando</a>.</p>
<!-- svelte-ignore security-anchor-rel-noreferrer -->
<p>Typescript has great integration with Deno, so whenever I use Deno for my scripts, I also use Typescript. An example can be found <a href="https://github.com/danbulant/colors" target="_blank">in this repository</a>.</p> <p>Typescript has great integration with Deno, so whenever I use Deno for my scripts, I also use Typescript. An example can be found <a href="https://github.com/danbulant/colors" target="_blank">in this repository</a>.</p>
<p>More information about Typescript can be found <a href="https://typescriptlang.org" target="_blank">here</a>.</p> <p>More information about Typescript can be found <a href="https://typescriptlang.org" target="_blank" rel="noopener noreferrer">here</a>.</p>
{:else if selected === "rust"} {:else if selected === "rust"}
<h2>Rust</h2> <h2>Rust</h2>
<p><a href="https://rust-lang.org" target="_blank" rel="noopener noreferrer">Rust</a> is a low-level memory-safe programming language by Mozilla. It has the speed of C and memory safety of high level languages (like Javascript).</p> <p><a href="https://rust-lang.org" target="_blank" rel="noopener noreferrer">Rust</a> is a low-level memory-safe programming language by Mozilla. It has the speed of C and memory safety of high level languages (like Javascript).</p>
<p>I wanted to learn a low-level programming language to find out more about how computers work. I looked into multiple languages, but Rust seemed the best choice, as it's a low-level language with automatic memory handling.</p> <p>I wanted to learn a low-level programming language to find out more about how computers work. I looked into multiple languages, but Rust seemed the best choice, as it's a low-level language with automatic memory handling.</p>
<p>To test out my knowledge, I tried to create a simple <a href="https://github.com/danbulant/rush" target="_blank" rel="noopener noreferrer">shell</a>, and although I didn't finish it because I found out I was just reinventing the wheel (<a href="https://fishshell.com" rel="noopener noreferrer">Fish shell</a> in this case), I made great progress (it parses essentially everything normal shell should, and supports basic command running).</p> <!-- svelte-ignore security-anchor-rel-noreferrer -->
<p>To test out my knowledge, I tried to create a simple <a href="https://github.com/danbulant/rush" target="_blank" rel="noopener">shell</a>, and although I didn't finish it because I found out I was just reinventing the wheel (<a href="https://fishshell.com" rel="noopener">Fish shell</a> in this case), I made great progress (it parses essentially everything normal shell should, and supports basic command running).</p>
{:else if selected === "x11"} {:else if selected === "x11"}
<h2>X11</h2> <h2>X11</h2>
<p>I love reading about how computers work, especially in case of <span class="a" on:click={() => selected = "linux"}>Linux</span>.</p> <p>I love reading about how computers work, especially in case of <span class="a" on:click={() => selected = "linux"} on:keydown={() => selected = "linux"}>Linux</span>.</p>
<p>X server (using X11 protocol) is currently the most used window handler in Linux.</p> <p>X server (using X11 protocol) is currently the most used window handler in Linux.</p>
<p>I tried writing my own simple Window Manager in Javascript, which posed additional challenge, as X11 doesn't have official implementation for Node.JS. For the basic communication, I used <a href="https://github.com/sidorares/node-x11" rel="noopener noreferrer">node-x11</a>, which implements only the basic X11 protocol without any abstraction (like what <code>xlib</code> does for C).</p> <p>I tried writing my own simple Window Manager in Javascript, which posed additional challenge, as X11 doesn't have official implementation for Node.JS. For the basic communication, I used <a href="https://github.com/sidorares/node-x11" rel="noopener">node-x11</a>, which implements only the basic X11 protocol without any abstraction (like what <code>xlib</code> does for C).</p>
<p>The code for the simple Window Manager (mostly an experiment) can be found <a href="https://github.com/danbulant/test-x" target="_blank" rel="noopener noreferrer">here</a>. This project also uses Vagrant by HashiCorp.</p> <!-- svelte-ignore security-anchor-rel-noreferrer -->
<p>The code for the simple Window Manager (mostly an experiment) can be found <a href="https://github.com/danbulant/test-x" target="_blank" rel="noopener">here</a>. This project also uses Vagrant by HashiCorp.</p>
{:else if selected === "cs"} {:else if selected === "cs"}
<h2>C#</h2> <h2>C#</h2>
<p>I'm learning C# at my school, in addition to learning Unity and looking into the osu!framework.</p> <p>I'm learning C# at my school, in addition to learning Unity and looking into the osu!framework.</p>
@ -39,19 +43,21 @@
{:else if selected === "git"} {:else if selected === "git"}
<h2>Git + GitHub</h2> <h2>Git + GitHub</h2>
<p>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.</p> <p>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.</p>
<p>My GitHub profile is @<a href="https://github.com/danbulant" target="_blank" rel="noopener noreferrer">danbulant</a>.</p> <!-- svelte-ignore security-anchor-rel-noreferrer -->
<p>The source code of this website is available <a href="https://github.com/danbulant/design" target="_blank" rel="noopener noreferrer">here</a></p> <p>My GitHub profile is @<a href="https://github.com/danbulant" target="_blank" rel="noopener">danbulant</a>.</p>
<!-- svelte-ignore security-anchor-rel-noreferrer -->
<p>The source code of this website is available <a href="https://github.com/danbulant/design" target="_blank" rel="noopener">here</a></p>
{:else if selected === "docker"} {:else if selected === "docker"}
<h2>Docker + Docker compose + Docker desktop</h2> <h2>Docker + Docker compose + Docker desktop</h2>
<p><a href="https://www.docker.com" rel="noopener noreferrer" target="_blank">Docker</a> is the most widely used container runtime. <a href="https://docs.docker.com/compose/" target="_blank" rel="noopener noreferrer">Docker compose</a> makes it easy to orchestrate multiple containers, and finally, <a href="https://docs.docker.com/desktop/" target="_blank" rel="noopener noreferrer">Docker desktop</a> is the easiest way to get Docker on Windows.</p> <p><a href="https://www.docker.com" rel="noopener noreferrer" target="_blank">Docker</a> is the most widely used container runtime. <a href="https://docs.docker.com/compose/" target="_blank" rel="noopener noreferrer">Docker compose</a> makes it easy to orchestrate multiple containers, and finally, <a href="https://docs.docker.com/desktop/" target="_blank" rel="noopener noreferrer">Docker desktop</a> is the easiest way to get Docker on Windows.</p>
<p>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.</p> <p>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.</p>
{:else if selected === "react"} {:else if selected === "react"}
<h2>React</h2> <h2>React</h2>
<p>My first interactive websites were in React, before I moved to <span class="a" on:click={() => selected = "svelte"}>Svelte</span>.</p> <p>My first interactive websites were in React, before I moved to <span class="a" on:click={() => selected = "svelte"} on:keydown={() => selected = "svelte"}>Svelte</span>.</p>
<p>An example of such website is Animasher.</p> <p>An example of such website is Animasher.</p>
{:else if selected === "nomad"} {:else if selected === "nomad"}
<h2>Nomad</h2> <h2>Nomad</h2>
<p>Nomad is a distributed job scheduler, mainly for containers (via <span class="a" on:click={() => selected = "docker"}>Docker</span> or Podman). Along with <span class="a" on:click={() => selected = "consul"}>Consul</span>, it serves as a viable alternative to Kubernetes.</p> <p>Nomad is a distributed job scheduler, mainly for containers (via <span class="a" on:click={() => selected = "docker"} on:keydown={() => selected = "docker"}>Docker</span> or Podman). Along with <span class="a" on:click={() => selected = "consul"} on:keydown={() => selected = "consul"}>Consul</span>, it serves as a viable alternative to Kubernetes.</p>
<p>I use Nomad as a job orchestrator on my server, to run my personal projects as well as few open-source one's, like my own NextCloud instance.</p> <p>I use Nomad as a job orchestrator on my server, to run my personal projects as well as few open-source one's, like my own NextCloud instance.</p>
<p>In that single-node cluster, I run multiple databases (MariaDB, MongoDB) and projects, which communicate with each other using Consul as service resolver. And all websites are behind Nginx as a reverse proxy.</p> <p>In that single-node cluster, I run multiple databases (MariaDB, MongoDB) and projects, which communicate with each other using Consul as service resolver. And all websites are behind Nginx as a reverse proxy.</p>
{:else if selected === "consul"} {:else if selected === "consul"}
@ -62,22 +68,26 @@
<h2>Discord</h2> <h2>Discord</h2>
<p><a href="https://discord.com" target="_blank" rel="noopener noreferrer">Discord</a> is a chat platform, originally aimed at gamers, but now for communities of all types.</p> <p><a href="https://discord.com" target="_blank" rel="noopener noreferrer">Discord</a> is a chat platform, originally aimed at gamers, but now for communities of all types.</p>
<p>I created a Discord bot <a href="https://top.gg/bot/739864286775738399" target="_blank" rel="noopener noreferrer">igni</a> (which is at the time of writing in 940 servers), to make running Discord communities easier and more fun.</p> <p>I created a Discord bot <a href="https://top.gg/bot/739864286775738399" target="_blank" rel="noopener noreferrer">igni</a> (which is at the time of writing in 940 servers), to make running Discord communities easier and more fun.</p>
<p>The bot is written in Javascript with the use of Discord.js and a custom <a href="https://github.com/iceproductions/commando" target="_blank" rel="noopener noreferrer">Commando</a> framework. It's powered by <span class="a" on:click={() => selected = "mongodb"}>MongoDB</span>, and it's website (which is in the works) uses <span class="a" on:click={() => selected = "sveltekit"}>SvelteKit</span>, <span class="a" on:click={() => selected = "typescript"}>Typescript</span> and Redis.</p> <!-- svelte-ignore security-anchor-rel-noreferrer -->
<p>The bot is written in Javascript with the use of Discord.js and a custom <a href="https://github.com/iceproductions/commando" target="_blank" rel="noopener">Commando</a> framework. It's powered by <span class="a" on:click={() => selected = "mongodb"} on:keydown={() => selected="electron"}>MongoDB</span>, and it's website (which is in the works) uses <span class="a" on:click={() => selected = "sveltekit"} on:keydown={() => selected = "sveltekit"}>SvelteKit</span>, <span class="a" on:click={() => selected = "typescript"} on:keydown={() => selected = "typescript"}>Typescript</span> and Redis.</p>
{:else if selected === "electron"} {:else if selected === "electron"}
<h2>Electron</h2> <h2>Electron</h2>
<p>Electron is a framework for building cross-platform desktop applications using <span class="a" on:click={() => selected = "nodejs"}>Node.JS</span>.</p> <p>Electron is a framework for building cross-platform desktop applications using <span class="a" on:click={() => selected = "nodejs"} on:keydown={() => selected = "nodejs"}>Node.JS</span>.</p>
<p>I use Electron whenever I want to create a desktop application easily, for example when I made my simply <a href="https://github.com/danbulant/osuVisualizer" target="_blank" rel="noopener noreferrer">osu!visualizer</a>, or when I ported <a href="https://github.com/danbulant/svedexui" target="_blank" rel="noopener noreferrer">eDEX-UI to Svelte</a>.</p> <!-- svelte-ignore security-anchor-rel-noreferrer -->
<p>I use Electron whenever I want to create a desktop application easily, for example when I made my simply <a href="https://github.com/danbulant/osuVisualizer" target="_blank" rel="noopener">osu!visualizer</a>, or when I ported <a href="https://github.com/danbulant/svedexui" target="_blank" rel="noopener">eDEX-UI to Svelte</a>.</p>
{:else if selected === "svelte"} {:else if selected === "svelte"}
<h2>Svelte + SvelteKit</h2> <h2>Svelte + SvelteKit</h2>
<p><a href="http://svelte.dev" target="_blank" rel="noopener noreferrer">Svelte</a> is a web framework for building interactive websites easily with smaller size.</p> <p><a href="http://svelte.dev" target="_blank" rel="noopener noreferrer">Svelte</a> is a web framework for building interactive websites easily with smaller size.</p>
<p>I use Svelte for nearly all my new websites, including <a href="http://github.com/danbulant/design" target="_blank" rel="noopener noreferrer">this one</a>, <a href="https://github.com/danbulant/osuVisualizer" target="_blank" rel="noopener noreferrer">osu!visualizer</a>, <a href="https://github.com/danbulant/Mangades" target="_blank" rel="noopener noreferrer">Mangades</a> and more.</p> <!-- svelte-ignore security-anchor-rel-noreferrer -->
<p>I use Svelte for nearly all my new websites, including <a href="http://github.com/danbulant/design" target="_blank" rel="noopener">this one</a>, <a href="https://github.com/danbulant/osuVisualizer" target="_blank" rel="noopener noreferrer">osu!visualizer</a>, <a href="https://github.com/danbulant/Mangades" target="_blank" rel="noopener">Mangades</a> and more.</p>
<p>I also use SvelteKit or Routify for sites that require multiple pages.</p> <p>I also use SvelteKit or Routify for sites that require multiple pages.</p>
{:else if selected === "mysql"} {:else if selected === "mysql"}
<h2>MySQL/MariaDB</h2> <h2>MySQL/MariaDB</h2>
<p>MySQL is a widely used relational database, using SQL as the query language.</p> <p>MySQL is a widely used relational database, using SQL as the query language.</p>
<p>I use MariaDB (a fork of MySQL with improved speed) for most of my older projects before I knew about <span class="a" on:click={() => selected = "mongodb"}>MongoDB</span>.</p> <p>I use MariaDB (a fork of MySQL with improved speed) for most of my older projects before I knew about <span class="a" on:click={() => selected = "mongodb"} on:keydown={() => selected = "mongodb"}>MongoDB</span>.</p>
<p>MariaDB is used in Animasher, Learner and on my older PHP experiments (which aren't publicly available).</p> <p>MariaDB is used in Animasher, Learner and on my older PHP experiments (which aren't publicly available).</p>
{:else if selected === "mongodb"} {:else if selected === "mongodb"}
<h2>MongoDB</h2> <h2>MongoDB</h2>
@ -85,32 +95,35 @@
<p>MongoDB powers <a href="https://top.gg/bot/739864286775738399" target="_blank" rel="noopener noreferrer">igni</a> and other projects. Igni also uses some more advanced features, like update streaming to synchronize multiple clients, search, indexes, aggregation pipelines and more.</p> <p>MongoDB powers <a href="https://top.gg/bot/739864286775738399" target="_blank" rel="noopener noreferrer">igni</a> and other projects. Igni also uses some more advanced features, like update streaming to synchronize multiple clients, search, indexes, aggregation pipelines and more.</p>
{:else if selected === "postgresql"} {:else if selected === "postgresql"}
<h2>PostgreSQL</h2> <h2>PostgreSQL</h2>
<p>PostgreSQL is a faster alternative to <span class="a" on:click={() => selected="mysql"}>MySQL</span> with more features.</p> <p>PostgreSQL is a faster alternative to <span class="a" on:click={() => selected="mysql"} on:keydown={() => selected="mysql"}>MySQL</span> with more features.</p>
<p>Currently, I'm working on few projects that use PostgreSQL as their main database and data storage.</p> <p>Currently, I'm working on few projects that use PostgreSQL as their main database and data storage.</p>
{:else if selected === "node"} {:else if selected === "node"}
<h2>Node.js</h2> <h2>Node.js</h2>
<p>Node.js is a javascript runtime for servers and desktop applications (via <span class="a" on:click={() => selected="electron"}>Electron</span>).</p> <p>Node.js is a javascript runtime for servers and desktop applications (via <span class="a" on:click={() => selected="electron"} on:keydown={() => selected="electron"}>Electron</span>).</p>
<p>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.</p> <p>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.</p>
<p>I used Node.js from simply rollup scripts (like used in <a href="http://github.com/danbulant/design" target="_blank" rel="noopener noreferrer">this website</a>), to backend servers and APIs (like in case of Animasher and igni website), to <a href="https://github.com/danbulant/test-x" target="_blank" rel="noopener noreferrer">Linux Window Manager</a> and <a href="https://github.com/danbulant/ssps-bot" target="_blank" rel="noopener noreferrer">Discord Bots</a>.</p> <!-- svelte-ignore security-anchor-rel-noreferrer -->
<p>I used Node.js from simply rollup scripts (used in <a href="http://github.com/danbulant/design" target="_blank" rel="noopener">this website</a>), to backend servers and APIs (in case of Animasher and igni website), to <a href="https://github.com/danbulant/test-x" target="_blank" rel="noopener">Linux Window Manager</a> and <a href="https://github.com/danbulant/ssps-bot" target="_blank" rel="noopener">Discord Bots</a>.</p>
{:else if selected === "deno"} {:else if selected === "deno"}
<h2>Deno</h2> <h2>Deno</h2>
<p>Deno is an alternative to <span class="a" on:click={() => selected="node"}>Node.js</span> by the same authors, written in <span class="a" on:click={() => selected="rust"}>Rust</span>.</p> <p>Deno is an alternative to <span class="a" on:click={() => selected="node"} on:keydown={() => selected="node"}>Node.js</span> by the same authors, written in <span class="a" on:click={() => selected="rust"} on:keydown={() => selected="rust"}>Rust</span>.</p>
<p>I use Deno mostly for simple scripts, as javascript is more familiar than bash/zsh/fish scripting for me. An example can be found <a href="https://github.com/danbulant/colors" target="_blank" rel="noopener noreferrer">here</a>, where I use Deno to programmatically set colors on my PS4 controller based on currently pressed buttons or currently playing Spotify song, on <span class="a" on:click={() => selected="linux"}>Linux</span> (using native Linux APIs).</p> <!-- svelte-ignore security-anchor-rel-noreferrer -->
<p>I use Deno mostly for simple scripts, as javascript is more familiar than bash/zsh/fish scripting for me. An example can be found <a href="https://github.com/danbulant/colors" target="_blank" rel="noopener">here</a>, where I use Deno to programmatically set colors on my PS4 controller based on currently pressed buttons or currently playing Spotify song, on <span class="a" on:click={() => selected="linux"} on:keydown={() => selected="linux"}>Linux</span> (using native Linux APIs).</p>
{:else if selected === "linux"} {:else if selected === "linux"}
<h2>Linux</h2> <h2>Linux</h2>
<p>Linux is a more efficient operating system, originally aimed at personal computers, now dominating all computing except personal computers.</p> <p>Linux is a more efficient operating system, originally aimed at personal computers, now dominating all computing except personal computers.</p>
<p>I use Linux everywhere I can because of it's superior performance and configurability. On phones, I use Android (which is based on the Linux kernel). On my personal computers, I use Arch linux, and, lastly, on my servers I use Ubuntu or Arch linux.</p> <p>I use Linux everywhere I can because of it's superior performance and configurability. On phones, I use Android (which is based on the Linux kernel). On my personal computers, I use Arch linux, and, lastly, on my servers I use Ubuntu or Arch linux.</p>
<p>I already experimented with Linux features, like DBus (for communicating with other applications, like getting current Spotify album and getting the average color from it <a href="https://github.com/danbulant/colors" target="_blank" rel="noopener noreferrer">here</a>), X11 (the most used graphical user interface on Linux, which I talk more about <span class="a" on:click={() => "x11"}>here</span>) and more.</p> <p>I already experimented with Linux features, like DBus (for communicating with other applications, like getting current Spotify album and getting the average color from it <a href="https://github.com/danbulant/colors" target="_blank" rel="noopener noreferrer">here</a>), X11 (the most used graphical user interface on Linux, which I talk more about <span class="a" on:click={() => "x11"} on:keydown={() => "x11"}>here</span>) and more.</p>
<p>I also use Linux for containers in <span class="a" on:click={() => selected="docker"}>Docker</span>.</p> <p>I also use Linux for containers in <span class="a" on:click={() => selected="docker"} on:keydown={() => selected="docker"}>Docker</span>.</p>
{:else if selected === "nginx"} {:else if selected === "nginx"}
<h2>Nginx</h2> <h2>Nginx</h2>
<p>Nginx is a fast reverse proxy and web server.</p> <p>Nginx is a fast reverse proxy and web server.</p>
<p>I use it as a load balancer and reverse proxy for my projects. It usually sits between <span class="a" on:click={() => selected="cloudflare"}>Cloudflare</span> and <span class="a" on:click={() => selected="node"}>Node.JS</span>.</p> <p>I use it as a load balancer and reverse proxy for my projects. It usually sits between <span class="a" on:click={() => selected="cloudflare"} on:keydown={() => selected="cloudflare"}>Cloudflare</span> and <span class="a" on:click={() => selected="node"} on:keydown={() => selected="node"}>Node.JS</span>.</p>
<p>I also used Nomad with Consul to generate nginx configuration and load balance between multiple job instances on my personal server.</p> <p>I also used Nomad with Consul to generate nginx configuration and load balance between multiple job instances on my personal server.</p>
{:else if selected === "cloudflare"} {:else if selected === "cloudflare"}
<h2>Cloudflare</h2> <h2>Cloudflare</h2>
<p><a href="http://cloudflare.com" target="_blank" rel="noopener noreferrer">Cloudflare</a> is a global CDN, DNS server and DDOS protection service.</p> <p><a href="http://cloudflare.com" target="_blank" rel="noopener noreferrer">Cloudflare</a> is a global CDN, DNS server and DDOS protection service.</p>
<p>I use Cloudflare to deflect common internet threats, cache and speed-up my web pages (I'm based in Czechia, but most of my traffic comes from USA, Cloudflare makes it fast for everyone) as well as to host my static websites (including <a href="http://github.com/danbulant/design" target="_blank" rel="noopener noreferrer">this website</a>) on their Cloudflare Pages product.</p> <!-- svelte-ignore security-anchor-rel-noreferrer -->
<p>I use Cloudflare to deflect common internet threats, cache and speed-up my web pages (I'm based in Czechia, but most of my traffic comes from USA, Cloudflare makes it fast for everyone) as well as to host my static websites (including <a href="http://github.com/danbulant/design" target="_blank" rel="noopener">this website</a>) on their Cloudflare Pages product.</p>
<p>I did also experiment with Cloudflare Workers, but I currently don't have a project suitable for that.</p> <p>I did also experiment with Cloudflare Workers, but I currently don't have a project suitable for that.</p>
{/if} {/if}
</div> </div>

3
src/routes/+error.svelte
View file

@ -33,8 +33,7 @@
<Button href="/">Go to my home page</Button> <Button href="/">Go to my home page</Button>
</div> </div>
{#await loadPosts()} {#await loadPosts() then posts}
{:then posts}
{#if posts && posts.length > 0} {#if posts && posts.length > 0}
<div class="my-4 separator text-big">OR</div> <div class="my-4 separator text-big">OR</div>

47
src/routes/+page.svelte
View file

@ -16,7 +16,6 @@
export var data; export var data;
var posts = data.posts; var posts = data.posts;
$: posts = data.posts; $: posts = data.posts;
$: if(typeof window !== "undefined") console.log(posts);
var selectedPost = posts && posts.find(t => !t.categories.includes("experiment")); var selectedPost = posts && posts.find(t => !t.categories.includes("experiment"));
</script> </script>
@ -153,85 +152,85 @@
<span class="text-center" class:text-gray={!technologyHover} class:text-white={technologyHover}>{typeof window !== "undefined" && window.matchMedia("(hover: none) and (pointer: coarse)").matches ? "Touch" : "Click"} each technology for more details about why I'm using it.</span> <span class="text-center" class:text-gray={!technologyHover} class:text-white={technologyHover}>{typeof window !== "undefined" && window.matchMedia("(hover: none) and (pointer: coarse)").matches ? "Touch" : "Click"} each technology for more details about why I'm using it.</span>
<div class="split" class:text-gray={technologyHover} on:mouseenter={() => technologyHover = true} on:mouseleave={() => technologyHover = false}> <div class="split" class:text-gray={technologyHover} on:mouseenter={() => technologyHover = true} on:mouseleave={() => technologyHover = false}>
<ul> <ul>
<li on:click={() => technologySelected = "typescript"}> <li on:click={() => technologySelected = "typescript"} on:keydown={() => technologySelected = "typescript"}>
<img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/typescript/typescript-original.svg" alt="" draggable={false} /> <img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/typescript/typescript-original.svg" alt="" draggable={false} />
Typescript Typescript
</li> </li>
<li on:click={() => technologySelected = "rust"}> <li on:click={() => technologySelected = "rust"} on:keydown={() => technologySelected = "rust"}>
<img class="white" src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/rust/rust-plain.svg" alt="" draggable={false} /> <img class="white" src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/rust/rust-plain.svg" alt="" draggable={false} />
Rust Rust
</li> </li>
<li on:click={() => technologySelected = "x11"}> <li on:click={() => technologySelected = "x11"} on:keydown={() => technologySelected = "x11"}>
<img src="/tech/x11.png" alt="" draggable={false} /> <img src="/tech/x11.png" alt="" draggable={false} />
X11 X11
</li> </li>
<li on:click={() => technologySelected = "cs"}> <li on:click={() => technologySelected = "cs"} on:keydown={() => technologySelected = "cs"}>
<img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/csharp/csharp-plain.svg" alt="" draggable={false} /> <img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/csharp/csharp-plain.svg" alt="" draggable={false} />
C# C#
</li> </li>
<li on:click={() => technologySelected = "git"}> <li on:click={() => technologySelected = "git"} on:keydown={() => technologySelected = "git"}>
<img class="white" src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/github/github-original.svg" alt="" draggable={false} /> <img class="white" src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/github/github-original.svg" alt="" draggable={false} />
Git + GitHub Git + GitHub
</li> </li>
<li on:click={() => technologySelected = "docker"}> <li on:click={() => technologySelected = "docker"} on:keydown={() => technologySelected = "docker"}>
<img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/docker/docker-plain.svg" alt="" draggable={false} /> <img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/docker/docker-plain.svg" alt="" draggable={false} />
Docker + Docker compose Docker + Docker compose
</li> </li>
<li on:click={() => technologySelected = "react"}> <li on:click={() => technologySelected = "react"} on:keydown={() => technologySelected = "react"}>
<img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/react/react-original.svg" alt="" draggable={false} /> <img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/react/react-original.svg" alt="" draggable={false} />
React React
</li> </li>
<li on:click={() => technologySelected = "nomad"}> <li on:click={() => technologySelected = "nomad"} on:keydown={() => technologySelected = "nomad"}>
<img src="/tech/nomad.svg" alt="" draggable={false} /> <img src="/tech/nomad.svg" alt="" draggable={false} />
Nomad Nomad
</li> </li>
<li on:click={() => technologySelected = "consul"}> <li on:click={() => technologySelected = "consul"} on:keydown={() => technologySelected = "consul"}>
<img src="/tech/consul.svg" alt="" draggable={false} /> <img src="/tech/consul.svg" alt="" draggable={false} />
Consul Consul
</li> </li>
<li on:click={() => technologySelected = "discord"}> <li on:click={() => technologySelected = "discord"} on:keydown={() => technologySelected = "discord"}>
<img src="/tech/discord.png" alt="" draggable={false}> <img src="/tech/discord.png" alt="" draggable={false}>
Discord bots Discord bots
</li> </li>
</ul> </ul>
<ul> <ul>
<li on:click={() => technologySelected = "electron"}> <li on:click={() => technologySelected = "electron"} on:keydown={() => technologySelected = "electron"}>
<img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/electron/electron-original.svg" alt="" draggable={false} /> <img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/electron/electron-original.svg" alt="" draggable={false} />
Electron Electron
</li> </li>
<li on:click={() => technologySelected = "svelte"}> <li on:click={() => technologySelected = "svelte"} on:keydown={() => technologySelected = "svelte"}>
<img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/svelte/svelte-original.svg" alt="" draggable={false} /> <img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/svelte/svelte-original.svg" alt="" draggable={false} />
Svelte + SvelteKit Svelte + SvelteKit
</li> </li>
<li on:click={() => technologySelected = "mysql"}> <li on:click={() => technologySelected = "mysql"} on:keydown={() => technologySelected = "mysql"}>
<img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/mysql/mysql-original.svg" alt="" draggable={false} /> <img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/mysql/mysql-original.svg" alt="" draggable={false} />
MySQL/MariaDB MySQL/MariaDB
</li> </li>
<li on:click={() => technologySelected = "mongodb"}> <li on:click={() => technologySelected = "mongodb"} on:keydown={() => technologySelected = "mongodb"}>
<img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/mongodb/mongodb-plain.svg" alt="" draggable={false} /> <img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/mongodb/mongodb-plain.svg" alt="" draggable={false} />
MongoDB MongoDB
</li> </li>
<li on:click={() => technologySelected = "postgresql"}> <li on:click={() => technologySelected = "postgresql"} on:keydown={() => technologySelected = "postgresql"}>
<img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/postgresql/postgresql-plain.svg" alt="" draggable={false} /> <img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/postgresql/postgresql-plain.svg" alt="" draggable={false} />
PostgreSQL PostgreSQL
</li> </li>
<li on:click={() => technologySelected = "node"}> <li on:click={() => technologySelected = "node"} on:keydown={() => technologySelected = "node"}>
<img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/nodejs/nodejs-original.svg" alt="" draggable={false} /> <img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/nodejs/nodejs-original.svg" alt="" draggable={false} />
Node.js Node.js
</li> </li>
<li on:click={() => technologySelected = "deno"}> <li on:click={() => technologySelected = "deno"} on:keydown={() => technologySelected = "deno"}>
<img class="white" src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/denojs/denojs-original.svg" alt="" draggable={false} /> <img class="white" src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/denojs/denojs-original.svg" alt="" draggable={false} />
Deno Deno
</li> </li>
<li on:click={() => technologySelected = "linux"}> <li on:click={() => technologySelected = "linux"} on:keydown={() => technologySelected = "linux"}>
<img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/linux/linux-original.svg" alt="" draggable={false} /> <img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/linux/linux-original.svg" alt="" draggable={false} />
Linux Linux
</li> </li>
<li on:click={() => technologySelected = "nginx"}> <li on:click={() => technologySelected = "nginx"} on:keydown={() => technologySelected = "nginx"}>
<img src="/tech/nginx.svg" alt="" draggable={false} /> <img src="/tech/nginx.svg" alt="" draggable={false} />
Nginx Nginx
</li> </li>
<li on:click={() => technologySelected = "cloudflare"}> <li on:click={() => technologySelected = "cloudflare"} on:keydown={() => technologySelected = "cloudflare"}>
<img src="/tech/cloudflare.png" alt="" draggable={false} /> <img src="/tech/cloudflare.png" alt="" draggable={false} />
Cloudflare Cloudflare
</li> </li>
@ -252,12 +251,6 @@
background: white; background: white;
border-radius: 50%; border-radius: 50%;
} }
/* :global(body) {
background-image: linear-gradient(to top, rgb(242,210,223), transparent min(180vh, 1080px));
}
:global(body.dark) {
background-image: linear-gradient(to top, rgba(94, 61, 74, 0.685), transparent min(180vh, 1080px));
} */
.center { .center {
text-align: center; text-align: center;
} }

4
src/routes/api/posts.json/+server.js
View file

@ -25,4 +25,6 @@ export async function GET(req) {
'Content-Type': 'application/json' 'Content-Type': 'application/json'
} }
}); });
} }
export const prerender = true;

4
src/routes/posts/+page.svelte
View file

@ -46,7 +46,7 @@
{#if tags} {#if tags}
<div class="tags md:flex-col"> <div class="tags md:flex-col">
{#each tags as tag} {#each tags as tag}
<div class="tag" class:selected={selectedTags.includes(tag)} on:click={() => toggle(tag)}> <div class="tag" class:selected={selectedTags.includes(tag)} on:click={() => toggle(tag)} on:keydown={() => toggle(tag)}>
{tag} {tag}
</div> </div>
{/each} {/each}
@ -77,7 +77,7 @@
</div> </div>
</div> </div>
<style> <style lang="postcss">
.parent { .parent {
@apply pt-10 w-max m-auto px-5 gap-5; @apply pt-10 w-max m-auto px-5 gap-5;
} }

4
src/routes/posts/rss.xml/+server.js
View file

@ -45,4 +45,6 @@ export async function GET(req) {
'Content-Type': 'application/rss+xml' 'Content-Type': 'application/rss+xml'
}, },
}); });
} }
export const prerender = true;

11
src/routes/projects/heaventaker/+page.svelte
View file

@ -64,7 +64,7 @@
<div class="bg-img image-michael"></div> <div class="bg-img image-michael"></div>
</div> </div>
<style> <style lang="postcss">
.bg-img { .bg-img {
@apply p-0 m-0 w-full bg-no-repeat bg-fixed; @apply p-0 m-0 w-full bg-no-repeat bg-fixed;
} }
@ -94,13 +94,4 @@
p { p {
@apply my-2; @apply my-2;
} }
.button {
@apply p-3 m-2 rounded border border-dark-400;
}
.button.github {
background: #333333;
}
.button.play {
background: #006db3;
}
</style> </style>