added pictures/gallery. organized media better

content/blog/_index.md

@@ -3,4 +3,5 @@ title = "Blogs"
 sort_by = "date"
 template = "blog.html"
 page_template = "blog-page.html"
+in_search_index = true
 +++

content/blog/first.md

@@ -1,10 +1,21 @@
 +++
 title = "My first post"
-description = "moving from an abandond react website which hasn't been updated in over 4 years to Zola"
+description = "Moving from an abandond react website which hasn't been updated in over 4 years to Zola"
 date = 2026-01-16
+updated = 2026-01-20
 
 [taxonomies]
 tags = ["web", "zola"]
 +++
 
 
+
+I finally had the motivation (and time) to update the site. 
+
+
+
+## Style
+
+I borrowed *heavily* from the style and theming used in [without.boats](https://without.boats/)
+
+I also took insparation from [mcyoung.xyc](https://mcyoung.xyz) 

content/crafts/charcoal/index.md

@@ -9,12 +9,12 @@ tags = ["charcoal", "crafty"]
 
 So, for no apparent reason, I one day decided it would be interesting to start seeing what different organic objects would look like charcoalized. Here is a collection of ones which turned out interesting.
 
-{{image(src="images/charcoal/onion.jpg", caption="A charcoalized onion with the layers clearly defined")}}
-{{image(src="images/charcoal/apple.jpg", caption="Charcoalized apple showing a clear silhouette and shape of an apple but with blistered and flaking skin")}}
+{{image(src="/crafts/charcoal/onion.jpg", caption="A charcoalized onion with the layers clearly defined")}}
+{{image(src="/crafts/charcoal/apple.jpg", caption="Charcoalized apple showing a clear silhouette and shape of an apple but with blistered and flaking skin")}}
 
 I think the garlic was my favourite of all. Though the structure did not hold up well at all, the cloves inside developed this iridescent colour akin to an oil spill or oxidation on metals 
 
-{{image(src="images/charcoal/garlic.jpg", caption="a lump of black material loosely resembling garlic with brilliant sections of blue, purple, and gold")}}
+{{image(src="/crafts/charcoal/garlic.jpg", caption="a lump of black material loosely resembling garlic with brilliant sections of blue, purple, and gold")}}
 
 
 bucket list of items I want to charcoalize

content/crafts/qtip-cube/index.md

@@ -9,13 +9,13 @@ tags = ["6-sided", "crafty"]
 
 As promised here is the cube.
 
-{{image(src="images/qtip/cube.jpg", caption="A near cube made entirely out of QTips that is 10x10x11 (-2) in size. No glue added")}}
+{{image(src="crafts/qtip-cube/cube.jpg", caption="A near cube made entirely out of QTips that is 10x10x11 (-2) in size. No glue added")}}
 
 You might wonder how to construct such an object yourself. 
 
 What ended up working for me was laying out a bottom row of QTips with a width just slightly longer than the length of the QTips' shaft.
 
-{{image(src="images/qtip/step.jpg", caption="A bottom layer of QTips showing the width compared to the shaft length of a QTip")}}
+{{image(src="crafts/qtip-cube/step.jpg", caption="A bottom layer of QTips showing the width compared to the shaft length of a QTip")}}
 
 Continue alternating the direction in which you align the QTips until you have stacked enough layers to be slightly higher than the length of the QTips' shaft.
 

content/crafts/spoon.md

@@ -1,22 +0,0 @@
-+++
-title = "Spoon"
-description = "I went from a tree all the way to a spoon in a few weeks"
-date = 2026-01-16
-
-[taxonomies]
-tags = ["wooden", "crafty"]
-+++
-
-
-
-Unfortunately I do not have a picture of the tree nor a picture of the un stripped log.
-
-
-{{image(src="images/spoon/log.jpg", caption="A stripped and dried log with a huge split down the middle from drying too fast")}}
-
-
-{{image(src="images/spoon/split.jpg", caption="A extremely rough cutting of the spon.")}}
-{{image(src="images/spoon/roughin.jpg", caption="")}}
-{{image(src="images/spoon/refined.jpg", caption="")}}
-{{image(src="images/spoon/shape_finished.jpg", caption="")}}
-{{image(src="images/spoon/charred.jpg", caption="")}}

content/crafts/spoon/index.md

@@ -0,0 +1,22 @@
++++
+title = "Spoon"
+description = "I went from a tree all the way to a spoon in a few weeks"
+date = 2026-01-16
+
+[taxonomies]
+tags = ["wooden", "crafty"]
++++
+
+
+
+Unfortunately I do not have a picture of the tree nor a picture of the un stripped log.
+
+
+{{image(src="crafts/spoon/log.jpg", caption="A stripped and dried log with a huge split down the middle from drying too fast")}}
+
+
+{{image(src="crafts/spoon/split.jpg", caption="A extremely rough cutting of the spon.")}}
+{{image(src="crafts/spoon/roughin.jpg", caption="")}}
+{{image(src="crafts/spoon/refined.jpg", caption="")}}
+{{image(src="crafts/spoon/shape_finished.jpg", caption="")}}
+{{image(src="crafts/spoon/charred.jpg", caption="")}}

content/pictures/711.md

@@ -0,0 +1,11 @@
++++
+title = "711"
+description = "The back of 7-11 lit up from behind the camera by a high-pressure sodium vapour lamp. To the left, a faded sign says **CARBON DIOXIDE filling station** with two metal barrels below. In the center of the frame, white graffiti saying 'Haiii :3' is seen alongside an area which has been cleaned, presumably of previous graffiti. "
+date = 2023-08-08
+
+[taxonomies]
+tags = ["photo", "sodium vapour", "industrial"]
+
+[extra]
+picture_src = "/pictures/711.jpg"
++++

content/pictures/_index.md

@@ -1,6 +1,6 @@
 +++
 title = "Pictures"
 sort_by = "date"
-template = "blog.html"
-page_template = "blog-page.html"
+template = "gallery.html"
+page_template = "picture.html"
 +++

content/pictures/britannia.md

@@ -0,0 +1,14 @@
++++
+title = "Britannia"
+description = """Old and decaying industrial sprawl built atop a rocky mountainside. 
+Stalactites growing from overhangs, taking on bright blue and white colours.
+Bright green moss growing on rock faces and eroding concrete. 
+ Inside the Britannia Mines Concentrator."""
+date = 2024-06-14
+
+[taxonomies]
+tags = ["photo", "industrial", "nature"]
+
+[extra]
+picture_src = "/pictures/britannia.jpg"
++++

content/pictures/chatterbox.md

@@ -0,0 +1,11 @@
++++
+title = "Chatterbox"
+description = "A close-up of my childhood cat Chatterbox Pumpkin TenBroeck, an orange tabby with a white nose, chin, and paws, who, despite the name, never really meowed. Lying in my bed, looking directly into the camera."
+date = 2015-10-08
+
+[taxonomies]
+tags = ["photo", "cat"]
+
+[extra]
+picture_src = "/pictures/chatterbox.jpg"
++++

content/pictures/globe_thistle.md

@@ -0,0 +1,11 @@
++++
+title = "Globe Thistle"
+description = "A close-up of a purple globe thistle flower with the background blurred."
+date = 2017-06-26
+
+[taxonomies]
+tags = ["photo", "nature"]
+
+[extra]
+picture_src = "/pictures/globe_thistle.jpg"
++++

content/pictures/hs_water_1.md

@@ -0,0 +1,11 @@
++++
+title = "High Speed Water 1"
+description = "Water spraying from the side of a broken bathroom faucet. Two streams of larger droplets flow to the left."
+date = 2017-04-05
+
+[taxonomies]
+tags = ["photo", "high speed", "water"]
+
+[extra]
+picture_src = "/pictures/hs_water_1.jpg"
++++

content/pictures/hs_water_2.md

@@ -0,0 +1,11 @@
++++
+title = "High Speed Water 2"
+description = "Water spraying from the side of a broken bathroom faucet. Small droplets spraying in many directions."
+date = 2017-04-05
+
+[taxonomies]
+tags = ["photo", "high speed", "water"]
+
+[extra]
+picture_src = "/pictures/hs_water_2.jpg"
++++

content/pictures/hs_water_3.md

@@ -0,0 +1,11 @@
++++
+title = "High Speed Water 3"
+description = "Water spraying out of a kitchen faucet captured at a high shutter speed. Two sheet-like streams, one flat and thin, and the other uneven and wavy, caught in the center of the frame. A purpleish light is seen on the right edge of the center stream reflecting into the camera."
+date = 2017-04-06
+
+[taxonomies]
+tags = ["photo", "high speed", "water"]
+
+[extra]
+picture_src = "/pictures/hs_water_3.jpg"
++++

content/pictures/nairn_falls.md

@@ -0,0 +1,11 @@
++++
+title = "Nairn Falls"
+description = "A rocky formation with many holes and crevices with rapid flowing water running through a series of channels both above and underground, formed by rapid erosion."
+date = 2024-06-16
+
+[taxonomies]
+tags = ["photo", "nature", "water"]
+
+[extra]
+picture_src = "/pictures/nairn_falls.jpg"
++++

content/pictures/reflection.md

@@ -0,0 +1,11 @@
++++
+title = "Reflection"
+description = "The reflection of a local playground through a puddle under the swingset after heavy rainfall."
+date = 2023-07-29
+
+[taxonomies]
+tags = ["photo", "nature", "water"]
+
+[extra]
+picture_src = "/pictures/reflection.jpg"
++++

content/pictures/seals.md

@@ -0,0 +1,11 @@
++++
+title = "Seals"
+description = "A red and white buoy with over 10 seals and/or sealions all lying atop it."
+date = 2024-01-02
+
+[taxonomies]
+tags = ["photo", "water", "nature"]
+
+[extra]
+picture_src = "/pictures/seals.jpg"
++++

content/pictures/theodore.md

@@ -0,0 +1,11 @@
++++
+title = "Theodore"
+description = "A picture of Theodore the tug boat docked at Port Dalhousie"
+date = 2023-08-31
+
+[taxonomies]
+tags = ["photo"]
+
+[extra]
+picture_src = "/pictures/theodore.jpg"
++++

content/pictures/zack.md

@@ -0,0 +1,11 @@
++++
+title = "Zack"
+description = "A close-up of my most beloved childhood cat Zack, an orange tabby with a white chin. Sitting on my desk looking directly into the camera with my computer lit up behind him glowing purple, red, and blue."
+date = 2015-10-08
+
+[taxonomies]
+tags = ["photo", "cat"]
+
+[extra]
+picture_src = "/pictures/zack.jpg"
++++

content/projects/kernel/index.md

@@ -9,4 +9,4 @@ tags = ["rust", "embedded", "risc-v"]
 https://github.com/ParkerTenBroeck/milkv-duos-rs
 
 
-{{ video(src="/videos/kernel/os_demo.mp4", controls=true, caption="meow")}}
+{{ video(src="/projects/kernel/os_demo.mp4", controls=true, caption="meow")}}

content/projects/rasterizer/index.md

@@ -11,6 +11,6 @@ tags = ["C++", "graphics"]
 [GitHub](https://github.com/ParkerTenBroeck/3P93)
 
 
-{{ video(src="/videos/rasterizer/halo.mp4", controls=true, autoplay=true, loop=true, caption="meow")}}
-{{ video(src="/videos/rasterizer/bricks.mp4", controls=true, autoplay=true, loop=true, caption="meow")}}
-{{ video(src="/videos/rasterizer/wavy.mp4", controls=true, autoplay=true, loop=true, caption="meow")}}
+{{ video(src="projects/rasterizer/halo.mp4", controls=true, autoplay=true, loop=true, caption="meow")}}
+{{ video(src="projects/rasterizer/bricks.mp4", controls=true, autoplay=true, loop=true, caption="meow")}}
+{{ video(src="projects/rasterizer/wavy.mp4", controls=true, autoplay=true, loop=true, caption="meow")}}

remove_metadata.sh

@@ -1 +1 @@
-exiftool -all= -tagsfromfile @ -Orientation -overwrite_original -r ./static/images ./static/videos
+exiftool -q -all= -tagsfromfile @ -Orientation -overwrite_original -r ./static/ ./content/

sass/blog.scss

@@ -1,8 +1,6 @@
-.blog-page {
-    .title {
+.title {
     h1 {
         font-size: 2.2em;
     }
     padding-bottom: 2em;
-    }
 }

sass/gallery.scss

@@ -0,0 +1,17 @@
+
+
+.gallery {
+    gap: 0.5rem;     
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
+
+    a {
+        flex: 1 1 10em;
+        img{
+            width: 100%;
+            height: 100%;
+            object-fit: cover;
+            display: block;
+        }
+    }
+}

sass/style.scss

@@ -4,6 +4,7 @@
 @use "blog.scss";
 @use "fonts.scss";
 @use "lightbox.scss";
+@use "gallery.scss";
 
 .z-code{
     overflow-x: auto;
@@ -43,6 +44,11 @@ a {
   &:hover {
     text-decoration-color: var(--primary);
   }
+
+  &:has(img),
+  &:has(video) {
+    text-decoration: none;
+  }
 }
 
 h1,
@@ -105,14 +111,14 @@ figure {
   text-align: center;
 }
 
-figure * {
+figure > * {
   max-width: 100%;
   height: auto;
   border-radius: 6px;
 }
 
 @media screen and (min-width: 700px) {
-  figure * {
+  figure > * {
     max-width: 80%;
     height: auto;
     border-radius: 6px;

static/.gitignore

@@ -0,0 +1 @@
+processed_images

templates/blog-page.html

@@ -1,16 +1,11 @@
 {% extends "base.html" %}
 
+{% import "macros/post.html" as post %}
+
 {% block main %}
 
 <div class="blog-page">
-  <div class="title">
-    <h1>{{ page.title }}</h1>
-    <p><time>{{page.date}}</time>
-      {% if page.taxonomies %}{% if page.taxonomies.tags %}
-        {% for tag in page.taxonomies.tags %} • #{{tag}} {% endfor %}
-      {% endif %}{% endif %}
-    </p>
-  </div>
+  {{ post::page_title(page=page) }}
   {{ page.content | safe }}
 </div>
 

templates/blog.html

@@ -1,13 +1,13 @@
 {% extends "base.html" %}
 
-{% import "macros/post.html" as posts %}
+{% import "macros/post.html" as post %}
 
 {% block main %}
 
 
 <div class="blog">
     {% for page in section.pages %}
-        {{ posts::excerpt(page=page) }}
+        {{ post::excerpt(page=page) }}
     {% endfor %}
 </div>
 

templates/gallery.html

@@ -0,0 +1,16 @@
+{% extends "base.html" %}
+
+
+{% block main %}
+
+<br><br>
+<div class="gallery">
+{% for page in section.pages -%}
+    {% set image = resize_image(path=page.extra.picture_src, width=260*2, height=180*2, op="fit_width") %}
+    <a href="{{ page.permalink }}">
+      <img src="{{ image.url }}" />
+    </a>
+{%- endfor %}
+</div>
+
+{% endblock main %}

templates/index.html

@@ -1,6 +1,6 @@
 {% extends "base.html" %}
 
-{% import "macros/post.html" as posts %}
+{% import "macros/post.html" as post %}
 
 {% block main %}
 <p>
@@ -20,17 +20,15 @@
 
 <br>
 
-
-
 <p>Heres a list of stuff I'd like you to checkout:</p>
 <ul>
-    <li>{{ posts::page_link(path="projects/automata.md") }}</li>
-    <li>{{ posts::page_link(path="projects/software-renderer.md") }}</li>
-    <li>{{ posts::page_link(path="projects/ansi.md") }}</li>
-    <li>{{ posts::page_link(path="projects/generators.md") }}</li>
-    <li>{{ posts::page_link(path="projects/fastexpr.md") }}</li>
-    <li>{{ posts::page_link(path="projects/kernel.md") }}</li>
-    <li>{{ posts::page_link(path="blog/first.md") }}</li>
+    <li>{{ post::page_link(path="projects/automata.md") }}</li>
+    <li>{{ post::page_link(path="projects/rasterizer/index.md") }}</li>
+    <li>{{ post::page_link(path="projects/ansi.md") }}</li>
+    <li>{{ post::page_link(path="projects/generators.md") }}</li>
+    <li>{{ post::page_link(path="projects/fastexpr.md") }}</li>
+    <li>{{ post::page_link(path="projects/kernel/index.md") }}</li>
+    <li>{{ post::page_link(path="blog/first.md") }}</li>
 </ul>
 
 {% endblock main %}

templates/macros/figures.html

@@ -0,0 +1,31 @@
+{% macro image(src, caption, class="") %}
+<figure class="{% if class %} {{ class }} {% endif %}">
+  <img src="{{ get_url(path=src) }}" loading="lazy" alt="{{caption | default(value='')}}" decoding="async" class="zoomable">
+  {% if caption != "" %}
+    <figcaption>{{ caption  | markdown() | safe }}</figcaption>
+  {% endif %}
+</figure>
+{% endmacro %}
+
+
+
+{% macro video(src, caption, loop=false, controls=true, autoplay=false, poster="", class="") %}
+<figure class="{% if class %} {{ class }} {% endif %}">
+  <video
+      {% if poster %} poster="{{ poster }}"{% endif %}
+      {% if loop | default(value=false) %} loop {% endif %}
+      {% if controls  | default(value=true) %} controls {% endif %}
+      preload="metadata"
+      muted
+      {% if autoplay | default(value=false) %} autoplay {% endif %}
+      playsinline
+      alt="{{caption | default(value='')}}"
+    >
+      <source src="{{ get_url(path=src) }}">
+    </video>
+    {% if caption != "" %}
+      <figcaption>{{ caption  | markdown() | safe }}</figcaption>
+  {% endif %}
+</figure>
+
+{% endmacro %}

templates/macros/image.html

@@ -1,8 +0,0 @@
-{% macro figure(src, caption="", class="") %}
-<figure class="image {{ class }}">
-  <img src="{{ src }}" loading="lazy" decoding="async">
-  {% if caption != "" %}
-    <figcaption>{{ caption }}</figcaption>
-  {% endif %}
-</figure>
-{% endmacro %}

templates/macros/post.html

@@ -1,29 +1,36 @@
-{%- macro excerpt(page) -%}
-<article class="excerpt">
-    <h1><a href="{{ page.permalink | safe }}">{{ page.title }}</a></h1>
-    <p><time>{{page.date | date(format="%b %d, %Y")}}</time> 
+{% macro tags(page) %}
   {% if page.taxonomies %}{% if page.taxonomies.tags %}
-
       {% for tag in page.taxonomies.tags %}     
           {% set url = get_taxonomy_url(kind="tags", name=tag, lang=page.lang) %}
           • <a href = "{{url}}">#{{tag}}</a> 
       {% endfor %}
   {% endif %}{% endif %}
-    </p>
+{% endmacro %}
+
+
+{% macro excerpt(page) %}
+<article class="excerpt">
+    <h1><a href="{{ page.permalink | safe }}">{{ page.title }}</a></h1>
+    <p><time datetime="{{ page.date }}">{{page.date | date(format="%b %d, %Y")}}</time>{{self::tags(page=page)}}</p>
     <div class="description">
         {{page.description | markdown | safe}}
     </div>
   <a href="{{ page.permalink }}">Read more -></a>
 </article>
-{%- endmacro -%}
+{% endmacro %}
 
 
 {% macro page_link(path) %}
   {% set p = get_page(path=path) %}
   <a href="{{ p.permalink }}">{{ p.title }}</a>
   {% if p.date %}
-    <time datetime="{{ p.date }}">
-      {{ p.date | date(format="%b %d, %Y") }}
-    </time>
+    <time datetime="{{ p.date }}">{{ p.date | date(format="%b %d, %Y") }}</time>
   {% endif %}
 {% endmacro %}
+
+{% macro page_title(page) %}
+  <div class="title">
+      <h1>{{ page.title }}</h1>
+      <p><time>{{page.date}}</time>{{self::tags(page=page)}}</p>
+    </div>
+{% endmacro %}

templates/picture.html

@@ -0,0 +1,9 @@
+{% extends "base.html" %}
+
+{% import "macros/post.html" as post %}
+{% import "macros/figures.html" as figures %}
+
+{% block main %}
+{{ post::page_title(page=page) }}
+{{ figures::image(src=page.extra.picture_src, caption=page.description) }}
+{% endblock main %}

templates/shortcodes/image.html

@@ -1,6 +1,2 @@
-<figure class="{% if class %} {{ class }} {% endif %}">
-  <img src="{{ get_url(path=src) }}" loading="lazy" decoding="async" class="zoomable">
-  {% if caption != "" %}
-    <figcaption>{{ caption }}</figcaption>
-  {% endif %}
-</figure>
+{% import "macros/figures.html" as figures %}
+{{ figures::image(src=src, caption=caption) }}

templates/shortcodes/video.html

@@ -1,17 +1,9 @@
-<figure class="{% if class %} {{ class }} {% endif %}">
-  <video
-      {% if poster %} poster="{{ poster }}"{% endif %}
-      {% if loop | default(value=false) %} loop {% endif %}
-      {% if controls  | default(value=true) %} controls {% endif %}
-      preload="metadata"
-      muted
-      {% if autoplay | default(value=false) %} autoplay {% endif %}
-      playsinline
-    >
-      <source src="{{ get_url(path=src) }}">
-    </video>
-    {% if caption != "" %}
-      <figcaption>{{ caption }}</figcaption>
-  {% endif %}
-</figure>
-
+{% import "macros/figures.html" as figures %}
+{{ figures::video(
+  src=src, 
+  caption=caption, 
+  loop=loop | default(value=false), 
+  controls=controls | default(value=true), 
+  autoplay=autoplay | default(value=false), 
+  poster=poster | default(value=""))
+}}

templates/taxonomy_single.html

@@ -1,6 +1,7 @@
 {% extends "base.html" %}
-{% import "macros/taxonomy.html" as macros %}
-{% import "macros/post.html" as posts %}
+
+{% import "macros/post.html" as post %}
+{% import "macros/taxonomy.html" as taxonomy %}
 {% import "macros/feed.html" as feed_macros %}
 
 {%- block title -%}
@@ -27,10 +28,10 @@
 
 {%- block main -%}
 
-<h1>{{ macros::prettify(term=term.name) }}</h1>
+<h1>{{ taxonomy::prettify(term=term.name) }}</h1>
 <div>
 {%- for page in paginator.pages | default(value=term.pages) %}
-    {{ posts::excerpt(page=page) }}
+    {{ post::excerpt(page=page) }}
 {%- endfor %}
 </div>