dan/design
1
0
Fork 0
mirror of https://github.com/danbulant/design synced 2026-05-19 04:08:46 +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
.replace(/{/g, "{")
.replace(/}/g, "}");
// console.log(node.innerHTML);
// console.log(node.innerHTML
// .replace(/{/g, "{")
// .replace(/}/g, "}"));
Object.assign(node.style, {
margin: "0 -1.5rem",
padding: "0 1.5rem",

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

@ -22,28 +22,32 @@
Prague, Czech Republic
</a>
<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>
<div class="main">
<img src="/tech/github.png" alt="" draggable={false}>
<span class="name">danbulant</span>
</div>
</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>
<div class="main">
<img src="/tech/linkedin.png" class="rounded-1" alt="" draggable={false}>
<span class="name">danbulant</span>
</div>
</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>
<div class="main">
<img src="/tech/discord.png" alt="" draggable={false}>
<span class="name">TechmandanCZ#3372</span>
</div>
</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>
<div class="main">
<img src="/tech/twitter.png" alt="" draggable={false}>
@ -78,7 +82,7 @@
</div>
</div>
<style>
<style lang="postcss">
.platform {
@apply text-gray-400;
}

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

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

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

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

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

@ -16,8 +16,6 @@
let brightness = 0;
$: brightness = brightnessByColor(mix(color, $darkmode ? "#000" : "#fff", 0.5));
$: console.log(brightness, color);
let isDark = false;
$: isDark = brightness < 0.5;
</script>
@ -34,7 +32,7 @@
</div>
</div>
<style>
<style lang="postcss">
.color-shadow {
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 {
@apply text-white;
}
.dark .content {
@apply bg-dark-300/40;
}
</style>

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

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

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

@ -17,21 +17,25 @@
<div class="main">
{#if selected === "typescript"}
<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>
<!-- 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>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"}
<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>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"}
<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>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>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>
<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>
<!-- 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"}
<h2>C#</h2>
<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"}
<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>My GitHub profile is @<a href="https://github.com/danbulant" target="_blank" rel="noopener noreferrer">danbulant</a>.</p>
<p>The source code of this website is available <a href="https://github.com/danbulant/design" target="_blank" rel="noopener noreferrer">here</a></p>
<!-- svelte-ignore security-anchor-rel-noreferrer -->
<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"}
<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>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"}
<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>
{:else if selected === "nomad"}
<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>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"}
@ -62,22 +68,26 @@
<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>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"}
<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>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>
<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>
<!-- 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"}
<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>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>
{:else if selected === "mysql"}
<h2>MySQL/MariaDB</h2>
<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>
{:else if selected === "mongodb"}
<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>
{:else if selected === "postgresql"}
<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>
{:else if selected === "node"}
<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 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"}
<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>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>
<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>
<!-- 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"}
<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>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 also use Linux for containers in <span class="a" on:click={() => selected="docker"}>Docker</span>.</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"} on:keydown={() => selected="docker"}>Docker</span>.</p>
{:else if selected === "nginx"}
<h2>Nginx</h2>
<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>
{:else if selected === "cloudflare"}
<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>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>
{/if}
</div>

3
src/routes/+error.svelte
View file

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

47
src/routes/+page.svelte
View file

@ -16,7 +16,6 @@
export var data;
var posts = data.posts;
$: posts = data.posts;
$: if(typeof window !== "undefined") console.log(posts);
var selectedPost = posts && posts.find(t => !t.categories.includes("experiment"));
</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>
<div class="split" class:text-gray={technologyHover} on:mouseenter={() => technologyHover = true} on:mouseleave={() => technologyHover = false}>
<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} />
Typescript
</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} />
Rust
</li>
<li on:click={() => technologySelected = "x11"}>
<li on:click={() => technologySelected = "x11"} on:keydown={() => technologySelected = "x11"}>
<img src="/tech/x11.png" alt="" draggable={false} />
X11
</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} />
C#
</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} />
Git + GitHub
</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} />
Docker + Docker compose
</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} />
React
</li>
<li on:click={() => technologySelected = "nomad"}>
<li on:click={() => technologySelected = "nomad"} on:keydown={() => technologySelected = "nomad"}>
<img src="/tech/nomad.svg" alt="" draggable={false} />
Nomad
</li>
<li on:click={() => technologySelected = "consul"}>
<li on:click={() => technologySelected = "consul"} on:keydown={() => technologySelected = "consul"}>
<img src="/tech/consul.svg" alt="" draggable={false} />
Consul
</li>
<li on:click={() => technologySelected = "discord"}>
<li on:click={() => technologySelected = "discord"} on:keydown={() => technologySelected = "discord"}>
<img src="/tech/discord.png" alt="" draggable={false}>
Discord bots
</li>
</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} />
Electron
</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} />
Svelte + SvelteKit
</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} />
MySQL/MariaDB
</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} />
MongoDB
</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} />
PostgreSQL
</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} />
Node.js
</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} />
Deno
</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} />
Linux
</li>
<li on:click={() => technologySelected = "nginx"}>
<li on:click={() => technologySelected = "nginx"} on:keydown={() => technologySelected = "nginx"}>
<img src="/tech/nginx.svg" alt="" draggable={false} />
Nginx
</li>
<li on:click={() => technologySelected = "cloudflare"}>
<li on:click={() => technologySelected = "cloudflare"} on:keydown={() => technologySelected = "cloudflare"}>
<img src="/tech/cloudflare.png" alt="" draggable={false} />
Cloudflare
</li>
@ -252,12 +251,6 @@
background: white;
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 {
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'
}
});
}
}
export const prerender = true;

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

@ -46,7 +46,7 @@
{#if tags}
<div class="tags md:flex-col">
{#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}
</div>
{/each}
@ -77,7 +77,7 @@
</div>
</div>
<style>
<style lang="postcss">
.parent {
@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'
},
});
}
}
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>
<style>
<style lang="postcss">
.bg-img {
@apply p-0 m-0 w-full bg-no-repeat bg-fixed;
}
@ -94,13 +94,4 @@
p {
@apply my-2;
}
.button {
@apply p-3 m-2 rounded border border-dark-400;
}
.button.github {
background: #333333;
}
.button.play {
background: #006db3;
}
</style>