Update conf/nginx.conf

.dockerignore

@@ -0,0 +1,4 @@
+*.md
+*.Dockerfile
+.git
+.dockerignore

conf/deploy.sh

@@ -0,0 +1,43 @@
+#!/bin/bash
+
+ROOTIN="/data/in"
+ROOTOUT="/data/out"
+
+echo "Running UglifyJS on /data/in folder"
+uglifyjs-folder "$ROOTIN"  -x ".js" -eo "$ROOTOUT"
+
+echo "Running UglifyCSS"
+CSSIN="/data/in/style/"
+CSSOUT="/data/out/style"
+
+cd $CSSIN
+echo "Changed directory"
+for f in *
+do
+  if [ -f "$f" ]; then
+    uglifycss "$f" --output "$f";
+  fi
+done
+
+echo "Moving 'styles' to 'out'"
+cp -r $CSSIN $CSSOUT
+
+echo "Running html-minifier-terser on /folder"
+HTMLIN="/data/in/"
+HTMLOUT="/data/out"
+html-minifier-terser --collapse-whitespace --remove-comments --file-ext html --input-dir /data/in/ --output-dir /data/out/
+
+#echo "Moving JSON Manifest file from root to output"
+#cat /data/in/manifest.json | jq -c > /data/out/manifest.json
+
+echo "Moving other files folder from in/ to out/"
+cp -r /data/in/images /data/out/images
+cp -r /data/in/error-pages/*.php /data/out/error-pages/
+cp -r /data/in/downloads /data/out/downloads
+cp -r /data/in/*.php /data/out/
+cp -r /data/in/*.ico /data/out/
+cp -r /data/in/page-blocks /data/out/page-blocks
+cp -r /data/in/php /data/out/php
+
+echo "Running GZIP & Brotli on all HTML, JS, CSS, JSON, SVG, TTF, VCF, PUB files"
+find /data/out -type f -name \*.html -or -name \*.vcf -or -name \*.pub -or -name \*.js -or -name \*.css -or -name \*.json -or -name \*.svg -or -name \*.ttf | while read file; do gzip -k -9 $file; brotli -k -q 11 $file; done

conf/nginx.conf

@@ -0,0 +1,57 @@
+user  nginx;
+worker_processes  1;
+
+error_log  /var/log/nginx/error.log notice;
+pid        /var/run/nginx.pid;
+
+
+events {
+    worker_connections  128;
+}
+
+http {
+    include       /etc/nginx/mime.types;
+    default_type  application/octet-stream;
+    log_format  main  '$remote_addr - $remote_user [$time_local] "$request" '
+                      '$status $body_bytes_sent "$http_referer" '
+                      '"$http_user_agent" "$http_x_forwarded_for"';
+    access_log  /var/log/nginx/access.log  main;
+    sendfile        on;
+    keepalive_timeout  65;
+    gzip_static on;
+    brotli_static on;
+
+    server {
+        listen      80;
+        server_name localhost;
+
+        access_log /var/log/nginx/access.log;
+        root /site;
+
+        location ~ /(.git|php|page-blocks) {
+            deny all;
+        }
+
+        location / {
+            index index.php;
+            try_files $uri $uri/ $uri/index.php &uri/index.html =404;
+            break;
+            expires 7d;
+        }
+
+        location ~ \.php$ {
+            try_files $uri =404;
+            fastcgi_split_path_info ^(.+\.php)(/.+)$;
+            fastcgi_pass fpm:9000;
+            fastcgi_index index.php;
+            include fastcgi_params;
+            fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name;
+            fastcgi_param PATH_INFO $fastcgi_path_info;
+        }
+
+        error_page 403 /error-pages/403.php;
+        error_page 404 /error-pages/404.php;
+        error_page 500 501 502 503 504 /error-pages/50x.html;
+
+    }
+}

downloads/vcard.vcf

@@ -7,6 +7,5 @@ EMAIL;CHARSET=UTF-8;type=HOME,INTERNET:fred@fjla.uk
 TEL;TYPE=HOME,VOICE:03331126831
 ADR;CHARSET=UTF-8;TYPE=HOME:;;;Bath;;;United Kingdom
 URL;CHARSET=UTF-8:https://fredboniface.co.uk
-NOTE;CHARSET=UTF-8:vCard generated at vcardmaker.com
 REV:2022-10-06T21:38:40.052Z
-END:VCARD
+END:VCARD

nginx.Dockerfile

@@ -0,0 +1,12 @@
+FROM fedora:latest as compressor
+RUN dnf install brotli nodejs npm jq -y
+RUN npm i uglifyjs-folder uglifycss html-minifier-terser -g
+COPY . /data/in
+RUN bash /data/in/conf/deploy.sh
+
+FROM fholzer/nginx-brotli:latest
+RUN rm /etc/nginx/nginx.conf
+RUN apk update
+RUN apk add --upgrade libxml2 libxslt
+COPY ./conf/nginx.conf /etc/nginx/nginx.conf
+COPY --from=compressor /data/out/ /site/

page-blocks/footer.php

@@ -1,5 +1,5 @@
     <footer>
       <p>
-        &copy; Fred Boniface 2022
+        &copy; Fred Boniface 2022-2023
       </p>
     </footer>

page-blocks/head-img.php

@@ -3,8 +3,13 @@
 <?php 
 if (strcmp($page_title, 'home') == 0){
   echo '<picture id="header_face">';
-  echo '<source srcset="/images/headers/index/face-150.webp" type="image/webp">';
-  echo '<img src="/images/headers/index/face-100.webp" alt="Face image">';
+  echo '<source media="(max-width:600px)" srcset="/images/headers/index/face-200.jxl" type="image/jxl">';
+  echo '<source media="(max-width:600px)" srcset="/images/headers/index/face-200.webp" type="image/webp">';
+  echo '<source media="(max-width:600px)" srcset="/images/headers/index/face-200.jpg" type="image/jpeg">';
+  echo '<source srcset="/images/headers/index/face-500.jxl" type="image/jxl">';
+  echo '<source srcset="/images/headers/index/face-500.webp" type="image/webp">';
+  echo '<source srcset="/images/headers/index/face-500.jpg" type="image/jpeg">';
+  echo '<img src="/images/headers/index/face-500.jpg" alt="Face image">';
   echo '</picture>';
 } ?> <!-- Moved from separate include to inline -->
         <h1><?php echo ucwords($page_title); ?></h1>

php.Dockerfile

@@ -0,0 +1,3 @@
+FROM php:8.2.1-fpm-alpine
+
+COPY . /site

projects.php

@@ -10,10 +10,33 @@
 <?php include "./page-blocks/micro-content.php"; ?>
     <div class="content hide_micro">
       <p>
-        I haven't written any content here yet.
-        <br>
-        In the meantime, <a href="https://git.fjla.uk">visit my Gitea Server</a>.
+        This isn't a complete list of all my projects, but check out my 
+        <a href="https://git.fjla.uk/fred.boniface/">Gitea</a> to see more.
       </p>
+      <p>
+        Most of my projects involve web development of some kind, you can find some software projects below
+        though.  Besides this website, which is written in PHP - mainly for easy 
+        templating rather than for dynamic content - I have created the following:
+      </p>
+      <dl>
+        <dt><a href="https://athena.fb-infra.uk">Athena</a> <a href="https://git.fjla.uk/fred.boniface/athena.fb-infra.uk">Git Repo</a></dt>
+          <dd>Written in PHP, a simple gateway to get easy access to train departures</dd>
+        <dt><a href="https://owlboard.info">OwlBoard</a> <a href="https://git.fjla.uk/OwlBoard">Git Repos</a></dt>
+          <dd>A suite of containerised applications offering live departure boards for UK Rail.
+              Consists of an Express.JS API Server utilising JS and TS, a Python db-manager script, a Go message-broker and a modern PWA frontend
+              written using SvelteKit and utilising compression to reduce payload size, and making use of ServiceWorker caching,
+              to increase reliability over low quality mobile data links.  Designed for Kubernetes deployment.
+          </dd>
+        <dt><a href="https://git.fjla.uk/fred.boniface/trandom">tRandom</a> <a href="https://git.fjla.uk/fred.boniface/tRandom">Git Repo</a></dt>
+          <dd>Written in Python, a simple cross-platform GUI based random number 
+              generator.  Using the tkinter library for the interface.</dd>
+        <dt><a href="https://git.fjla.uk/fred.boniface/map-dots">map-dots</a></dt>
+          <dd>Written in Go, an application that can consume location history data and produce images from the data.  map-dots can be run as a CLI 
+              program or as a web-server offering a simple API.  <a href="https://git.fjla.uk/fred.boniface/map-dots-fetch">map-dots-fetch</a> is 
+              a simple script designed to request images from map-dots when it is being run as a server.
+              Originally designed to provide images that can be used as wallpaper images.
+        </dl>
+        <br>
     </div>
 <?php include "./page-blocks/footer.php"; ?>
   </body>

style/new_style.css

@@ -68,11 +68,11 @@ body {
 @media(min-width:1025px){#home{background-image:url("/images/headers/index/1920.webp")}}
 @media(min-width:1921px){#home{background-image:url("/images/headers/index/2800.webp")}}
 @media(min-width:2801px){#home{background-image:url("/images/headers/index/4096.webp")}}
-#contact{background-color: blue}
-#keys{background-color: blue}
-#projects{background-color: blue}
-#email-safety{background-color: blue}
-#about{background-color: blue}
+#contact{background-color: #a04911}
+#keys{background-color: #a04911}
+#projects{background-color: #a04911}
+#email-safety{background-color: #a04911}
+#about{background-color: #a04911}
 #header_face {
     display: flex;
     position: absolute;
@@ -214,6 +214,28 @@ body {
 .content a:hover {
     color: var(--link-visited-color)
 }
+
+.content dl {
+    width: 90%;
+    margin: auto;
+    margin-top: 20px;
+    margin-bottom: 40px;
+    text-align: center;
+    color: var(--main-text-color);
+    font-family: oxygen, sans-serif;
+    font-weight: normal;
+}
+
+.content dt {
+    margin: auto;
+    font-weight: bolder;
+}
+
+.content dd {
+    margin: auto;
+    padding-bottom: 15px;
+}
+
 /* FOOTER */
 footer {
     position: relative;