portfolio scaffolding

19 files changed, 733 insertions, 0 deletions

diff --git a/docs/portfolio/.gitignore b/docs/portfolio/.gitignore
new file mode 100644
index 0000000..8f87a49
--- /dev/null
+++ b/docs/portfolio/.gitignore
@@ -0,0 +1,2 @@
+media
+
diff --git a/docs/portfolio/fonts/CrimsonText-Bold.ttf b/docs/portfolio/fonts/CrimsonText-Bold.ttf
new file mode 100644
index 0000000..2a4951e
--- /dev/null
+++ b/docs/portfolio/fonts/CrimsonText-Bold.ttf
diff --git a/docs/portfolio/fonts/CrimsonText-BoldItalic.ttf b/docs/portfolio/fonts/CrimsonText-BoldItalic.ttf
new file mode 100644
index 0000000..241ad8e
--- /dev/null
+++ b/docs/portfolio/fonts/CrimsonText-BoldItalic.ttf
diff --git a/docs/portfolio/fonts/CrimsonText-Italic.ttf b/docs/portfolio/fonts/CrimsonText-Italic.ttf
new file mode 100644
index 0000000..45e9168
--- /dev/null
+++ b/docs/portfolio/fonts/CrimsonText-Italic.ttf
diff --git a/docs/portfolio/fonts/CrimsonText-Regular.ttf b/docs/portfolio/fonts/CrimsonText-Regular.ttf
new file mode 100644
index 0000000..a173714
--- /dev/null
+++ b/docs/portfolio/fonts/CrimsonText-Regular.ttf
diff --git a/docs/portfolio/fonts/CrimsonText-SemiBold.ttf b/docs/portfolio/fonts/CrimsonText-SemiBold.ttf
new file mode 100644
index 0000000..ea3bb66
--- /dev/null
+++ b/docs/portfolio/fonts/CrimsonText-SemiBold.ttf
diff --git a/docs/portfolio/fonts/CrimsonText-SemiBoldItalic.ttf b/docs/portfolio/fonts/CrimsonText-SemiBoldItalic.ttf
new file mode 100644
index 0000000..8c18b09
--- /dev/null
+++ b/docs/portfolio/fonts/CrimsonText-SemiBoldItalic.ttf
diff --git a/docs/portfolio/fonts/OFL.txt b/docs/portfolio/fonts/OFL.txt
new file mode 100644
index 0000000..bb385d2
--- /dev/null
+++ b/docs/portfolio/fonts/OFL.txt
@@ -0,0 +1,94 @@
+Copyright (c) 2010, Sebastian Kosch (sebastian@aldusleaf.org),

+with Reserved Font Name "Crimson" and "Crimson Text".

+

+This Font Software is licensed under the SIL Open Font License, Version 1.1.

+This license is copied below, and is also available with a FAQ at:

+http://scripts.sil.org/OFL

+

+

+-----------------------------------------------------------

+SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007

+-----------------------------------------------------------

+

+PREAMBLE

+The goals of the Open Font License (OFL) are to stimulate worldwide

+development of collaborative font projects, to support the font creation

+efforts of academic and linguistic communities, and to provide a free and

+open framework in which fonts may be shared and improved in partnership

+with others.

+

+The OFL allows the licensed fonts to be used, studied, modified and

+redistributed freely as long as they are not sold by themselves. The

+fonts, including any derivative works, can be bundled, embedded, 

+redistributed and/or sold with any software provided that any reserved

+names are not used by derivative works. The fonts and derivatives,

+however, cannot be released under any other type of license. The

+requirement for fonts to remain under this license does not apply

+to any document created using the fonts or their derivatives.

+

+DEFINITIONS

+"Font Software" refers to the set of files released by the Copyright

+Holder(s) under this license and clearly marked as such. This may

+include source files, build scripts and documentation.

+

+"Reserved Font Name" refers to any names specified as such after the

+copyright statement(s).

+

+"Original Version" refers to the collection of Font Software components as

