From e4b29a86593797ab8673a41e1a1472471abc2443 Mon Sep 17 00:00:00 2001 From: Daniel Bulant Date: Sun, 23 Jan 2022 13:06:44 +0100 Subject: [PATCH] finish describing the technologies --- public/cloudflare.png | Bin 0 -> 10551 bytes public/nginx.svg | 1 + public/outside-link.svg | 59 ++++++++++++++ src/App.svelte | 59 ++++++++------ src/components/posts.svelte | 3 + src/components/technologyDetails.svelte | 104 ++++++++++++++++++++---- 6 files changed, 187 insertions(+), 39 deletions(-) create mode 100644 public/cloudflare.png create mode 100644 public/nginx.svg create mode 100644 public/outside-link.svg diff --git a/public/cloudflare.png b/public/cloudflare.png new file mode 100644 index 0000000000000000000000000000000000000000..86b2e16c3f06de4904f854a96138646a781d4be3 GIT binary patch literal 10551 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 literal 0 HcmV?d00001 diff --git a/public/nginx.svg b/public/nginx.svg new file mode 100644 index 0000000..543e1b4 --- /dev/null +++ b/public/nginx.svg @@ -0,0 +1 @@ +NGINX-hex-source-RGB-02 \ No newline at end of file diff --git a/public/outside-link.svg b/public/outside-link.svg new file mode 100644 index 0000000..fac6376 --- /dev/null +++ b/public/outside-link.svg @@ -0,0 +1,59 @@ + + + + + + image/svg+xml + + + + + + + + + + diff --git a/src/App.svelte b/src/App.svelte index efe0514..1f27296 100644 --- a/src/App.svelte +++ b/src/App.svelte @@ -3,7 +3,7 @@ import Button from "./components/button.svelte"; import Contact from "./components/contact.svelte"; import Hero from "./components/hero.svelte"; - // import Posts from "./components/posts.svelte"; + import Posts from "./components/posts.svelte"; import Project from "./components/project.svelte"; import Split from "./components/split.svelte"; import TechnologyDetails from "./components/technologyDetails.svelte"; @@ -24,6 +24,7 @@ } var technologySelected = null; + var technologyHover = false; @@ -53,14 +54,14 @@ igni - The universal discord bot - - Heaventaker - Helltaker fan game + + Animasher - Platform for creating and sharing animations
- - Animasher - Platform for creating and sharing animations + + Heaventaker - Helltaker fan game Mangades - Mangadex downloader @@ -70,8 +71,9 @@

I also worked with the following:

- Click each technology for more details about why I'm using it. -
+ + Click each technology for more details about why I'm using it. +
technologyHover = true} on:mouseleave={() => technologyHover = false}>
  • technologySelected = "typescript"}> @@ -115,50 +117,50 @@
    -
  • +
  • technologySelected = "electron"}> Electron
    • -
  • +
  • technologySelected = "svelte"}> - Svelte + Svelte + SvelteKit
    • -
  • +
  • technologySelected = "mysql"}> MySQL/MariaDB
    • -
  • +
  • technologySelected = "mongodb"}> MongoDB
    • -
  • +
  • technologySelected = "postgresql"}> PostgreSQL
    • -
  • +
  • technologySelected = "node"}> - Node + Node.js
    • -
  • +
  • technologySelected = "deno"}> Deno
    • -
  • +
  • technologySelected = "linux"}> Linux
    • -
  • - - GPT-3 +
  • technologySelected = "nginx"}> + + Nginx
    • -
  • - - Markdown +
  • technologySelected = "cloudflare"}> + + Cloudflare
