more stuffff

index.html

@@ -44,10 +44,17 @@
         <!-- Home -->
         <div class="jumbotron">
             <div class="container">
-                <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 hobbyist coder and writer from Germany.</p>
-                <p>Look around this website to find out more about my projects and other places you can find me!</p>
+                <div class="row">
+                    <div class="col-md-auto">
+                        <img src="res/me.png" class="rounded-circle" width="200" height="200">
+                    </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 hobbyist coder and writer from Germany.</p>
+                        <p>Look around this website to find out more about my projects and other places you can find me!</p>
+                    </div>
+                </div>
             </div>
         </div>
 

scripts/main.js

@@ -1,5 +1,5 @@
 $(function() {
-    $('.navbar-collapse a').click(function() {
-        $(".navbar-collapse").collapse('hide');
+    $('.navbar-collapse a').on('click', function() {
+        $('.navbar-collapse').collapse('hide');
     });
 });

scripts/projects.js

@@ -5,7 +5,8 @@ const projects = [{
             'Website': 'https://rockbottom.ellpeck.de',
             'API on GitHub': 'https://github.com/RockBottomGame/API'
         },
-        'status': 'In Development'
+        'status': 'In Development',
+        'icon': 'rb'
     },
     {
         'name': 'Actually Additions',
@@ -14,7 +15,8 @@ const projects = [{
             'CurseForge page': 'https://www.ellpeck.de/actadd',
             'Online manual': 'https://www.ellpeck.de/actaddmanual/'
         },
-        'status': 'Handed off'
+        'status': 'Handed off',
+        'icon': 'aa'
     },
     {
         'name': 'Sudoku',
@@ -23,7 +25,8 @@ const projects = [{
             'Play it here': 'https://ellpeck.de/sudoku',
             'Check the source': 'https://github.com/Ellpeck/Sudoku'
         },
-        'status': 'Finished'
+        'status': 'Finished',
+        'icon': 'sudoku'
     },
     {
         'name': 'Memory',
@@ -32,7 +35,8 @@ const projects = [{
             'Play it here': 'https://ellpeck.de/memory',
             'Check the source': 'https://github.com/Ellpeck/Memory'
         },
-        'status': 'Finished'
+        'status': 'Finished',
+        'icon': 'memory'
     },
     {
         'name': 'Crossword Puzzle Generator',
@@ -40,7 +44,8 @@ const projects = [{
         'links': {
             'Play it here': 'https://www.ellpeck.de/crossword/'
         },
-        'status': 'On hold'
+        'status': 'On hold',
+        'icon': 'crossword'
     },
     {
         'name': 'Poem Generator',
@@ -48,7 +53,8 @@ const projects = [{
         'links': {
             'Check it out here': 'https://www.ellpeck.de/poemgen/'
         },
-        'status': 'Cancelled'
+        'status': 'Cancelled',
+        'icon': 'poem'
     }
 ];
 
@@ -56,7 +62,7 @@ let p = '';
 for (project of projects) {
     p += '<div class="card bg-light project">';
     p += '<div class="card-body">';
-    p += '<img class="project-image" src="res/projects/' + project['name'].toLowerCase() + '.png" alt="">';
+    p += '<img class="project-image" src="res/projects/' + project['icon'] + '.png" alt="">';
 
     p += '<h4 class="card-title">' + project['name'] + '</h4>';
     p += '<p class="card-text">' + project['desc'] + '</p>';

style.css

@@ -6,6 +6,7 @@ body {
 
 .main {
     margin-top: 20px;
+    padding-bottom: 200px;
 }
 
 .project {