+distributed by the Copyright Holder(s).

+

+"Modified Version" refers to any derivative made by adding to, deleting,

+or substituting -- in part or in whole -- any of the components of the

+Original Version, by changing formats or by porting the Font Software to a

+new environment.

+

+"Author" refers to any designer, engineer, programmer, technical

+writer or other person who contributed to the Font Software.

+

+PERMISSION & CONDITIONS

+Permission is hereby granted, free of charge, to any person obtaining

+a copy of the Font Software, to use, study, copy, merge, embed, modify,

+redistribute, and sell modified and unmodified copies of the Font

+Software, subject to the following conditions:

+

+1) Neither the Font Software nor any of its individual components,

+in Original or Modified Versions, may be sold by itself.

+

+2) Original or Modified Versions of the Font Software may be bundled,

+redistributed and/or sold with any software, provided that each copy

+contains the above copyright notice and this license. These can be

+included either as stand-alone text files, human-readable headers or

+in the appropriate machine-readable metadata fields within text or

+binary files as long as those fields can be easily viewed by the user.

+

+3) No Modified Version of the Font Software may use the Reserved Font

+Name(s) unless explicit written permission is granted by the corresponding

+Copyright Holder. This restriction only applies to the primary font name as

+presented to the users.

+

+4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font

+Software shall not be used to promote, endorse or advertise any

+Modified Version, except to acknowledge the contribution(s) of the

+Copyright Holder(s) and the Author(s) or with their explicit written

+permission.

+

+5) The Font Software, modified or unmodified, in part or in whole,

+must be distributed entirely under this license, and must not be

+distributed under any other license. The requirement for fonts to

+remain under this license does not apply to any document created

+using the Font Software.

+

+TERMINATION

+This license becomes null and void if any of the above conditions are

+not met.

+

+DISCLAIMER

+THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,

+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF

+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT

+OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE

+COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,

+INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL

+DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING

+FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM

+OTHER DEALINGS IN THE FONT SOFTWARE.

