diff --git a/Gemfile b/Gemfile index 0c7eeca..41a4f30 100644 --- a/Gemfile +++ b/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" diff --git a/Gemfile.lock b/Gemfile.lock index ed17389..5fd5e53 100644 --- a/Gemfile.lock +++ b/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) diff --git a/_config.yml b/_config.yml index a4c3dfb..6fc0132 100644 --- a/_config.yml +++ b/_config.yml @@ -8,6 +8,10 @@ collections: projects: output: true permalink: /projects/:slug/ + gallery: + output: true + permalink: /gallery/:slug/ + sort_by: order defaults: - scope: diff --git a/_gallery/2d-distance-map.md b/_gallery/2d-distance-map.md new file mode 100644 index 0000000..4cbc42a --- /dev/null +++ b/_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. diff --git a/_gallery/7-segment-display.md b/_gallery/7-segment-display.md new file mode 100644 index 0000000..0679689 --- /dev/null +++ b/_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. diff --git a/_gallery/ao-test.md b/_gallery/ao-test.md new file mode 100644 index 0000000..5339903 --- /dev/null +++ b/_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) diff --git a/_gallery/arduino-bomb.md b/_gallery/arduino-bomb.md new file mode 100644 index 0000000..7c18fa5 --- /dev/null +++ b/_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. diff --git a/_gallery/atlas-tiling.md b/_gallery/atlas-tiling.md new file mode 100644 index 0000000..89531eb --- /dev/null +++ b/_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. diff --git a/_gallery/birthday-cake.md b/_gallery/birthday-cake.md new file mode 100644 index 0000000..a5d946d --- /dev/null +++ b/_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) diff --git a/_gallery/blahaj-on-the-road.md b/_gallery/blahaj-on-the-road.md new file mode 100644 index 0000000..33c5718 --- /dev/null +++ b/_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) diff --git a/_gallery/blahaj-rust.md b/_gallery/blahaj-rust.md new file mode 100644 index 0000000..6bfbda6 --- /dev/null +++ b/_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) diff --git a/_gallery/blahaj.md b/_gallery/blahaj.md new file mode 100644 index 0000000..bf426cf --- /dev/null +++ b/_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) diff --git a/_gallery/cat-review.md b/_gallery/cat-review.md new file mode 100644 index 0000000..78d8e24 --- /dev/null +++ b/_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) diff --git a/_gallery/chunk-coloring.md b/_gallery/chunk-coloring.md new file mode 100644 index 0000000..54f9a73 --- /dev/null +++ b/_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) diff --git a/_gallery/cube-march.md b/_gallery/cube-march.md new file mode 100644 index 0000000..b2da779 --- /dev/null +++ b/_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) diff --git a/_gallery/electronics.md b/_gallery/electronics.md new file mode 100644 index 0000000..78f4d41 --- /dev/null +++ b/_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) diff --git a/_gallery/empty-lecture-room.md b/_gallery/empty-lecture-room.md new file mode 100644 index 0000000..af0d15b --- /dev/null +++ b/_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. diff --git a/_gallery/exam-prep.md b/_gallery/exam-prep.md new file mode 100644 index 0000000..5b415c3 --- /dev/null +++ b/_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. diff --git a/_gallery/first-html-page.md b/_gallery/first-html-page.md new file mode 100644 index 0000000..5413620 --- /dev/null +++ b/_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) diff --git a/_gallery/generated-avatars.md b/_gallery/generated-avatars.md new file mode 100644 index 0000000..420ded6 --- /dev/null +++ b/_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. diff --git a/_gallery/gpu-demo.md b/_gallery/gpu-demo.md new file mode 100644 index 0000000..efae9c1 --- /dev/null +++ b/_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. diff --git a/_gallery/greedy-meshing.md b/_gallery/greedy-meshing.md new file mode 100644 index 0000000..99f80f9 --- /dev/null +++ b/_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. diff --git a/_gallery/humanoid-robot.md b/_gallery/humanoid-robot.md new file mode 100644 index 0000000..6ca4581 --- /dev/null +++ b/_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. diff --git a/_gallery/iceland-trip.md b/_gallery/iceland-trip.md new file mode 100644 index 0000000..bab25cb --- /dev/null +++ b/_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. diff --git a/_gallery/java-duke.md b/_gallery/java-duke.md new file mode 100644 index 0000000..f3b6703 --- /dev/null +++ b/_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. diff --git a/_gallery/kennedy-space-center.md b/_gallery/kennedy-space-center.md new file mode 100644 index 0000000..8e1fa92 --- /dev/null +++ b/_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. diff --git a/_gallery/mandelbrot-closeup.md b/_gallery/mandelbrot-closeup.md new file mode 100644 index 0000000..f5bd866 --- /dev/null +++ b/_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. diff --git a/_gallery/marching-cubes.md b/_gallery/marching-cubes.md new file mode 100644 index 0000000..329908b --- /dev/null +++ b/_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. diff --git a/_gallery/mars-probe-at-uzh.md b/_gallery/mars-probe-at-uzh.md new file mode 100644 index 0000000..a314bd0 --- /dev/null +++ b/_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) diff --git a/_gallery/mesher-issues-2.md b/_gallery/mesher-issues-2.md new file mode 100644 index 0000000..44a1264 --- /dev/null +++ b/_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. diff --git a/_gallery/mesher-issues.md b/_gallery/mesher-issues.md new file mode 100644 index 0000000..acfcdd9 --- /dev/null +++ b/_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. diff --git a/_gallery/millennium-falcon-model.md b/_gallery/millennium-falcon-model.md new file mode 100644 index 0000000..717add2 --- /dev/null +++ b/_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. diff --git a/_gallery/nixos-rice.md b/_gallery/nixos-rice.md new file mode 100644 index 0000000..cc3cc6d --- /dev/null +++ b/_gallery/nixos-rice.md @@ -0,0 +1,15 @@ +--- +layout: gallery +title: "NixOS Rice" +order: 36 +image: "/webp-gallery/nixos_rice.webp" +alt: "NixOS Desktop Setup" +--- + +Custom NixOS desktop configuration after falling down the UNIX rabbit hole. Experimenting with tiling window managers, terminal emulators, fonts, status bars, and system configuration. + +Ricing became an exercise in fine tuning. Adjusting window behavior, key bindings, font rendering, and environment variables. Tinkering with every layer of the system to understand how it fits together. + +At some point I stepped away from Linux. Not because of Linux itself, but because I tend to go too deep. Too much time reading documentation, changing configuration, optimizing details that did not meaningfully change my output. The experiment was valuable, but it also taught me something about my own limits. + +The core idea remains: a browser and a terminal are often enough. diff --git a/_gallery/noise-composition.md b/_gallery/noise-composition.md new file mode 100644 index 0000000..940cb57 --- /dev/null +++ b/_gallery/noise-composition.md @@ -0,0 +1,13 @@ +--- +layout: gallery +title: "Noise Composition" +order: 22 +image: "/webp-gallery/noise_composition.webp" +alt: "Procedural Noise Composition" +--- + +Node based terrain generation sketch created in Blender to iterate quickly on procedural composition. + +Multiple noise fields are layered, remapped, and thresholded to explore different structural features. By adjusting frequency, amplitude, and cutoff parameters, the system produces caves, ore distributions, floating terrain fragments, and large scale landmasses. + +Using nodes allowed rapid experimentation with generation rules before implementing similar ideas programmatically. A rough prototype of terrain logic rather than a rendering setup. diff --git a/_gallery/normals-debug.md b/_gallery/normals-debug.md new file mode 100644 index 0000000..d9866ce --- /dev/null +++ b/_gallery/normals-debug.md @@ -0,0 +1,13 @@ +--- +layout: gallery +title: "Normals Debug" +order: 23 +image: "/webp-gallery/noramls.webp" +alt: "Surface Normals Visualization" +--- + +Terrain generated by extruding 2D noise along the vertical axis and applying a strong density threshold. + +The binary cutoff creates sharp cliffs and overhang like structures, with potential cave regions emerging where the field thins out. + +Surface normals are visualized and later reused in the material stage for lighting and shading. Even with simple generation rules, normal orientation strongly influences how the terrain reads visually. diff --git a/_gallery/packing-day.md b/_gallery/packing-day.md new file mode 100644 index 0000000..b5fa2d7 --- /dev/null +++ b/_gallery/packing-day.md @@ -0,0 +1,9 @@ +--- +layout: gallery +title: "Packing Day" +order: 18 +image: "/webp-gallery/packing_day.webp" +alt: "Packing Day Photo" +--- + +## (WORK IN PROGRESS) diff --git a/_gallery/pcb-lab-work.md b/_gallery/pcb-lab-work.md new file mode 100644 index 0000000..25ece5b --- /dev/null +++ b/_gallery/pcb-lab-work.md @@ -0,0 +1,13 @@ +--- +layout: gallery +title: "PCB Lab Work" +order: 37 +image: "/webp-gallery/zhaw_touching_pcb_in_lab_fixed.webp" +alt: "Working with PCB in Electronics Lab" +--- + +Working with a PCB provided in the ZHAW electronics lab. Instead of only interacting with transistors through simulators, this setup exposed the physical components directly. I connected jumpers, applied signals, and measured real timing behavior. + +We compared propagation delay between a NAND gate built from individually wired discrete transistors and a dedicated 4 NAND IC block. The discrete implementation measured roughly 400 ns, while the integrated 4 NAND component operated around 20 ns. The difference made the impact of physical layout, parasitics, and internal optimization immediately visible. + +Seeing nanosecond scale timing differences on actual hardware grounded the abstraction layers discussed in lectures. It connected transistor level reasoning to logic gate level design, and reinforced concepts I had previously only modeled in my 8 bit CPU project. diff --git a/_gallery/pi-guy-plush.md b/_gallery/pi-guy-plush.md new file mode 100644 index 0000000..1826575 --- /dev/null +++ b/_gallery/pi-guy-plush.md @@ -0,0 +1,11 @@ +--- +layout: gallery +title: "Pi Guy Plush" +order: 60 +image: "/webp-gallery/pi_guy_plush.webp" +alt: "Pi Guy Plush Toy" +--- + +Pi Guy plush inspired by 3Blue1Brown. The channel played a direct role in preparing for exams and in pushing beyond the required material toward deeper understanding. + +Buying the plush was a small way to support something that genuinely improved how I think about mathematics. diff --git a/_gallery/pink-glasses.md b/_gallery/pink-glasses.md new file mode 100644 index 0000000..76a2874 --- /dev/null +++ b/_gallery/pink-glasses.md @@ -0,0 +1,11 @@ +--- +layout: gallery +title: "Pink Glasses" +order: 11 +image: "/webp-gallery/dani_with_cool_glasses.webp" +alt: "Pink Glasses" +--- + +Pink glasses found in a thrift store. + +I like them. They let me hide my eyes a little. diff --git a/_gallery/plushies.md b/_gallery/plushies.md new file mode 100644 index 0000000..e52e0df --- /dev/null +++ b/_gallery/plushies.md @@ -0,0 +1,9 @@ +--- +layout: gallery +title: "Plushies" +order: 50 +image: "/webp-gallery/plushees_fixed.webp" +alt: "Collection of Plush Toys" +--- + +## (WORK IN PROGRESS) diff --git a/_gallery/pride-pins.md b/_gallery/pride-pins.md new file mode 100644 index 0000000..4c50e65 --- /dev/null +++ b/_gallery/pride-pins.md @@ -0,0 +1,13 @@ +--- +layout: gallery +title: "Pride Pins" +order: 34 +image: "/webp-gallery/pride_pins.webp" +alt: "Pride Pin Collection" +--- + +Pride pins acquired at ETH. Visible representation of the LGBTQ+ community in a rigorous academic environment matters. + +Seeing openly queer, highly capable people in advanced technical spaces strengthened my intention to pursue a master's degree there. Ambition feels different when identity does not have to be hidden. + +Community and technical excellence are not mutually exclusive. diff --git a/_gallery/purple-wireframe.md b/_gallery/purple-wireframe.md new file mode 100644 index 0000000..6e30523 --- /dev/null +++ b/_gallery/purple-wireframe.md @@ -0,0 +1,10 @@ +--- +layout: gallery +title: "Purple Wireframe" +order: 55 +image: "/webp-gallery/purple_wireframe.webp" +alt: "Purple Wireframe Render" +--- + +A wireframe rendering of a 3D mesh displayed in purple. Wireframe views are useful for inspecting geometry topology and polygon density. +## (WORK IN PROGRESS) diff --git a/_gallery/random-vertex-colors-on-non-greedy-mesh.md b/_gallery/random-vertex-colors-on-non-greedy-mesh.md new file mode 100644 index 0000000..62921ea --- /dev/null +++ b/_gallery/random-vertex-colors-on-non-greedy-mesh.md @@ -0,0 +1,13 @@ +--- +layout: gallery +title: "Random Vertex Colors on Non-Greedy Mesh" +order: 45 +image: "/webp-gallery/random_vertex_colors.webp" +alt: "Random Vertex Colors on Non-Greedy Mesh" +--- + +Random per vertex coloring applied to a non greedy meshed terrain. + +Even with relatively flat shading, the structure of the underlying triangulation becomes visible. Individual faces and subdivision patterns can be inspected directly. + +This view makes it obvious how much redundant geometry naive meshing produces before greedy merging or face culling is applied. diff --git a/_gallery/raymarcher.md b/_gallery/raymarcher.md new file mode 100644 index 0000000..5a9195e --- /dev/null +++ b/_gallery/raymarcher.md @@ -0,0 +1,15 @@ +--- +layout: gallery +title: "Raymarcher" +order: 39 +image: "/webp-gallery/raymarcher.webp" +alt: "Raymarcher Scene" +--- + +Custom voxel raymarcher implemented in GLSL using 3D textures as discrete scalar fields. Instead of analytic signed distance functions, density values are sampled directly from volumetric data. + +Early versions relied on small fixed step sizes and suffered from high texture fetch cost per fragment. This led to exploration of adaptive stepping via precomputed distance volumes and jump lists. + +The implementation required careful attention to branching cost inside shader loops. Conditional logic in fragment shaders can significantly impact performance, especially when traversal depth varies per pixel. + +Performance constraints pushed me to look more closely at distance field literature and GPU execution behavior. Correctness was no longer enough. Understanding cost became necessary. diff --git a/_gallery/raymarching-artefacts.md b/_gallery/raymarching-artefacts.md new file mode 100644 index 0000000..8bb50f9 --- /dev/null +++ b/_gallery/raymarching-artefacts.md @@ -0,0 +1,9 @@ +--- +layout: gallery +title: "Raymarching Artefacts" +order: 47 +image: "/webp-gallery/raymarching_artefacts.webp" +alt: "Raymarching Artefacts" +--- + +## (WORK IN PROGRESS) diff --git a/_gallery/raytracer-reflections.md b/_gallery/raytracer-reflections.md new file mode 100644 index 0000000..bbc6666 --- /dev/null +++ b/_gallery/raytracer-reflections.md @@ -0,0 +1,15 @@ +--- +layout: gallery +title: "Raytracer Reflections" +order: 14 +image: "/webp-gallery/raytracer_sphere_reflections.webp" +alt: "Raytracer Sphere Reflections" +--- + +Classic sphere reflection scene rendered with a custom raytracer. + +Scenes like this became a conceptual target for a more ambitious idea: defining specialized hardware for raymarching inside an emulator. Spheres and tiled planes are among the simplest primitives to express using signed distance functions, making them natural starting points. + +I produced initial sketches and design notes for how such a system could evaluate SDFs and support reflections, but have not yet fully wired the pipeline into the emulator. + +The image represents both a reference implementation and a direction for future work. diff --git a/_gallery/renuo-internship.md b/_gallery/renuo-internship.md new file mode 100644 index 0000000..1b09725 --- /dev/null +++ b/_gallery/renuo-internship.md @@ -0,0 +1,10 @@ +--- +layout: gallery +title: "Renuo Internship" +order: 35 +image: "/webp-gallery/starting_my_internship_at_renuo.webp" +alt: "Starting Internship at Renuo" +--- + +First day at Renuo - the start of an exciting internship journey in professional software development. From learning to doing, this marked a major milestone. +## (WORK IN PROGRESS) diff --git a/_gallery/school-essentials.md b/_gallery/school-essentials.md new file mode 100644 index 0000000..95e1111 --- /dev/null +++ b/_gallery/school-essentials.md @@ -0,0 +1,13 @@ +--- +layout: gallery +title: "School Essentials" +order: 6 +image: "/webp-gallery/essentials_packed_for_school_tablet_cube.webp" +alt: "Essentials Packed for School" +--- + +What a typical study day looks like inside my backpack. + +A tablet for handwritten math notes and lecture annotations. A Rubik's cube for short mental resets between problem sets. Mini pizzas. Like normal pizzas, just smaller and rather salty. + +Simple tools for long days of analysis, algebra, and quiet concentration. diff --git a/_gallery/shadow-maps.md b/_gallery/shadow-maps.md new file mode 100644 index 0000000..e1f6556 --- /dev/null +++ b/_gallery/shadow-maps.md @@ -0,0 +1,11 @@ +--- +layout: gallery +title: "Shadow Maps" +order: 53 +image: "/webp-gallery/cascading_shadow_maps.webp" +alt: "Cascading Shadow Maps" +--- + +Experimenting with cascading shadow maps in a Three.js context. Multiple shadow map cascades distribute depth precision across near and far regions of the camera frustum. + +At this scale only a single cascade is clearly visible, but seam transitions and bias tuning become critical. This exploration highlighted the tradeoff between shadow resolution, coverage distance, and floating point depth precision. diff --git a/_gallery/shy-dani.md b/_gallery/shy-dani.md new file mode 100644 index 0000000..0bc0cf5 --- /dev/null +++ b/_gallery/shy-dani.md @@ -0,0 +1,13 @@ +--- +layout: gallery +title: "Shy Dani" +order: 59 +image: "/webp-gallery/shy_dani.webp" +alt: "Candid Developer Photo" +--- + +Still figuring things out. + +Blahaj has been a quiet constant. Something simple to hold onto while parts of myself are still being figured out. + +Technical work continues in parallel. Building systems is structured. Identity is less so. diff --git a/_gallery/spaghetti-noise.md b/_gallery/spaghetti-noise.md new file mode 100644 index 0000000..95fcf9c --- /dev/null +++ b/_gallery/spaghetti-noise.md @@ -0,0 +1,13 @@ +--- +layout: gallery +title: "Spaghetti Noise" +order: 16 +image: "/webp-gallery/spaghetti_noise.webp" +alt: "Spaghetti Noise Visualization" +--- + +Experimental scalar field producing elongated, interconnected structures resembling cave systems. Generated by combining low frequency noise fields and applying thresholding to extract boundaries. + +By tuning thresholds and frequency layers, the field produces narrow tunnels and branching paths. Similar techniques are used in procedural terrain generation, including cave systems in voxel based worlds. + +This experiment focused on understanding how small parameter changes in noise composition affect topology. The resulting patterns illustrate how continuous fields become discrete structures through sampling and thresholding. diff --git a/_gallery/starmus-festival.md b/_gallery/starmus-festival.md new file mode 100644 index 0000000..3abf7fd --- /dev/null +++ b/_gallery/starmus-festival.md @@ -0,0 +1,13 @@ +--- +layout: gallery +title: "Starmus Festival" +order: 3 +image: "/webp-gallery/starmus_festival_fixed.webp" +alt: "Starmus Festival Photo" +--- + +Photo from the Starmus Festival, an event that brings together scientists, engineers, astronauts, and technologists around long term questions about space and human progress. + +Elon Musk was associated with the festival and received the 2019 Starmus medal for his "astounding accomplishments in space travel and for humanity," specifically for work related to SpaceX, Tesla, and Neuralink. He was scheduled to appear at this edition but did not attend due to a Starship launch. + +Before his political involvement, Musk represented to me a specific engineering ideal: questioning established constraints and attempting to build solutions at scale. Reusable rockets and large systems engineering shaped how I thought about ambition and technical impact. diff --git a/_gallery/stolas-pin.md b/_gallery/stolas-pin.md new file mode 100644 index 0000000..42f556e --- /dev/null +++ b/_gallery/stolas-pin.md @@ -0,0 +1,13 @@ +--- +layout: gallery +title: "Stolas Pin" +order: 58 +image: "/webp-gallery/stolas_pin.webp" +alt: "Stolas Enamel Pin" +--- + +An enamel pin featuring Stolas from Helluva Boss, inspired by the Ars Goetia. Traditionally described as a prince of darkness, the character appears as an owl demon and is depicted here in a stylized cat like body while retaining avian features. + +Stolas is my favourite character in the series. Over time, he undergoes significant development and is portrayed with personal conflict, vulnerability, and flawed decision making. + +The contrast between demonic status and very human problems makes the character compelling beyond surface aesthetics. diff --git a/_gallery/terrain-edges.md b/_gallery/terrain-edges.md new file mode 100644 index 0000000..de71b28 --- /dev/null +++ b/_gallery/terrain-edges.md @@ -0,0 +1,9 @@ +--- +layout: gallery +title: "Terrain Edges" +order: 48 +image: "/webp-gallery/voxel_terrain_edge_detection.webp" +alt: "Voxel Terrain Edge Detection" +--- + +## (WORK IN PROGRESS) diff --git a/_gallery/tired-penguin-study.md b/_gallery/tired-penguin-study.md new file mode 100644 index 0000000..7be7a29 --- /dev/null +++ b/_gallery/tired-penguin-study.md @@ -0,0 +1,10 @@ +--- +layout: gallery +title: "Tired Penguin Study" +order: 31 +image: "/webp-gallery/zhaw_tired_penguin_during_study_phase_with_calculator.webp" +alt: "Tired Penguin with Calculator" +--- + +A tired penguin plushie sitting with a calculator during exam study season. A relatable companion for every student grinding through problem sets. +## (WORK IN PROGRESS) diff --git a/_gallery/transparency-debug.md b/_gallery/transparency-debug.md new file mode 100644 index 0000000..51d8688 --- /dev/null +++ b/_gallery/transparency-debug.md @@ -0,0 +1,13 @@ +--- +layout: gallery +title: "Transparency Debug" +order: 46 +image: "/webp-gallery/transparency_debugging.webp" +alt: "Transparency Debugging View" +--- + +Introducing alpha blended foliage into a chunk based voxel world built with Three.js revealed ordering issues when observing the scene from below the water surface. Transparent meshes were not composited correctly because Three.js sorts at mesh level rather than per triangle. + +I implemented manual camera distance based sorting of transparent meshes and experimented with material parameters such as `depthTest` and `depthWrite` to understand how occlusion interacts with blending. + +While the visual result improved, per frame sorting across many chunk meshes introduced measurable performance cost. I therefore explored spatial partitioning via a tree structure to reduce traversal and sorting overhead. This phase forced a direct confrontation between visual correctness and runtime constraints. diff --git a/_gallery/transparency-issues.md b/_gallery/transparency-issues.md new file mode 100644 index 0000000..1f8872b --- /dev/null +++ b/_gallery/transparency-issues.md @@ -0,0 +1,10 @@ +--- +layout: gallery +title: "Transparency Issues" +order: 54 +image: "/webp-gallery/transparency_issues.webp" +alt: "Transparency Rendering Issues" +--- + +Artifacts from transparency rendering - a notoriously tricky problem in real-time graphics. Shows the visual glitches that appear when transparent surfaces aren't sorted correctly. +## (WORK IN PROGRESS) diff --git a/_gallery/tsmc-item-drops.md b/_gallery/tsmc-item-drops.md new file mode 100644 index 0000000..5e12387 --- /dev/null +++ b/_gallery/tsmc-item-drops.md @@ -0,0 +1,10 @@ +--- +layout: gallery +title: "TSMC Item Drops" +order: 33 +image: "/webp-gallery/tsmc_item_drops.webp" +alt: "TSMC Item Drops Screenshot" +--- + +Screenshot showing item drop mechanics in a game development project. Visual feedback for loot or resource collection systems. +## (WORK IN PROGRESS) diff --git a/_gallery/vertex-colors.md b/_gallery/vertex-colors.md new file mode 100644 index 0000000..82db61d --- /dev/null +++ b/_gallery/vertex-colors.md @@ -0,0 +1,13 @@ +--- +layout: gallery +title: "Vertex Colors" +order: 29 +image: "/webp-gallery/chunk_coordinate_speicfic_vertex_colors.webp" +alt: "Chunk-Specific Vertex Colors" +--- + +Debug visualization encoding chunk coordinates directly into vertex color. Each chunk receives a distinct color based on its position in the world grid. + +This made it easier to distinguish rendering artifacts related to transparency and draw order. When sorting issues occurred, color discontinuities revealed whether geometry was being submitted or composited incorrectly. + +Encoding chunk position directly into the vertex data turned visual corruption into something measurable. Instead of guessing, I could see exactly where ordering broke down. diff --git a/_gallery/voronoi-3d.md b/_gallery/voronoi-3d.md new file mode 100644 index 0000000..9185cf5 --- /dev/null +++ b/_gallery/voronoi-3d.md @@ -0,0 +1,15 @@ +--- +layout: gallery +title: "Voronoi 3D" +order: 38 +image: "/webp-gallery/voronoi_3d.webp" +alt: "3D Voronoi Diagram" +--- + +Three dimensional Voronoi field sampled on a voxel grid. + +Each cell represents the region closest to a given seed point. When discretized and thresholded, the structure produces sharp cellular boundaries and irregular terrain like formations. + +Outside of Blender, an implementation like this would benefit from spatial subdivision such as BSP partitioning to reduce traversal cost and support efficient queries. + +Small changes in seed distribution significantly alter global topology. diff --git a/_gallery/voxel-distance-map.md b/_gallery/voxel-distance-map.md new file mode 100644 index 0000000..bb9f1bf --- /dev/null +++ b/_gallery/voxel-distance-map.md @@ -0,0 +1,9 @@ +--- +layout: gallery +title: "Voxel Distance Map" +order: 25 +image: "/webp-gallery/voxel_raymarching_distance_map.webp" +alt: "Voxel Raymarching Distance Map" +--- + +## (WORK IN PROGRESS) diff --git a/_gallery/water-transparency.md b/_gallery/water-transparency.md new file mode 100644 index 0000000..b020fed --- /dev/null +++ b/_gallery/water-transparency.md @@ -0,0 +1,10 @@ +--- +layout: gallery +title: "Water Transparency" +order: 19 +image: "/webp-gallery/water_layer_transparency.webp" +alt: "Water Layer Transparency Test" +--- + +Testing water transparency and refraction in a voxel world. Shows the challenges of rendering semi-transparent water layers over submerged terrain. +## (WORK IN PROGRESS) diff --git a/_gallery/z-fighting.md b/_gallery/z-fighting.md new file mode 100644 index 0000000..89945d1 --- /dev/null +++ b/_gallery/z-fighting.md @@ -0,0 +1,13 @@ +--- +layout: gallery +title: "Z-Fighting" +order: 49 +image: "/webp-gallery/zfighting.webp" +alt: "Z-Fighting Rendering Artifact" +--- + +Demonstration of z fighting, a rendering artifact that occurs when two surfaces occupy nearly identical depth values in the depth buffer. + +Limited floating point precision causes the renderer to alternate which fragment appears in front, producing visible flickering. + +More common than one would like. diff --git a/_gallery/zhaw-at-night.md b/_gallery/zhaw-at-night.md new file mode 100644 index 0000000..99df276 --- /dev/null +++ b/_gallery/zhaw-at-night.md @@ -0,0 +1,11 @@ +--- +layout: gallery +title: "ZHAW at Night" +order: 27 +image: "/webp-gallery/zhaw_technikum_at_night_fixed.webp" +alt: "ZHAW Technikum at Night" +--- + +The ZHAW Winterthur campus photographed at night. This is where I am building my foundation in analysis, linear algebra, information theory, and algorithms. + +It is the place where I spend most of my time studying, building projects, and figuring out what I want to become good at. diff --git a/_includes/collection_nav.html b/_includes/collection_nav.html new file mode 100644 index 0000000..7bf8e0a --- /dev/null +++ b/_includes/collection_nav.html @@ -0,0 +1,10 @@ +{%- assign _i = nil -%} +{%- for p in include.docs -%} + {%- if p.url == page.url -%}{%- assign _i = forloop.index0 -%}{%- endif -%} +{%- endfor -%} +{%- assign _prev_i = _i | minus: 1 -%} +{%- assign _next_i = _i | plus: 1 -%} +{%- for p in include.docs -%} + {%- if _i > 0 and forloop.index0 == _prev_i %} | < {{ p.title }}{%- endif -%} + {%- if forloop.index0 == _next_i %} | {{ p.title }} >{%- endif -%} +{%- endfor -%} diff --git a/_includes/gallery_nav.html b/_includes/gallery_nav.html new file mode 100644 index 0000000..ee19096 --- /dev/null +++ b/_includes/gallery_nav.html @@ -0,0 +1,2 @@ +{%- assign _sorted = site.gallery | sort: 'order' | reverse -%} +{% include collection_nav.html docs=_sorted %} diff --git a/_includes/post_nav.html b/_includes/post_nav.html new file mode 100644 index 0000000..05df0f7 --- /dev/null +++ b/_includes/post_nav.html @@ -0,0 +1,6 @@ +{% if page.previous %} + | < {{ page.previous.title }} +{% endif %} +{% if page.next %} + | {{ page.next.title }} > +{% endif %} diff --git a/_includes/project_nav.html b/_includes/project_nav.html new file mode 100644 index 0000000..589d4a5 --- /dev/null +++ b/_includes/project_nav.html @@ -0,0 +1 @@ +{% include collection_nav.html docs=site.projects %} diff --git a/_layouts/base.html b/_layouts/base.html index 8964f73..eb3db47 100644 --- a/_layouts/base.html +++ b/_layouts/base.html @@ -81,27 +81,6 @@ pre { overflow-x: auto; } - - @media (max-width: 880px) { - body { - padding: 0.5rem; - } - .mobile-table thead { - display: none; - } - .mobile-table tr { - display: block; - border-bottom: 1px solid #ddd; - } - .mobile-table td { - display: block; - border-bottom: none; - } - .mobile-table td:before { - content: attr(data-label) ": "; - font-weight: bold; - } - } @@ -114,6 +93,7 @@

{% include navlink.html href="/" label="CB341.DEV" %}

| {% include navlink.html href="/til" label="TIL" %} | {% include navlink.html href="/blog" label="Blog" %} | {% include navlink.html href="/projects" label="Projects" %} + | {% include navlink.html href="/gallery" label="Gallery" %}