Add simple Dockerfile for Hakyll site.

.gitignore

@@ -37,3 +37,34 @@ repl-temp-*
 */michelaben/index.js
 
 */michelaben/node_modules
+
+# Haskell
+
+dist
+dist-*
+cabal-dev
+*.o
+*.hi
+*.hie
+*.chi
+*.chs.h
+*.dyn_o
+*.dyn_hi
+.hpc
+.hsenv
+.cabal-sandbox/
+cabal.sandbox.config
+*.prof
+*.aux
+*.hp
+*.eventlog
+.stack-work/
+cabal.project.local
+cabal.project.local~
+.HTF/
+.ghc.environment.*
+
+# Hakyll
+
+portfolio/_cache/*
+portfolio/_site/*

CHANGELOG.md

@@ -0,0 +1,5 @@
+# Revision history for portfolio
+
+## 0.1.0.0 -- YYYY-mm-dd
+
+* First version. Released on an unsuspecting world.

LICENSE

@@ -0,0 +1,29 @@
+Copyright (c) 2025, Kevin Matsubara
+
+
+Redistribution and use in source and binary forms, with or without
+modification, are permitted provided that the following conditions are met:
+
+    * Redistributions of source code must retain the above copyright
+      notice, this list of conditions and the following disclaimer.
+
+    * Redistributions in binary form must reproduce the above
+      copyright notice, this list of conditions and the following
+      disclaimer in the documentation and/or other materials provided
+      with the distribution.
+
+    * Neither the name of the copyright holder nor the names of its
+      contributors may be used to endorse or promote products derived
+      from this software without specific prior written permission.
+
+THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
+"AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
+LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
+A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
+HOLDER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
+SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
+LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
+DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
+THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+(INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.

README.md

@@ -4,9 +4,7 @@
 
 Docker commands to create the local containers.
 
-`docker build -t pa4kev/portfolio-reactjs-full:latest -f Dockerfile .`
-
-`docker push pa4kev/portfolio-reactjs-full:latest`
+`docker build -t pa4kev/portfolio-reactjs-full:latest -f Dockerfile . && docker push pa4kev/portfolio-reactjs-full:latest`
 
 ## Server (Enaga)
 
@@ -112,13 +110,13 @@ if required, run certbot to set the certificates.
 
 * First stop Nginx, as it is using port 80
 
-``sudo systemctl stop nginx.service``
+`sudo systemctl stop nginx.service`
 
 * Run this container, I doubt that i am understanding how it works properly though.
 
-`docker run -it --rm -p 80:80 --name certbot -v "/etc/letsencrypt:/etc/letsencrypt" -v "/var/lib/letsencrypt:/var/lib/letsencrypt" certbot/certbot certonly --standalone --break-my-certs -d matsubara.nl -d www.matsubara.nl -d pa4kev.nl -d www.pa4kev.nl -d michelaben.nl -d www.michelaben.nl -d gitea.matsubara.nl`
+`docker run -it --rm -p 80:80 --name certbot -v "/etc/letsencrypt:/etc/letsencrypt" -v "/var/lib/letsencrypt:/var/lib/letsencrypt" certbot/certbot certonly --standalone --break-my-certs -d matsubara.nl -d www.matsubara.nl -d pa4kev.nl -d www.pa4kev.nl -d michelaben.nl -d www.michelaben.nl -d gitea.matsubara.nl -d hakyll.matsubara.nl`
 
-`docker run -it --rm --name certbot --net webproxy -v $(pwd)/letsencrypt:/etc/letsencrypt -v $(pwd)/letsencrypt-lib:/var/lib/letsencrypt certbot/certbot certonly --standalone --preferred-challenges http -d matsubara.nl -d www.matsubara.nl -d pa4kev.nl -d www.pa4kev.nl -d michelaben.nl -d www.michelaben.nl -d gitea.matsubara.nl`
+`docker run -it --rm --name certbot --net webproxy -v $(pwd)/letsencrypt:/etc/letsencrypt -v $(pwd)/letsencrypt-lib:/var/lib/letsencrypt certbot/certbot certonly --standalone --preferred-challenges http -d matsubara.nl -d www.matsubara.nl -d pa4kev.nl -d www.pa4kev.nl -d michelaben.nl -d www.michelaben.nl -d gitea.matsubara.nl -d hakyll.matsubara.nl`
 
 * Start Nginx again.
 
@@ -131,6 +129,30 @@ if required, run certbot to set the certificates.
 * `-t` foreground mode
 * `-d` detached mode
 
+### Hakyll site
+
+#### Local:
+
+`docker build -t pa4kev/portfolio-hakyll:latest -f Dockerfile . && docker push pa4kev/portfolio-hakyll:latest`
+
+#### Server:
+
+`docker pull pa4kev/portfolio-hakyll`
+
+`docker run -t -d --name hakyll -p 8081:80 pa4kev/portfolio-hakyll`
+
+### Icon
+
+* [How to convert a square SVG to all-size ICO?](https://graphicdesign.stackexchange.com/questions/77359/how-to-convert-a-square-svg-to-all-size-ico)
+
+`inkscape -w 16 -h 16 -o 16.png master.svg`
+`inkscape -w 32 -h 32 -o 32.png master.svg`
+`inkscape -w 48 -h 48 -o 48.png master.svg`
+
+`sudo apt-get install imagemagick`
+
+`convert 16.png 32.png 48.png icon.ico`
+
 ## Nginx
 
 `sudo vim /etc/nginx/sites-available/matsubara.nl`
@@ -218,6 +240,25 @@ You can now run for development:
 
 `elm make src/Main.elm --output=index.js`
 
+## Haskell
+
+`cabal init --interactive`
+
+`cabal update`
+
+`cabal new-install hakyll`
+
+Add hakyll to `.cabal` file, then build it: `cabal build`.
+
+`~/.local/bin/hakyll-init portfolio`
+
+Inside the `portfolio` directory:
+
+* `cabal new-install`
+
+* `cabal new-run site <command>`, `build` or `watch`
+
+
 ## Documentation
 
 [Create React App](https://github.com/facebook/create-react-app)

app/Main.hs

@@ -0,0 +1,4 @@
+module Main where
+
+main :: IO ()
+main = putStrLn "Hello, Haskell!"

portfolio.cabal

@@ -0,0 +1,82 @@
+cabal-version:      3.0
+-- The cabal-version field refers to the version of the .cabal specification,
+-- and can be different from the cabal-install (the tool) version and the
+-- Cabal (the library) version you are using. As such, the Cabal (the library)
+-- version used must be equal or greater than the version stated in this field.
+-- Starting from the specification version 2.2, the cabal-version field must be
+-- the first thing in the cabal file.
+
+-- Initial package description 'portfolio' generated by
+-- 'cabal init'. For further documentation, see:
+--   http://haskell.org/cabal/users-guide/
+--
+-- The name of the package.
+name:               portfolio
+
+-- The package version.
+-- See the Haskell package versioning policy (PVP) for standards
+-- guiding when and how versions should be incremented.
+-- https://pvp.haskell.org
+-- PVP summary:     +-+------- breaking API changes
+--                  | | +----- non-breaking API additions
+--                  | | | +--- code changes with no API change
+version:            0.1.0.0
+
+-- A short (one-line) description of the package.
+synopsis:           Personal project
+
+-- A longer description of the package.
+-- description:
+
+-- URL for the project homepage or repository.
+homepage:           https://matsubara.nl
+
+-- The license under which the package is released.
+license:            BSD-3-Clause
+
+-- The file containing the license text.
+license-file:       LICENSE
+
+-- The package author(s).
+author:             Kevin Matsubara
+
+-- An email address to which users can send suggestions, bug reports, and patches.
+maintainer:         kevin.matsubara@proton.me
+
+-- A copyright notice.
+-- copyright:
+category:           Web
+build-type:         Simple
+
+-- Extra doc files to be distributed with the package, such as a CHANGELOG or a README.
+extra-doc-files:    CHANGELOG.md
+
+-- Extra source files to be distributed with the package, such as examples, or a tutorial module.
+-- extra-source-files:
+
+common warnings
+    ghc-options: -Wall
+
+executable portfolio
+    -- Import common warning flags.
+    import:           warnings
+
+    -- .hs or .lhs file containing the Main module.
+    main-is:          Main.hs
+
+    -- Modules included in this executable, other than Main.
+    -- other-modules:
+
+    -- LANGUAGE extensions used by modules in this package.
+    -- other-extensions:
+
+    -- Other library packages from which modules are imported.
+    build-depends:    
+        base ^>=4.17.2.1,
+        hakyll,
+
+    -- Directories containing source files.
+    hs-source-dirs:   app
+
+    -- Base language which the package is written in.
+    default-language: Haskell2010

portfolio/Dockerfile

@@ -0,0 +1,7 @@
+FROM nginx:1.29.1-alpine AS build
+
+COPY _site /usr/share/nginx/html
+
+EXPOSE 80
+
+CMD ["nginx", "-g", "daemon off;"]

portfolio/about.rst

@@ -0,0 +1,17 @@
+---
+title: About
+---
+Nullam imperdiet sodales orci vitae molestie. Nunc quam orci, pharetra a
+rhoncus vitae, eleifend id felis. Suspendisse potenti. Etiam vitae urna orci.
+Quisque pellentesque dignissim felis, egestas tempus urna luctus vitae. In hac
+habitasse platea dictumst. Morbi fringilla mattis odio, et mattis tellus
+accumsan vitae.
+
+1. Amamus Unicode 碁
+2. Interdum nex magna.
+
+Vivamus eget mauris sit amet nulla laoreet lobortis. Nulla in diam elementum
+risus convallis commodo. Cras vehicula varius dui vitae facilisis. Proin
+elementum libero eget leo aliquet quis euismod orci vestibulum. Duis rhoncus
+lorem consequat tellus vestibulum aliquam. Quisque orci orci, malesuada porta
+blandit et, interdum nec magna.

portfolio/contact.markdown

@@ -0,0 +1,6 @@
+---
+title: Contact
+---
+
+I live in a small hut in the mountains of Kumano Kodō on Kii Hantō and would not
+like to be contacted.

portfolio/css/default.css

@@ -0,0 +1,141 @@
+html {
+  font-size: 62.5%;
+}
+
+body {
+  font-size: 1.6rem;
+  color: #000;
+}
+
+header {
+  border-bottom: 0.2rem solid #000;
+}
+
+nav {
+  text-align: right;
+}
+
+nav a {
+  font-size: 1.8rem;
+  font-weight: bold;
+  color: black;
+  text-decoration: none;
+  text-transform: uppercase;
+}
+
+footer {
+  margin-top: 3rem;
+  padding: 1.2rem 0;
+  border-top: 0.2rem solid #000;
+  font-size: 1.2rem;
+  color: #555;
+}
+
+h1 {
+  font-size: 2.4rem;
+}
+
+h2 {
+  font-size: 2rem;
+}
+
+article .header {
+  font-size: 1.4rem;
+  font-style: italic;
+  color: #555;
+}
+
+.logo a {
+  font-weight: bold;
+  color: #000;
+  text-decoration: none;
+}
+
+@media (max-width: 319px) {
+  body {
+    width: 90%;
+    margin: 0;
+    padding: 0 5%;
+  }
+  header {
+    margin: 4.2rem 0;
+  }
+  nav {
+    margin: 0 auto 3rem;
+    text-align: center;
+  }
+  footer {
+    text-align: center;
+  }
+  .logo {
+    text-align: center;
+    margin: 1rem auto 3rem;
+  }
+  .logo a {
+    font-size: 2.4rem;
+  }
+  nav a {
+    display: block;
+    line-height: 1.6;
+  }
+}
+
+@media (min-width: 320px) {
+  body {
+    width: 90%;
+    margin: 0;
+    padding: 0 5%;
+  }
+  header {
+    margin: 4.2rem 0;
+  }
+  nav {
+    margin: 0 auto 3rem;
+    text-align: center;
+  }
+  footer {
+    text-align: center;
+  }
+  .logo {
+    text-align: center;
+    margin: 1rem auto 3rem;
+  }
+  .logo a {
+    font-size: 2.4rem;
+  }
+  nav a {
+    display: inline;
+    margin: 0 0.6rem;
+  }
+}
+
+@media (min-width: 640px) {
+  body {
+    width: 60rem;
+    margin: 0 auto;
+    padding: 0;
+  }
+  header {
+    margin: 0 0 3rem;
+    padding: 1.2rem 0;
+  }
+  nav {
+    margin: 0;
+    text-align: right;
+  }
+  nav a {
+    margin: 0 0 0 1.2rem;
+    display: inline;
+  }
+  footer {
+    text-align: right;
+  }
+  .logo {
+    margin: 0;
+    text-align: left;
+  }
+  .logo a {
+    float: left;
+    font-size: 1.8rem;
+  }
+}

portfolio/images/icon/icon.svg

@@ -0,0 +1,62 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   width="71.994011mm"
+   height="71.994011mm"
+   viewBox="0 0 71.994011 71.994011"
+   version="1.1"
+   id="svg1"
+   inkscape:export-filename="bitmap.svg"
+   inkscape:export-xdpi="5.6449142"
+   inkscape:export-ydpi="5.6449142"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <sodipodi:namedview
+     id="namedview1"
+     pagecolor="#ffffff"
+     bordercolor="#000000"
+     borderopacity="0.25"
+     inkscape:showpageshadow="2"
+     inkscape:pageopacity="0.0"
+     inkscape:pagecheckerboard="0"
+     inkscape:deskcolor="#d1d1d1"
+     inkscape:document-units="mm">
+    <inkscape:page
+       x="0"
+       y="0"
+       width="71.994011"
+       height="71.994011"
+       id="page2"
+       margin="0"
+       bleed="0" />
+  </sodipodi:namedview>
+  <defs
+     id="defs1" />
+  <g
+     inkscape:label="Layer 1"
+     inkscape:groupmode="layer"
+     id="layer1"
+     transform="translate(-56.637741,-45.667838)">
+    <circle
+       style="font-variation-settings:'wght' 800;fill:#333333;stroke:#83b5b8;stroke-width:5.362;stroke-dasharray:none;stroke-opacity:1"
+       id="path1"
+       cx="92.634743"
+       cy="81.664841"
+       r="33.316006" />
+    <text
+       xml:space="preserve"
+       style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:66.7693px;font-family:'Liberation Serif';-inkscape-font-specification:'Liberation Serif, Bold';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-east-asian:normal;text-align:start;writing-mode:lr-tb;direction:ltr;text-anchor:start;fill:#00ffff;stroke:none;stroke-width:5.02396"
+       x="75.678185"
+       y="104.64798"
+       id="text1"
+       transform="scale(1.0095987,0.99049256)"><tspan
+         sodipodi:role="line"
+         id="tspan1"
+         style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:66.7693px;font-family:'Liberation Serif';-inkscape-font-specification:'Liberation Serif, Bold';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-east-asian:normal;fill:#00ffff;stroke:none;stroke-width:5.02396"
+         x="75.678185"
+         y="104.64798">λ</tspan></text>
+  </g>
+</svg>

portfolio/index.html

@@ -0,0 +1,12 @@
+---
+title: Home
+---
+
+<img src="/images/haskell-logo.png" style="float: right; margin: 10px;" />
+
+<p>Welcome to my blog.</p>
+
+<hr/>
+
+<h4>Recent posts</h4>
+$partial("templates/recent-posts.html")$

portfolio/index_old.html

@@ -0,0 +1,16 @@
+---
+title: Home
+---
+
+<h2>Welcome</h2>
+
+<img src="/images/haskell-logo.png" style="float: right; margin: 10px;" />
+
+<p>Welcome to my blog!</p>
+
+<p>I've reproduced a list of recent posts here for your reading pleasure:</p>
+
+<h2>Posts</h2>
+$partial("templates/post-list.html")$
+
+<p>…or you can find more in the <a href="/archive.html">archives</a>.</p>

portfolio/portfolio.cabal

@@ -0,0 +1,11 @@
+name:               portfolio
+version:            0.1.0.0
+build-type:         Simple
+cabal-version:      >= 1.10
+
+executable site
+  main-is:          site.hs
+  build-depends:    base == 4.*
+                  , hakyll == 4.16.*
+  ghc-options:      -threaded -rtsopts -with-rtsopts=-N
+  default-language: Haskell2010

portfolio/posts/2015-08-12-spqr.markdown

@@ -0,0 +1,59 @@
+---
+title: S.P.Q.R.
+---
+
+Mauris in lorem nisl. Maecenas tempus facilisis ante, eget viverra nisl
+tincidunt et. Donec turpis lectus, mattis ac malesuada a, accumsan eu libero.
+Morbi condimentum, tortor et tincidunt ullamcorper, sem quam pretium nulla, id
+convallis lectus libero nec turpis. Proin dapibus nisi id est sodales nec
+ultrices tortor pellentesque. Vivamus vel nisi ac lacus sollicitudin vulputate
+ac ut ligula. Nullam feugiat risus eget eros gravida in molestie sapien euismod.
+Nunc sed hendrerit orci. Nulla mollis consequat lorem ac blandit. Ut et turpis
+mauris. Nulla est odio, posuere id ullamcorper sit amet, tincidunt vel justo.
+Curabitur placerat tincidunt varius. Nulla vulputate, ipsum eu consectetur
+mollis, dui nibh aliquam neque, at ultricies leo ligula et arcu. Proin et mi
+eget tellus sodales lobortis. Sed tempor, urna vel pulvinar faucibus, lectus
+urna vehicula ante, at facilisis dolor odio at lorem. Morbi vehicula euismod
+urna, et imperdiet urna ornare vitae.
+
+Sed tincidunt sollicitudin ultrices. In hac habitasse platea dictumst. Morbi
+ligula lectus, egestas at ultricies nec, fringilla et tellus. Duis urna lorem,
+bibendum a ornare sed, euismod sed nunc. Aliquam tempor massa at velit fringilla
+fringilla. Praesent sit amet tempor felis. Maecenas id felis ac velit aliquam
+tempor a sit amet orci. Nunc placerat nulla pellentesque sem commodo cursus.
+Praesent quis sapien orci, quis ultricies augue. Nam vestibulum sem non augue
+semper tincidunt pellentesque ipsum volutpat. Duis congue, nunc a aliquam
+luctus, quam ante convallis nisi, ac pellentesque lacus orci vel turpis. Cum
+sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus
+mus. Suspendisse hendrerit nisl eu felis sagittis faucibus. Nunc eu congue
+lorem. Quisque non nibh nisi, et ultrices massa. Sed vitae erat vitae nulla
+pellentesque fermentum.
+
+Ut diam nunc, consectetur ut ultrices eu, iaculis sed felis. Sed lacinia, odio
+et accumsan luctus, arcu ipsum accumsan erat, sit amet malesuada libero lacus et
+velit. Donec accumsan tristique tristique. Proin a metus magna, vitae mattis
+nisl. Integer a libero ipsum. Mauris faucibus eleifend metus id sodales. Morbi
+ornare, nibh nec facilisis imperdiet, turpis sem commodo lorem, id commodo
+mauris metus vitae justo. Etiam at pellentesque tortor. Proin mollis accumsan
+ligula, nec tempus augue auctor quis. Nulla lacinia, mi quis lobortis auctor,
+nisi diam posuere dui, pulvinar feugiat dui libero eget quam. Fusce eu risus
+nunc, a consectetur orci. Class aptent taciti sociosqu ad litora torquent per
+conubia nostra, per inceptos himenaeos. Maecenas venenatis aliquet orci, a
+ultricies sem facilisis eu. Donec dolor purus, porta condimentum convallis nec,
+dignissim nec libero.
+
+Etiam rutrum ultricies dui, et interdum metus elementum et. Nulla sapien nunc,
+interdum tristique porttitor in, laoreet vitae mi. Ut vehicula auctor mauris sit
+amet bibendum. Phasellus adipiscing mattis libero, eget adipiscing erat
+dignissim at. Vivamus convallis malesuada metus nec cursus. Ut cursus, lorem
+eleifend sollicitudin condimentum, felis tortor sodales augue, ac tempus lacus
+ipsum vitae quam. Vestibulum vitae lacus non tortor vehicula iaculis faucibus
+quis massa.
+
+Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus
+mus. Duis malesuada neque nec ante porttitor accumsan. Suspendisse potenti.
+Aliquam in lacus magna, imperdiet laoreet lectus. Praesent id diam nec ante
+commodo rhoncus nec vel augue. Pellentesque tortor massa, dignissim ut sagittis
+sed, hendrerit vitae nunc. Nam gravida, urna vitae hendrerit rutrum, felis augue
+vulputate tortor, ut varius velit libero nec lectus. In adipiscing massa in est
+scelerisque ullamcorper. Vivamus in nisi metus.

portfolio/posts/2015-10-07-rosa-rosa-rosam.markdown

@@ -0,0 +1,46 @@
+---
+title: Rosa Rosa Rosam
+author: Ovidius
+---
+
+Suspendisse pharetra ullamcorper sem et auctor. Suspendisse vitae tellus eu
+turpis dignissim gravida ut ut tortor. Cum sociis natoque penatibus et magnis
+dis parturient montes, nascetur ridiculus mus. Morbi aliquam sapien quis nisl
+sodales non aliquet nisl iaculis. Curabitur fermentum orci vel sapien
+pellentesque id condimentum metus vehicula. Curabitur turpis purus, scelerisque
+at interdum quis, placerat sit amet tortor. Aliquam erat volutpat.
+
+Integer posuere felis non arcu suscipit ullamcorper. Nam tempus risus venenatis
+orci sagittis eu aliquam ante tincidunt. Aenean vehicula ipsum id sapien
+tincidunt commodo. Aliquam erat volutpat. Curabitur vehicula libero ac turpis
+cursus consectetur. Praesent posuere egestas purus et dapibus. Mauris egestas,
+lectus vitae scelerisque ultricies, metus lorem tempor nisi, sed vehicula tortor
+mauris nec urna. Quisque urna tellus, facilisis at mollis eget, adipiscing in
+nisl. Proin quam arcu, euismod et imperdiet sed, ultricies sed orci.
+
+Nulla malesuada sem eget lectus scelerisque nec rhoncus metus interdum. In dui
+felis, rhoncus id scelerisque eget, vulputate id sem. Nulla facilisi. Vestibulum
+eleifend, metus dignissim lacinia ornare, magna nulla vehicula nisi, sed
+molestie mauris ipsum vel turpis. Class aptent taciti sociosqu ad litora
+torquent per conubia nostra, per inceptos himenaeos. Nulla urna leo, vehicula
+eget dignissim a, hendrerit ut risus. Fusce ultricies elementum placerat. Nam at
+dolor sed nisi mollis sollicitudin vitae at urna. Vestibulum iaculis adipiscing
+eros et mollis.
+
+Phasellus ultricies elit eu risus sagittis eu dictum ante ultrices. Nulla
+congue, augue ac placerat tempor, orci mi luctus nisi, at varius ipsum sem sed
+eros. Vivamus eget velit eget felis posuere ornare. In sed metus non est iaculis
+facilisis dapibus sit amet enim. Aliquam viverra tortor eget neque volutpat in
+auctor urna rutrum. Aliquam ligula augue, congue sit amet rutrum in, semper vel
+nulla. Sed tempus porttitor faucibus. Donec cursus sodales nulla, quis lacinia
+mi vehicula vel. Sed nec purus orci. Nam leo sapien, rutrum a ultrices quis,
+placerat vel ligula. Donec massa quam, pellentesque et molestie nec, hendrerit
+id mauris. In hac habitasse platea dictumst. Cras quis quam sem. Curabitur in
+arcu diam, in interdum mauris.
+
+Proin lorem sapien, iaculis et faucibus nec, dictum sed nunc. Pellentesque in
+purus justo. Vestibulum facilisis rutrum nisi, a egestas nunc suscipit sed. Ut
+quis tortor a arcu bibendum placerat non sed ante. Praesent orci sem, posuere
+sit amet cursus molestie, volutpat ut purus. Curabitur aliquam, purus in
+pharetra viverra, lorem leo aliquam tellus, vel consequat felis neque et mauris.
+Aliquam erat volutpat.

portfolio/posts/2015-11-28-carpe-diem.markdown

@@ -0,0 +1,50 @@
+---
+title: Carpe Diem
+---
+
+Fusce tortor quam, egestas in posuere quis, porttitor vel turpis. Donec
+vulputate porttitor augue at rhoncus. Proin iaculis consectetur sagittis.
+Curabitur venenatis turpis sit amet purus tristique nec posuere risus laoreet.
+Nullam nisi sem, dapibus id semper id, egestas vel arcu. Morbi porttitor ipsum
+placerat erat consequat sed consequat purus feugiat. Donec auctor elit ut risus
+mattis facilisis. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+
+Proin vulputate sapien facilisis leo ornare pulvinar. Fusce tempus massa a risus
+semper iaculis. Suspendisse sollicitudin posuere nunc, sit amet rutrum leo
+facilisis mattis. Sed ornare auctor dui, vitae rutrum neque auctor sit amet.
+Proin ac dui magna. Mauris vehicula interdum augue, nec ultrices libero egestas
+quis. Nunc convallis euismod ipsum, id sollicitudin orci consequat ac. Fusce
+bibendum congue libero, in rutrum nulla congue non. Cras sit amet risus tortor,
+eu pellentesque dui. Phasellus euismod enim non nibh sodales quis consectetur
+lorem laoreet. Vivamus a egestas quam. Curabitur in tortor augue, vitae varius
+tellus. Integer varius, elit ac gravida suscipit, eros erat pellentesque nisi,
+et tristique augue odio id nulla. Aliquam sit amet nunc vel tellus hendrerit
+tempus ac vel sem.
+
+Aenean tincidunt sollicitudin sapien ut porttitor. Curabitur molestie adipiscing
+lorem vel scelerisque. Donec vitae interdum est. Proin rutrum vulputate
+faucibus. Suspendisse sit amet felis odio, non volutpat ante. Sed eu lectus
+quam. Curabitur tristique rhoncus est, vel commodo tortor suscipit semper.
+Maecenas feugiat vestibulum nisi id facilisis. Nulla non tincidunt libero.
+Praesent ultrices interdum commodo. Sed euismod nisl auctor leo ultrices rutrum.
+Aliquam nibh felis, congue molestie blandit at, bibendum at eros. Aenean
+tincidunt, tortor iaculis placerat sollicitudin, lorem justo tempor diam, et
+posuere sapien leo et magna. Quisque vel aliquam mauris.
+
+Proin varius tempus fermentum. Cum sociis natoque penatibus et magnis dis
+parturient montes, nascetur ridiculus mus. Sed tincidunt nunc id magna
+adipiscing non sollicitudin turpis tempor. Etiam vel elit ipsum, quis euismod
+velit. Quisque elementum magna vitae quam venenatis lacinia. Sed at arcu ipsum.
+Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos
+himenaeos. Donec ut lorem ac sapien cursus lacinia sit amet mollis dolor.
+Vivamus tempus odio nec magna faucibus sed hendrerit lorem tempor.
+
+Vestibulum eu nisi arcu. Curabitur nisi risus, fermentum ut lacinia ut, interdum
+nec magna. Nunc aliquet gravida massa, eu aliquam lorem faucibus at. Sed
+sollicitudin volutpat velit id tempor. In nibh justo, pharetra et pretium
+dignissim, tempus in turpis. Phasellus eget lobortis nisl. Phasellus sed
+fermentum diam. Nam tempus pharetra odio, quis congue eros imperdiet eu. Aliquam
+dui eros, hendrerit et vulputate vel, porta eu eros. Nullam nisi dui, commodo
+eget pharetra ut, ornare sit amet nunc. Fusce vel neque urna. Maecenas nulla
+ante, egestas at consequat quis, fermentum a enim. Aliquam id tristique urna.
+Integer augue justo, scelerisque et consectetur id, rhoncus eget enim.

portfolio/posts/2015-12-07-tu-quoque.markdown

@@ -0,0 +1,58 @@
+---
+title: Tu Quoque
+author: Julius
+---
+
+Vestibulum leo turpis, dignissim quis ultrices sit amet, iaculis ac ligula.
+Pellentesque tristique, velit eget scelerisque scelerisque, est dolor ultrices
+arcu, quis ullamcorper justo arcu luctus mauris. Integer congue molestie nisi id
+posuere. Fusce pellentesque gravida tempus. Integer viverra tortor nec eros
+mollis quis convallis sem laoreet. Nulla id libero ac erat varius laoreet. Proin
+sed est est. Curabitur lacinia fermentum lorem, elementum malesuada ipsum
+malesuada ut. Donec suscipit elit id leo vehicula mattis non sed leo. Morbi
+varius eleifend varius. Nulla vestibulum, neque vitae aliquam eleifend, nisi
+tellus placerat nunc, quis suscipit elit turpis eu tortor. Etiam euismod
+convallis lectus quis venenatis. Phasellus laoreet magna in nibh cursus eu
+egestas nulla convallis. Aliquam vel ullamcorper risus. Fusce dictum, massa id
+consequat viverra, nulla ante tristique est, a faucibus nisi enim nec dui. Donec
+metus ligula, condimentum at porttitor eget, lobortis at quam.
+
+Aenean vel libero in magna ultricies congue in a odio. Donec faucibus rutrum
+ornare. Fusce dictum eleifend fermentum. Vestibulum vel nibh a metus porttitor
+rhoncus. Pellentesque id quam neque, eget molestie arcu. Integer in elit vel
+neque viverra ultricies in eget massa. Nam ut convallis est. Pellentesque eros
+eros, sodales non vehicula et, tincidunt ut odio. Cras suscipit ultrices metus
+sit amet molestie. Fusce enim leo, vehicula sed sodales quis, adipiscing at
+ipsum.
+
+Nunc tempor dignissim enim, sed tincidunt eros bibendum quis. Curabitur et dolor
+augue, id laoreet mi. Nulla cursus felis id dui vehicula vitae ornare lorem
+blandit. Cras eget dui nec odio volutpat pharetra. Fusce hendrerit justo justo,
+vel imperdiet enim. Vivamus elit risus, interdum ultrices accumsan eleifend,
+vestibulum vitae sapien. Integer bibendum ullamcorper tristique. Nulla quis odio
+lectus, quis eleifend augue. Integer a ligula mauris. Aenean et tempus tortor.
+Quisque at tortor mi. Vivamus accumsan feugiat est a blandit. Sed vitae enim ut
+dolor semper sodales. Duis tristique, ante et placerat elementum, nulla tellus
+pellentesque sapien, quis posuere velit mi eget nulla. Sed vestibulum nunc non
+est porttitor ut rutrum nibh semper. Pellentesque habitant morbi tristique
+senectus et netus et malesuada fames ac turpis egestas.
+
+Nulla adipiscing ultricies lobortis. Vivamus iaculis nisl vitae tellus laoreet
+vitae aliquet lacus mollis. Phasellus ut lacus urna, sed sagittis ante. Etiam
+consectetur pretium nisl sed dignissim. Pellentesque convallis, nisl eget
+commodo mollis, sem magna consequat arcu, sed pretium ipsum arcu sit amet neque.
+Aliquam erat volutpat. Morbi sed mi sed urna vestibulum placerat vitae vel
+metus. Fusce ac ante at justo pharetra vehicula. Vivamus vel tortor eget augue
+aliquet aliquet at vel odio. Nunc venenatis, magna quis facilisis fringilla,
+augue tellus varius neque, in vulputate est eros ut tortor. Duis lorem neque,
+aliquam congue posuere id, condimentum non dui. Phasellus ut dui massa,
+porttitor suscipit augue. Praesent quis tellus quam, vel volutpat metus. Vivamus
+enim est, aliquam in imperdiet et, sagittis eu ligula. Vestibulum hendrerit
+placerat orci et aliquet. Cras pharetra, dolor placerat lobortis tempor, metus
+odio cursus ligula, et posuere lacus ligula quis dui.
+
+Donec a lectus eu nibh malesuada aliquam. Proin at metus quam, et tincidunt leo.
+Quisque lacus justo, scelerisque sodales pulvinar sed, dignissim ut sapien.
+Vivamus diam felis, adipiscing sollicitudin ultricies id, accumsan ac felis. In
+eu posuere ligula. Suspendisse potenti. Donec porttitor dictum dui id vehicula.
+Integer ante velit, congue id dictum et, adipiscing a tortor.

portfolio/site.hs

@@ -0,0 +1,66 @@
+--------------------------------------------------------------------------------
+{-# LANGUAGE OverloadedStrings #-}
+import           Data.Monoid (mappend)
+import           Hakyll
+
+
+--------------------------------------------------------------------------------
+main :: IO ()
+main = hakyll $ do
+    match "images/**" $ do
+        route   idRoute
+        compile copyFileCompiler
+
+    match "css/*" $ do
+        route   idRoute
+        compile compressCssCompiler
+
+    match (fromList ["about.rst", "contact.markdown"]) $ do
+        route   $ setExtension "html"
+        compile $ pandocCompiler
+            >>= loadAndApplyTemplate "templates/default.html" defaultContext
+            >>= relativizeUrls
+
+    match "posts/*" $ do
+        route $ setExtension "html"
+        compile $ pandocCompiler
+            >>= loadAndApplyTemplate "templates/post.html"    postCtx
+            >>= loadAndApplyTemplate "templates/default.html" postCtx
+            >>= relativizeUrls
+
+    create ["archive.html"] $ do
+        route idRoute
+        compile $ do
+            posts <- recentFirst =<< loadAll "posts/*"
+            let archiveCtx =
+                    listField "posts" postCtx (return posts) `mappend`
+                    constField "title" "Archives"            `mappend`
+                    defaultContext
+
+            makeItem ""
+                >>= loadAndApplyTemplate "templates/archive.html" archiveCtx
+                >>= loadAndApplyTemplate "templates/default.html" archiveCtx
+                >>= relativizeUrls
+
+
+    match "index.html" $ do
+        route idRoute
+        compile $ do
+            posts <- recentFirst =<< loadAll "posts/*"
+            let indexCtx =
+                    listField "posts" postCtx (return posts) `mappend`
+                    defaultContext
+
+            getResourceBody
+                >>= applyAsTemplate indexCtx
+                >>= loadAndApplyTemplate "templates/default.html" indexCtx
+                >>= relativizeUrls
+
+    match "templates/*" $ compile templateBodyCompiler
+
+
+--------------------------------------------------------------------------------
+postCtx :: Context String
+postCtx =
+    dateField "date" "%B %e, %Y" `mappend`
+    defaultContext

portfolio/templates/archive.html

@@ -0,0 +1,2 @@
+Here you can find all my previous posts:
+$partial("templates/post-list.html")$

portfolio/templates/default.html

@@ -0,0 +1,32 @@
+<!doctype html>
+<html lang="en">
+    <head>
+        <meta charset="utf-8">
+        <meta http-equiv="x-ua-compatible" content="ie=edge">
+        <meta name="viewport" content="width=device-width, initial-scale=1">
+        <title>Kevin Matsubara - $title$</title>
+        <link rel="icon" type="image/x-icon" href="/images/icon/icon.ico">
+        <link rel="stylesheet" href="/css/default.css" />
+    </head>
+    <body>
+        <header>
+            <div class="logo">
+                <a href="/">My Hakyll Blog</a>
+            </div>
+            <nav>
+                <a href="/">Home</a>
+                <a href="/plamo.html">Plamo</a>
+            </nav>
+        </header>
+
+        <main role="main">
+            <h1>$title$</h1>
+            $body$
+        </main>
+
+        <footer>
+            Site proudly generated by
+            <a href="http://jaspervdj.be/hakyll" target="_blank" rel="noopener noreferrer">Hakyll</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.
+        </footer>
+    </body>
+</html>

portfolio/templates/post-list.html

@@ -0,0 +1,7 @@
+<ul>
+    $for(posts)$
+        <li>
+            <a href="$url$">$title$</a> - $date$
+        </li>
+    $endfor$
+</ul>

portfolio/templates/post.html

@@ -0,0 +1,11 @@
+<article>
+    <section class="header">
+        Posted on $date$
+        $if(author)$
+            by $author$
+        $endif$
+    </section>
+    <section>
+        $body$
+    </section>
+</article>

portfolio/templates/recent-posts.html

@@ -0,0 +1,7 @@
+<ul>
+    $for(posts)$
+        <li>
+            <a href="$url$">$title$</a> - $date$
+        </li>
+    $endfor$
+</ul>

src/Pages/Plamo/PlamoMain.js

@@ -1,4 +1,5 @@
 import React from 'react';
+import Emoji from '../../Content/Emoji';
 import MarkdownPage from '../markdownPage';
 import { getLanguage } from '../../Language/Language';
 import { getString } from '../../Language/LanguageStrings'

src/Pages/Plamo/showcase/military-airplanes/en/tachikawa-ki-55-trainer.md

@@ -1,6 +1,6 @@
 # Tachikawa Ki-55 trainer
 
-This is the first model airplane I made. It made many flaws to it, but these will be learning moments for the next model.
+This is the first model airplane I made. It has many flaws to it, but these will be learning moments for the next model.
 
 ---
 

src/Pages/Plamo/showcase/military-airplanes/nl/tachikawa-ki-55-trainer.md

@@ -28,7 +28,7 @@ Hier is een foto uit het boek, op pagina 252: *Tachikawa Ki-55 of the Kumagaya F
 
 ![boek referentie van ki-55](/images/plamo/showcase/military-airplanes/tachikawa-ki-55-trainer/screenshot-Japanese-aircraft-of-the-Pacific-War-by-Francillon-Rene-J)
 
-Enkele specificaties volgdens de instructies die bij de kit zaten:
+Enkele specificaties volgens de instructies die bij de kit zaten:
 
 
 * Bemanning: 2

src/Pages/Software/SoftwareMain.js

@@ -19,6 +19,7 @@ const SoftwareMain = () => {
             <ul>
             <li><a href={'/' + language + '/software/elm/'}>Elm</a></li>
             <li><a href={'/' + language + '/software/haskell/'}>Haskell</a></li>
+            <li><a href={'https://hakyll.matsubara.nl/'}>(λ) - Hakyll blog (<i>work in progress</i>)</a></li>
             </ul>
             <hr />