From b33f264c610451898b24ae6e11444d2d80cb9d2c Mon Sep 17 00:00:00 2001
From: suroh <mx@suroh.tk>
Date: Thu, 26 Oct 2023 20:13:03 +0200
Subject: [PATCH] transitioned basic structure and interaction over to webc

---
 _content/cv.md                        | 142 +++++++++++
 _includes/base.webc                   |  30 +++
 _includes/components/nav-link.webc    |  53 ++++
 _includes/components/nav-primary.webc | 133 ++++++++++
 _includes/page.webc                   |  16 ++
 assets/css/main.css                   | 344 ++++++++++++++++++++++++++
 6 files changed, 718 insertions(+)
 create mode 100644 _content/cv.md
 create mode 100644 _includes/base.webc
 create mode 100644 _includes/components/nav-link.webc
 create mode 100644 _includes/components/nav-primary.webc
 create mode 100644 _includes/page.webc
 create mode 100644 assets/css/main.css

diff --git a/_content/cv.md b/_content/cv.md
new file mode 100644
index 0000000..278848b
--- /dev/null
+++ b/_content/cv.md
@@ -0,0 +1,142 @@
+---
+title: cv
+layout: page.webc
+category: root
+---
+
+## Max Franklin
+
+_mx[at]suroh.tk_<br>
+_+33 (0) 7 66 14 33 99_<br>
+_[@suroh@post.lurk.org](https://post.lurk.org/@suroh)_
+
+### Education
+
+_Piet Zwart Institute_<br>
+2016 - 2018 // Rotterdam, NL<br>
+Master's in Media Design : Experimental Publishing
+
+_Conservatorium of Sydney (University of Sydney)_<br>
+2009 // Sydney, AU<br>
+Bachelor Jazz Performance (Saxophone) &amp; Creative Sound Engineering
+
+### Teaching
+
+_Willem de Kooning Academie_<br>
+2020 - current // Rotterdam, NL<br>
+Tutor within the Graphic Design Major
+
+_Paris College of Art_<br>
+2014 - 2022 // Paris, FR<br>
+Faculty Member within the Communication Design department
+
+_LISAA Graphic Design_<br>
+2020 - 2021 // Paris, FR<br>
+Faculty Member within the Graphic Design department
+
+_École Européenne des Métiers de l'Internet_<br>
+2018 - 2019 // Paris, FR<br>
+Faculty Member within the Graphic Design department
+
+### Selected Exhibitions & Events
+
+_Sounds to See_<br>
+Sign Gallery<br>
+2019 // Groningen, NL<br>
+Group exhibition. Presented _A Container in Two Movements_.
+
+_Autonomous Archive_<br>
+Het Nieuw Instituut<br>
+2017 // Rotterdam, NL<br>
+Archival machine, installation and research project centred around autonomous living and archival practices. Presented alongside the Architecture of Appropriation exhibition.
+
+_TGC#3 : Euclid_<br>
+De Player<br>
+2017 // Rotterdam, NL<br>
+Experimental sound publication object and performative instrument. Collaborative project between De Player and the Piet Zwart Experimental Publishing unit.</p>
+
+_LowTechLabLondon2016_<br>
+Saatchi Gallery<br>
+2016 // London, UK<br>
+International art lab organised by Raul Marroquin around the theme of Low Tech.
+
+_Festival de Projets Scolaires_<br>
+La Gaîté lyrique<br>
+2016 // Paris, FR<br>
+Partnership workshop show with Paris College of Art students and faculty.
+
+_IDENTITE REVE(L)EE_<br>
+*Mi Gallery<br>
+Paris Digital Week<br>
+2015 // Paris, FR<br>
+Collaborative piece presented at *Mi Gallery as part of Paris Digital Week.
+
+_Barcu Art Fair_<br>
+2015 // Bogota, CO<br>
+Presentation via Skype on Collaborative Art, Interactivity and Improvisation.
+
+### Recent PRogrammes & Resdencies
+
+_Thresholds of the Algorithmic_<br>
+Algorithms that Matter<br>
+2018 // Bergen, NO<br>
+Workshop-in-Exposition is a hybrid format that places the workshop inside an exhibition context, where the exposed works and artefacts form the basis of the workshop’s activity.
+
+_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>
diff --git a/_includes/base.webc b/_includes/base.webc
new file mode 100644
index 0000000..2accdca
--- /dev/null
+++ b/_includes/base.webc
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <meta http-equiv="X-UA-Compatible" content="ie=edge">
+  <title @text="site.name"></title>
+
+  <meta name="generator" :content="site.generator">
+
+  <!-- styles -->
+  <link rel="stylesheet" href="/assets/css/main.css" webc:keep>
+
+  <!-- `defer` bucket -->
+  <style @raw="getBundle('css')" webc:keep></style>
+  <script type="module" @raw="getBundle('js')" webc:keep></script>
+
+  <!-- javascript -->
+  <!-- <script src="../assets/js/script.js" type="module" webc:keep></script> -->
+  <!-- tracking -->
+</head>
+
+<body>
+  <nav-primary :categories="collections.categories"></nav-primary>
+
+  <template @raw="content" webc:nokeep></template>
+</body>
+
+</html>
diff --git a/_includes/components/nav-link.webc b/_includes/components/nav-link.webc
new file mode 100644
index 0000000..0897631
--- /dev/null
+++ b/_includes/components/nav-link.webc
@@ -0,0 +1,53 @@
+<span :category="category" :link="link" webc:nokeep><slot>█</slot></span>
+
+<script type="module">
+class NavLink extends HTMLElement {
+  connectedCallback() {
+    // remove whitespace
+    const span = this.querySelector(':scope span')
+    if (span) {
+      span.nextSibling.remove()
+    }
+    this.nextSibling.remove()
+
+  }
+
+}
+
+customElements.define('nav-link', NavLink)
+</script>
+
+<style webc:scoped>
+:host {
+  --color-solid: #1e1e3cff;
+  --color-transparent: #1e1e3c33;
+  display: flex;
+  position: relative;
+  color: var(--color-transparent);
+  transition: color ease 0.5s;
+}
+
+:host:hover {
+  color: var(--color-solid);
+  transition: color ease 0.1s;
+  cursor: pointer;
+}
+
+:host.active {
+  color: var(--color-solid);
+  transition: color 1s ease, padding-inline-end 1s ease;
+}
+
+:host::after {
+  content: attr(data-name);
+  display: block;
+  max-width: 0px;
+  overflow: hidden;
+  transition: max-width 0.5s ease;
+}
+
+:host.active::after {
+  padding-inline-start: 0.225em;
+  max-width: 10em;
+}
+</style>
diff --git a/_includes/components/nav-primary.webc b/_includes/components/nav-primary.webc
new file mode 100644
index 0000000..8b68c0c
--- /dev/null
+++ b/_includes/components/nav-primary.webc
@@ -0,0 +1,133 @@
+<nav id="primary">
+  <nav-link link="/" data-name="~"><~</nav-link>
+  <nav-link webc:for="c in categories" :category="c" :data-name="c"></nav-link>
+
+  <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>
+</nav>
+
+<section style="position: fixed; bottom: 0; left: 0; margin: 0; padding: 0; width: 100vw; height: 0px; overflow: visible; z-index: 100;mix-blend-mode: difference;">
+    <h1 id="menuItem"></h1>
+</section>
+
+<nav id="toTop">
+  <span>top</span>
+</nav>
+
+<script type="module">
+  class NavPrimary extends HTMLElement {
+    categories = []
+    subs = []
+
+    connectedCallback() {
+      this.categories = this.querySelectorAll('nav-link')
+      this.subs = this.querySelectorAll('ul')
+
+      this.activate()
+
+      window.addEventListener('popstate', (evt) => {
+        this.activate()
+      })
+
+      this.categories.forEach(n => {
+        n.addEventListener('click',() => {
+          const category = n.attributes.getNamedItem('category')
+          const link = n.attributes.getNamedItem('link')
+
+          if (link) {
+            history.pushState({}, '', link.value)
+            location.pathname = link.value
+          } else if (category) {
+            location.hash = category.value
+          }
+        })
+      })
+    }
+
+    activate() {
+      this.categories.forEach(i => {
+        const { value } = i.attributes.getNamedItem('category') || i.attributes.getNamedItem('link')
+
+        if (value != '/' && (value == location.hash.replace('#', '') || value == location.pathname)) {
+          i.classList.add('active')
+        } else {
+          i.classList.remove('active')
+        }
+      })
+
+      this.subs.forEach(s => {
+        const { name } = s.dataset
+
+        if (name == location.hash.replace('#', '') || name == location.pathname) {
+          s.classList.add('active')
+        } else {
+          s.classList.remove('active')
+        }
+
+      })
+    }
+  }
+
+  customElements.define('nav-primary', NavPrimary)
+</script>
+
+<style webc:scoped>
+/* => CONTAINER */
+nav {
+  display: flex;
+  margin: 1em var(--page-margin-inline) 0.5em;
+  font-size: 1.5em;
+}
+
+/* => LINKS */
+nav-link {
+  padding-inline: 0.125em;
+}
+
+/* => AUDIO TOGGLE */
+.audioToggle {
+  background: none;
+  border: none;
+  margin-inline-start: auto;
+  transition: color ease-in-out 0.1s;
+}
+
+.audioToggle:hover {
+  color: #CECECE;
+  cursor: pointer;
+  transition: color ease-in-out 0.1s;
+}
+
+.audioToggle::after {
+  content: '🔇'
+}
+
+.audioToggle.active::after {
+  content: '🔉'
+}
+
+/* => SUb NAV */
+#sub {
+  display: grid;
+  grid-template: 1fr / 1fr;
+}
+
+#sub > ul {
+  grid-row: 1 / span 1;
+  grid-column: 1 / span 1;
+  max-height: 0px;
+  overflow: hidden;
+  transition: max-height 0.5s cubic-bezier(.22,.61,.36,1);
+}
+
+ul.active {
+  max-height: 50vh !important;
+}
+</style>
diff --git a/_includes/page.webc b/_includes/page.webc
new file mode 100644
index 0000000..3eb352e
--- /dev/null
+++ b/_includes/page.webc
@@ -0,0 +1,16 @@
+---
+layout: base.webc
+---
+
+<section class="page">
+    <div :if="imgFeat" class="imgFeat">
+      <img src="{{imgFeat}}" alt="">
+    </div>
+
+  <section class="text {{url}}" @raw="content">
+  </section>
+
+    <section :if="gallery" class="imgs">
+      <img for="img of gallery" src="{{img}}" alt="">
+    </section class="imgs">
+</section>
diff --git a/assets/css/main.css b/assets/css/main.css
new file mode 100644
index 0000000..cbd497b
--- /dev/null
+++ b/assets/css/main.css
@@ -0,0 +1,344 @@
+/* PAGE STYLES */
+@import url(https://cdn.jsdelivr.net/gh/tonsky/FiraCode@1.206/distr/fira_code.css);
+
+* {
+  scroll-behavior: smooth;
+}
+
+/* --> BASE STYLES <-- */
+:root {
+  --page-margin-inline: 1em;
+  --neutral-900: #1e1e3cff;
+  --neutral-900-25: #1e1e3c33;
+}
+
+body {
+  font-family: 'fira code', monospace;
+  color: #1e1e3cff;
+}
+
+p {
+  max-width: 80ch;
+}
+
+p > img:first-of-type {
+  margin-top: 2em;
+}
+
+em {
+  font-family: serif;
+  font-size: 1.03em;
+}
+
+a, a:visited {
+  color: #1e1e3cff;
+  padding-bottom: 2px;
+  text-decoration: none;
+  border-bottom: 1px #1e1e3c50 solid;
+  transition: color ease 0.5s, border ease 0.2s;
+}
+
+img {
+  max-width: 100%;
+  height: auto;
+}
+
+hr {
+  border-bottom: thin dotted grey;
+  border-top: none;
+  border-left: none;
+  border-right: none;
+}
+
+section {
+  isolation: auto;
+}
+
+/* --> LISTS <-- */
+ul {
+  list-style: none;
+  margin-left: 16px;
+  padding-left: 0;
+}
+
+li {
+  padding: 0.2em 0 0.2em 1em;
+  text-indent: -0.5em;
+}
+
+li:before {
+  content: "▸";
+  padding-right: 16px;
+}
+
+/* --> NAVIGATION <-- */
+
+nav#toTop {
+  position: fixed;
+  display: inline-block;
+  visibility: hidden;
+  top: calc(95vh - 2em);
+  right: 3em;
+  overflow: hidden;
+  padding: 0 0em 0.25em;
+  z-index: 100;
+}
+
+nav#toTop.active {
+  visibility: visible;
+}
+
+nav#toTop > span {
+  display: block;
+  opacity: 0.0;
+  transform: translateY(-2em);
+  background-color: rgba(255,255,255,0.0);
+  padding: 0.3em 0.5em 0.5em;
+  border-radius: 1em;
+  transition: transform ease 0.5s, opacity ease 1s, background-color ease 0.5s 0.5s;
+}
+
+nav#toTop > span::after {
+  font-size: 1.25em;
+  content: '△'
+}
+
+nav#toTop.active > span {
+  opacity: 0.5;
+  background-color: rgba(255,255,255,0.9);
+  transform: translateY(0em);
+}
+
+nav#toTop.active > span:hover {
+  opacity: 1;
+  cursor: pointer;
+}
+
+h1#menuItem {
+  position: absolute;
+  line-height: inherit;
+  bottom: -500px;
+  margin: 0;
+  padding: 0;
+  font-size: 33vw;
+  opacity: 0;
+  transform: translateY(100px);
+  transform-origin: bottom left;
+  mix-blend-mode: difference;
+  transition: opacity ease-in-out 0.1s, transform ease-in-out 0.1s;
+}
+
+h1#menuItem.active {
+  mix-blend-mode: difference;
+  opacity: 1 !important;
+  transform: translateY(-600px) !important;
+}
+
+
+/* --> MAINPAGE CONSTRUCTION <-- */
+nav#sub > ul {
+  margin: 0;
+  padding: 0;
+  list-style: none !important;
+}
+
+nav#sub > ul > li {
+  border-left: thin solid #d2d2d8;
+  text-decoration: none;
+  padding: 5px 10px;
+}
+
+nav#sub > ul > li:before {
+  content: "";
+  padding-right: 16px;
+}
+
+nav#sub > ul > li:hover {
+  background: #d2d2d8;
+  cursor: pointer;
+}
+
+nav#sub > ul > li > a {
+  border: none;
+}
+
+/* --> SUBCONTENT CONSTRUCTION <-- */
+section.page {
+  display: grid;
+  animation: fadeIn 1s ease;
+  margin-inline: var(--page-margin-inline);
+}
+
+section.page h1 {
+  margin: 0px;
+  padding: 0px;
+}
+
+@media screen and (min-width: 1360px) {
+  body {
+    font-size: 19px;
+    line-height: 24px;
+    margin: 0;
+    padding: 0;
+  }
+
+  /* --> MAINPAGE CONSTRUCTION <-- */
+  section ul.subMenu {
+    font-size: 1.5em;
+  }
+
+  /* --> SUBCONTENT CONSTRUCTION <-- */
+  section.page {
+    max-width: 1960px;
+    grid-template-columns: repeat(5, 1fr);
+    gap: 24px;
+  }
+
+  section.page h1 {
+    margin-top: 0.25em;
+    margin-bottom: 0.4em;
+    font-size: 6em;
+    line-height: 0.95em;
+  }
+
+  section.page div.imgFeat {
+    grid-column: span 4;
+  }
+
+  section.page section.imgs {
+    grid-column: 4 / span 2;
+    grid-row: 2;
+  }
+
+  section.page section.imgs>img {
+    max-width: 100%;
+    margin-bottom: 24px;
+    height: auto;
+  }
+
+  section.page section.text {
+    grid-column: 1 / span 3;
+    grid-row: 2;
+  }
+}
+
+@media screen and (max-width: 1359px) {
+  body {
+    font-size: 19px;
+    line-height: 24px;
+    margin: 0;
+    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;
+  }
+
+  /* --> SUBCONTENT CONSTRUCTION <-- */
+  section.page {
+    max-width: 1960px;
+    grid-template-columns: repeat(5, 1fr);
+    gap: 24px;
+  }
+
+  section.page h1 {
+    margin-top: 0.25em;
+    margin-bottom: 0.5em;
+    font-size: 4em;
+    line-height: 0.95em;
+  }
+
+  section.page div.imgFeat {
+    grid-column: span 4;
+  }
+
+  section.page section.imgs {
+    grid-column: 4 / span 2;
+    grid-row: 2
+  }
+
+  section.page section.imgs>img {
+    max-width: 100%;
+    height: auto;
+  }
+
+  section.page section.text {
+    grid-column: 1 / span 3;
+    grid-row: 2;
+  }
+}
+
+@media screen and (max-width: 800px) {
+  body {
+    font-size: 20px;
+    line-height: 24px;
+    margin: 0;
+    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;
+  }
+
+  section.page h1 {
+    margin-top: 0.35em;
+    margin-bottom: 0.5em;
+    font-size: 3em;
+    line-height: 0.95em;
+    margin: 24px 0 32px;
+  }
+
+  section#teach h1 {
+    font-size: 3em;
+    line-height: 0.75em;
+    margin: 40px 0 48px;
+  }
+
+}
+
+/* ANIMATIONS */
+
+@keyframes fadeIn {
+  0% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
+}