added a support section to the website

main/.htaccess

@@ -21,6 +21,8 @@ RewriteRule ^foefrenzy/?$ "https://store.steampowered.com/app/1194170/" [R=301,L
 # anchor redirects
 RewriteRule ^projects/?$ "https://ellpeck.de/#projects" [R=301,L,NE]
 RewriteRule ^blog/?$ "https://ellpeck.de/#blog" [R=301,L,NE]
+RewriteRule ^support/?$ "https://ellpeck.de/#support" [R=301,L,NE]
+RewriteRule ^💸/?$ "https://ellpeck.de/#support" [R=301,L,NE]
 
 # actually additions redirects
 RewriteRule ^actaddchangelog/?$ "https://github.com/Ellpeck/ActuallyAdditions/blob/main/update/changelog.md" [R=301,L]

main/_data/support.json

@@ -0,0 +1,25 @@
+[{
+    "name": "☕ Buy me a Coffee",
+    "text": "Ko-fi is a great site that allows you to send me just enough money to buy a coffee. And I love those. You can also use it to send monthly payments, but the other sites in this list are usually better for that.",
+    "links": [{
+        "name": "Take me there",
+        "link": "https://ko-fi.com/ellpeck"
+    }]
+}, {
+    "name": "⭐ Become a Patron",
+    "text": "Patreon allows you to support me on a monthly basis with an amount of money of your choosing. You can also get fun rewards, like player accessories to impress your friends when using my Minecraft mods!",
+    "links": [{
+        "name": "Take me there",
+        "link": "https://patreon.com/Ellpeck"
+    }]
+}, {
+    "name": "💻 Sponsor on GitHub",
+    "text": "GitHub Sponsors is basically Patreon for programmers, and it provides a monthly support option, but it also allows you to make one-time payments. Here, you can get the same rewards as you get on Patreon.",
+    "links": [{
+        "name": "Sponsor monthly",
+        "link": "https://github.com/sponsors/Ellpeck?frequency=recurring"
+    }, {
+        "name": "Sponsor once",
+        "link": "https://github.com/sponsors/Ellpeck?frequency=one-time"
+    }]
+}]

main/_includes/nav/indexnav.html

@@ -1,4 +1,5 @@
 <a class="nav-item nav-link" href="#projects">💻 Projects</a>
 <a class="nav-item nav-link" href="#social">🔗 Social</a>
 <a class="nav-item nav-link" href="#about">💬 About</a>
-<a class="nav-item nav-link" href="#blog">📔 Blog</a>
+<a class="nav-item nav-link" href="#blog">📔 Blog</a>
+<a class="nav-item nav-link" href="#support">💸 Support</a>

main/_includes/support.html

@@ -0,0 +1,31 @@
+<span class="anchor" id="support"></span>
+<div class="list-display rounded">
+    <h1>💸 Support</h1>
+    <p>
+        Most of the projects you know me from, I work on in my free time, but by supporting me, you help out with all of my projects equally. As I'm a student, a bit of extra cash is always helpful for me, and it feels especially good when it comes from something that I enjoy doing a lot.
+        <br><span class="text-muted">Please only support me if you have money to spare. Always take care of your own finances first.</span>
+    </p>
+    <div id="support-list">
+        {% for item in site.data.support %}
+        <div class="card bg-light support-entry rounded-0">
+            <div class="card-body">
+                <h4 class="card-title">{{ item.name }}</h4>
+                <p class="card-text">{{ item.text }}</p>
+
+                {%- for link in item.links -%}
+                <a href="{{ link.link }}" class="card-link btn rounded-0 btn-outline-dark">{{ link.name }}</a>
+                {%- endfor -%}
+            </div>
+        </div>
+        {% endfor %}
+    </div>
+    <script>
+        if (dark) {
+            $("#support-list").find(".btn-outline-dark").each(function () {
+                let e = $(this);
+                e.removeClass("btn-outline-dark");
+                e.addClass("btn-outline-light");
+            });
+        }
+    </script>
+</div>

main/index.html

@@ -10,28 +10,12 @@ nav: nav/indexnav.html
     <div class="container">
         <div class="row">
             <div class="col-md-auto">
-                <img src="./res/me.jpeg" class="rounded-circle" width="200" height="200" id="navbar-image" alt="A cover photo of Ellpeck">
+                <img src="./res/me.jpeg" class="rounded-circle" width="150" height="150" id="navbar-image" alt="A cover photo of Ellpeck">
             </div>
             <div class="col">
                 <h1 class="display-4" id="intro-text"></h1>
                 <script src="./scripts/greet.js"></script>
                 <p class="lead">Welcome to my little website! I'm Ellpeck, a student and programmer from Germany. I do a lot of stuff, actually. My life is pretty busy.</p>
-
-                <!-- Donation buttons -->
-                <div id="donation-buttons">
-                    <a href="https://github.com/sponsors/Ellpeck" class="card-link btn rounded-0 btn-outline-primary">❤️ Sponsor on GitHub</a>
-                    <a href="https://patreon.com/Ellpeck" class="card-link btn rounded-0 btn-outline-primary">⭐ Become a Patron</a>
-                    <a href="https://ko-fi.com/ellpeck" class="card-link btn rounded-0 btn-outline-primary">☕ Buy me a Coffee</a>
-                </div>
-                <script>
-                    if (dark) {
-                        $("#donation-buttons").find(".btn-outline-primary").each(function () {
-                            let e = $(this);
-                            e.removeClass("btn-outline-primary");
-                            e.addClass("btn-outline-info");
-                        });
-                    }
-                </script>
             </div>
         </div>
     </div>
@@ -40,4 +24,5 @@ nav: nav/indexnav.html
 {% include projects.html %}
 {% include social.html %}
 {% include about.html %}
-{% include blog.html %}
+{% include blog.html %}
+{% include support.html %}

main/style/style.css

@@ -234,6 +234,11 @@ pre.highlight {
     padding: 15px;
 }
 
+.support-entry {
+    margin-top: 20px;
+}
+
+
 @media(max-width: 1199px) {
     .blog-title {
         margin-top: 15px;