mirror of
https://github.com/danbulant/design
synced 2026-06-20 23:01:15 +00:00
finish describing the technologies
This commit is contained in:
Daniel Bulant
parent
bae2265e58
commit
e4b29a8659
6 changed files with 187 additions and 39 deletions
BIN
public/cloudflare.png
Normal file
BIN
public/cloudflare.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 10 KiB |
1
public/nginx.svg
Normal file
1
public/nginx.svg
Normal file
|
|
@ -0,0 +1 @@
|
|||
<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 63.36 73.44"><defs><style>.cls-1{fill:#009639;}.cls-2{fill:#fff;}.cls-3{fill:#999;}</style></defs><title>NGINX-hex-source-RGB-02</title><path class="cls-1" d="M.50272,54.721a3.637,3.637,0,0,0,1.36641,1.35593L29.82192,72.21549l.00087-.00087a3.66793,3.66793,0,0,0,3.71529,0L61.49175,56.07606a3.66568,3.66568,0,0,0,1.85677-3.21619V20.58275l-.00087-.00087A3.66685,3.66685,0,0,0,61.49,17.36481L33.53634,1.22625V1.22538a3.66313,3.66313,0,0,0-3.71268,0v.00087L1.87087,17.36481A3.6653,3.6653,0,0,0,.01235,20.58188l-.00087.00087V52.85987A3.64426,3.64426,0,0,0,.50185,54.721"/><path class="cls-2" d="M22.73015,49.008a3.59488,3.59488,0,0,1-7.18976,0l.00088.00088.00349-24.67727c0-1.91174,1.68924-3.49279,4.08175-3.49279a6.39282,6.39282,0,0,1,4.90021,2.191L25.613,24.32989,40.63124,42.30253V24.432H40.6295a3.59488,3.59488,0,0,1,7.18975,0h-.00087l-.00349,24.67552c0,1.91175-1.69011,3.49279-4.08175,3.49279a6.38857,6.38857,0,0,1-4.90021-2.191L22.7284,31.13659V49.0089Z"/><path class="cls-3" d="M59.97478,66.0341h.45934V65.011h.36335a1.03674,1.03674,0,0,1,.51037.08522.63917.63917,0,0,1,.24255.59513v.20976l.01029.0782a.15781.15781,0,0,1,.007.03278c.00234.01264.00328.01638.0103.022h.42563l-.01546-.029a.29863.29863,0,0,1-.0206-.133c-.00609-.07351-.00609-.13625-.00609-.19431v-.19385a.74194.74194,0,0,0-.14234-.40549.66129.66129,0,0,0-.45325-.25472,1.11884,1.11884,0,0,0,.37787-.12268.56673.56673,0,0,0,.25378-.51505.64008.64008,0,0,0-.40174-.66068,1.99906,1.99906,0,0,0-.71219-.09318h-.90884Zm1.30637-1.40282a1.1882,1.1882,0,0,1-.43686.05806h-.41017V63.7421h.39144a1.1555,1.1555,0,0,1,.552.10161.39413.39413,0,0,1,.17278.37974.40087.40087,0,0,1-.26924.40783m1.334-1.5639a2.30792,2.30792,0,0,0-1.687-.68971,2.373,2.373,0,0,0,0,4.746,2.37724,2.37724,0,0,0,1.687-4.0563m-.24114.23552a1.94359,1.94359,0,0,1,.59559,1.44356,2.03922,2.03922,0,0,1-3.48552,1.45059,2.01311,2.01311,0,0,1-.59279-1.45059A2.04627,2.04627,0,0,1,60.9281,62.697a1.946,1.946,0,0,1,1.44591.60589"/></svg>
|
||||
|
After Width: | Height: | Size: 2 KiB |
59
public/outside-link.svg
Normal file
59
public/outside-link.svg
Normal file
|
|
@ -0,0 +1,59 @@
|
|||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||
<svg
|
||||
xmlns:dc="http://purl.org/dc/elements/1.1/"
|
||||
xmlns:cc="http://creativecommons.org/ns#"
|
||||
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
|
||||
xmlns:svg="http://www.w3.org/2000/svg"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
|
||||
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
|
||||
viewBox="0 -256 1850 1850"
|
||||
id="svg3025"
|
||||
version="1.1"
|
||||
inkscape:version="0.48.3.1 r9886"
|
||||
width="100%"
|
||||
height="100%"
|
||||
sodipodi:docname="external_link_font_awesome.svg">
|
||||
<metadata
|
||||
id="metadata3035">
|
||||
<rdf:RDF>
|
||||
<cc:Work
|
||||
rdf:about="">
|
||||
<dc:format>image/svg+xml</dc:format>
|
||||
<dc:type
|
||||
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
|
||||
</cc:Work>
|
||||
</rdf:RDF>
|
||||
</metadata>
|
||||
<defs
|
||||
id="defs3033" />
|
||||
<sodipodi:namedview
|
||||
pagecolor="#ffffff"
|
||||
bordercolor="#666666"
|
||||
borderopacity="1"
|
||||
objecttolerance="10"
|
||||
gridtolerance="10"
|
||||
guidetolerance="10"
|
||||
inkscape:pageopacity="0"
|
||||
inkscape:pageshadow="2"
|
||||
inkscape:window-width="640"
|
||||
inkscape:window-height="480"
|
||||
id="namedview3031"
|
||||
showgrid="false"
|
||||
inkscape:zoom="0.13169643"
|
||||
inkscape:cx="896"
|
||||
inkscape:cy="896"
|
||||
inkscape:window-x="0"
|
||||
inkscape:window-y="25"
|
||||
inkscape:window-maximized="0"
|
||||
inkscape:current-layer="svg3025" />
|
||||
<g
|
||||
transform="matrix(1,0,0,-1,30.372881,1426.9492)"
|
||||
id="g3027">
|
||||
<path
|
||||
d="M 1408,608 V 288 Q 1408,169 1323.5,84.5 1239,0 1120,0 H 288 Q 169,0 84.5,84.5 0,169 0,288 v 832 Q 0,1239 84.5,1323.5 169,1408 288,1408 h 704 q 14,0 23,-9 9,-9 9,-23 v -64 q 0,-14 -9,-23 -9,-9 -23,-9 H 288 q -66,0 -113,-47 -47,-47 -47,-113 V 288 q 0,-66 47,-113 47,-47 113,-47 h 832 q 66,0 113,47 47,47 47,113 v 320 q 0,14 9,23 9,9 23,9 h 64 q 14,0 23,-9 9,-9 9,-23 z m 384,864 V 960 q 0,-26 -19,-45 -19,-19 -45,-19 -26,0 -45,19 L 1507,1091 855,439 q -10,-10 -23,-10 -13,0 -23,10 L 695,553 q -10,10 -10,23 0,13 10,23 l 652,652 -176,176 q -19,19 -19,45 0,26 19,45 19,19 45,19 h 512 q 26,0 45,-19 19,-19 19,-45 z"
|
||||
id="path3029"
|
||||
inkscape:connector-curvature="0"
|
||||
style="fill:currentColor" />
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 2.2 KiB |
|
|
@ -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;
|
||||
</script>
|
||||
|
||||
<svelte:head>
|
||||
|
|
@ -53,14 +54,14 @@
|
|||
<Project link="https://top.gg/bot/739864286775738399" tags={["Discord bot", "Backend", "Discord.js", "Typescript"]} image="/screenshots/igni.png">
|
||||
<b>igni</b> - The universal discord bot
|
||||
</Project>
|
||||
<Project link="https://danbulant.itch.io/heaventaker" tags={["Website", "Application", "Phaser", "Svelte"]} image="/screenshots/heaventaker.png">
|
||||
<b>Heaventaker</b> - Helltaker fan game
|
||||
<Project tags={["Backend", "Website", "Svelte", "React", "Typescript"]} image="/screenshots/animasher.png">
|
||||
<b>Animasher</b> - Platform for creating and sharing animations
|
||||
</Project>
|
||||
</div>
|
||||
<div>
|
||||
<div class="pad"></div>
|
||||
<Project tags={["Backend", "Website", "Svelte", "React", "Typescript"]} image="/screenshots/animasher.png">
|
||||
<b>Animasher</b> - Platform for creating and sharing animations
|
||||
<Project link="https://danbulant.itch.io/heaventaker" tags={["Website", "Application", "Phaser", "Svelte"]} image="/screenshots/heaventaker.png">
|
||||
<b>Heaventaker</b> - Helltaker fan game
|
||||
</Project>
|
||||
<Project link="https://manga.danbulant.eu" tags={["Website", "Svelte"]} image="/screenshots/mangadex.jfif">
|
||||
<b>Mangades</b> - Mangadex downloader
|
||||
|
|
@ -70,8 +71,9 @@
|
|||
<div class="also relative">
|
||||
<TechnologyDetails bind:selected={technologySelected} />
|
||||
<h2 class="text-center">I also worked with the following:</h2>
|
||||
<span class="text-center text-gray">Click each technology for more details about why I'm using it.</span>
|
||||
<div class="split">
|
||||
<noscript class="text-center text-white">Clicking won't work if javascript is not enabled.</noscript>
|
||||
<span class="text-center" class:text-gray={!technologyHover} class:text-white={technologyHover}>Click each technology for more details about why I'm using it.</span>
|
||||
<div class="split" on:mouseenter={() => technologyHover = true} on:mouseleave={() => technologyHover = false}>
|
||||
<ul>
|
||||
<li on:click={() => technologySelected = "typescript"}>
|
||||
<img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/typescript/typescript-original.svg" alt="" draggable={false} />
|
||||
|
|
@ -115,50 +117,50 @@
|
|||
</li>
|
||||
</ul>
|
||||
<ul>
|
||||
<li>
|
||||
<li on:click={() => technologySelected = "electron"}>
|
||||
<img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/electron/electron-original.svg" alt="" draggable={false} />
|
||||
Electron
|
||||
</li>
|
||||
<li>
|
||||
<li on:click={() => technologySelected = "svelte"}>
|
||||
<img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/svelte/svelte-original.svg" alt="" draggable={false} />
|
||||
Svelte
|
||||
Svelte + SvelteKit
|
||||
</li>
|
||||
<li>
|
||||
<li on:click={() => technologySelected = "mysql"}>
|
||||
<img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/mysql/mysql-original.svg" alt="" draggable={false} />
|
||||
MySQL/MariaDB
|
||||
</li>
|
||||
<li>
|
||||
<li on:click={() => technologySelected = "mongodb"}>
|
||||
<img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/mongodb/mongodb-plain.svg" alt="" draggable={false} />
|
||||
MongoDB
|
||||
</li>
|
||||
<li>
|
||||
<li on:click={() => technologySelected = "postgresql"}>
|
||||
<img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/postgresql/postgresql-plain.svg" alt="" draggable={false} />
|
||||
PostgreSQL
|
||||
</li>
|
||||
<li>
|
||||
<li on:click={() => technologySelected = "node"}>
|
||||
<img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/nodejs/nodejs-original.svg" alt="" draggable={false} />
|
||||
Node
|
||||
Node.js
|
||||
</li>
|
||||
<li>
|
||||
<li on:click={() => technologySelected = "deno"}>
|
||||
<img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/denojs/denojs-original.svg" alt="" draggable={false} />
|
||||
Deno
|
||||
</li>
|
||||
<li>
|
||||
<li on:click={() => technologySelected = "linux"}>
|
||||
<img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/linux/linux-original.svg" alt="" draggable={false} />
|
||||
Linux
|
||||
</li>
|
||||
<li>
|
||||
<img src="/openai.png" alt="" draggable={false} />
|
||||
GPT-3
|
||||
<li on:click={() => technologySelected = "nginx"}>
|
||||
<img src="/nginx.svg" alt="" draggable={false} />
|
||||
Nginx
|
||||
</li>
|
||||
<li>
|
||||
<img src="/markdown.png" alt="" draggable={false} />
|
||||
Markdown
|
||||
<li on:click={() => technologySelected = "cloudflare"}>
|
||||
<img src="/cloudflare.png" alt="" draggable={false} />
|
||||
Cloudflare
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<!-- <Posts /> -->
|
||||
<Posts />
|
||||
<div id="contact">
|
||||
<Contact />
|
||||
</div>
|
||||
|
|
@ -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%));
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
</script>
|
||||
|
|
@ -15,21 +15,21 @@
|
|||
<div class="main">
|
||||
{#if selected === "typescript"}
|
||||
<h2>Typescript</h2>
|
||||
<p><a href="https://typescriptlang.org">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>Most of my new projects use Typescript. And those that don't have native typescript have types, like for example <a href="https://github.com/iceproductions/Commando">Commando</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">in this repository</a>.</p>
|
||||
<p>More information about Typescript can be found <a href="https://typescriptlang.org">here</a>.</p>
|
||||
<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>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>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>
|
||||
{:else if selected === "rust"}
|
||||
<h2>Rust</h2>
|
||||
<p><a href="https://rust-lang.org">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>To test out my knowledge, I tried to create a simple <a href="https://github.com/danbulant/rush">shell</a>, and although I didn't finish it because I found out I was just reinventing the wheel (<a href="https://fishshell.com">Fish shell</a> in this case), I made great progress (it parses essentially everything normal shell should, and supports basic command running).</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>
|
||||
{:else if selected === "x11"}
|
||||
<h2>X11</h2>
|
||||
<p>I love reading about how computers work, especially in case of Linux.</p>
|
||||
<p>I love reading about how computers work, especially in case of <span class="a" on:click={() => 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">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">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 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>
|
||||
{: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>
|
||||
|
|
@ -37,10 +37,78 @@
|
|||
{: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">danbulant</a>.</p>
|
||||
<p>My GitHub profile is @<a href="https://github.com/danbulant" target="_blank" rel="noopener noreferrer">danbulant</a>.</p>
|
||||
{:else if selected === "docker"}
|
||||
<h2>Docker + Docker compose + Docker desktop</h2>
|
||||
<p></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>
|
||||
{: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>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>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"}
|
||||
<h2>Consul</h2>
|
||||
<p>Consul is used for service discovery and communication, in the HashiCorp stack.</p>
|
||||
<p>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).</p>
|
||||
{:else if selected === "discord"}
|
||||
<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>
|
||||
|
||||
|
||||
{: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>
|
||||
{: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>
|
||||
<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>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>
|
||||
<p>MongoDB is a document database, used to store and retrieve documents with arbitrary schemas.</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"}
|
||||
<h2>PostgreSQL</h2>
|
||||
<p>PostgreSQL is a faster alternative to <span class="a" on:click={() => 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>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 Learner 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>
|
||||
{: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>
|
||||
{: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>
|
||||
{: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 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>
|
||||
<p>I did also experiment with Cloudflare Workers, but I currently don't have a project suitable for that.</p>
|
||||
{/if}
|
||||
</div>
|
||||
<div class="bottom">
|
||||
|
|
@ -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);
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue