Initial Gallery implementation

Gemfile

@@ -3,6 +3,7 @@ source "https://rubygems.org"
 gem "jekyll", "~> 4.3"
 gem "html-proofer"
 gem "htmlbeautifier"
+gem "fastimage"
 
 group :jekyll_plugins do
   gem "jekyll-sitemap"

Gemfile.lock

@@ -27,6 +27,7 @@ GEM
     ethon (0.15.0)
       ffi (>= 1.15.0)
     eventmachine (1.2.7)
+    fastimage (2.4.0)
     ffi (1.17.3)
     ffi (1.17.3-aarch64-linux-gnu)
     ffi (1.17.3-aarch64-linux-musl)
@@ -227,6 +228,7 @@ PLATFORMS
   x86_64-linux-musl
 
 DEPENDENCIES
+  fastimage
   html-proofer
   htmlbeautifier
   jekyll (~> 4.3)

_config.yml

@@ -8,6 +8,10 @@ collections:
   projects:
     output: true
     permalink: /projects/:slug/
+  gallery:
+    output: true
+    permalink: /gallery/:slug/
+    sort_by: order
 
 defaults:
   - scope:

_gallery/2d-distance-map.md

@@ -0,0 +1,11 @@
+---
+layout: gallery
+title: "2D Distance Map"
+order: 15
+image: "/webp-gallery/single_axis_raymarching_distance_map_2d.webp"
+alt: "2D Raymarching Distance Map"
+---
+
+Visualization of a one dimensional jump list used to accelerate ray traversal through a discrete voxel scalar field. Brighter regions encode larger safe step distances before encountering a non zero value.
+
+Conceptually this acts as a discrete Euclidean distance transform, enabling adaptive stepping and reducing fragment shader texture fetches substantially. The limitation is cubic memory growth with increasing 3D texture resolution.

_gallery/7-segment-display.md

@@ -0,0 +1,13 @@
+---
+layout: gallery
+title: "7-Segment Display"
+order: 56
+image: "/webp-gallery/7segment_display.webp"
+alt: "7-Segment Display Circuit"
+---
+
+7 segment display circuit used to render numeric output directly in hardware.
+
+Each digit is driven individually rather than multiplexed or chained, requiring explicit control logic per segment group. Inefficient in terms of wiring and pin usage, but straightforward to reason about.
+
+Naive in design, functional in practice. A good exercise in understanding how numeric representation translates into physical signals.

_gallery/ao-test.md

@@ -0,0 +1,9 @@
+---
+layout: gallery
+title: "AO Test"
+order: 40
+image: "/webp-gallery/ao_test.webp"
+alt: "Ambient Occlusion Test"
+---
+
+## (WORK IN PROGRESS)

_gallery/arduino-bomb.md

@@ -0,0 +1,15 @@
+---
+layout: gallery
+title: "Arduino Bomb"
+order: 4
+image: "/webp-gallery/arduino_bomb.webp"
+alt: "Arduino Pomodoro Timer on Breadboard"
+---
+
+One of my first Arduino projects. A pomodoro timer built on a breadboard around an Arduino Uno, a 7 segment display, a buzzer, status LEDs, and a large blue start stop button.
+
+The wiring is chaotic but functional. The display shows remaining time, the buzzer signals completion, and the LEDs indicate state transitions.
+
+It would likely raise questions at airport security.
+
+Building it forced me to think about timing loops, input debouncing, and directly driving hardware components. I still have a soft spot for 7 segment displays.

_gallery/atlas-tiling.md

@@ -0,0 +1,13 @@
+---
+layout: gallery
+title: "Atlas Tiling"
+order: 28
+image: "/webp-gallery/atlas_tiling.webp"
+alt: "Texture Atlas Tiling"
+---
+
+Experimenting with texture atlas tiling in a voxel renderer. Instead of binding multiple textures, all block textures are packed into a single atlas and UV coordinates are remapped per face to sample the correct region.
+
+This required direct manipulation of vertex data. For each triangle, UV coordinates are adjusted to crop the correct tile. When not overriding UVs, the full atlas would be mapped onto the face.
+
+Alternative approaches considered included texture arrays with per face indices, but atlas packing reduces state changes and simplifies material handling in Three.js. Care had to be taken to avoid texture bleeding across tile borders, especially when using mipmaps. Padding and power of two sizing helped mitigate artifacts.

_gallery/birthday-cake.md

@@ -0,0 +1,10 @@
+---
+layout: gallery
+title: "Birthday Cake"
+order: 52
+image: "/webp-gallery/minecraft_cake_fixed.webp"
+alt: "Minecraft Birthday Cake"
+---
+
+A Minecraft-themed birthday cake complete with pixelated decorations. Gaming culture and coding often go hand in hand, especially in game development.
+## (WORK IN PROGRESS)

_gallery/blahaj-on-the-road.md

@@ -0,0 +1,9 @@
+---
+layout: gallery
+title: "Blahaj on the Road"
+order: 9
+image: "/webp-gallery/blahaj_on_the_road.webp"
+alt: "Blahaj Shark on a Road Trip"
+---
+
+## (WORK IN PROGRESS)

_gallery/blahaj-rust.md

@@ -0,0 +1,10 @@
+---
+layout: gallery
+title: "Blahaj Rust"
+order: 61
+image: "/webp-gallery/blahaj_coding_rust.webp"
+alt: "Blahaj Learning Rust"
+---
+
+My trusty IKEA shark companion keeping me company while learning Rust programming. Even plush sharks need to understand memory safety and ownership!
+## (WORK IN PROGRESS)

_gallery/blahaj.md

@@ -0,0 +1,9 @@
+---
+layout: gallery
+title: "Blahaj"
+order: 32
+image: "/webp-gallery/blahaj_fixed.webp"
+alt: "Blahaj the Shark"
+---
+
+## (WORK IN PROGRESS)

_gallery/cat-review.md

@@ -0,0 +1,9 @@
+---
+layout: gallery
+title: "Cat Review"
+order: 57
+image: "/webp-gallery/cat_on_laptop_fixed.webp"
+alt: "Feline Code Review"
+---
+
+## (WORK IN PROGRESS)

_gallery/chunk-coloring.md

@@ -0,0 +1,10 @@
+---
+layout: gallery
+title: "Chunk Coloring"
+order: 20
+image: "/webp-gallery/chunk_coloring.webp"
+alt: "Voxel Chunk Coloring Debug"
+---
+
+Debug visualization coloring different voxel chunks in distinct colors to visualize chunk boundaries and loading patterns in a procedural world.
+## (WORK IN PROGRESS)

_gallery/cube-march.md

@@ -0,0 +1,9 @@
+---
+layout: gallery
+title: "Cube March"
+order: 42
+image: "/webp-gallery/cube_marcher.webp"
+alt: "Cube Marching Algorithm"
+---
+
+## (WORK IN PROGRESS)

_gallery/electronics.md

@@ -0,0 +1,10 @@
+---
+layout: gallery
+title: "Electronics"
+order: 8
+image: "/webp-gallery/zhaw_resistor_in_lab_fixed.webp"
+alt: "Electronics Lab at ZHAW"
+---
+
+Working with resistors and electronic components in the electronics lab at ZHAW. Hands-on hardware work complements the software engineering studies perfectly.
+## (WORK IN PROGRESS)

_gallery/empty-lecture-room.md

@@ -0,0 +1,13 @@
+---
+layout: gallery
+title: "Empty Lecture Room"
+order: 21
+image: "/webp-gallery/empty_lecture_room_on_sturday_first_rrival_excited_for_analysis.webp"
+alt: "Empty Lecture Room on Saturday"
+---
+
+An empty lecture room on a Saturday morning. I arrived early for analysis class.
+
+Working through exercises week after week, identifying patterns in limits, series, and functions, gradually made the material feel structured rather than overwhelming.
+
+I like practice. I like recognizing structure where at first there is only noise.

_gallery/exam-prep.md

@@ -0,0 +1,13 @@
+---
+layout: gallery
+title: "Exam Prep"
+order: 8
+image: "/webp-gallery/zhaw_exam_prep_fixed.webp"
+alt: "ZHAW Exam Preparation"
+---
+
+Exam preparation at ZHAW. Pages of exercises in probability and statistics, worked through by hand.
+
+Not all computer science happens on a screen. Understanding distributions, expectations, and variance builds intuition that later shows up in algorithms, graphics, and information theory.
+
+Repetition matters. Practice sharpens pattern recognition.

