added backend for easy updats

.eleventy.js

@@ -36,7 +36,7 @@ module.exports = (config) => {
 
   // add collection for pages
   config.addCollection('categories', (collection) => {
-    // let categories = collection.getFilteredByGlob('**')
+
     let categories = fs.readdirSync('_content')
     categories = categories.filter(c => !c.match(/\.[^/.]{1,4}$/i))
 
@@ -46,7 +46,7 @@ module.exports = (config) => {
       let sorted = []
       let unsorted = []
 
-      let pages = collection.getFilteredByGlob(`_content/${cat}/*.md`)
+      let pages = collection.getFilteredByGlob(`src/_content/work/${cat}/*.md`)
 
       for (let page of pages) {
         if (page.data.sort) {
@@ -64,7 +64,17 @@ module.exports = (config) => {
       _cat[cat] = sorted.concat(unsorted)
     })
 
-    return _cat
+    let _p = collection.getFilteredByGlob('_content/*.md')
+    let pages = {}
+    // _cat = { ..._cat, ...pages }
+
+    _p.forEach(p => {
+      if (p.data.title != 'index') {
+        pages[p.data.title] = p
+      }
+    })
+
+    return { ..._cat, ...pages }
   })
 
   // custom filters
@@ -77,6 +87,9 @@ module.exports = (config) => {
   // added passthrough for global assets
   config.addPassthroughCopy('assets')
 
+  // backend
+  config.addPassthroughCopy('office')
+
   // added passthrough for images in their respective folders
   config.addPassthroughCopy('_content/**/images/**')
 

_content/audio/alternativeEchelons.md

@@ -2,16 +2,14 @@
 title: alternative echelons
 ---
 
-
 <div style="padding:56.25% 0 0 0;position:relative;">
   <iframe src="https://player.vimeo.com/video/394133870?color=ffffff&amp;portrait=0" style="position:absolute;top:0;left:0;width:100%;height:100%;" webkitallowfullscreen="" mozallowfullscreen="" allowfullscreen="" frameborder="0"></iframe>
 </div>
 <script src="https://player.vimeo.com/api/player.js"></script>
 
-
 # alternative echelons
 
-Sound design for [alternative echelons](http://www.amypickles.co.uk/research-ing/alternative-echelons-1) by [Amy Pickles](https://www.amypickles.co.uk/). _alternative echelons_ is a research project to challenge colonial occupation and corporate, capitalist listening.
+Sound design for [alternative echelons](http://www.amypickles.co.uk/research-ing/alternative-echelons-1) by [amy pickles](https://www.amypickles.co.uk/). _alternative echelons_ is a research project to challenge colonial occupation and corporate, capitalist listening.
 
 The video above is the trailer to the live performance, and projection that was to happen in November 2020. An improvised soundtrack was performed live and consisted of pre-recorded and synthesised material. Documentation of the performance can be watched on [vimeo](https://vimeo.com/495285427)
 

_content/audio/audio.json

@@ -1,5 +1,4 @@
 {
   "category": "audio",
-  "published": true,
   "layout": "page.webc"
 }

_content/audio/dirtc.md

@@ -12,7 +12,7 @@ title: dirtc
 
 Workshop experimenting with mobile phones and live real time conferencing protocol. Individual's phones joined voice, performed and environmental noises in a dirty feedback.
 
-Texts collated by [Amy Pickles](http://amypickles.co.uk/) discussing the first recording of a human voice, an unknown female, and texts that considered how we record, what is lost, edited, removed and forgotten were the source.
+Texts collated by [amy pickles](http://amypickles.co.uk/) discussing the first recording of a human voice, an unknown female, and texts that considered how we record, what is lost, edited, removed and forgotten were the source.
 
 The acoustic output was being performed more by digital noise cancelling, and network interference, curated via a custom performance software instrument through looping and time manngling.
 

_content/audio/read-my-lips.md

@@ -7,7 +7,7 @@ gallery:
 
 # Read my lips : No New Taxes
 
-A collaboration with artist Amy Pickles developing and performing part of the sound component. Custom developed a looper mangler using open source software and hardware. The project text :
+A collaboration with artist [amy pickles](http://amypickles.co.uk) developing and performing part of the sound component. Custom developed a looper mangler using open source software and hardware. The project text :
 
 <iframe scrolling="no" allow="autoplay" src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/615639498&amp;color=%23333333&amp;auto_play=false&amp;hide_related=true&amp;show_comments=false&amp;show_user=true&amp;show_reposts=false&amp;show_teaser=true&amp;visual=true" width="100%" height="300" frameborder="no"></iframe>
 

_content/cv.md

@@ -23,7 +23,7 @@ Bachelor Jazz Performance (Saxophone) & Creative Sound Engineering
 ### Teaching
 
 _Willem de Kooning Academie_<br>
-2020 - current // Rotterdam, NL<br>
+2020 - 2023 // Rotterdam, NL<br>
 Tutor within the Graphic Design Major
 
 _Paris College of Art_<br>
@@ -38,6 +38,80 @@ _École Européenne des Métiers de l'Internet_<br>
 2018 - 2019 // Paris, FR<br>
 Faculty Member within the Graphic Design department
 
+### Freelance
+
+_Meredith Monk : Rooms for Listening & Looking_<br>
+Oude Kerk<br>
+2023 //  Amsterdam, NL<br>
+Development of application to showcase video and audio work
+
+_Fondation Meyer_<br>
+2022 // Paris, FR<br>
+Website development
+
+_Green-Shoots_<br>
+NOOR Images<br>
+2022 // Paris, FR<br>
+Website development
+
+_World Press Photo_<br>
+2021 // Paris, FR<br>
+Website development for online exhibition
+
+_Performance Lab Workshop Series_<br>
+2019 // Rotterdam, NL<br>
+Website design & development
+
+### Sound
+
+#### Performances
+_alternative echelons_<br>
+2020 // UBIK, Rotterdam, NL<br>
+
+_Design Days Finnisage_<br>
+Espace 15<br>
+2019 // Paris, FR
+
+_Read My Lips: No New Taxes_<br>
+Galerie Lecq<br>
+2019 // Rotterdam, NL
+
+_E-ARTHA_<br>
+DePlayer<br>
+2018 // Rotterdam, NL
+
+_North Sea Jazz Around Town_<br>
+VARIA<br>
+2018 // Rotterdam, NL
+
+_POST TOAST_<br>
+Red Light Radio<br>
+2018 // Amsterdam, NL
+
+#### Soundtracks
+
+_Dragon Hunt_<br>
+by _Marko Gutić Mižimakov_<br>
+2023 // Brussels, BE<br>
+
+_alternative echelons_ (trailer)<br>
+by Amy Pickles<br>
+2019
+
+_Ghost Terminal_<br>
+by Ryan Cherewaty<br>
+2019
+
+_Memory of Death's Dream_<br>
+by Ryan Cherewaty<br>
+2019
+
+#### Studio Experience
+
+_Linear Recording_<br>
+2009 – 2010 // Sydney, AU<br>
+Assistant Sound Engineer
+
 ### Selected Exhibitions & Events
 
 _Sounds to See_<br>
@@ -75,7 +149,7 @@ _Barcu Art Fair_<br>
 2015 // Bogota, CO<br>
 Presentation via Skype on Collaborative Art, Interactivity and Improvisation.
 
-### Recent PRogrammes & Resdencies
+### Recent Programmes & Resdencies
 
 _Thresholds of the Algorithmic_<br>
 Algorithms that Matter<br>
@@ -86,57 +160,3 @@ _Get a Room Residency_<br>
 Frontyard<br>
 2018 // Sydney, AU<br>
 Research residency around Master's research on Software and Improvisation.
-
-### Sound
-
-#### Performances
-_alternative echelons_<br>
-2020 // UBIK, Rotterdam, NL<br>
-
-_Design Days Finnisage_<br>
-Espace 15<br>
-2019 // Paris, FR
-
-_Read My Lips: No New Taxes_<br>
-Galerie Lecq
-2019 // Rotterdam, NL
-
-_E-ARTHA_<br>
-DePlayer
-2018 // Rotterdam, NL
-
-_North Sea Jazz Around Town_<br>
-VARIA<br>
-2018 // Rotterdam, NL
-
-_POST TOAST_<br>
-Red Light Radio<br>
-2018 // Amsterdam, NL
-
-#### Soundtracks
-
-_alternative echelons_ (trailer)<br>
-by Amy Pickles<br>
-2019
-
-_Ghost Terminal_<br>
-by Ryan Cherewaty<br>
-2019
-
-_Memory of Death's Dream_<br>
-by Ryan Cherewaty<br>
-2019
-
-### Professional Experience
-
-_Willem de Kooning Academie_<br>
-2018 // Rotterdam, NL<br>
-Publication Station teaching and technical assistant
-
-_Freelance Graphic Designer_<br>
-2009 – 2014 // Sydney, AU<br>
-Web-design, poster and album design
-
-_Linear Recording_<br>
-2009 – 2010 // Sydney, AU<br>
-Assistant Sound Engineer</p>

_content/dev/dev.json

@@ -0,0 +1,5 @@
+{
+  "category": "dev",
+  "layout": "page.webc",
+  "published": true
+}

_content/dev/fondation-meyer.md

@@ -0,0 +1,30 @@
+---
+title: Fondation Meyer
+url: https://www.fondationmeyer.org/
+git: https://github.com/m3astwood/11ty.meyer
+tags:
+  - frontend
+  - development
+  - design
+summary: Website design and development for a cultural funding foundation in France.
+order: 2
+imgFeat:
+gallery:
+  - /dev/images/fondation_meyer_home.png
+  - /dev/images/fondation_meyer_conservatoire.png
+  - /dev/images/fondation_meyer_beneficiaries_2000.png
+  - /dev/images/fondation_meyer_beneficiaries_search.png
+  - /dev/images/fondation_meyer_prix_jean-nicod.png
+---
+
+# Fondation Meyer
+
+[website]({{url}}) / [git]({{git}})
+
+---
+
+This project was developed with [Theo Goedert](https://www.theogoedert.com/) who was approached by Fondation Meyer. The primary requirements were that their outdated website be modernised for mobile devices, and that the funding recipients for the _Conservatoire de Paris_ were more easily searchable.
+
+For this project we worked with [11ty](https://11ty.dev/) to develop a lightweight and performant solution. For the search I developed a simple interface using [AlpineJS](https://alpinejs.dev/) and the IndexDB browser API through [dexie](https://dexie.org/).
+
+![](/dev/images/fondation_meyer_video.gif)

_content/dev/green-shoots.md

@@ -0,0 +1,27 @@
+---
+title: Green-Shoots
+url: https://green-shoots.eu/
+tags:
+  - frontend
+  - development
+summary: Development of online platform highlighting green initiatives accross the EU through photography.
+order: 4
+imgFeat:
+gallery:
+  - /dev/images/green-shoots_project_full.png
+  - /dev/images/green-shoots_image.png
+---
+
+# Green-Shoots
+
+[website]({{url}}) / [git]({{git}})
+
+---
+
+Green-Shoots website was a collaborative effort between the studio [shimsham](https://shimsham.design/) and myself. The brief was to develop a website that would showcase the results of a European Project highlighting environmental projects and impacts across Europe.
+
+It was important for the client that the site was relatively lightweight to reduce as much as possible the website's environmental impact.
+
+In pursuit of this we aimed to use as few libraries as possible, and keeping the JavaScript to a minimum. The final result was a custom theme for the [Kirby CMS](https://getkirby.com/).
+
+![](/dev/images/green-shoots_home_full.png)

_content/dev/plws.md

@@ -0,0 +1,29 @@
+---
+title: Performance Lab Workshop Series
+url: https://performancelab.ga/
+git: https://git.suroh.tk/suroh/plws.theme
+tags:
+  - frontend
+  - development
+  - design
+summary: Website design and development for Rotterdam based art & research organisation.
+order: 3
+imgFeat:
+gallery:
+  - /dev/images/plws_home.png
+  - /dev/images/plws_mavi_one.png
+  - /dev/images/plws_mavi_two.png
+  - /dev/images/plws_mavi_three.png
+---
+
+# Performance Lab Workshop Series
+
+[website]({{url}}) / [git]({{git}})
+
+---
+
+The brief for this project was to develop a simple, user editable website to house the outcomes of performance workshops. The client wanted that the various outcomes of each workshop would live side by side, and visually be able to engage with each other. This lead to the three column expandable and retractable interface.
+
+![](/dev/images/plws_eleanor_two.png)
+
+The website is a custom theme developed for the [Automad CMS](https://automad.org/) in PHP, HTML and vanilla JavaScript. My desire was to keep all the technology open source, and use as few libraries as possible.

_content/dev/stnThrw.md

@@ -0,0 +1,35 @@
+---
+title: Stone Throw
+git: https://git.suroh.tk/suroh/stnThrw
+tags:
+  - frontend
+  - backend
+  - development
+  - design
+summary: Development and design of an online Art installation to be released in 2023.
+order: 1
+imgFeat:
+gallery:
+  - /dev/images/stone_throw_scanned.png
+  - /dev/images/stone_throw_pd.png
+  - /dev/images/stone_throw_references.png
+  - /dev/images/stone_throw_colophon.png
+  - /dev/images/stone_throw_writing_top.png
+  - /dev/images/stone_throw_writing_refs.png
+---
+
+# Stone Throw
+
+[git]({{git}})
+
+---
+
+This project was conceived in collaboration with artist [amy pickles](http://www.amypickles.co.uk/) along with other collaborators, to develop an interactive, sound installation exploring the nature of digital disintegration.
+
+![](/dev/images/stone_throw_video.gif)
+
+Each item that is scanned is generated on the server, taking one image of a reference used in the artist's research, and an image of a stone. Once it has generated this scan the server degrades the image by removing pixels from the image and saving over the original. As the scans progress, the file sizes change, which in turn progresses the musical composition.
+
+The installation lives until the files are totally degraded to the point that they are deleted from the server.
+
+I used this opportunity to explore custom vanilla js web components, building an API in NodeJS using [Express.js](http://expressjs.com/), live feedback from the server using [Socket.io](https://socket.io/), generative audio through [puredata](https://puredata.info/), and online radio using [Icecast](https://icecast.org/).

_data/site.js

@@ -1,4 +1,3 @@
-const fs = require('fs/promises')
 const eleventyPackage = require('@11ty/eleventy/package.json')
 
 module.exports = async () => {

_includes/base.webc

@@ -17,6 +17,7 @@
   <script type="module" @raw="getBundle('js')" webc:keep></script>
 
   <!-- tracking -->
+  <script async src="https://analytics.suroh.tk/script.js" data-website-id="f24934aa-ee11-49ee-993f-a64b8df6a01c" webc:keep></script>
 </head>
 
 <body>

_includes/components/nav-primary.js

@@ -28,6 +28,8 @@ class NavPrimary extends HTMLElement {
         const category = n.attributes.getNamedItem('category')
         const link = n.attributes.getNamedItem('link')
 
+        console.log(link)
+
         if (link) {
           history.pushState({}, '', link.value)
           location.pathname = link.value

_includes/components/nav-primary.webc

@@ -1,18 +1,23 @@
 <nav id="primary">
   <nav-link link="/" data-name="<~"><~</nav-link>
   <div class="pagelinks">
-    <nav-link webc:for="c in categories" :category="c" :data-name="c"></nav-link>
+    <template webc:for="(c,v) in categories" webc:nokeep>
+      <nav-link webc:if="v.page" :link="v.page.url" :data-name="v.data.title"></nav-link>
+      <nav-link webc:else :category="c" :data-name="c"></nav-link>
+    </template>
   </div>
 
   <button class="audioToggle"></button>
 </nav>
 
 <nav id="sub" slot="subnav">
-  <ul webc:for="(c, pages) in categories" :data-name="c">
-    <li webc:for="p of pages">
-      <a :href="p.url" @text="p.data.title || p.fileSlug"></a>
-    </li>
-  </ul>
+  <template webc:for="(c, v) in categories" webc:nokeep>
+    <ul webc:if="v.length > 0" :data-name="c">
+      <li webc:for="p of v">
+        <a :href="p.url" @text="p.data.title || p.fileSlug"></a>
+      </li>
+    </ul>
+  </template>
 </nav>
 
 <section id="menuItem" style="">
@@ -31,10 +36,17 @@
   display: grid;
   grid-template-columns: auto 1fr auto;
   gap: 1em 0.25em;
-  margin-block: 0.5em 0.5em;
+  margin-block: 2em 0.5em;
   margin-inline: var(--page-margin-inline);
 }
 
+@media (max-width: 780px) {
+  :host {
+    margin-block: 1em 0.5em;
+    margin-inline: calc(var(--page-margin-inline) * 0.5);
+  }
+}
+
 /* => CONTAINER */
 nav {
   display: grid;
@@ -82,6 +94,14 @@ nav-link[data-name="<~"] {
   margin: 0;
 }
 
+@media (max-width: 780px) {
+  #sub {
+    grid-column: 1 / -1;
+    font-size: 1.25em;
+  }
+}
+
+
 #sub > ul {
   grid-row: 1 / span 1;
   grid-column: 1 / span 1;

assets/css/main.css

@@ -41,6 +41,7 @@ a, a:visited {
 img {
   max-width: 100%;
   height: auto;
+  outline: 1px dotted var(--neutral-900);
 }
 
 hr {
@@ -63,7 +64,6 @@ ul {
 
 li {
   padding: 0.2em 0 0.2em 1em;
-  text-indent: -0.5em;
 }
 
 li:before {
@@ -128,8 +128,8 @@ nav#sub > ul > li {
 }
 
 nav#sub > ul > li:before {
-  content: "";
-  padding-right: 16px;
+  content: '';
+  padding: unset;
 }
 
 nav#sub > ul > li:hover {
@@ -209,20 +209,6 @@ section.page h1 {
     padding: 0;
   }
 
-  /* --> NAVIGATION <-- */
-  nav {
-    margin: 23px 0px 8px;
-    font-size: 1.5em;
-  }
-
-  nav>span {
-    margin-right: 8px;
-  }
-
-  nav>span.active::after {
-    margin-left: 8px;
-  }
-
   /* --> MAINPAGE CONSTRUCTION <-- */
   section ul.subMenu {
     font-size: 1.5em;
@@ -270,29 +256,11 @@ section.page h1 {
     padding: 0;
   }
 
-  /* --> NAVIGATION <-- */
-  nav {
-    margin: 23px 0px 8px;
-    font-size: 1.75em;
-  }
-
-  nav>span {
-    margin-right: 8px;
-  }
-
-  nav>span.active::after {
-    position: relative;
-    top: 2px;
-    margin-left: 8px;
-  }
-
-  /* --> MAINPAGE CONSTRUCTION <-- */
-
   /* --> SUBCONTENT CONSTRUCTION <-- */
   section.page {
     display: inherit;
-    max-width: 650px;
-    grid-gap: 24px;
+    grid-gap: 1em;
+    margin-inline: calc(var(--page-margin-inline) * 0.5);
   }
 
   section.page h1 {

office/config.yml

@@ -0,0 +1,63 @@
+backend:
+  name: gitea
+  repo: suroh/work.suroh.tk
+  app_id: a4548791-8ff4-4ab1-bdfb-54798262ed2f
+  api_root: https://git.suroh.tk/api/v1
+  base_url: https://git.suroh.tk
+  site_domain: work.suroh.tk
+  branch: main
+
+site_url: https://work.suroh.tk
+
+media_folder: "assets/media/uploads"
+public_folder: "/media/uploads"
+
+collections:
+- label: "Audio"
+  name: "audio"
+  folder: "_content/audio"
+  create: true
+  fields:
+    - {label: "Title", name: "title", widget: "string"}
+    - {label: "Publish Date", name: "date", widget: "datetime"}
+    - {label: "Published", name: "published", widget: "boolean"}
+    - {label: "Featured Image", name: "imgFeat", widget: "image", required: false}
+    - {label: "Gallery", name: "gallery", widget: "image", media_library: { config: { multiple: true } }, required: false }
+    - {label: "Body", name: "body", widget: "markdown"}
+    - {label: "Order", name: "sort", widget: "number"}
+- label: "Dev"
+  name: "dev"
+  folder: "_content/dev"
+  create: true
+  fields:
+    - {label: "Title", name: "title", widget: "string"}
+    - {label: "Publish Date", name: "date", widget: "datetime"}
+    - {label: "Published", name: "published", widget: "boolean"}
+    - {label: "Featured Image", name: "imgFeat", widget: "image", required: false}
+    - {label: "Gallery", name: "gallery", widget: "image", media_library: { config: { multiple: true } }, required: false }
+    - {label: "Body", name: "body", widget: "markdown"}
+    - {label: "Order", name: "sort", widget: "number"}
+- label: "Work"
+  name: "work"
+  folder: "_content/work"
+  create: true
+  fields:
+    - {label: "Title", name: "title", widget: "string"}
+    - {label: "Publish Date", name: "date", widget: "datetime"}
+    - {label: "Published", name: "published", widget: "boolean"}
+    - {label: "Featured Image", name: "imgFeat", widget: "image", required: false}
+    - {label: "Gallery", name: "gallery", widget: "image", media_library: { config: { multiple: true } }, required: false }
+    - {label: "Body", name: "body", widget: "markdown"}
+    - {label: "Order", name: "sort", widget: "number"}
+- label: "Pages"
+  name: "pages"
+  folder: "_content"
+  create: true
+  fields:
+    - {label: "Title", name: "title", widget: "string"}
+    - {label: "Publish Date", name: "date", widget: "datetime"}
+    - {label: "Published", name: "published", widget: "boolean"}
+    - {label: "Featured Image", name: "imgFeat", widget: "image", required: false}
+    - {label: "Gallery", name: "gallery", widget: "image", media_library: { config: { multiple: true } }, required: false }
+    - {label: "Body", name: "body", widget: "markdown"}
+    - {label: "Order", name: "sort", widget: "number"}

office/index.html

@@ -0,0 +1,13 @@
+<!doctype html>
+<html>
+<head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <meta name="robots" content="noindex" />
+  <title>work.suroh : admin</title>
+</head>
+<body>
+  <!-- Include the script that builds the page and powers Decap CMS -->
+  <script src="https://cdn.jsdelivr.net/npm/decap-cms@^3.0.0/dist/decap-cms.js"></script>
+</body>
+</html>

package.json

@@ -10,8 +10,8 @@
     "markdown-it-link-attributes": "^4.0.1"
   },
   "scripts": {
-    "dev": "eleventy --serve --incremental",
-    "test": "echo \"Error: no test specified\" && exit 1"
+    "dev": "eleventy --serve",
+    "build": "eleventy"
   },
   "repository": {
     "type": "git",