added a little support section

index.html

@@ -45,6 +45,7 @@
                 <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="#support">Support Me</a>
             </div>
         </div>
     </nav>
@@ -76,7 +77,7 @@
                 Below is a list of all of the projects that I'm working on or that I've made in the past. Check them out if you want!
             </p>
             <div id="project-list">
-                <em>The content that should be here is dynamically generated. Please enable JavaScript if you see this.</em>
+                <noscript><em>The content that should be here is dynamically generated. Please enable JavaScript if you see this.</em></noscript>
             </div>
             <script src="scripts/projects.js"></script>
         </div>
@@ -89,7 +90,7 @@
                 Below is a list of the social networks and websites that I regularly use. The closer to the front of the list they are, the more frequently I use them, generally.
             </p>
             <div id="social-list">
-                <em>The content that should be here is dynamically generated. Please enable JavaScript if you see this.</em>
+                <noscript><em>The content that should be here is dynamically generated. Please enable JavaScript if you see this.</em></noscript>
             </div>
             <script src="scripts/social.js"></script>
         </div>
@@ -103,10 +104,37 @@
                 you!
             </p>
             <div id="about-list">
-                <em>The content that should be here is dynamically generated. Please enable JavaScript if you see this.</em>
+                <noscript><em>The content that should be here is dynamically generated. Please enable JavaScript if you see this.</em></noscript>
             </div>
             <script src="scripts/about.js"></script>
         </div>
+
+        <!-- Support -->
+        <a class="anchor" id="support"></a>
+        <div class="list-display rounded">
+            <h2>Support Me</h2>
+            <p>
+                If you think any of the stuff I work on is interesting, especially my game or one of my Minecraft mods, a great way to show me your appreciation and help me out is to throw me a bit of your precious money!
+                <br>If you want, you can do so using one of the ways below.
+                <br><em>Keep in mind that doing this is, of course, optional. I don't expect you to give me money for what I do, people appreciating it is already really awesome to me. Plus, if you want to, you can always support me by telling other people about me and my projects as well.</em>
+            </p>
+            <div class="row align-items-center">
+                <div class="col-md-auto">
+                    <a class="btn btn-light support-button rounded-0" href="https://patreon.com/Ellpeck"><img src="res/support/patreon.png" class="support-image" alt="">Support me on Patreon</a>
+                </div>
+                <div class="col">
+                    Patreon is a great way of giving me money regularly. You automatically give me a set amount each month, and in return, you can get cool rewards like beta access to my game or visual fanciness for your Minecraft character when using my mods.
+                </div>
+            </div>
+            <div class="row align-items-center">
+                <div class="col-md-auto">
+                    <a class="btn btn-light support-button rounded-0" href="https://paypal.me/Ellpeck"><img src="res/support/paypal.png" class="support-image" alt="">Donate with PayPal</a>
+                </div>
+                <div class="col">
+                    If you prefer the idea of giving me some money as a one-time payment, using PayPal is probably your best bet. It's quick and easy, and it helps me out just the same way.
+                </div>
+            </div>
+        </div>
     </div>
 
     <!-- Footer -->

scripts/social.js

@@ -6,10 +6,6 @@ const socials = [{
         'name': 'Discord',
         'link': 'https://www.ellpeck.de/discord',
     },
-    {
-        'name': 'Patreon',
-        'link': 'http://www.patreon.com/Ellpeck'
-    },
     {
         'name': 'Twitter',
         'link': 'https://twitter.com/Ellpeck'
@@ -56,7 +52,7 @@ let s = '';
 for (social of socials) {
     s += '<a class="btn btn-light social-button rounded-0" href="' + social['link'] + '"">';
     s += '<img class="social-image" src="res/social/' + social['name'].toLowerCase() + '.png" alt="">';
-    s += ' ' + social['name'];
+    s += social['name'];
     s += '</a>'
 }
 $('#social-list').html(s);

style.css

@@ -58,6 +58,18 @@ body {
     float: left;
 }
 
+.support-button {
+    width: 300px;
+    margin: 10px;
+    line-height: 50px;
+}
+
+.support-image {
+    width: 50px;
+    height: 50px;
+    float: left;
+}
+
 #social-list {
     text-align: center;
 }
@@ -113,6 +125,12 @@ body {
         text-indent: -99999px;
         margin: 5px;
     }
+    .support-button {
+        width: auto;
+        overflow: hidden;
+        text-indent: -99999px;
+        margin: 5px;
+    }
     .project-image {
         right: -18px;
         top: -18px;