4 files changed, 46 insertions, 2 deletions
diff --git a/assets/projects/managerzonderstress.nl.png b/assets/projects/managerzonderstress.nl.png
new file mode 100644
index 0000000..0cc3106
--- /dev/null
+++ b/assets/projects/managerzonderstress.nl.png
diff --git a/assets/projects/rooster.hetmml.nl.png b/assets/projects/rooster.hetmml.nl.png
new file mode 100644
index 0000000..cd25a5b
--- /dev/null
+++ b/assets/projects/rooster.hetmml.nl.png
diff --git a/projects.md b/projects.md
index 9fcc455..ecce816 100644
--- a/projects.md
+++ b/projects.md
@@ -3,5 +3,13 @@ layout: layout
 ---
 Here are some of the projects i'm currently working on:
 
-- **[Metis Rooster](http://rooster.hetmml.nl/)** An improved version of my school schedule page.
-- **[Manager Zonder Stress](http://managerzonderstress.nl/)** A website for my dad.
-\ No newline at end of file
+<div class="projects">
+  <a class="project" href="http://rooster.hetmml.nl" target="_black" rel="noopener">
+    <img src="/assets/projects/rooster.hetmml.nl.png" alt="rooster.hetmml.nl homepage">
+    <header>Metis Rooster</header>
+  </a>
+  <a class="project" href="http://managerzonderstress.nl" target="_black" rel="noopener">
+    <img src="/assets/projects/managerzonderstress.nl.png" alt="managerzonderstress.nl homepage">
+    <header>Manager zonder stress</header>
+  </a>
+</div>
+\ No newline at end of file
diff --git a/style/main.scss b/style/main.scss
index 5afd75a..95883ed 100644
--- a/style/main.scss
+++ b/style/main.scss
@@ -3,6 +3,10 @@
 
 @import 'normalize';
 
+* {
+  box-sizing: border-box;
+}
+
 body {
   background-color: #31363b;
   font-family: 'Roboto Mono', monospace;
@@ -96,4 +100,36 @@ main ul {
       left: 0;
     }
   }
+}
+
+.projects {
+  display: flex;
+
+  .project {
+    padding: 8px;
+    color: black;
+    text-decoration: none;
+    background-color: #93a1a1;
+    margin: 8px;
+    outline: none;
+
+    &:hover, &:focus {
+      background-color: #b8c5c5;
+    }
+
+    img {
+      width: 100%;
+    }
+    
+    header {
+      padding: 8px;
+      font-style: italic;
+    }
+  }
+}
+
+@media screen and (max-width: 425px) {
+  .projects {
+    flex-wrap: wrap;
+  }
 }
 \ No newline at end of file