Merge branch 'portfolio'

20 files changed, 454 insertions, 7 deletions

diff --git a/build/layout.moon b/build/layout.moon
index 428ca6f..7985371 100644
--- a/build/layout.moon
+++ b/build/layout.moon
@@ -48,6 +48,7 @@ logo = svg {
     }
     aside {
       navigate_to '/about', 'about me'
+      navigate_to '/portfolio', 'portfolio'
       navigate_to '/games', 'games'
       navigate_to '/projects', 'other'
       a {
diff --git a/mmm/component/init.server.moon b/mmm/component/init.server.moon
index 7c7fb7e..ecfa21e 100644
--- a/mmm/component/init.server.moon
+++ b/mmm/component/init.server.moon
@@ -28,7 +28,7 @@ escapes = {
 
 text = (str) ->
   str = tostring str
-  str\gsub '[}{">/<\'&]', escapes
+  (str\gsub '[}{">/<\'&]', escapes)
 
 class ReactiveVar
   @isinstance: (val) -> 'table' == (type val) and val.subscribe
diff --git a/mmm/mmmfs/browser.moon b/mmm/mmmfs/browser.moon
index a57e8b9..8c2196a 100644
--- a/mmm/mmmfs/browser.moon
+++ b/mmm/mmmfs/browser.moon
@@ -49,7 +49,7 @@ class Browser
 
     -- update URL bar
     if MODE == 'CLIENT'
-      logo = document\querySelector 'header h1 > svg'
+      logo = document\querySelector 'header h1 > a > svg'
       spin = ->
         logo.classList\add 'spin'
         logo.parentElement.offsetWidth
diff --git a/mmm/mmmfs/conversion.moon b/mmm/mmmfs/conversion.moon
index f6ca8c0..d8bc179 100644
--- a/mmm/mmmfs/conversion.moon
+++ b/mmm/mmmfs/conversion.moon
@@ -62,8 +62,7 @@ converts = {
         html = html\gsub '<mmm%-embed%s+(.-)>(.-)</mmm%-embed>', (attrs, desc) ->
           path, facet = '', ''
           opts = {}
-          if #desc != 0
-            opts.desc = desc
+          opts.desc = desc if #desc > 0
 
           while attrs and attrs != ''
             key, val, _attrs = attrs\match '^(%w+)="([^"]-)"%s*(.*)'
@@ -97,6 +96,7 @@ converts = {
             nolink = js_fix element\getAttribute 'nolink'
             inline = js_fix element\getAttribute 'inline'
             desc = js_fix element.innerText
+            desc = nil if #desc < 1
 
             element\replaceWith embed path or '', facet or '', fileder, { :nolink, :inline, :desc }
 
diff --git a/root/about/text$markdown.md b/root/about/text$markdown.md
index 9826089..cf07175 100644
--- a/root/about/text$markdown.md
+++ b/root/about/text$markdown.md
@@ -1,11 +1,13 @@
 about me
 ========
 i am s-ol bekic, a game designer and web developer currently based in cologne.  
-i create experimental mixed-ware [games][games], [computer interfaces][mmmfs], [looping][loops] and [reactive][vjkit] animations and [other experiments.][other]
+i create experimental mixed-ware [games][games], [computer interfaces][mmmfs], [looping][loops] and [reactive][vjkit] animations and [other experiments][other].
 
+if you are looking for an overview over my work or skillset, take a look at my [portfolio][portfolio].
 
 [games]: /games
 [mmmfs]: /articles/mmmfs
 [loops]: /projects/demoloops
 [vjkit]: /projects/VJmidiKit
 [other]: /projects
+[portfolio]: /portfolio
diff --git a/root/portfolio/1u-mod/media: image$jpeg.jpg b/root/portfolio/1u-mod/media: image$jpeg.jpg
new file mode 100644
index 0000000..2d6f26f
--- /dev/null
+++ b/root/portfolio/1u-mod/media: image$jpeg.jpg
diff --git a/root/portfolio/VJmidiKit/media: video$mp4.mp4 b/root/portfolio/VJmidiKit/media: video$mp4.mp4
new file mode 100644
index 0000000..92d0645
--- /dev/null
+++ b/root/portfolio/VJmidiKit/media: video$mp4.mp4
diff --git a/root/portfolio/channels_side.png b/root/portfolio/channels_side.png
new file mode 100644
index 0000000..e69de29
--- /dev/null
+++ b/root/portfolio/channels_side.png
diff --git a/root/portfolio/hidden: text$lua -> bool b/root/portfolio/hidden: text$lua -> bool
new file mode 100644
index 0000000..585a20e
--- /dev/null
+++ b/root/portfolio/hidden: text$lua -> bool
@@ -0,0 +1 @@
+return false
diff --git a/root/portfolio/lame: text$markdown.md b/root/portfolio/lame: text$markdown.md
new file mode 100644
index 0000000..c6c1f4c
--- /dev/null
+++ b/root/portfolio/lame: text$markdown.md
@@ -0,0 +1,85 @@
+skillset
+--------
+<p style="max-width: 800px;">
+  Here you can find a selection of technologies, languages and skills I have acquired and used in the past,
+  together with select projects demonstrating these abilities.
+  Projects marked in <em>italic</em> represent employment / professional consulting (see below for details).
+</p>
+
+- programming
+  - C++
+    - openFrameworks: [VJmidiKit][VJmidiKit]
+  - JS
+    - nodejs & react: [*rise*][rise], [iii telefoni][tre_telefoni], [IYNX][iynx]
+  - Lua & Moonscript: [this website](/meta), [vision-training-kit][vtk], [gayngine][gayngine]
+  - Python: [themer][themer]
+  - GLSL & HLSL: [*Vectronom*][vectronom], [*Harold Halibut*][hh], [VJmidiKit][VJmidiKit] (raymarching content)
+  - C# & Unity: [*Vectronom*][vectronom], [*Harold Halibut*][hh]
+  - Clojure: [*Vectronom*][vectronom] (UGC backend)
+- electronics
+  - PCB Design: [btrktrl][btrktrl]
+  - embedded programming
+    - micro controllers: [IYNX][iynx], [*Vectronom*][vectronom] (fair booth)
+    - FPGAs: [btrktrl][btrktrl]
+- general technologies
+  - avid linux user
+  - docker & docker-compose: [*rise*][rise]
+  - mongodb: [*rise*][rise]
+- visual & motion design: [demoloops][demoloops], [VJmidiKit][VJmidiKit]
+
+professinal work
+------------------
+### slow bros - Harold Halibut
+<p style="max-width: 800px;">
+  I am working with Slow Bros on their upcoming game <a href="http://haroldhalibut.com/">Harold Halibut</a>
+  For Harold Halibut I do Gameplay- and Tools Programming, as well as Shaders and Porting.
+</p>
+
+### ludopium - Vectronom
+I have worked on [Vectronom](https://vectronom.arte.fr),
+where I implemented and worked on many systems in and around the game:
+
+- gamplay programming
+- UI programming
+- palette system using HLSL shaders
+- clojure-based REST API for storing and sharing UGC
+  - integration with backend services by Steam and Nintendo
+- development of tech for the fair booth
+  - realtime speedrunning leaderboard
+  - custom driver for LED lettering
+- porting (Nintendo Switch, Android, iOS)
+
+### rise technologies
+<p style="max-width: 800px;">
+  I worked as a full-stack developer with rise technologies on their remote support solution for three years.
+  In this time I designed, created and worked on multiple systems and layers of the product:
+</p>
+
+- front-end development (react, material-ui)
+- back-end development
+  - main application (meteorjs, node, monogdb)
+  - microservice architecture (nodejs, rabbit MQ)
+  - notification handling & delivery (APN, FCM)
+- mobile development & debuggin (cordova for Android, iOS)
+- webRTC conferencing
+  - using janus-gateway
+  - contributed C patches reinforcing the communication security for our needs
+  - implemented client-side logic
+  - implemented gateway orchestration
+- dev-ops
+  - designed a custom CI system
+  - designed deployment infrastructure on MS Azure (docker, docker-compose)
+  - supervised migration from MS Azure to Amazon AWS
+
+[themer]: https://github.com/s-ol/themer
+[vtk]: https://s-ol.itch.io/vision-training-kit
+[iynx]: /games/IYNX
+[btrktrl]: /projects/btrktrl
+[VJmidiKit]: /projects/VJmidiKit
+[demoloops]: /projects/demoloops
+[tre_telefoni]: /projects/iii-telefoni
+[gayngine]: /blog/love_lua_photoshop_and_games
+
+[vectronom]: #ludopium-vectronom
+[hh]: #slow-bros-harold-halibut
+[rise]: #rise-technologies
diff --git a/root/portfolio/lorem_ipsum/media: image$jpeg.jpg b/root/portfolio/lorem_ipsum/media: image$jpeg.jpg
new file mode 100644
index 0000000..f52b200
--- /dev/null
+++ b/root/portfolio/lorem_ipsum/media: image$jpeg.jpg
diff --git a/root/portfolio/lorem_ipsum/media: image$png.png b/root/portfolio/lorem_ipsum/media: image$png.png
new file mode 100644
index 0000000..994884a
--- /dev/null
+++ b/root/portfolio/lorem_ipsum/media: image$png.png
diff --git a/root/portfolio/mmm/media: image$png.png b/root/portfolio/mmm/media: image$png.png
new file mode 100644
index 0000000..34a562e
--- /dev/null
+++ b/root/portfolio/mmm/media: image$png.png
diff --git a/root/portfolio/rise/media: image$png.png b/root/portfolio/rise/media: image$png.png
new file mode 100644
index 0000000..b33cc13
--- /dev/null
+++ b/root/portfolio/rise/media: image$png.png
diff --git a/root/portfolio/text$moonscript -> mmm$dom.moon b/root/portfolio/text$moonscript -> mmm$dom.moon
new file mode 100644
index 0000000..76d8f99
--- /dev/null
+++ b/root/portfolio/text$moonscript -> mmm$dom.moon
@@ -0,0 +1,339 @@
+import ReactiveVar, tohtml, text, elements from require 'mmm.component'
+import article, a, video, img, h1, div, p, ul, li, br from elements
+import embed, link_to from (require 'mmm.mmmfs.util') elements
+
+embed_img = (src) -> (style) -> img :src, :style
+embed_vid = (src) -> (style) -> video autoplay: true, loop: true, muted: true, :src, :style
+
+import artistic, game, js, lua, shader, hardware, tool, collab, professional, cs, cpp from setmetatable {}, __index: (t, k) -> k
+
+padded_ul = (tbl) ->
+  ul with tbl
+    .style = padding: '0 2rem 0.5rem'
+
+projects = {
+    {
+      name: 'Vectronom / Ludopium'
+      desc: 'Technical Artist, Game Development'
+      extra: 'July - Decemer 2019'
+      content: padded_ul {
+        li text 'Unity/C# development (gameplay, UI, tools)'
+        li {
+          text 'backend for storing and sharing UGC across platforms'
+          ul {
+            li text 'SQL-backed storage of user-created levels'
+            li text 'implemented in clojure with clojure-ring'
+            li text 'integration with Steam and Nintendo services'
+          }
+        }
+        li {
+          text 'development of tech for showcase booths'
+          ul {
+            li text 'realtime speedrunning leaderboard (node, react)'
+            li text 'custom RGB LED driver and lettering'
+          }
+        }
+        li text 'porting to Nintendo Switch, Android, iOS, tvOS'
+        li text 'HLSL shader palette system'
+      }
+      href: 'https://vectronom.arte.tv'
+      media: embed_vid '/portfolio/vectronom/media:%20video$webm.webm'
+      tags: :cs, :professional, :js, :shader, :game
+    }
+    {
+      name: 'Harold Halibut / Slow Bros'
+      desc: 'Tool & Game Development'
+      extra: 'April - Decemer 2019 (consulting)'
+      content: padded_ul {
+        li {
+          text 'Unity/C# development'
+          ul {
+            li text 'developed multiple mini-games and interactions'
+          }
+        }
+        li text 'tool development'
+        li text 'shader programming'
+        li text 'porting (various consoles)'
+      }
+      href: 'http://haroldhalibut.com/'
+      media: embed_img 'http://haroldhalibut.com/wp-content/uploads/2016/07/AgoraArcades2.png'
+      tags: :cs, :professional, :game
+    }
+    {
+      name: 'rise technologies'
+      desc: 'Full-Stack Development, Web & App'
+      extra: 'April 2016 - April 2019'
+      content: padded_ul {
+        li text 'front-end development (react, material-ui)'
+        li {
+          text 'back-end development',
+          ul {
+            li text 'main application (meteor.js, node, MongoDB)'
+            li text 'microservice architecture (node, RabbitMQ)'
+            li text 'notification handling & delivery (APN, FCM)'
+          }
+        }
+        li text 'mobile development'
+        li {
+          text 'webRTC conferencing (janus-gateway)'
+          ul {
+            li text 'contributed C patches reinforcing the communication security for our needs'
+            li text 'implemented client-side logic'
+            li text 'implemented gateway orchestration'
+          }
+        }
+        li {
+          text 'dev-ops'
+          ul {
+            li text 'designed and implemented a custom CI system'
+            li text 'designed deployment infrastructure on MS Azure (docker, docker-compose)'
+            li text 'supervised migration from MS Azure to Amazon AWS'
+          }
+        }
+      }
+      href: 'https://rise.tech'
+      media: embed_img '/portfolio/rise/media:%20image$png.png'
+      tags: :professional, :js, :tool
+    }
+    {
+      name: 'ForChange Reserach Fund'
+      desc: 'Game Design and Development'
+      extra: 'March - June 2017 (consulting)'
+      content: padded_ul {
+        li {
+          text "designed 'Lorem Ipsum' together with two research scientists"
+          ul {
+            li text 'design goal was to communicate their research findings'
+            li text 'created a paper prototype'
+            li text 'designed a 4-player social game about truth and perspectives'
+          }
+        }
+        li {
+          text 'developed the game as a web application'
+          ul {
+            li text 'front-end using react'
+            li text 'back-end hosts game sessions via WebSockets'
+            li text 'joining games via link or QR-code scanning (in-app)'
+            li text 'gameplay implemented in immutable/functional-style'
+          }
+        }
+      }
+      href: 'https://loremipsum.s-ol.nu/'
+      media: embed_img '/portfolio/lorem_ipsum/media:%20image$jpeg.jpg'
+      tags: :professional, :js, :collab, :game
+    }
+    {
+      name: 'btrktrl'
+      desc: 'a custom MIDI/OSC control surface'
+      entries: {
+        'encoders with capacitive touch and RGB feedback'
+        'custom PCBs based on iCE40 FPGAs'
+        'motherboard with Arduino MCU'
+        'communication via OSC/USB'
+        'individually programmable daughterboards'
+      }
+      href: '/projects/btrktrl'
+      media: embed_img '/projects/btrktrl/pcb_glamour_top/image$jpeg.jpg'
+      tags: :hardware, :tool, :cpp
+    }
+    {
+      name: 'VJmidiKit'
+      desc: 'a tool for MIDI-reactive visuals'
+      entries: {
+        'GLSL shader livecoding'
+        'block-based language for MIDI-music reactivity'
+        'implemented in openFrameworks/C++'
+      }
+      href: '/projects/VJmidiKit'
+      media: embed_vid '/portfolio/VJmidiKit/media:%20video$mp4.mp4'
+      tags: :tool, :cpp, :shader
+    }
+    {
+      name: 'IYNX'
+      desc: 'a narrative, tangible, physical puzzle incorporating digital elements'
+      entries: {
+        'powered by a raspberry pi 3 and two arduino nanos'
+        'touch-panel UI and control software with node, electron and react'
+        'interfaces with analog potentiometers, keypad matrix, switches'
+      }
+      href: '/games/IYNX'
+      media: embed_img '/games/IYNX/pictures/ui_menu/image$jpeg.jpg'
+      tags: :collab, :game, :js, :hardware
+    }
+    {
+      name: 'Plonat Atek'
+      desc: 'a sound-only breakout game, displayable on an oscilloscope'
+      entries: {
+        'uses stereo sound to draw visuals on an oscilloscope'
+        'programmed in PureData'
+        'runs on a Raspberry Pi Zero in a custom case with hardware controls'
+        "1st place in Innovation, LudumDare 38 Compo"
+      }
+      href: '/games/plonat_atek'
+      media: embed_img '/games/plonat_atek/pictures/amaze/image$jpeg.jpg'
+      tags: :artistic, :game, :hardware
+    }
+    {
+      name: 'tre telefoni'
+      desc: 'experimental interactive installation piece about communication'
+      content: padded_ul {
+        li text 'realtime voice chat between three participants, in an unusual configuration'
+        li {
+          text 'web-based prototype'
+          ul {
+            li text 'realized using webRTC, react'
+            li text '3-player matchmaking'
+          }
+        }
+      }
+      href: '/projects/iii-telefoni'
+      media: embed_img '/projects/iii-telefoni/heads/image$jpeg.jpg'
+      tags: :artistic, :game, :js
+    }
+    {
+      name: '1u matrix mixer'
+      desc: 'Embedded Software Development'
+      entries: {
+        "embedded programming for a Eurorack module"
+        "C++, targetting Teensy 3.5"
+        "8 encoders with RGB lighting"
+        "digtally controls a 8x8 switching matrix and 8 channels of volume modulation"
+      }
+      media: embed_img '/portfolio/1u-mod/media:%20image$jpeg.jpg'
+      tags: :collab, :hardware, :cpp
+    }
+    {
+      name: 'mmm'
+      desc: 'experimental file-system/CMS/digital working space'
+      content: padded_ul {
+        style: padding: '0 2em 1em'
+        li text 'powers this website'
+        li text 'implemented in Lua/MoonScript'
+        li text 'innovative type-coercion system'
+        li text 'client/server polymorphic UI framework'
+        li text 'built-in server-side rendering and interactive editing support'
+      }
+      -- href: '/articles/mmmfs'
+      media: embed_img '/portfolio/mmm/media:%20image$png.png'
+      tags: :tool, :lua
+    }
+    {
+      name: 'Toy Box Orchestra'
+      desc: 'interactive audio-visual performance project'
+      entries: {
+        "circuit bent childrens' toys"
+        "developed a realtime video effect inspired by analog video synthesisers in openframeworks and GLSL"
+        "interactive MIDI controls for the effect for performing it on stage"
+      }
+      href: 'https://chimpanzeebukkaque.bandcamp.com/releases'
+      media: embed_img '/portfolio/visualist/media:%20image$jpeg.jpg'
+      tags: :collab, :artistic, :cpp, :hardware, :shader
+    }
+  }
+
+project_row = (tag, exclude) ->
+  with ul style: display: 'flex', 'flex-wrap': 'wrap', 'align-items': 'top'
+    for pp in *projects
+      continue if tag and not pp.tags[tag]
+      continue if not tag and exclude and pp.tags[exclude]
+
+      \append li {
+        style:
+          'border-radius': '6px'
+          display: 'flex'
+          'flex-direction': 'column'
+          width: '22rem'
+          margin: '0.5em'
+          'padding-bottom': '0.5em'
+          background: 'var(--gray-bright)'
+          overflow: 'hidden'
+          'font-size': '0.9em'
+
+        a {
+          style:
+            display: 'block'
+            position: 'relative'
+            color: 'var(--gray-bright)'
+            background: 'var(--gray-dark)'
+            filter: 'none'
+
+          href: pp.href
+
+          pp.media {
+            width: '100%'
+            height: '13rem'
+            background: 'var(--gray-bright)'
+            'box-sizing': 'border-box'
+            'object-fit': 'cover'
+          }
+
+          h1 pp.name, style:
+            padding: '0.2rem 1rem'
+        }
+
+        if pp.extra
+          div pp.extra, style:
+            background: 'var(--gray-darker)'
+            color: 'var(--gray-bright)'
+            padding: '0.2em 1rem'
+
+        p (text pp.desc), style: 'padding': '0 1rem'
+        text ' '
+        pp.content or padded_ul for line in *pp.entries
+          li text line
+      }
+
+tohtml with article!
+  filter = ReactiveVar!
+
+  taglink = (label, tag=label) ->
+    a label, {
+      href: '#'
+      onclick: (e) =>
+        e\preventDefault!
+        filter\transform (old) -> if old == tag then nil else tag
+    }
+
+  \append p "I have worked with a wide range of technologies and frameworks. ",
+            "Below you can find a breakdown of the ones I am proficient in.", br!,
+            "You can click on any of the tags marked in bold to filter the projects below accordingly."
+
+  \append ul {
+    li {
+      "software programming"
+      ul {
+        li (taglink "JavaScript", js), ": react, nodejs, electron, meteor"
+        li (taglink "C++", cpp), ": openFrameworks, raymarching, SDFs"
+        li (taglink "GLSL & HLSL", shader), ": openFrameworks, intermediate openGL"
+        li taglink "C# and Unity", cs
+        li "Python"
+        li "Lua/MoonScript"
+      }
+    }
+    li {
+      (taglink hardware), " and embedded programming"
+      ul {
+        li "PCB Design"
+        li text "embedded programming (C++) and interfacing"
+        li "FPGA development (Verilog)"
+      }
+    }
+    li {
+      "other"
+      ul {
+        li "Linux"
+        li "docker, docker-compose"
+        li "HTML, CSS"
+      }
+    }
+  }
+
+  \append with h1 "selected projects", style: 'margin-top': '1em'
+    \append a "show all", href: '#', style: { 'font-size': '0.7em', 'margin-left': '1.5em' }, onclick: (e) =>
+      e\preventDefault!
+      filter\set!
+  \append filter\map => project_row @, professional
+
+  \append h1 "professional work", style: 'margin-top': '1em'
+  \append p "I have worked for or with the following companies and organisations in the past:"
+  \append project_row professional
diff --git a/root/portfolio/vectronom/media: video$webm.webm b/root/portfolio/vectronom/media: video$webm.webm
new file mode 100644
index 0000000..46b6596
--- /dev/null
+++ b/root/portfolio/vectronom/media: video$webm.webm
diff --git a/root/portfolio/visualist/media: image$jpeg.jpg b/root/portfolio/visualist/media: image$jpeg.jpg
new file mode 100644
index 0000000..17dc06d
--- /dev/null
+++ b/root/portfolio/visualist/media: image$jpeg.jpg
diff --git a/root/projects/iii-telefoni/text$markdown.md b/root/projects/iii-telefoni/text$markdown.md
index 0a374e9..aa9c078 100644
--- a/root/projects/iii-telefoni/text$markdown.md
+++ b/root/projects/iii-telefoni/text$markdown.md
@@ -20,7 +20,7 @@ The players have to try to figure out a way to communicate to each other despite
 If they succeed, they can optionally try to arrange a meeting point on the grounds of the showcase to debrief and reflect on their experience.
 
 Though *Tre Telefoni* has been designed as an installation piece as described above,
-a [web-based rototype][proto] is also available to playtest the premise itself.
+a [web-based prototype][proto] is also available to playtest the premise itself.
 
 artist statement
 ----------------
diff --git a/scss/_content.scss b/scss/_content.scss
index 708685f..7468de5 100644
--- a/scss/_content.scss
+++ b/scss/_content.scss
@@ -18,6 +18,20 @@
     }
   }
 
+  .markdown {
+    h2 + p,
+    h3 + p,
+    h4 + p,
+    h5 + p,
+    h6 + p {
+      margin-top: 0.2em;
+    }
+  }
+
+  .markdown > ul {
+    margin-block-end: 1em;
+  }
+
   .embed {
     width: inherit;
     height: inherit;
diff --git a/scss/_reset.scss b/scss/_reset.scss
index 99f1cae..ef2ef0d 100644
--- a/scss/_reset.scss
+++ b/scss/_reset.scss
@@ -40,7 +40,12 @@ a {
   text-decoration: underline;
   text-decoration-color: transparent;
 
-  &:hover {
+  cursor: default;
+  &[href] {
+    cursor: pointer;
+  }
+
+  &[href]:hover {
     filter: invert(40%);
     text-decoration-color: currentColor;
   }