_gallery/first-html-page.md

@@ -0,0 +1,10 @@
+---
+layout: gallery
+title: "First HTML Page"
+order: 2
+image: "/webp-gallery/small_daniel_working_on_firts_html_page_stating_career_as_software_developer.webp"
+alt: "Young Daniel Writing First HTML Page"
+---
+
+Young Daniel hard at work on his very first HTML page - the humble beginning of a software development career. Everyone starts somewhere, and this is where the journey began.
+## (WORK IN PROGRESS)

_gallery/generated-avatars.md

@@ -0,0 +1,13 @@
+---
+layout: gallery
+title: "Generated Avatars"
+order: 44
+image: "/webp-gallery/github_inspired_randomly_generated_pfps_for_my_first_rails_project.webp"
+alt: "Generated Profile Pictures from Greendit"
+---
+
+Client side generated profile pictures inspired by GitHub identicons, built for my first fullstack PHP project Greendit.
+
+If a user does not upload an image, a deterministic avatar is generated in the browser from the username using a small canvas routine. The generated image is embedded into the form and submitted like any other upload. The server stores it normally, but does not participate in generation.
+
+The implementation is simple. A seeded value determines color selection and mirrored pixel placement on a small grid. Not much code, but a noticeable improvement in user identity and perceived completeness.

_gallery/gpu-demo.md

@@ -0,0 +1,11 @@
+---
+layout: gallery
+title: "GPU Demo"
+order: 41
+image: "/webp-gallery/gpu_instancing.webp"
+alt: "GPU Instancing Demo"
+---
+
+Demonstration of GPU instancing using Three.js `InstancedMesh` to render large numbers of identical voxel elements in a single draw call. Per instance transformation matrices are stored in an instance buffer, significantly reducing CPU submission overhead compared to naive mesh duplication.
+
+This experiment emphasized the importance of minimizing draw calls and balancing CPU scene management with GPU throughput.

_gallery/greedy-meshing.md

@@ -0,0 +1,13 @@
+---
+layout: gallery
+title: "Greedy Meshing"
+order: 26
+image: "/webp-gallery/greedy_meshing_algorithm.webp"
+alt: "Greedy Meshing Algorithm"
+---
+
+Animation of a greedy meshing implementation for voxel terrain, created in p5.js to better understand the algorithm step by step.
+
+Adjacent coplanar faces of identical block type are merged into maximal rectangles, first along the x axis and then along the y axis. Visualizing the merge process made it easier to reason about edge cases and fragmentation.
+
+Compared to naive per face meshing, this approach significantly reduces triangle count and vertex buffer size. The cost shifts to CPU side mesh generation, but overall rendering performance improves for solid geometry.

_gallery/humanoid-robot.md

@@ -0,0 +1,13 @@
+---
+layout: gallery
+title: "Humanoid Robot"
+order: 7
+image: "/webp-gallery/humanoid_robot_at_zhaw.webp"
+alt: "Humanoid Robot at ZHAW"
+---
+
+A humanoid robot on display at ZHAW Winterthur. Robotics research sits at the intersection of mechanical engineering, electronics, control theory, and artificial intelligence.
+
+Seeing systems like this in person makes the progress often summarized in research videos feel concrete.
+
+What a time to be alive.

_gallery/iceland-trip.md

@@ -0,0 +1,11 @@
+---
+layout: gallery
+title: "Iceland Trip"
+order: 13
+image: "/webp-gallery/dani_travelling_iceland.webp"
+alt: "Travelling in Iceland"
+---
+
+Travelling through Iceland and stopping at a place with a name that makes most variable names look short.
+
+It reminded me of the classic observation that there are two hard problems in computer science: naming things and cache invalidation. Long descriptive names are not automatically clear, and short ones are rarely precise. Struggling with naming is part of building systems that last.

_gallery/java-duke.md

@@ -0,0 +1,16 @@
+---
+layout: gallery
+title: "Java Duke"
+order: 30
+image: "/webp-gallery/java_duke_with_feet_fixed.webp"
+alt: "Java Duke with Feet"
+---
+
+The Java mascot Duke, but with feet. Generated while experimenting with image models together with a colleague, Oliver. For some reason this one stuck.
+
+Around the release of GPT 4o, image generation crossed a threshold where producing coherent and highly specific results became trivial. Duke with feet feels like a small but telling example.
+
+> "It's amazing to think what great and exciting things people will be doing with PCs in 30 years."
+> -- Bill Gates
+
+Apparently one of them is giving programming mascots anatomically plausible lower limbs.

