adding donate page

app/.dockerignore

@@ -0,0 +1,4 @@
+node_modules
+.svelte-kit
+build
+public

app/src/lib/navbar.svelte

@@ -11,6 +11,7 @@
     <NavbarLink link="/">home</NavbarLink>
     <NavbarLink link="/services">services</NavbarLink>
     <NavbarLink link="/blog">blog</NavbarLink>
+    <NavbarLink link="/donate">donate</NavbarLink>
     <NavbarLink type="icon" link="https://github.com/ngn13/website">
       <i class="nf nf-cod-github"></i></NavbarLink>
   </div>
@@ -33,10 +34,10 @@ nav {
 
 div {
   display: flex;
-  overflow: hidden;
   align-items: center;
-  justify-content: center;
-  gap: 1px;
+  flex-wrap: wrap;
+  justify-content: right;
+  gap: 15px;
 }
 
 h3 {

app/src/lib/navbar_link.svelte

@@ -22,7 +22,6 @@
 
 <style>
 a {
-  margin-left: 20px;
   font-weight: 700;
   font-size: 22px;
   text-decoration: none;

app/src/routes/+page.svelte

@@ -25,6 +25,7 @@
         <li>🖥️ I'm interested in cyber security, programming and electronics</li>
         <li>❤️ I love and support Free/Libre and Open Source Software (FLOSS)</li>
         <li>🐧 My GNU/Linux distribution of choice is Artix, however I am currently running Arch</li>
+        <li>🎸 I enjoy listening random stuff (mostly modern rock), so <a href="https://hp.ngn.tf/watch?v=lYBUbBu4W08"><c>here</c></a> is a random song that I like!</li>
       </ul>
     </Card>
 
@@ -33,21 +34,22 @@
       techinal details you may want to know:
       <ul>
         <li>
-          <c><i class="nf nf-seti-svelte"></i></c> 
-          I built the frontend app using SvelteKit
-        </li> 
-        <li>
-          <c><i class="nf nf-md-server"></i></c> 
-          Backend API is written in Go and it's hosted on my server
+          <c><i class="nf nf-md-license"></i></c> 
+          I built this website from scratch and its licensed under <a href="https://www.gnu.org/licenses/agpl-3.0.en.html"><c>AGPLv3</c></a>.
+          All the source is avaliable over on my github.
         </li> 
         <li>
           <c><i class="nf nf-md-file_image"></i></c> 
-          All assets (images etc.) are hosted on my server as well
+          All assets (images etc.) are hosted on my server
         </li>
         <li>
           <c><i class="nf nf-md-eye_off"></i></c> 
           No cloudflare, no CAPTCHAs, no CDNs, this website is %100 privacy friendly
         </li>
+        <li>
+          <c><i class="nf nf-md-server"></i></c> 
+          You can discover other services and pages I host over on the <a href="/services"><c>services page</c></a>
+        </li>
       </ul>
     </Card>
   </div>
@@ -88,20 +90,10 @@
       </ul>
     </Card>
   </div>
-  <Card title="bash donate.sh">
-    If you want to do something stupid with your mone- 
-    <br>
-    I mean if you want to support me and my silly little work, here is my monero wallet address:
-    <br>
-    <br>
-    <code>
-      46q7G7u7cmASvJm7AmrhmNg6ctS77mYMmDAy1QxpDn5w57xV3GUY5za4ZPZHAjqaXdfS5YRWm4AVj5UArLDA1retRkJp47F 
-    </code>
-  </Card>
 </main>
 
 <div class="version">
-  <p>v4.0</p>
+  <p>v4.1</p>
 </div>
 
 <style>
@@ -112,16 +104,6 @@ main{
   padding: 50px;
 }
 
-code {
-  background: var(--dark-two);
-  color: white;
-  border-radius: var(--radius);
-  text-shadow: var(--text-shadow);
-  word-wrap: break-word;
-  white-space: pre-wrap;
-  word-break: break-word;
-}
-
 .pgp {
   word-wrap: break-word;
   white-space: pre-wrap;

app/src/routes/donate/+page.svelte

@@ -0,0 +1,48 @@
+<script>
+  import Header from "../../lib/header.svelte";
+  import Card from "../../lib/card.svelte";
+</script>
+
+<svelte:head>
+  <title>[ngn] | donate</title> 
+  <meta content="[ngn] | donate" property="og:title" />
+  <meta content="Give me all of your life savings" property="og:description" />
+  <meta content="https://ngn.tf" property="og:url" />
+  <meta content="#000000" data-react-helmet="true" name="theme-color" />
+</svelte:head>
+
+<Header>
+  <c>bash</c> 
+  donate.sh 
+</Header>
+
+<main>
+  <Card title="bash donate.sh">
+    If you want more services or if you want to support my work, feel free to donate. I pay around 300 Turkish Liras per month 
+    for all the hosting stuff, so even a small amount will be appreciated! You can send donations to the following XMR address:
+    <br>
+    <br>
+    <code>
+      46q7G7u7cmASvJm7AmrhmNg6ctS77mYMmDAy1QxpDn5w57xV3GUY5za4ZPZHAjqaXdfS5YRWm4AVj5UArLDA1retRkJp47F 
+    </code>
+  </Card>
+</main>
+
+<style>
+main{
+  display: flex;
+  flex-direction: column;
+  gap: 35px;
+  padding: 50px;
+}
+
+code {
+  background: var(--dark-two);
+  color: white;
+  border-radius: var(--radius);
+  text-shadow: var(--text-shadow);
+  word-wrap: break-word;
+  white-space: pre-wrap;
+  word-break: break-word;
+}
+</style>

app/src/routes/services/+page.svelte

@@ -12,16 +12,8 @@
   <meta content="https://ngn.tf" property="og:url" />
   <meta content="#000000" data-react-helmet="true" name="theme-color" />
 </svelte:head>
-<Header><c>ls -l</c> services</Header>
+<Header><c>ls</c> services</Header>
 <main>
-  <div class="info">
-    <h1><i class="nf nf-oct-info"></i></h1>
-    <p>
-      These are free to use FOSS services that I host on my server. 
-      If you want an account on any of these services, or if you are having issues with them, 
-      please send an email to <a href="mailto:services@ngn.tf"><c>services@ngn.tf</c></a>
-    </p>
-  </div>
   {#each data.services as services_list}
     <div class="flexrow">
       {#each services_list as service}
@@ -32,28 +24,6 @@
 </main>
 
 <style>
-.info h1 {
-  margin-right: 40px;
-  animation-name: colorAnimation;
-  animation-duration: 5s;
-  animation-iteration-count: infinite;
-}
-
-.info a {
-  text-decoration: none;
-}
-
-.info {
-  display: flex;
-  flex-direction: row;
-  justify-content: space-between;
-  align-items: center;
-  padding: 30px;
-  color: white;
-  border-radius: var(--radius); 
-  font-size: 25px;
-}
-
 main {
   display: flex;
   flex-direction: column;