diff --git a/docs/portfolio/img/doc.svg b/docs/portfolio/img/doc.svg
new file mode 100644
index 0000000..fb3237a
--- /dev/null
+++ b/docs/portfolio/img/doc.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M312 155h91c2.8 0 5-2.2 5-5 0-8.9-3.9-17.3-10.7-22.9L321 63.5c-5.8-4.8-13-7.4-20.6-7.4-4.1 0-7.4 3.3-7.4 7.4V136c0 10.5 8.5 19 19 19z"/><path d="M267 136V56H136c-17.6 0-32 14.4-32 32v336c0 17.6 14.4 32 32 32h240c17.6 0 32-14.4 32-32V181h-96c-24.8 0-45-20.2-45-45z"/></svg>
\ No newline at end of file
diff --git a/docs/portfolio/img/graph.svg b/docs/portfolio/img/graph.svg
new file mode 100644
index 0000000..0abb9c2
--- /dev/null
+++ b/docs/portfolio/img/graph.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M184 448h48c4.4 0 8-3.6 8-8V72c0-4.4-3.6-8-8-8h-48c-4.4 0-8 3.6-8 8v368c0 4.4 3.6 8 8 8zM88 448h48c4.4 0 8-3.6 8-8V296c0-4.4-3.6-8-8-8H88c-4.4 0-8 3.6-8 8v144c0 4.4 3.6 8 8 8zM280.1 448h47.8c4.5 0 8.1-3.6 8.1-8.1V232.1c0-4.5-3.6-8.1-8.1-8.1h-47.8c-4.5 0-8.1 3.6-8.1 8.1v207.8c0 4.5 3.6 8.1 8.1 8.1zM368 136.1v303.8c0 4.5 3.6 8.1 8.1 8.1h47.8c4.5 0 8.1-3.6 8.1-8.1V136.1c0-4.5-3.6-8.1-8.1-8.1h-47.8c-4.5 0-8.1 3.6-8.1 8.1z"/></svg>
\ No newline at end of file
diff --git a/docs/portfolio/img/grid.svg b/docs/portfolio/img/grid.svg
new file mode 100644
index 0000000..ea1563d
--- /dev/null
+++ b/docs/portfolio/img/grid.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M409.6 64H102.4C81.3 64 64 81.3 64 102.4v307.2c0 21.1 17.3 38.4 38.4 38.4h307.2c21.1 0 38.4-17.3 38.4-38.4V102.4c0-21.1-17.3-38.4-38.4-38.4zM179.2 409.6h-76.8v-76.8h76.8v76.8zm0-115.2h-76.8v-76.8h76.8v76.8zm0-115.2h-76.8v-76.8h76.8v76.8zm115.2 230.4h-76.8v-76.8h76.8v76.8zm0-115.2h-76.8v-76.8h76.8v76.8zm0-115.2h-76.8v-76.8h76.8v76.8zm115.2 230.4h-76.8v-76.8h76.8v76.8zm0-115.2h-76.8v-76.8h76.8v76.8zm0-115.2h-76.8v-76.8h76.8v76.8z"/></svg>
\ No newline at end of file
diff --git a/docs/portfolio/img/note.svg b/docs/portfolio/img/note.svg
new file mode 100644
index 0000000..13e42c8
--- /dev/null
+++ b/docs/portfolio/img/note.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M364.3 48.2c-4.7.9-118 24.1-122.2 24.9-4.2.8-8.1 3.6-8.1 8v255.1c0 1.6-.1 7.2-2.4 11.7-3.1 5.9-8.5 10.2-16.1 12.7-3.3 1.1-7.8 2.1-13.1 3.3-24.1 5.4-64.4 14.6-64.4 51.8 0 30.1 21.7 44.5 35 47.1 5 1 11 1 13.8 1 8.2 0 36-3.3 51.2-13.2 11-7.2 24.1-21.4 24.1-47.8V173.1c0-3.8 2.7-7.1 6.4-7.8l92.8-19c7.4-1.5 12.8-8.1 12.8-15.7V55.8c-.1-4.3-3.8-8.8-9.8-7.6z"/></svg>
\ No newline at end of file
diff --git a/docs/portfolio/img/notes.svg b/docs/portfolio/img/notes.svg
new file mode 100644
index 0000000..aba0726
--- /dev/null
+++ b/docs/portfolio/img/notes.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M406.3 48.2c-4.7.9-202 39.2-206.2 40-4.2.8-8.1 3.6-8.1 8v240.1c0 1.6-.1 7.2-2.4 11.7-3.1 5.9-8.5 10.2-16.1 12.7-3.3 1.1-7.8 2.1-13.1 3.3-24.1 5.4-64.4 14.6-64.4 51.8 0 31.1 22.4 45.1 41.7 47.5 2.1.3 4.5.7 7.1.7 6.7 0 36-3.3 51.2-13.2 11-7.2 24.1-21.4 24.1-47.8V190.5c0-3.8 2.7-7.1 6.4-7.8l152-30.7c5-1 9.6 2.8 9.6 7.8v130.9c0 4.1-.2 8.9-2.5 13.4-3.1 5.9-8.5 10.2-16.2 12.7-3.3 1.1-8.8 2.1-14.1 3.3-24.1 5.4-64.4 14.5-64.4 51.7 0 33.7 25.4 47.2 41.8 48.3 6.5.4 11.2.3 19.4-.9s23.5-5.5 36.5-13c17.9-10.3 27.5-26.8 27.5-48.2V55.9c-.1-4.4-3.8-8.9-9.8-7.7z"/></svg>
\ No newline at end of file
diff --git a/docs/portfolio/img/pause.svg b/docs/portfolio/img/pause.svg
new file mode 100644
index 0000000..48baa51
--- /dev/null
+++ b/docs/portfolio/img/pause.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M96 448h106.7V64H96v384zM309.3 64v384H416V64H309.3z"/></svg>
\ No newline at end of file
diff --git a/docs/portfolio/img/play.svg b/docs/portfolio/img/play.svg
new file mode 100644
index 0000000..9ef742f
--- /dev/null
+++ b/docs/portfolio/img/play.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M96 52v408l320-204L96 52z"/></svg>
\ No newline at end of file
diff --git a/docs/portfolio/img/sonification-share.png b/docs/portfolio/img/sonification-share.png
new file mode 100644
index 0000000..b9f9041
--- /dev/null
+++ b/docs/portfolio/img/sonification-share.png
diff --git a/docs/portfolio/index.css b/docs/portfolio/index.css
new file mode 100644
index 0000000..caf9524
--- /dev/null
+++ b/docs/portfolio/index.css
@@ -0,0 +1,301 @@
+
+@font-face {
+  font-family: 'Crimson';
+  src: url('fonts/CrimsonText-Bold.ttf') format('truetype');
+  font-weight: bold;
+}
+@font-face {
+  font-family: 'Crimson';
+  src: url('fonts/CrimsonText-BoldItalic.ttf') format('truetype');
+  font-weight: bold;
+  font-style: italic;
+}
+@font-face {
+  font-family: 'Crimson';
+  src: url('fonts/CrimsonText-Regular.ttf') format('truetype');
+}
+@font-face {
+  font-family: 'Crimson';
+  src: url('fonts/CrimsonText-Italic.ttf') format('truetype');
+  font-weight: normal;
+  font-style: italic;
+}
+
+* { box-sizing: border-box; }
+html,body {
+  margin: 0; padding: 0;
+  width: 100%; height: 100%;
+}
+body {
+  font-family: 'Crimson', serif;
+  font-size: 1.2em;
+  transition: background-color 100ms;
+  background-color: #fff;
+  background-image: linear-gradient(30deg, #fff0f8, #ffffff, #f4fbff);
+  background-attachment: fixed;
+}
+.app {
+  font-family: sans-serif;
+  font-size: 0.8em;
+}
+.app div {
+  display: inline-block;
+}
+i {
+  font-weight: normal;
+  font-style: italic;
+}
+p {
+  line-height: 1.5;
+  color: #111;
+}
+h1 {
+  color: #001808;
+  margin: 10px 0;
+  font-weight: normal;
+  max-width: 640px;
+}
+h2 {
+  color: #222;
+  margin: 20px 0;
+  font-weight: normal;
+  font-size: 1.4em;
+}
+h3 {
+  font-size: 1.8em;
+  color: #000;
+  margin: 0px 5px 10px 0;
+  font-weight: normal;
+  font-style: italic;
+  display: inline-block;
+}
+h3 + small {
+  display: inline-block;
+  font-size: 1.2em;
+  font-style: italic;
+}
+ul {
+  list-style-type: none;
+}
+li {
+  line-height: 1.5;
+  font-size: 0.8em;
+}
+li::before {
+  content: "\2022";
+  color: #888;
+  display: inline-block;
+  width: 1em;
+  margin-left: -1em;
+}
+
+.links .link {
+  color: #11f;
+  text-decoration: underline;
+  cursor: pointer;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  margin-bottom: 0.1em;
+  max-width: 640px;
+}
+.links .icon {
+  display: inline-block;
+  background: white;
+  margin-right: 0.4em;
+  background-size: contain;
+  background-position: center;
+  background-repeat: no-repeat;
+  width: 1.2em;
+  height: 1.2em;
+}
+
+.icon.notes { background-image: url(img/notes.svg);}
+.icon.note { background-image: url(img/note.svg);}
+.icon.grid { background-image: url(img/grid.svg);}
+.icon.graph { background-image: url(img/graph.svg);}
+.playing .icon.audio,
+.icon.pause { background-image: url(img/pause.svg);}
+.icon.audio,
+.icon.play { background-image: url(img/play.svg); background-size: 80% 80%;}
+
+.player {
+  position: fixed;
+  bottom: 0; left: 0;
+  width: 100%;
+  max-width: 720px;
+  padding-right: 40px;
+  box-shadow: 0 0 2px rgba(0,0,0,0.3);
+  background: white;
+  transition: 0.2s cubic-bezier(0,0,1,1);
+  transform: translate3d(0,110%,0);
+  display: flex;
+  flex-direction: column;
+}
+.player.active {
+  transform: translate3d(0,0%,0);
+}
+.player .icon {
+  cursor: pointer;
+  height: 80px;
+  width: 60px;
+  margin-left: 30px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+.player .pos {
+  flex: 1;
+  position: relative;
+  cursor: pointer;
+  height: 80px;
+}
+.player .title,
+.player .time {
+  font-size: 0.8em;
+  color: #333;
+  padding-left: 20px;
+  text-transform: capitalize;
+}
+.player .title {
+  padding: 20px 0px 0 50px;
+}
+.player .icon img {
+  display: none;
+  width: 1.2em;
+}
+.player .icon.active .play_icon {
+  display: none;
+}
+.player .icon.active .pause_icon {
+  display: block;
+}
+.player .icon .pause_icon {
+  display: none;
+}
+.player .icon .play_icon {
+  display: block;
+}
+.player .track {
+  pointer-events: none;
+  position: absolute;
+  top: 50%; left: 0;
+  margin-top: -1px;
+  height: 2px;
+  background: #333;
+  width: 100%;
+}
+.player .dot {
+  pointer-events: none;
+  position: absolute;
+  top: 50%; left: 0;
+  margin-top: -6px;
+  width: 12px;
+  height: 12px;
+  border-radius: 50%;
+  background: black;
+}
+
+.menu {
+  line-height: 1.5;
+}
+.menu a.a {
+  margin-left: 20px;
+}
+
+.mobile .player .icon {
+  margin-left: 10px;
+}
+.mobile .player .title {
+  padding-left: 20px;
+}
+#dataset_name {
+  text-transform: capitalize;
+}
+.desktop body {
+  user-select: none;
+}
+.top {
+  display: block;
+  margin-top: 10px;
+  margin-bottom: 10px;
+}
+.content {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  padding: 50px;
+  padding-bottom: 200px;
+  max-width: 800px;
+  margin: 0 auto;
+}
+.mobile .content {
+  padding: 10px;
+  padding-bottom: 200px;
+}
+.mobile .links {
+  margin-top: 10px;
+}
+.desktop p {
+  width: 640px;
+}
+.corner {
+  position: absolute;
+  bottom: 0;
+  margin: 10px;
+  padding: 10px;
+  background: white;
+  display: flex;
+}
+.corner.left {
+  left: 0;
+}
+.corner.right {
+  right: 0;
+}
+body {
+  transition: 0.1s;
+}
+.loading {
+  opacity: 0;
+}
+.column {
+  display: flex;
+  flex-direction: column;
+}
+.row {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+}
+.block {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  margin-right: 10px;
+}
+.block > span {
+  display: block;
+  margin-top: 10px;
+}
+.radio {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  margin-top: 20px;
+  margin-bottom: 20px;
+}
+.radio > span {
+  margin-left: 10px;
+}
+.buttons {
+  margin: 0 0 10px 0;
+}
+label { display: flex; flex-direction: row; margin-bottom: 10px; } 
+label > span { display: block; min-width: 80px; }
+#recording_msg { display: none; }
+.recording #recording_msg { display: inline; }
+#cases {
+  margin-top: 10px;
+  height: 60px;
+}
diff --git a/docs/portfolio/index.html b/docs/portfolio/index.html
new file mode 100644
index 0000000..e5ea486
--- /dev/null
+++ b/docs/portfolio/index.html
@@ -0,0 +1,160 @@
+
+<html>
+<head>
+  <meta charset="utf-8" />
+  <title>Bethany Barrett</title>
+  <meta name="author" content="Bethany Barrett" />
+  <meta name="description" content='Bethany Barrett, composer and sound designer.' />
+  <meta name="referrer" content="no-referrer" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes" />
+  <meta property="og:title" content="Bethany Barrett, composer and sound designer."/>
+  <meta property="og:type" content="website"/>
+  <meta property="og:image" content="https://xenavectra.com/portfolio/" />
+  <meta property="og:url" content="https://xenavectra.com/portfolio/"/>
+  <meta property="og:site_name" content="xenavectra.com" />
+  <link rel="stylesheet" type="text/css" href="index.css" />
+</head>
+<body class='loading'>
+<div>
+<div class='content'>
+  <div>
+    <h1>Bethany Barrett</h1>
+    <h2>Musician, composer, sound designer</h2>
+
+    <p>
+      Hello and welcome to my portfolio!  Here you will find various recordings and soundtracks
+      that I have produced over the last few years.  I hope you find something you enjoy.  I am
+      always available for new commissions and client work.  Please email me at <a id="address"></a>
+      to start a converation.  Thanks!
+    </p>
+
+    <p>
+      <i>🦄 Bethany</i>
+    </p>
+
+    <h3>SocialSim</h3>
+    <small>2020</small>
+
+    <div class='links'>
+      <span class='link' href="media/02 Glacial Catacomb.mp3">
+        <div class='icon audio'></div>
+        Glacial Catacomb
+      </span>
+      <span class='link' href="media/Rabbia e Tarantella full mix.mp3">
+        <div class='icon audio'></div>
+        Ennio Morricone - Rabbia e Tarantella
+      </span>
+    </div>
+
+    <p>
+      Hito Steyerl’s 2020 installation <i>SocialSim</i> used one of my dungeon synth compositions, <i>Glacial Catacomb</i>, as the music inside an art gallery‘s “secret VIP room” full of self-evolving artworks.  The film’s credits music was my rendition of Ennio Morricone's <i>Rabbia e Tarantella</i> (1974), performed
+      using guitars, drums, and synths.
+    </p>
+
+    <h3>Drill</h3>
+    <small>2019</small>
+
+    <div class='links'>
+      <span class='link' href="media/01 Sonification of Mass Shootings (1999-2018).mp3">
+        <div class='icon audio'></div>
+        Mass Shootings (1999-2018)
+      </span>
+      <span class='link' href="media/02 AR-15 (2016-17).mp3">
+        <div class='icon audio'></div>
+        AR-15 (2016-17)
+      </span>
+      <span class='link' href="media/03 Firearms Manufactured (1986-2016).mp3">
+        <div class='icon audio'></div>
+        Firearms Manufactured (1986-2016)
+      </span>
+      <span class='link' href="media/06 Yale Marching Band - Mass Shootings (1999-2018).mp3">
+        <div class='icon audio'></div>
+        Yale Marching Band - Mass Shootings (1999-2018)
+      </span>
+      <span class='link' href="media/04 Bethany Barrett - Flowers of Inequality.mp3">
+        <div class='icon audio'></div>
+        Flowers of Inequality
+      </span>
+      <span class='link' href="media/05 Bethany Barrett - Six Days.mp3">
+        <div class='icon audio'></div>
+        Six Days
+      </span>
+    </div>
+
+    <p>
+      <i>Drill</i> was a film shot by Hito Steyerl at the Park Avenue Armory in New York City.
+      The piece centered around gun violence in America, both its history (the Armory is where
+      the NRA was founded) and the present-day situation where mass shootings happen nearly
+      every week.  I scored the film using data sonifications of mass shooting data, performed
+      using the Deepmind 12 synthesizer and JX-8P.  These were later arranged and
+      performed by the Yale University Precision Marching Band in the Drill Hall at the Armory.
+      Finally, I composed two long drones using income inequality data.
+    </p>
+
+    <h3>This is the Future / Power Plants</h3>
+    <small>2019</small>
+
+    <div class='links'>
+      <span class='link' href="media/">
+        <div class='icon audio'></div>
+        (drone)
+      </span>
+
+    </div>
+
+    <p>
+      Hito Steyerl's <i>This is the Future / Power Plants</i> used one of my drones to illustrate a garden of
+      imaginary flowers.  It showed in 2019 at the Venice Biennale.
+    </p>
+
+    <h3>Figaros Wölfe</h3>
+    <small>2017</small>
+
+    <div class='links'>
+      <span class='link' href="media/10. Cold Sweat - Mescaline.mp3">
+        <div class='icon audio'></div>
+        Cold Sweat - Mescaline
+      </span>
+
+    </div>
+
+    <p>
+      I composed the soundtrack to Dominik Galizia's film <i>Figaros Wölfe</i>, a feature-length psychological drama about a woman overcoming her past trauma through the help of a friend.  The synth-driven score features some of my favorite instruments, including the Roland JX-8P and the Moog SubPhatty.
+    </p>
+
+  </div>
+</div>
+
+<div class='player'>
+  <div class="column">
+    <div class='title'></div>
+    <div class='msg'></div>
+  </div>
+  <div class="row">
+    <div class='icon'>
+      <img src="img/play.svg" class='play_icon'>
+      <img src="img/pause.svg" class='pause_icon'>
+    </div>
+    <div class='pos'>
+      <div class='track'>
+      </div>
+      <div class='dot'></div>
+    </div>
+    <div class='time'>
+      0:00 / 0:00
+    </div>
+  </div>
+</div>
+
+</body>
+<script>
+  var s = document.createElement('script');
+  s.setAttribute('src', window.location.href.match('asdf') ? './index.js' : './index.js?' + Date.now());
+  document.body.appendChild(s);
+  (function(){
+    var e = atob('eGVuYXZlY3RyYUBnbWFpbC5jb20=')
+    address.setAttribute("href", 'mailto:' + e)
+    address.innerHTML = e
+  })()
+</script>
+</html>
diff --git a/docs/portfolio/index.js b/docs/portfolio/index.js
new file mode 100644
index 0000000..c556c3b
--- /dev/null
+++ b/docs/portfolio/index.js
@@ -0,0 +1,169 @@
+
+var is_mobile = /Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(navigator.userAgent)
+var links = document.querySelectorAll(".link")
+var audio, music = [], current_index = -1, typing = false
+var active = false
+// var comment = document.querySelector("#comment")
+Array.prototype.slice.apply(links).forEach(function(url){
+  const href = url.getAttribute('href')
+  if (!href) return
+  if (href.match(/\.(mp3|wav|ogg)/i)) {
+    var index = music.length
+    // if (is_mobile) href = href.replace(/^https/,"http")
+    music.push(url)
+    url.addEventListener("click", function(e){
+      if (e.ctrlKey || e.altKey || e.metaKey || e.shiftKey) return
+      e.preventDefault()
+      play(index)
+    })
+  }
+  else if (href.match(/(gif|jpe?g|png|bmp)/i)) {
+    // url.innerHTML = "<img src='" + href + "'>"
+    // url.addEventListener("click", function(e){
+    //   if (e.ctrlKey || e.altKey || e.metaKey || e.shiftKey) return
+    //   e.preventDefault()
+    //   url.classList.toggle("zoomed")
+    // })
+  }
+})
+const el = document.querySelector('.player')
+const title_el = el.querySelector('.title')
+const icon_el = el.querySelector('.icon')
+const pos_el = el.querySelector('.pos')
+const track_el = el.querySelector('.track')
+const dot_el = el.querySelector('.dot')
+const time_el = el.querySelector('.time')
+const track_width = track_el.offsetWidth
+const track_left = pos_el.offsetLeft
+if (music.length) {
+  audio = document.createElement("audio")
+  window.a = audio
+  audio.setAttribute("controls", true)
+  audio.addEventListener("ended", next)
+  audio.addEventListener("timeupdate", timeupdate)
+  // audio.src = music[0].href
+  // var player = document.querySelector("table")
+  // player.parentNode.insertBefore(audio, player)
+  document.body.addEventListener("keydown", keydown)
+  // comment.addEventListener("focus", focusTextBox)
+  // comment.addEventListener("blur", blurTextBox)
+}
+icon_el.addEventListener('click', toggle)
+
+if (is_mobile) {
+  pos_el.addEventListener('touchstart', e => mousedown(e.touches[0]))
+  pos_el.addEventListener('touchmove', e => mousemove(e.touches[0]))
+  window.addEventListener('touchup', mouseup)
+} else {
+  pos_el.addEventListener('mousedown', mousedown)
+  pos_el.addEventListener('mousemove', mousemove)
+  window.addEventListener('mouseup', mouseup)
+}
+var down = false
+var mousex = 0
+function mousedown(e) {
+  e.preventDefault && e.preventDefault()
+  down = true
+  mousex = (e.pageX - track_left) / track_width
+}
+function mousemove(e) {
+  if (!down) return
+  mousex = Math.min(Math.max(0, (e.pageX - track_left) / track_width), 1)
+  dot_el.style.transform = 'translateX(' + (mousex * track_width) + 'px)'
+}
+function mouseup(e) {
+  if (!down) return
+  down = false
+  var t = mousex * audio.duration
+  audio.currentTime = Math.round(t)
+  dot_el.style.transform = 'translateX(' + (mousex * track_width) + 'px)'
+}
+
+function play(index){
+  if (!active) {
+    active = true
+    el.classList.add('active')
+  }
+  // if (index === music.length) return stop();
+  if (!icon_el.classList.contains('active')) {
+    icon_el.classList.add('active')
+  }
+  current_index = (index + music.length) % music.length
+  const a_el = music[current_index]
+  audio.src = a_el.getAttribute('href')
+  audio.play()
+
+  const header = prevUntil(a_el.parentNode, 'h3')
+  const title = (index + 1) + '. ' + header.innerText + ': ' + a_el.innerText
+  title_el.innerHTML = title
+  var playing = document.querySelector(".playing")
+  if (playing) playing.classList.remove("playing")
+  music[current_index].classList.add("playing")
+}
+function prev(){
+  play(current_index - 1)
+}
+function next(){
+  play(current_index + 1)
+}
+function pause() {
+  icon_el.classList.remove('active')
+}
+function stop() {
+  el.classList.remove('active')
+  var playing = document.querySelector(".playing")
+  if (playing) playing.classList.remove("playing")
+  active = false
+}
+function toggle(){
+  if (audio.paused) {
+    icon_el.classList.add('active')
+    audio.play()
+  } else {
+    pause()
+    audio.pause()
+  }
+}
+function timeupdate() {
+  if (down) return
+  let { currentTime, duration } = audio
+  let t = currentTime / duration
+  dot_el.style.transform = 'translateX(' + (track_width * t) + 'px)'
+  time_el.innerHTML = time(currentTime) + ' / ' + time(duration)
+}
+function time(n) {
+  if (!n) return '0:00'
+  n = Math.floor(n)
+  let s = n % 60
+  if (s < 10) s = '0' + s
+  let m = Math.floor(n / 60)
+  return m + ':' + s
+}
+function keydown(e){
+  if (typing || e.ctrlKey || e.altKey || e.metaKey || e.shiftKey) return
+  switch (e.keyCode) {
+    case 37: // left
+      prev()
+      break;
+    case 39: // right
+      next()
+      break;
+    case 32: // spacebar
+      e.preventDefault()
+      toggle()
+      break;
+  }
+}
+
+function prevUntil (elem, selector) {
+  elem = elem.previousElementSibling;
+  while (elem) {
+    if (elem.matches(selector)) break;
+    elem = elem.previousElementSibling;
+  }
+  return elem;
+}
+// function focusTextBox (){ typing = true }
+// function blurTextBox (){ typing = false }
+
+document.querySelector('.loading').classList.remove('loading')