_gallery/kennedy-space-center.md

@@ -0,0 +1,13 @@
+---
+layout: gallery
+title: "Kennedy Space Center"
+order: 0
+image: "/webp-gallery/nasa_kennedy_space_center.webp"
+alt: "NASA Kennedy Space Center Globe"
+---
+
+Standing in front of the NASA globe at Kennedy Space Center. Visiting this place at a young age left a lasting impression.
+
+Space exploration represents how much remains unknown and how much effort is required to uncover even small pieces of it. The scale of the problems, the precision involved, and the decades of accumulated knowledge behind each mission were difficult to fully grasp.
+
+What stayed with me was admiration for what is out there and how much there is still to learn. That sense of scale and possibility has remained important to me.

_gallery/mandelbrot-closeup.md

@@ -0,0 +1,13 @@
+---
+layout: gallery
+title: "Mandelbrot Closeup"
+order: 10
+image: "/webp-gallery/mandelbrot_set.webp"
+alt: "Mandelbrot Set Closeup from ZHAW Math Lecture"
+---
+
+Closeup of the Mandelbrot set implemented during a ZHAW mathematics lecture introducing complex numbers.
+
+The image emerges from a simple iterative function applied to complex values. A few lines of code are enough to produce structure of arbitrary depth.
+
+A simple definition with far reaching consequences.

_gallery/marching-cubes.md

@@ -0,0 +1,11 @@
+---
+layout: gallery
+title: "Marching Cubes"
+order: 43
+image: "/webp-gallery/cube_marching.webp"
+alt: "Marching Cubes Implementation"
+---
+
+Experimentation with marching cubes using a sampled 3D scalar field. Each grid cell evaluates eight corner values and selects one of 256 cases to generate interpolated triangle surfaces.
+
+Compared to block based voxel meshing, marching cubes produces smoother continuous surfaces at the cost of higher computational and implementation complexity.

_gallery/mars-probe-at-uzh.md

@@ -0,0 +1,10 @@
+---
+layout: gallery
+title: "Mars Probe at UZH"
+order: 51
+image: "/webp-gallery/mars_probe_at_uzh_fixed.webp"
+alt: "Mars Probe at University of Zurich"
+---
+
+A Mars probe exhibit or model at the University of Zurich. Where aerospace engineering meets computer science education.
+## (WORK IN PROGRESS)

_gallery/mesher-issues-2.md

@@ -0,0 +1,11 @@
+---
+layout: gallery
+title: "Mesher Issues 2"
+order: 17
+image: "/webp-gallery/mesher_issues2.webp"
+alt: "Voxel Mesher Artifacts 2"
+---
+
+Follow up debugging view with faces colored by index to trace buffer inconsistencies. Visualizing index values directly allowed isolation of incorrect vertex ordering and winding assumptions.
+
+Many severe rendering artifacts originate in data structure errors rather than shader logic.

_gallery/mesher-issues.md

@@ -0,0 +1,11 @@
+---
+layout: gallery
+title: "Mesher Issues"
+order: 24
+image: "/webp-gallery/mesher_issues.webp"
+alt: "Voxel Mesher Artifacts"
+---
+
+Visual artifacts caused by incorrect index buffer offsets during voxel mesh generation. An off by one error in vertex indexing produced stretched and misconnected triangles across chunk boundaries.
+
+This debugging phase reinforced the importance of strict buffer alignment and consistent vertex layout in GPU pipelines.

_gallery/millennium-falcon-model.md

@@ -0,0 +1,13 @@
+---
+layout: gallery
+title: "Millennium Falcon Model"
+order: 12
+image: "/webp-gallery/millenium_falcon.webp"
+alt: "Millennium Falcon Model"
+---
+
+LEGO Millennium Falcon model, still a work in progress.
+
+Not scientifically accurate, but exciting nonetheless. For such a small scale set, the level of detail is impressive. Panels, angles, and exposed elements are carefully represented despite the constraints of bricks.
+
+It is obvious that the people designing these sets know what they are doing.