update portfolioHEADmaster

3 files changed, 234 insertions, 89 deletions

diff --git a/docs/assets/css/css.css b/docs/assets/css/css.css
index 5aa0b0b..d12b7b5 100644
--- a/docs/assets/css/css.css
+++ b/docs/assets/css/css.css
@@ -1,77 +1,104 @@
 @font-face {
-    font-family: nhg;
-    src: url(../fonts/NHaasGroteskTXPro-55Rg.ttf);
-    font-weight: normal;
-    font-style: normal;
+  font-family: nhg;
+  src: url(../fonts/NHaasGroteskTXPro-55Rg.ttf);
+  font-weight: normal;
+  font-style: normal;
 }
 @font-face {
-    font-family: nhg;
-    src: url(../fonts/NHaasGroteskTXPro-56It.ttf);
-    font-weight: normal;
-    font-style: italic;
+  font-family: nhg;
+  src: url(../fonts/NHaasGroteskTXPro-56It.ttf);
+  font-weight: normal;
+  font-style: italic;
 }
 @font-face {
-    font-family: nhg;
-    src: url(../fonts/NHaasGroteskTXPro-75Bd.ttf);
-    font-weight: bold;
-    font-style: normal;
+  font-family: nhg;
+  src: url(../fonts/NHaasGroteskTXPro-75Bd.ttf);
+  font-weight: bold;
+  font-style: normal;
 }
 @font-face {
-    font-family: nhg;
-    src: url(../fonts/NHaasGroteskTXPro-76BdIt.ttf);
-    font-weight: bold;
-    font-style: italic;
+  font-family: nhg;
+  src: url(../fonts/NHaasGroteskTXPro-76BdIt.ttf);
+  font-weight: bold;
+  font-style: italic;
 }
 .desktop .m,