- +
@@ -185,9 +187,18 @@ .text-center { text-align: center; } + .also > span { + transition: color .3s; + } .text-gray { color: rgb(150, 150, 150); } + .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%)); diff --git a/src/components/posts.svelte b/src/components/posts.svelte index a0c0240..cf2166c 100644 --- a/src/components/posts.svelte +++ b/src/components/posts.svelte @@ -66,10 +66,13 @@ margin: auto; } h2 { + text-align: center; + font-size: 40px; font-weight: 500; max-width: 1360px; margin: auto; margin-top: 50px; + margin-bottom: 20px; } .hero { width: calc(60% - 5px); diff --git a/src/components/technologyDetails.svelte b/src/components/technologyDetails.svelte index f77fee2..02125de 100644 --- a/src/components/technologyDetails.svelte +++ b/src/components/technologyDetails.svelte @@ -6,7 +6,7 @@ * @param {MouseEvent} e */ function close(e) { - if(e.target.href) return; + if(e.target.href || e.target.classList.contains("a")) return; if(shouldClose) selected = null; } @@ -15,21 +15,21 @@
{#if selected === "typescript"}

Typescript

-

Typescript prevents bugs and makes it easier to develop new functionality, as good IDEs will show types without having to go through documentation.

-

Most of my new projects use Typescript. And those that don't have native typescript have types, like for example Commando.

-

Typescript has great integration with Deno, so whenever I use Deno for my scripts, I also use Typescript. An example can be found in this repository.

-

More information about Typescript can be found here.

+

Typescript prevents bugs and makes it easier to develop new functionality, as good IDEs will show types without having to go through documentation.

+

Most of my new projects use Typescript. And those that don't have native Typescript have type definitions, like for example Commando.

+

Typescript has great integration with Deno, so whenever I use Deno for my scripts, I also use Typescript. An example can be found in this repository.

+

More information about Typescript can be found here.

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

Rust

-

Rust 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).

+

Rust 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).

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.

-

To test out my knowledge, I tried to create a simple shell, and although I didn't finish it because I found out I was just reinventing the wheel (Fish shell in this case), I made great progress (it parses essentially everything normal shell should, and supports basic command running).

+

To test out my knowledge, I tried to create a simple shell, and although I didn't finish it because I found out I was just reinventing the wheel (Fish shell in this case), I made great progress (it parses essentially everything normal shell should, and supports basic command running).

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

X11

-

I love reading about how computers work, especially in case of Linux.

+

I love reading about how computers work, especially in case of selected = "linux"}>Linux.

X server (using X11 protocol) is currently the most used window handler in Linux.

-

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 node-x11, which implements only the basic X11 protocol without any abstraction (like what xlib does for C).

-

The code for the simple Window Manager (mostly an experiment) can be found here. This project also uses Vagrant by HashiCorp.

+

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 node-x11, which implements only the basic X11 protocol without any abstraction (like what xlib does for C).

+

The code for the simple Window Manager (mostly an experiment) can be found here. This project also uses Vagrant by HashiCorp.

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

C#

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

@@ -37,10 +37,78 @@ {:else if selected === "git"}

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.

+

My GitHub profile is @danbulant.

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

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"} +

React

+

My first interactive websites were in React, before I moved to selected = "svelte"}>Svelte.

+

An example of such website is Animasher.

+ {:else if selected === "nomad"} +

Nomad

+

Nomad is a distributed job scheduler, mainly for containers (via selected = "docker"}>Docker or Podman). Along with selected = "consul"}>Consul, it serves as a viable alternative to Kubernetes.

+

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.

+

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.

+ {:else if selected === "consul"} +

Consul

+

Consul is used for service discovery and communication, in the HashiCorp stack.

+

I use Consul for health checks inside of my cluster, as well as service discovery and load balancing (although the last part is not needed at my scale yet, I made myself familiar with it in case I needed it).

+ {:else if selected === "discord"} +

Discord

+

Discord is a chat platform, originally aimed at gamers, but now for communities of all types.

+

I created a Discord bot igni (which is at the time of writing in 940 servers), to make running Discord communities easier and more fun.

+

The bot is written in Javascript with the use of Discord.js and a custom Commando framework. It's powered by selected = "mongodb"}>MongoDB, and it's website (which is in the works) uses selected = "sveltekit"}>SvelteKit, selected = "typescript"}>Typescript and Redis.

