A lot works!

templates/main/contact.html

@@ -0,0 +1,22 @@
+{% extends "main/layout.html" %}
+
+{% block main %}
+    <main class="container">
+        <div class="row justify-content-center">
+            <div class="col-12 col-md-6 align-content-center">
+                <h1 class="text-center">Hoi!</h1>
+                <p>Na het behalen van mijn diploma 'Product Design' van de Hogeschool van Amsterdam in februari 2018 ben
+                    ik gaan werken bij een grafisch ontwerpbureau in Haarlem.
+                    Daarnaast ben ik steeds meer bezig met eigen opdrachten, zoals te zien is in dit portfolio.</p>
+                <div class="text-center ">
+                    <a href="https://www.linkedin.com/in/marlousvanleeuwen/"><i
+                            class="social-icon fab fa-linkedin-in fa-3x fa-fw text-dark"></i></a>
+                    <a href="mailto:marlousvleeuwen@live.nl"><i
+                            class="social-icon far fa-envelope fa-3x fa-fw text-dark"></i></a>
+                    <a href="https://www.instagram.com/marlousvleeuwen/"><i
+                            class="social-icon fab fa-instagram fa-3x fa-fw text-dark"></i></a>
+                </div>
+            </div>
+        </div>
+    </main>
+{% endblock %}

templates/main/index.html

@@ -12,7 +12,7 @@
                        data-post_id="{{ post.id }}"
                     >
                         <div class="card border-light">
-                            <img class="card-img" src="https://placeimg.com/400/400/any" alt="random image">
+                            <img class="card-img" src="{{ post.images[0].uri }}" alt="random image">
 
                             <div class="card-img-overlay d-flex align-items-center justify-content-center">
                                 <div class="card-title-bg bg-dark w-100 d-flex align-items-center justify-content-center">

templates/main/modal.html

@@ -1,6 +1,6 @@
 <div class="modal fade" id="detailModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
      aria-hidden="true">
-    <div class="modal-dialog modal-lg modal-dialog-scrollable" role="document">
+    <div class="modal-dialog modal-lg" role="document">
         <div class="modal-content">
             <div class="modal-header">
                 <h5 class="modal-title text-center" id="details-title">Modal title</h5>
@@ -9,7 +9,8 @@
                 </button>
             </div>
             <div class="modal-body">
-                <div id="details-intro"></div>
+                <div id="details-intro" class="font-weight-bold"></div>
+                <div id="details-images"></div>
                 <div id="details-description"></div>
             </div>
         </div>
@@ -19,20 +20,25 @@
 <script>
     $('#detailModal').on('show.bs.modal', function (event) {
         let card = $(event.relatedTarget); // Button that triggered the modal
-        {#let name = card.data('name'); // Extract info from data-* attributes#}
         let post_id = card.data('post_id');
 
         $.post(`/api/post/${post_id}`, data => {
-            if (!data.success) {
-                console.error("No data for post");
-                return;
-            }
-            let modal = $(this);
-            console.log(data);
-            modal.find('#details-title').text(data.post.title);
-            modal.find('#details-intro').text(data.post.intro);
-            modal.find('#details-description').text(data.post.description);
+
+            let post = data.post;
+            console.log(post);
+
+            $('#details-title').text(post.title);
+            $('#details-intro').text(post.intro);
+            $('#details-description').text(post.description);
+
+            $('#details-images').text('');
+            post.images.forEach(image => {
+                $('#details-images').append(`<img src=${image}>`)
+            });
 
         });
     })
+        .on('shown.bs.modal', function () {
+            $('#detailModal').scrollTop(0);
+        });
 </script>

templates/main/nav.html

@@ -1,5 +1,5 @@
 <nav class="navbar navbar-expand-md navbar-light bg-light fixed-top">
-    <a class="navbar-brand" href="{{ url_for("index") }}">Marlous</a>
+    <a class="navbar-brand font-weight-bold" href="{{ url_for("index") }}">Marlous</a>
 
     <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav"
             aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
@@ -8,8 +8,19 @@
 
     <div class="collapse navbar-collapse" id="navbarNav">
         <ul class="navbar-nav">
-            <li class="nav-item active">
-                <a class="nav-link" href="#">Home<span class="sr-only">(current)</span></a>
+            {% set items = [("Product Design", 'product_design'), ("Grafisch", "grafisch"), ("Fotografie", "fotografie")] %}
+            {% for item in items %}
+                <li class="nav-item">
+                    <a class="nav-link {% if item[1] == request.path[1:] %}active{% endif %}"
+                       href={{ url_for("category", category_name=item[1]) }}>
+                        {{ item[0] }}
+                    </a>
+                </li>
+            {% endfor %}
+
+            <li class="nav-item">
+                {% set name = "contact" %}
+                <a class="nav-link {% if name == request.path[1:] %}active{% endif %}" href="{{ url_for("contact") }}">Contact</a>
             </li>
         </ul>
     </div>