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_
+_+33 (0) 7 66 14 33 99_
+_[@suroh@post.lurk.org](https://post.lurk.org/@suroh)_
+
+### Education
+
+_Piet Zwart Institute_
+2016 - 2018 // Rotterdam, NL
+Master's in Media Design : Experimental Publishing
+
+_Conservatorium of Sydney (University of Sydney)_
+2009 // Sydney, AU
+Bachelor Jazz Performance (Saxophone) & Creative Sound Engineering
+
+### Teaching
+
+_Willem de Kooning Academie_
+2020 - current // Rotterdam, NL
+Tutor within the Graphic Design Major
+
+_Paris College of Art_
+2014 - 2022 // Paris, FR
+Faculty Member within the Communication Design department
+
+_LISAA Graphic Design_
+2020 - 2021 // Paris, FR
+Faculty Member within the Graphic Design department
+
+_École Européenne des Métiers de l'Internet_
+2018 - 2019 // Paris, FR
+Faculty Member within the Graphic Design department
+
+### Selected Exhibitions & Events
+
+_Sounds to See_
+Sign Gallery
+2019 // Groningen, NL
+Group exhibition. Presented _A Container in Two Movements_.
+
+_Autonomous Archive_
+Het Nieuw Instituut
+2017 // Rotterdam, NL
+Archival machine, installation and research project centred around autonomous living and archival practices. Presented alongside the Architecture of Appropriation exhibition.
+
+_TGC#3 : Euclid_
+De Player
+2017 // Rotterdam, NL
+Experimental sound publication object and performative instrument. Collaborative project between De Player and the Piet Zwart Experimental Publishing unit.
+
+_LowTechLabLondon2016_
+Saatchi Gallery
+2016 // London, UK
+International art lab organised by Raul Marroquin around the theme of Low Tech.
+
+_Festival de Projets Scolaires_
+La Gaîté lyrique
+2016 // Paris, FR
+Partnership workshop show with Paris College of Art students and faculty.
+
+_IDENTITE REVE(L)EE_
+*Mi Gallery
+Paris Digital Week
+2015 // Paris, FR
+Collaborative piece presented at *Mi Gallery as part of Paris Digital Week.
+
+_Barcu Art Fair_
+2015 // Bogota, CO
+Presentation via Skype on Collaborative Art, Interactivity and Improvisation.
+
+### Recent PRogrammes & Resdencies
+
+_Thresholds of the Algorithmic_
+Algorithms that Matter
+2018 // Bergen, NO
+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_
+Frontyard
+2018 // Sydney, AU
+Research residency around Master's research on Software and Improvisation.
+
+### Sound
+
+#### Performances
+_alternative echelons_
+2020 // UBIK, Rotterdam, NL
+
+_Design Days Finnisage_
+Espace 15
+2019 // Paris, FR
+
+_Read My Lips: No New Taxes_
+Galerie Lecq
+2019 // Rotterdam, NL
+
+_E-ARTHA_
+DePlayer
+2018 // Rotterdam, NL
+
+_North Sea Jazz Around Town_
+VARIA
+2018 // Rotterdam, NL
+
+_POST TOAST_
+Red Light Radio
+2018 // Amsterdam, NL
+
+#### Soundtracks
+
+_alternative echelons_ (trailer)
+by Amy Pickles
+2019
+
+_Ghost Terminal_
+by Ryan Cherewaty
+2019
+
+_Memory of Death's Dream_
+by Ryan Cherewaty
+2019
+
+### Professional Experience
+
+_Willem de Kooning Academie_
+2018 // Rotterdam, NL
+Publication Station teaching and technical assistant
+
+_Freelance Graphic Designer_
+2009 – 2014 // Sydney, AU
+Web-design, poster and album design
+
+_Linear Recording_
+2009 – 2010 // Sydney, AU
+Assistant Sound Engineer
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 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
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 @@
+█
+
+
+
+
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 @@
+
+
+
+
+
+
+
+
+
+
+
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
+---
+
+
+
+
+
+
+
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;
+ }
+}