summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
Diffstat
-rw-r--r--docs/portfolio/index.css95
-rw-r--r--docs/portfolio/index.html68
2 files changed, 130 insertions, 33 deletions
diff --git a/docs/portfolio/index.css b/docs/portfolio/index.css
index caf9524..7395dc6 100644
--- a/docs/portfolio/index.css
+++ b/docs/portfolio/index.css
@@ -1,33 +1,37 @@
-
@font-face {
- font-family: 'Crimson';
- src: url('fonts/CrimsonText-Bold.ttf') format('truetype');
+ 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-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-family: "Crimson";
+ src: url("fonts/CrimsonText-Regular.ttf") format("truetype");
}
@font-face {
- font-family: 'Crimson';
- src: url('fonts/CrimsonText-Italic.ttf') format('truetype');
+ 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%;
+* {
+ box-sizing: border-box;
+}
+html,
+body {
+ margin: 0;
+ padding: 0;
+ width: 100%;
+ height: 100%;
}
body {
- font-family: 'Crimson', serif;
+ font-family: "Crimson", serif;
font-size: 1.2em;
transition: background-color 100ms;
background-color: #fff;
@@ -72,7 +76,7 @@ h3 {
h3 + small {
display: inline-block;
font-size: 1.2em;
- font-style: italic;
+ /*font-style: italic;*/
}
ul {
list-style-type: none;
@@ -110,30 +114,44 @@ li::before {
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);}
+.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.pause {
+ background-image: url(img/pause.svg);
+}
.icon.audio,
-.icon.play { background-image: url(img/play.svg); background-size: 80% 80%;}
+.icon.play {
+ background-image: url(img/play.svg);
+ background-size: 80% 80%;
+}
.player {
position: fixed;
- bottom: 0; left: 0;
+ bottom: 0;
+ left: 0;
width: 100%;
max-width: 720px;
padding-right: 40px;
- box-shadow: 0 0 2px rgba(0,0,0,0.3);
+ 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);
+ 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);
+ transform: translate3d(0, 0%, 0);
}
.player .icon {
cursor: pointer;
@@ -179,7 +197,8 @@ li::before {
.player .track {
pointer-events: none;
position: absolute;
- top: 50%; left: 0;
+ top: 50%;
+ left: 0;
margin-top: -1px;
height: 2px;
background: #333;
@@ -188,7 +207,8 @@ li::before {
.player .dot {
pointer-events: none;
position: absolute;
- top: 50%; left: 0;
+ top: 50%;
+ left: 0;
margin-top: -6px;
width: 12px;
height: 12px;
@@ -291,10 +311,21 @@ body {
.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; }
+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
index c99d548..2b235a2 100644
--- a/docs/portfolio/index.html
+++ b/docs/portfolio/index.html
@@ -32,6 +32,72 @@
<i>🦄 Bethany</i>
</p>
+ <h3>Fireworks</h3>
+ <small>2021</small>
+
+ <div class='links'>
+ <span class='link' href="media/Fireworks Part 1.mp3">
+ <div class='icon audio'></div>
+ Part 1: Fireworks
+ </span>
+ <span class='link' href="media/Fireworks Part 2 Synthwave.mp3">
+ <div class='icon audio'></div>
+ Part 2: The Flame
+ </span>
+ <span class='link' href="media/Fireworks Part 3 Techno.mp3">
+ <div class='icon audio'></div>
+ Part 3: The Melt (Club scene)
+ </span>
+ <span class='link' href="media/Fireworks Part 3 Outro.mp3">
+ <div class='icon audio'></div>
+ Part 3: The Melt (Outro)
+ </span>
+ </div>
+
+ <p>
+ Soundtrack for a short film depicting a love story about missed connections. Shot on the <i>Xiaomi 11T Pro 5G</i>, the film was commissioned by Xiaomi to show off the cinematic potential of their new smart phone camera. The acoustic guitar theme establishes a classic movie house vibe, while the electronic tracks follow the lovers to their climax.
+ </p>
+
+ <h3>Neues von Zuhause</h3>
+ <small>2021</small>
+
+ <div class='links'>
+ <span class='link' href="media/NVZ 1 - Trier.mp3">
+ <div class='icon audio'></div>
+ Trier / Isolation
+ </span>
+ <span class='link' href="media/NVZ 2 - Circus Corona.mp3">
+ <div class='icon audio'></div>
+ Circus Corona
+ </span>
+ <span class='link' href="media/NVZ 3 - Helicopter.mp3">
+ <div class='icon audio'></div>
+ News Stand / Helicopter
+ </span>
+ <span class='link' href="media/NVZ 4 - City Lights.mp3">
+ <div class='icon audio'></div>
+ Dark Streets / City Lights
+ </span>
+ </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 talked about 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 humor that break through. Features rich Moog leads, pads from the Roland Alpha Juno, and haunting modular wavetable drones.
+ </p>
+
+ <h3>»click the stars« (Kunst im Unterground)</h3>
+ <small>2021</small>
+
+ <div class='links'>
+ <span class='link' href="media/BVG Theme Song.mp3">
+ <div class='icon audio'></div>
+ BVG Theme Song
+ </span>
+ </div>
+
+ <p>
+ As part of <i>Kunst im Unterground 2020/2021</i>, I soundtracked an audio essay that accompanied an art intervention on the BVG. The artist, Philine Puffer, took online Google reviews of Berlin U-Bahn stations and displayed them on <i>Berliner Fenster</i>, the passenger television program on the Berlin subway. Her audio essay explains how these reviews comment on the contemporary urban environment, where neutral, functional spaces like train stations become sites for online social critique; pieces of this BVG "Theme Song" were used throughout.
+ </p>
+
<h3>SocialSim</h3>
<small>2020</small>
@@ -143,7 +209,7 @@
</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.
+ 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).
</p>
</div>
generated by cgit v1.2.3-70-g09d2 (git 2.51.0) at 2025-12-10 12:06:15 +0000