Add Projects page

.tool-versions

@@ -1 +1 @@
-hugo 0.99.1
+hugo extended_0.115.2

Dockerfile

@@ -1,4 +1,4 @@
-FROM alpine:3.16.1
-RUN apk add --no-cache bash hugo=0.99.1-r2
+FROM alpine:edge
+RUN apk add --no-cache bash hugo=0.115.2-r0
 WORKDIR /app
 COPY . ./

assets/css/components/_logo.scss

@@ -21,7 +21,7 @@
 }
 
 .logo__wrapper {
-  width: 10rem;
+  width: 7rem;
   line-height: 0;
   padding-bottom: 0.5em;
 }

assets/css/elements/_headings.scss

@@ -6,6 +6,7 @@ h3 {
 }
 
 h3 {
+  margin-top: 2rem;
   font-size: 1.35rem;
 }
 

bin/server

@@ -1,3 +1,3 @@
 #!/usr/bin/env sh
 
-hugo server --buildDrafts --bind="0.0.0.0" -v --baseUrl="http://danbarber.localhost:1313/"
+hugo server --buildDrafts --bind="0.0.0.0" -v

content/projects/index.md

@@ -0,0 +1,65 @@
+---
+title: Projects
+layout: page
+---
+
+This is a list of projects that I've worked on over the years, in no particular
+order.
+
+### 64squares
+
+![Screenshot of 64squares.club, partway through a game](images/chess.png)
+
+[64squares](https://64squares.club) is an online, multiplayer chess game written
+in Elixir and Phoenix, with a React front end (although I'm partway through
+refactoring this into LiveView). It uses websockets via Phoenix channels to
+broadcast moves back and forth between players and implements a complete chess
+rules engine. The source code is [available on
+GitHub](https://github.com/danbee/chess).
+
+I wrote a [blog post about implementing some of the chess rules engine](/2018/08/10/chess-and-recursion-part-1).
+
+### Persephone
+
+![Screenshot of Persephone](https://persephone.fm/images/screenshot-dark.png)
+
+[Persephone](https://persephone.fm) is an MPD (Music Player Daemon) client for macOS, written in
+Swift/AppKit.
+
+### Ping Pong Scoreboard
+
+![Photo of the ping pong table with paddles, and the scoreboard iPad behind it](images/pingpong-table.jpg)
+
+In 2016, during a thoughtbot London hackathon, myself and my collegue Damien
+Tanner [implemented a scoreboard system for our ping pong table](https://thoughtbot.com/blog/building-a-ping-pong-scoreboard).
+This involved a nice mix of hardware hacking, [hardware code](https://gist.github.com/danbee/820a17d0aa75f8900250),
+and [simple web development](https://github.com/danbee/scoreboard).
+
+### Invaders
+
+![Screenshot of Invaders](images/invaders.png)
+
+[Invaders](https://invaders.danbee.in) was written in JavaScript using Phaser.js
+for a New Bamboo hack day in 2014. The source is [available on GitHub](https://github.com/danbee/invaders/tree/master).
+
+### My Images
+
+![Screenshot of my-images](images/my-images.png)
+
+[My Images](https://github.com/danbee/my-images) is a simple image storage
+application built in Rails with Dragonfly for image storage/processing. The
+current version uses Clarifai to automatically tag images using AI.
+
+### Mandelbrot Shader
+
+<figure>
+  <canvas class="glslCanvas shader" data-fragment-url="lib/mandelbrot.frag" width="1200" height="675"></canvas>
+</figure>
+
+I've long been interested in fractals, particularly the Mandelbrot set. I used
+to spend hours playing with Fractint on early PC's. A few years ago I realised
+that GPU hardware would be ideal for calculating fractals due to the massive
+paralellism they offer. This was my attempt to implement that with a [GLSL
+shader](https://github.com/danbee/shaders/blob/master/mandelbrot.frag).
+
+<script type="text/javascript" src="/js/glsl-canvas.js"></script>

content/projects/lib/mandelbrot.frag

@@ -0,0 +1,93 @@
+// Author: Daniel Barber
+// Title: Mandelbrot
+
+#ifdef GL_ES
+precision highp float;
+#endif
+
+uniform vec2 u_resolution;
+uniform vec2 u_mouse;
+uniform float u_time;
+
+const int max_i = 750;
+
+// x -0.922947648473392 y 0.29140221214586537
+// zoom 0.0001120703125
+
+const vec2 centre = vec2(0.0,0.0);
+const float radius = 2.0;
+
+const vec2 z_centre = vec2(-0.813118939, 0.203263184);
+//const vec2 z_centre = vec2(-0.811709827, 0.202253267);
+//const vec2 z_centre = vec2(-0.776592847, 0.136640848);
+//const vec2 z_centre = vec2(-0.922947648473392, 0.29140221214586537);
+//const vec2 z_centre = vec2(-2.0,-2.0);
+const float z_radius = 0.00025;
+//const float z_radius = 0.2;
+
+float doubleExponentialSigmoid (float x, float a) {
+  float epsilon = 0.00001;
+  float min_param_a = 0.0 + epsilon;
+  float max_param_a = 1.0 - epsilon;
+  a = min(max_param_a, max(min_param_a, a));
+  a = 1.0-a; // for sensible results
+  
+  float y = 0.0;
+  if (x<=0.5){
+    y = (pow(2.0*x, 1.0/a))/2.0;
+  } else {
+    y = 1.0 - (pow(2.0*(1.0-x), 1.0/a))/2.0;
+  }
+  return y;
+}
+
+vec3 hsb2rgb(in vec3 c) {
+    vec3 rgb = clamp(abs(mod(c.x*6.0+vec3(0.0,4.0,2.0),
+                             6.0)-3.0)-1.0,
+                     0.0,
+                     1.0 );
+    rgb = rgb*rgb*(3.0-2.0*rgb);
+    return c.z * mix(vec3(1.0), rgb, c.y);
+}
+
+void main() {
+    float exp_step = 1.0-exp(
+        exp(sin(u_time / 10.0))
+    ) / 14.0 + 0.1032;
+    
+    float step = doubleExponentialSigmoid(exp_step, 0.4);
+    vec2 i_centre = centre - ((centre - z_centre) * step);
+    float i_radius = radius - ((radius - z_radius) * step);
+    
+    vec2 st = gl_FragCoord.xy / u_resolution.xy;
+    float ratio = u_resolution.x / u_resolution.y;
+    st.x *= ratio;
+    
+    vec2 mandel = (st - vec2(0.5 * ratio, 0.5)) * (i_radius * 2.0) + i_centre;
+    
+    int i;
+    float x;
+    float y;
+    
+    float result;
+    vec4 colour;
+    
+    for(int n = 1; n < max_i; n++) {
+        float xtemp = x*x-y*y+mandel.x;
+        y = 2.0*x*y+mandel.y;
+        x = xtemp;
+        
+        if (x*x+y*y >= 2.0*2.0) {
+        	result = float(n) / 100.0;
+          	break;  
+        };
+    };
+    
+    if (result == 0.0) {
+        colour = vec4(0.0,0.0,0.0,1.0);
+    } else {
+        colour = vec4(hsb2rgb(vec3(result + (u_time / 100.0),1.0,1.0)),1.0);
+    }
+
+    gl_FragColor = colour;
+}

layouts/_default/page.html

@@ -0,0 +1,9 @@
+{{ define "main" }}
+  <article class="post container">
+    <header>
+      <h2 class="post__title">{{.Title}}</h2>
+    </header>
+
+    {{.Content}}
+  </article>
+{{ end }}

layouts/shortcodes/img.html

@@ -45,4 +45,5 @@
   {{ else }}
     src="{{ $src.RelPermalink }}"
   {{ end }}
-  {{ with .Get "alt" }}alt='{{.}}'{{ end }}>
+  {{ with .Get "alt" }}alt='{{.}}'{{ end }}
+>

layouts/shortcodes/picture.html

@@ -7,17 +7,21 @@
       <source
         media="(min-width: 535px)"
         data-original-set="{{ .Get "src" }}.{{ .Get "type" }} 1x,
-                {{ .Get "src" }}@2x.{{ .Get "type" }} 2x">
+                {{ .Get "src" }}@2x.{{ .Get "type" }} 2x"
+      >
       <!-- Small screens -->
       <source
         media="(max-width: 534px)"
         data-original-set="{{ .Get "src" }}-sm.{{ .Get "type" }} 1x,
-                {{ .Get "src" }}-sm@2x.{{ .Get "type" }} 2x">
+                {{ .Get "src" }}-sm@2x.{{ .Get "type" }} 2x"
+      >
       <!-- Fallback -->
       <img
         data-original="{{ .Get "src" }}.{{ .Get "type" }}"
         data-original-set="{{ .Get "src" }}@2x.{{ .Get "type" }} 2x"
-        alt="{{ .Get "alt" }}"{{ if .Get "caption"}} class="img-fluid figure-img"{{ end }}>
+        alt="{{ .Get "alt" }}"
+        {{ if .Get "caption"}} class="img-fluid figure-img"{{ end }}
+      >
     </picture>
   {{ if .Get "caption"}}
     <figcaption>{{ .Get "caption" }}</figcaption>