+ + + {:else if selected === "electron"} +

Electron

+

Electron is a framework for building cross-platform desktop applications using selected = "nodejs"}>Node.JS.

+

I use Electron whenever I want to create a desktop application easily, for example when I made my simply osu!visualizer, or when I ported eDEX-UI to Svelte.

+ {:else if selected === "svelte"} +

Svelte + SvelteKit

+

Svelte is a web framework for building interactive websites easily with smaller size.

+

I use Svelte for nearly all my new websites, including this one, osu!visualizer, Mangades and more.

+

I also use SvelteKit or Routify for sites that require multiple pages.

+ {:else if selected === "mysql"} +

MySQL/MariaDB

+

MySQL is a widely used relational database, using SQL as the query language.

+

I use MariaDB (a fork of MySQL with improved speed) for most of my older projects before I knew about selected = "mongodb"}>MongoDB.

+

MariaDB is used in Animasher, Learner and on my older PHP experiments (which aren't publicly available).

+ {:else if selected === "mongodb"} +

MongoDB

+

MongoDB is a document database, used to store and retrieve documents with arbitrary schemas.

+

MongoDB powers igni and other projects. Igni also uses some more advanced features, like update streaming to synchronize multiple clients, search, indexes, aggregation pipelines and more.

+ {:else if selected === "postgresql"} +

PostgreSQL

+

PostgreSQL is a faster alternative to selected="mysql"}>MySQL with more features.

+

Currently, I'm working on few projects that use PostgreSQL as their main database and data storage.

+ {:else if selected === "node"} +

Node.js

+

Node.js is a javascript runtime for servers and desktop applications (via 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 (like used in this website), to backend servers and APIs (like in case of Learner and igni website), to Linux Window Manager and Discord Bots.

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

Deno

+

Deno is an alternative to selected="node"}>Node.js by the same authors, written in selected="rust"}>Rust.

+

I use Deno mostly for simple scripts, as javascript is more familiar than bash/zsh/fish scripting for me. An example can be found here, where I use Deno to programmatically set colors on my PS4 controller based on currently pressed buttons or currently playing Spotify song, on selected="linux"}>Linux (using native Linux APIs).

+ {:else if selected === "linux"} +

Linux

+

Linux is a more efficient operating system, originally aimed at personal computers, now dominating all computing except personal computers.

+

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.

+

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 here), X11 (the most used graphical user interface on Linux, which I talk more about "x11"}>here) and more.

+

I also use Linux for containers in selected="docker"}>Docker.

+ {:else if selected === "nginx"} +

Nginx

+

Nginx is a fast reverse proxy and web server.

+

I use it as a load balancer and reverse proxy for my projects. It usually sits between selected="cloudflare"}>Cloudflare and selected="node"}>Node.JS.

+

I also used Nomad with Consul to generate nginx configuration and load balance between multiple job instances on my personal server.

+ {:else if selected === "cloudflare"} +

Cloudflare

+

Cloudflare is a global CDN, DNS server and DDOS protection service.

+

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 this website) on their Cloudflare Pages product.

+

I did also experiment with Cloudflare Workers, but I currently don't have a project suitable for that.

{/if}
@@ -66,9 +134,12 @@ height: 100%; width: 100%; z-index: 10; - background: rgba(0,0,0,0.1); border-radius: 15px; cursor: pointer; + background: rgba(255,255,255,0.1); + } + .dark .dialog { + background: rgba(0,0,0,0.1); } h2 { margin-top: 0; @@ -80,12 +151,15 @@ .bottom { color: gray; } - :global(.dark .dialog a) { + :global(.dark .dialog a, .dark .dialog .a) { color: pink; } - a { + a, .a { color: rgb(255, 102, 128); } + .a:hover { + text-decoration: underline; + } :global(.dark .dialog) { background: rgba(255,255,255,0.2); }