-.mobile .d { display: none; }
-html, body {
-  margin: 0; padding: 0; width: 100%; height: 100%;
+.mobile .d {
+  display: none;
+}
+html,
+body {
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100%;
   font-family: nhg, sans-serif;
-  color: rgba(255,255,255,0.9);
+  color: rgba(255, 255, 255, 0.9);
 }
 html {
-  background-color: rgb(0,0,0);
-  background-image: linear-gradient(rgba(20, 10, 0, 0.0), rgba(20, 10, 0, 1.0));
+  background-color: rgb(0, 0, 0);
+  background-image: linear-gradient(rgba(20, 10, 0, 0), rgba(20, 10, 0, 1));
   background-attachment: fixed;
   transition: background-color 1s;
 }
 html.day {
-  background-color: rgb(80,10,60);
+  background-color: rgb(80, 10, 60);
 }
 html.night {
-  background-color: rgb(8,10,30);
+  background-color: rgb(8, 10, 30);
 }
 body {
-  background-color: rgba(0,0,0,0);
+  background-color: rgba(0, 0, 0, 0);
   transition: background-color 1000ms, opacity 500ms;
   opacity: 1;
 }
 body.loading {
-  background-color: rgba(255,128,192,1);
+  background-color: rgba(255, 128, 192, 1);
   background-color: black;
   opacity: 0;
 }
 body.fade {
   opacity: 1;
   background-color: black;
-  background-color: rgba(255,128,192,1);
+  background-color: rgba(255, 128, 192, 1);
+}
+::-webkit-scrollbar {
+  background-color: #000;
+  width: 4px;
+}
+
+::-webkit-scrollbar-thumb {
+  background-color: #666;
+  border: solid 2px transparent;
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background-color: #666;
+  border: solid 2px transparent;
+}
+
+::-webkit-scrollbar-track {
+  border: solid 2px transparent;
 }
 .shards {
   position: absolute;
-  top: 0; left: 0;
-  width: 100%; height: 100%;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
   overflow: hidden;
   pointer-events: none;
 }
 .bgs {
   position: absolute;
-  top: 50%; left: 50%;
+  top: 50%;
+  left: 50%;
   opacity: 0.7;
   transition: opacity 500ms;
   perspective: 10000px;
 }
 .stars {
-  transition: all 500ms cubic-bezier(0,0,0,1);
+  transition: all 500ms cubic-bezier(0, 0, 0, 1);
   transform: translateZ(0) scaleX(1) scaleY(1);
 }
 .stars.fade {
@@ -82,31 +109,33 @@ body.fade {
 }
 .bg {
   position: absolute;
-  top: 0; left: 0;
+  top: 0;
+  left: 0;
   transition: all 120s;
 }
 header {
-  background-color: rgba(40,20,30,0.9);
+  background-color: rgba(40, 20, 30, 0.9);
   position: absolute;
   width: 100%;
   bottom: 100px;
   left: 0;
 }
 p {
-  margin: 0; padding: 0;
+  margin: 0;
+  padding: 0;
   line-height: 1.4;
 }
 p + p {
-  margin-top: 14px;ß
+  margin-top: 14px;
 }
 a {
   text-decoration: none;
-  color: rgba(255,255,255,0.8);
+  color: rgba(255, 255, 255, 0.8);
   transition: color 200ms;
   border-bottom: 1px dotted;
 }
 .desktop a:hover {
-  color: rgba(255,255,255,1.0);
+  color: rgba(255, 255, 255, 1);
 }
 img {
   max-width: 100%;
@@ -120,7 +149,7 @@ img.cover {
 }
 .menu a.active {
   border-bottom: 1px dotted;
-  color: rgba(255,255,255,1.0);
+  color: rgba(255, 255, 255, 1);
 }
 .logo {
   width: 400px;
@@ -194,7 +223,7 @@ ol li {
   background-image: url(../img/pause-inv.png);
   background-size: 100%;
   background-position: center;
-  border: 2px solid rgba(255,255,255,0.3);
+  border: 2px solid rgba(255, 255, 255, 0.3);
   border-radius: 100%;
   margin: 0 10px 0 10px;
 }
@@ -209,7 +238,7 @@ ol li {
   flex: auto;
 }
 .desktop .player:hover .track {
-  color: rgba(255,255,255,1.0);
+  color: rgba(255, 255, 255, 1);
 }
 .playlist {
   -webkit-overflow-scrolling: touch;
@@ -219,27 +248,31 @@ ol li {
   max-width: calc(100vw - 30px);
   background: black;
   position: absolute;
-  bottom: 160px; right: 0;
+  bottom: 160px;
+  right: 0;
   margin: 0px 10px;
   padding: 0px;
-  height: 0; overflow: hidden;
-  transition: all 0.5s cubic-bezier(0,1,1,1);
+  height: 0;
+  overflow: hidden;
+  transition: all 0.5s cubic-bezier(0, 1, 1, 1);
 }
 .playlist.visible {
   height: 180px;
 }
 .playlist ul {
-  margin: 0; padding: 0;
+  margin: 0;
+  padding: 0;
 }
 .playlist li {
-  margin: 0; padding: 10px;
+  margin: 0;
+  padding: 10px;
   cursor: pointer;
   transition: all 0.2s;
-  background: rgba(20,5,10,0.5);
+  background: rgba(20, 5, 10, 0.5);
 }
 .playlist li.active {
   color: #000;
-  background: rgba(255,255,255,0.9);
+  background: rgba(255, 255, 255, 0.9);
 }
 .playlistToggle {
   align-self: flex-end;
@@ -248,7 +281,7 @@ ol li {
   padding: 10px;
   display: flex;
   flex-direction: column;
-  justify-content:space-between;
+  justify-content: space-between;
 }
 .playlistToggle div {
   width: 100%;
@@ -263,10 +296,11 @@ section {
   max-width: 500px;
   background: black;
   position: absolute;
-  bottom: 160px; left: 0;
+  bottom: 160px;
+  left: 0;
   margin: 10px 10px;
   padding: 10px;
-  background: rgba(20,5,10,0.5);
+  background: rgba(20, 5, 10, 0.5);
   pointer-events: none;
   opacity: 0;
   transition: opacity 200ms;
@@ -279,14 +313,24 @@ section {
   pointer-events: auto;
 }
 @keyframes fade {
-  0% { opacity: 0.6; }
- 50% { opacity: 1.0; }
- 90% { opacity: 0.7; }
-100% { opacity: 0.6; }
+  0% {
+    opacity: 0.6;
+  }
+  50% {
+    opacity: 1;
+  }
+  90% {
+    opacity: 0.7;
+  }
+  100% {
+    opacity: 0.6;
+  }
 }
 
 @media (max-width: 700px) {
-  * { box-sizing: border-box; }
+  * {
+    box-sizing: border-box;
+  }
   header {
     bottom: auto;
     top: 0px;
@@ -331,7 +375,7 @@ section {
   .player {
     position: fixed;
     bottom: 0;
-    background: rgba(80,10,60,0.6);
+    background: rgba(80, 10, 60, 0.6);
     width: 100vw;
     padding: 12px 20px;
   }
diff --git a/docs/index.html b/docs/index.html
index 6f247c9..192b876 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -23,8 +23,8 @@
           >
           <!-- <a href="#discography"><span class='d'>Discography</span><span class='m'>Albums</span></a> -->
           <a href="#hardware">Equipment</a>
-          <a href="/portfolio/">Portfolio</a>
           <a href="#contact">Contact</a>
+          <a href="/portfolio/">Portfolio</a>
         </div>
         <div class="player paused">
           <div class="icon"></div>
@@ -41,21 +41,42 @@
       <h2>Biography</h2>
       <p>
         Xena Vectra is the alter ego of synth goddess Bethany Barrett. Born in
-        the mountains of the Black Forest, raised in sunny California, she now
-        resides in Berlin. Her unique style is inspired by synth-heavy film
+        the mountains of the Black Forest, and raised in sunny California, she
+        now resides in Berlin. Her unique style is inspired by synth-heavy film
         soundtracks and italo disco, driven by her love of analog electronics.
       </p>
       <p>
-        As Xena Vectra, she performs live using an all hardware setup, no
+        As Xena Vectra, Bethany performs live using an all hardware setup, no
         laptop. She is always looking for new projects involving sound design,
         including film and game soundtracks, and is available for live bookings
-        throughout Europe. She also appears as one half of synth duo Magisphere.
-        Her soundtrack work includes scoring indie film
-        <i>Figaros W&ouml;lfe</i> (2017) and creating
-        <a href="https://asdf.us/sonifications/">data sonifications</a> for
-        artist Hito Steyerl's <i>Drill</i> (2019),
-        <i>This is the Future / Power Plants</i> (2019), and
-        <i>SocialSim</i> (2020).
+        throughout Europe. She also appears as one half of synth duo
+        <a href="https://lfolobster.bandcamp.com/" target="_blank"
+          >Magisphere</a
+        >
+        and horror disco trio
+        <a href="https://xenavectra.com/pavone/" target="_blank"
+          >Pavone Cristallo</a
+        >.
+      </p>
+      <p>
+        A professional composer and sound designer, Bethany has scored
+        feature-length films, including the documentary
+        <i>Neues von Zuhause</i> (2021) and indie film
+        <i>Figaros W&ouml;lfe</i> (2017). In the art world, she created
+        <a href="https://asdf.us/sonifications/" target="_blank"
+          >data sonifications of gun violence</a
+        >
+        for artist Hito Steyerl's
+        <i>This is the Future / Power Plants</i> (2019, Venice Biennale),
+        <i>Drill</i> (2019, Park Avenue Armory, NYC), and
+        <i>SocialSim</i> (2020, Centre Pompidou). She scored Heather
+        Dewey-Hagborg's
+        <a
+          href="https://deweyhagborg.com/projects/hybrid-an-interspecies-opera"
+          target="_blank"
+          >Hybrid: an Interspecies Opera</a
+        >
+        (2022, MIT) for four singers.
       </p>
     </section>
     <section id="discography">
@@ -85,6 +106,7 @@
       <h2>Equipment</h2>
       <h3>Monosynths</h3>
       <ul>
+        <li>Buchla Music Easel</li>
         <li>Moog Subsequent 37</li>
         <li>Moog Subphatty</li>
         <li>Moog Slim Phatty</li>
@@ -99,7 +121,6 @@
         <li>Arturia Microbrute</li>
         <li>Dreadbox Typhon</li>
         <li>Behringer Model D</li>
-        <li>Behringer Neutron</li>
         <li>Behringer Crave</li>
         <li>Behringer MS-1</li>
         <li>Behringer TD-3</li>
@@ -107,35 +128,47 @@
       </ul>
       <h3>Polysynths</h3>
       <ul>
+        <li>Sequential Take 5</li>
         <li>Sequential Prophet Rev2</li>
+        <li>Waldorf M</li>
         <li>Roland Alpha Juno 2</li>
         <li>Roland JX-8P</li>
         <li>Roland D-05</li>
+        <li>Roland JD-08</li>
         <li>Roland Super JV 1080</li>
-        <li>Korg Minilogue</li>
+        <li>Korg Opsix</li>
+        <li>Korg Minilogue XD</li>
         <li>Korg Volca FM</li>
         <li>Arturia Microfreak</li>
+        <li>Dreadbox Nymphes</li>
         <li>Behringer DeepMind 12</li>
         <li>Behringer VC340 Vocoder</li>
         <li>Yamaha TG33</li>
         <li>Kawai K1m</li>
+        <li>Nord Electro 6</li>
       </ul>
       <h3>Drum machines / Sequencers / Samplers</h3>
       <ul>
         <li>Roland TR-707</li>
         <li>Roland TR-8</li>
+        <li>Elektron Analog Rytm mk2</li>
+        <li>Elektron Digitakt</li>
+        <li>Elektron Octatrack</li>
+        <li>Elektron Syntakt</li>
+        <li>Elektron Model:Samples</li>
+        <li>Korg DDD-1</li>
         <li>Korg Volca Kick</li>
         <li>Korg Volca Beats</li>
+        <li>Korg Volca Drum</li>
         <li>Korg Volca Sample</li>
-        <li>Korg DDD-1</li>
         <li>Polyend Tracker</li>
-        <li>Elektron Digitakt</li>
-        <li>Elektron Model:Samples</li>
         <li>Arturia Drumbrute</li>
+        <li>Arturia Keystep Pro</li>
         <li>Behringer RD-6</li>
         <li>Behringer RD-8</li>
         <li>Alesis Samplepad</li>
         <li>TC Electronic Ditto x4 Looper</li>
+        <li>Ciat-Lonbarde Cocoquantus</li>
       </ul>
       <h3>Selected Modules</h3>
       <ul>
@@ -143,6 +176,7 @@
         <li>Make Noise Morphagene</li>
         <li>Make Noise Wogglebug</li>
         <li>Make Noise modDemix</li>
+        <li>Make Noise Optomix</li>
         <li>Industrial Music Electronics Hertz Donut</li>
         <li>Industrial Music Electronics Piston Honda</li>
         <li>Befaco Noise Plethora</li>
@@ -163,11 +197,13 @@
         <li>Erica Synths Black Polivoks VCF</li>
         <li>Erica Synths Black Wavetable VCO</li>
         <li>Erica Synths Pico Ring</li>
+        <li>SSF Zephyr</li>
         <li>SSF RND STEP</li>
         <li>WMD C4RBN</li>
         <li>Instruō Cš-L</li>
         <li>Instruō øchd</li>
         <li>Instruō tanh[3]</li>
+        <li>Instruō arbhar</li>
         <li>Tiptop Audio Fold Processor</li>
         <li>XAOC Zadar 1973 Quadruple Envelope Generator</li>
         <li>XAOC Batumi 1974 Quadruple LFO</li>
@@ -176,12 +212,15 @@
       </ul>
       <h3>FX</h3>
       <ul>
+        <li>Strymon Volante</li>
         <li>Strymon Timeline</li>
         <li>Strymon Big Sky</li>
         <li>Carcosa Fuzz</li>
+        <li>Jam Pedals Rattler</li>
         <li>Proco Rat 2 Distortion</li>
         <li>Elektron Analog Drive</li>
         <li>Elektro Harmonix Super Pulsar</li>
+        <li>Mr. Black GilaMondo</li>
         <li>MXR Carbon Copy Deluxe</li>
         <li>Korg NTS-1</li>
         <li>Digitech Polara Reverb</li>
@@ -198,6 +237,8 @@
         <li>Flute</li>
         <li>Kalimba</li>
         <li>Singing Bowls</li>
+        <li>SOMA Ether</li>
+        <li>SOMA Rumble of Ancient Times</li>
         <li>Egg Shakers</li>
         <li>Melodica</li>
       </ul>
@@ -208,12 +249,11 @@
       <p>
         Booking:
         <a target="_blank" id="email_addr"></a><br />
-        Bandcamp:
-        <a
+        Instagram: @<a
           target="_blank"
           id="twitter_addr"
-          href="https://lfolobster.bandcamp.com/"
-          >LFO Lobster</a
+          href="https://twitter.com/XenaVectra/"
+          >xena_vectra</a
         ><br />
         Twitter: @<a
           target="_blank"
@@ -221,6 +261,13 @@
           href="https://twitter.com/XenaVectra/"
           >XenaVectra</a
         ><br />
+        Bandcamp:
+        <a
+          target="_blank"
+          id="twitter_addr"
+          href="https://lfolobster.bandcamp.com/"
+          >LFO Lobster</a
+        ><br />
         Soundcloud:
         <a target="_blank" href="https://soundcloud.com/xenavectra/"
           >Xena Vectra</a
diff --git a/docs/portfolio/index.html b/docs/portfolio/index.html
index 47c4183..cdc331c 100644
--- a/docs/portfolio/index.html
+++ b/docs/portfolio/index.html
@@ -34,7 +34,7 @@
           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>
+          <a class="address"></a>
           to start a conversation. Thanks!
         </p>
 
@@ -42,6 +42,55 @@
           <i>🦄 Bethany</i>
         </p>
 
+        <h3>Hybrid</h3>
+        <small>2022</small>
+
+        <div class="links">
+          <span class="link" href="media/hybrid-nature.mp3">
+            <div class="icon audio"></div>
+            Nature: "Domestication is a process..."
+          </span>
+          <span class="link" href="media/hybrid-sacrifice.mp3">
+            <div class="icon audio"></div>
+            Sacrifice: "I'm convined there's a solution..."
+          </span>
+          <span class="link" href="media/hybrid-ritual.mp3">
+            <div class="icon audio"></div>
+            Ritual (Chorus): "In a moment, a life is lost..."
+          </span>
+        </div>
+
+        <p>
+          <i>Hybrid</i> is "an interspecies opera" by artist Heather
+          Dewey-Hagborg which explores xenotransplantation: genetically
+          modifying pigs to grow human organs. This piece presented a unique
+          challenge as I had to compose music for four vocalists, using somewhat
+          abstruse texts taken from interviews with scientists.
+        </p>
+        <p>
+          With only a month to produce this piece, I was able to scout four
+          singers, arrange and record their performances, and perform the
+          instrumental backing (making special use of the Sequential Take 5 and
+          Korg Opsix) in time for the debut at MIT. I also produced full musical
+          scores, so that in the future, the piece can be performed live.
+        </p>
+
+        <h3>Homeday</h3>
+        <small>2022</small>
+
+        <div class="links">
+          <span class="link" href="media/homeday-montage.mp3">
+            <div class="icon audio"></div>
+            Homeday
+          </span>
+        </div>
+
+        <p>
+          I scored this short film about a small company that organizes a soccer
+          team to bring its employees closer together. The piece is upbeat and
+          follows them through a practice and a match.
+        </p>
+
         <h3>Fireworks</h3>
         <small>2021</small>
 
@@ -96,9 +145,10 @@
         </div>
 
         <p>
-          I scored the feature-length documentary <i>Neues von Zuhause</i>,
-          directed by Dominik Galizia. The film documents the first year of the
-          Covid-19 pandemic from the viewpoint of a solitary individual, who
+          I scored the feature-length documentary <i>Neues von Zuhause</i> (<i
+            >News from Home</i
+          >), directed by Dominik Galizia. The film documents the first year of
+          the Covid-19 pandemic from the viewpoint of a solitary individual, who
           narrated his experience as it happened through WhatsApp voice
           messages. Music pervades the film, at times heightening the sense of
           unease and isolation, while also highlighting moments of hope and
@@ -148,7 +198,8 @@
           inside an art gallery‘s “secret VIP room” full of self-evolving
           artworks. For the film’s credits, I arranged a rendition of Ennio
           Morricone's <i>Rabbia e Tarantella</i> (1974), performed using
-          guitars, drums, and synths.
+          guitars, drums, and synths. This piece debuted at the K21 museum in
+          Düsseldorf and was later shown at the Centre Pompidou, Paris.
         </p>
 
         <h3>Drill</h3>
@@ -267,11 +318,12 @@
 
         <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. Parts of the score were later
-          used in Dominik's cult hit film <i>Heikos Welt</i> (2021).
+          <i>Figaros Wölfe</i> (<i>Figaro's Wolves</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. Parts of the score were later used in Dominik's cult hit
+          film <i>Heikos Welt</i> (2021).
         </p>
       </div>
     </div>
@@ -304,9 +356,11 @@
     );
     document.body.appendChild(s);
     (function () {
-      var e = atob("eGVuYUB4ZW5hdmVjdHJhLmNvbQ==");
-      address.setAttribute("href", "mailto:" + e);
-      address.innerHTML = e;
+      Array.from(document.querySelectorAll(".address")).map((address) => {
+        var e = atob("eGVuYUB4ZW5hdmVjdHJhLmNvbQ==");
+        address.setAttribute("href", "mailto:" + e);
+        address.innerHTML = e;
+      });
     })();
   </script>
 </html>