Fix layouts on home page.

portfolio/templates/default.html

@@ -13,6 +13,7 @@
 
         $partial("templates/navbar.html")$
 
+        <div class="container">
             <header>
                 <h1>$title$</h1>
             </header>
@@ -20,11 +21,13 @@
             <main role="main">
                 $body$
             </main>
+        </div>
 
         <footer class="bg-body-tertiary">
             Site proudly generated by
-            <a href="http://jaspervdj.be/hakyll" target="_blank" rel="noopener noreferrer">Hakyll</a> and <a href="https://getbootstrap.com/" target="_blank" rel="noopener noreferrer">Bootstrap</a>, using <a href="https://www.docker.com/" target="_blank" rel="noopener noreferrer">Docker</a> containers with <a href="https://www.nginx.com/" target="_blank" rel="noopener noreferrer">Nginx</a> on a <a href="https://www.strato.nl/server/vps-linux/" target="_blank" rel="noopener noreferrer">Strato<la> VPS.
+            <a href="http://jaspervdj.be/hakyll" target="_blank" rel="noopener noreferrer">Hakyll</a> and <a href="https://getbootstrap.com/" target="_blank" rel="noopener noreferrer">Bootstrap</a>, using <a href="https://www.docker.com/" target="_blank" rel="noopener noreferrer">Docker</a> containers with <a href="https://www.nginx.com/" target="_blank" rel="noopener noreferrer">Nginx</a> on a <a href="https://www.strato.nl/server/vps-linux/" target="_blank" rel="noopener noreferrer">Strato VPS</a>.
         </footer>
+
     </body>
 
     <script src="/lib/bootstrap-5.3.8-dist/js/bootstrap.bundle.js"></script>

portfolio/templates/index.html

@@ -1,5 +1,3 @@
-<img src="/images/haskell-logo.png" style="float: right; margin: 10px;" />
-
 <p>$welcome$</p>
 
 <p>This part of my website is still under construction, please excuse my mess.</p>
@@ -8,13 +6,14 @@
 
 <p class="text-center">$switcher$: <a href="/nl/index.html">Nederlands</a> | <a href="/jp/index.html">日本語</a> | <a href="/en/index.html">English</a></p>
 
-<div class="row row-cols-1 row-cols-md-2 row-cols-lg-4 g-4 p-1">
+<div class="container text-center">
+  <div class="row row-cols-1 row-cols-md-2 row-cols-lg-2 row-cols-xl-4">
 
     <!-- Japan -->
-  <div class="col">
+    <div class="col d-flex justify-content-center">
-    <div class="card mt-2" style="width: 128px;">
+      <div class="card mt-2" style="width: 256px;">
         <a href="/japan.html">
-        <img src="/images/plamo/model-kits/gundam/hg/smc-2025-gundam/thumbnail.webp" alt="thumbnail" class="card-img-top img-fluid rounded-top" >
+          <img src="/images/home-japan.webp" alt="thumbnail" class="card-img-top img-fluid rounded-top" >
         </a>
         <div class="card-body">
           <p class="card-text text-center">$title-japan$</p>
@@ -23,10 +22,10 @@
     </div>
 
     <!-- Plamo -->
-  <div class="col">
+    <div class="col d-flex justify-content-center">
-    <div class="card mt-2" style="width: 128px;">
+      <div class="card mt-2" style="width: 256px;">
         <a href="/plamo.html">
-        <img src="/images/plamo/model-kits/gundam/hg/smc-2025-gundam/thumbnail.webp" alt="thumbnail" class="card-img-top img-fluid rounded-top" >
+          <img src="/images/home-plamo.webp" alt="thumbnail" class="card-img-top img-fluid rounded-top" >
         </a>
         <div class="card-body">
           <p class="card-text text-center">$title-plamo$</p>
@@ -35,10 +34,10 @@
     </div>
 
     <!-- Radio  -->
-  <div class="col">
+    <div class="col d-flex justify-content-center">
-    <div class="card mt-2" style="width: 128px;">
+      <div class="card mt-2" style="width: 256px;">
         <a href="/radio.html">
-        <img src="/images/plamo/model-kits/gundam/hg/smc-2025-gundam/thumbnail.webp" alt="thumbnail" class="card-img-top img-fluid rounded-top" >
+          <img src="/images/home-radio.webp" alt="thumbnail" class="card-img-top img-fluid rounded-top" >
         </a>
         <div class="card-body">
           <p class="card-text text-center">$title-radio$</p>
@@ -47,21 +46,23 @@
     </div>
 
     <!-- Software -->
-  <div class="col">
+    <div class="col d-flex justify-content-center">
-    <div class="card mt-2" style="width: 128px;">
+      <div class="card mt-2" style="width: 256px;">
         <a href="/software.html">
-        <img src="/images/plamo/model-kits/gundam/hg/smc-2025-gundam/thumbnail.webp" alt="thumbnail" class="card-img-top img-fluid rounded-top" >
+          <img src="/images/home-software.webp" alt="thumbnail" class="card-img-top img-fluid rounded-top" >
         </a>
         <div class="card-body">
           <p class="card-text text-center">$title-software$</p>
         </div>
       </div>
     </div>
+  </div>
 </div>
 
 <hr/>
 
-<div class="row row-cols-1 row-cols-md-2 g-4 p-1">
+<div class="container">
+  <div class="row row-cols-1 row-cols-md-2">
 
     <div class="col">
       <h4>Recent posts</h4>
@@ -77,6 +78,7 @@
       <p>Here you can find more events I attended: <a href="/events.html">events</a>.</p>
     </div>
 
+  </div>
 </div>