Merge branch 'redesign'
This commit is contained in:
suroh
commit
f057d7278d
|
Before Width: | Height: | Size: 702 KiB After Width: | Height: | Size: 702 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.1 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 835 KiB |
|
|
@ -0,0 +1,175 @@
|
||||||
|
/* PAGE STYLES */
|
||||||
|
@import url(https://cdn.jsdelivr.net/gh/tonsky/FiraCode@1.206/distr/fira_code.css);
|
||||||
|
|
||||||
|
/* --> BASE STYLES <-- */
|
||||||
|
body {
|
||||||
|
font-family: 'fira code', monospace;
|
||||||
|
font-size: 19px;
|
||||||
|
line-height: 24px;
|
||||||
|
color: #1e1e3cff;
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
a, a:visited {
|
||||||
|
color: #1e1e3cff;
|
||||||
|
padding-bottom: 2px;
|
||||||
|
text-decoration: none;
|
||||||
|
border-bottom: 1px #1e1e3c50 dashed;
|
||||||
|
transition: color ease 0.5s, border ease 0.2s;
|
||||||
|
}
|
||||||
|
|
||||||
|
a:hover {
|
||||||
|
border-bottom: 1px #1e1e3cff 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;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* --> 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 {
|
||||||
|
margin: 23px 23px 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
nav>span {
|
||||||
|
font-size: 1.5em;
|
||||||
|
color: #1e1e3c33;
|
||||||
|
transition: color ease 0.5s;
|
||||||
|
}
|
||||||
|
|
||||||
|
nav>span:hover {
|
||||||
|
color: #1e1e3cff;
|
||||||
|
transition: color ease 0.1s;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
nav>span.active {
|
||||||
|
color: #1e1e3cff;
|
||||||
|
transition: color 1s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
nav>span.active::after {
|
||||||
|
color: #1e1e3cff;
|
||||||
|
margin-left: 14px;
|
||||||
|
content: attr(data-link);
|
||||||
|
}
|
||||||
|
|
||||||
|
h1#menuItem {
|
||||||
|
position: absolute;
|
||||||
|
line-height: inherit;
|
||||||
|
bottom: 0;
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
font-size: 33vw;
|
||||||
|
opacity: 0;
|
||||||
|
transform: translateY(100px);
|
||||||
|
transform-origin: bottom left;
|
||||||
|
transition: opacity ease-in-out 0.1s, transform ease-in-out 0.1s;
|
||||||
|
}
|
||||||
|
|
||||||
|
h1#menuItem.active {
|
||||||
|
opacity: 1 !important;
|
||||||
|
transform: translateY(-100px) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* --> MAINPAGE CONSTRUCTION <-- */
|
||||||
|
section.content {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
opacity: 0;
|
||||||
|
max-height: 0px;
|
||||||
|
overflow: hidden;
|
||||||
|
transition: opacity 0.3s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
section.content.visible {
|
||||||
|
margin: 20px 67px;
|
||||||
|
opacity: 1;
|
||||||
|
height: inherit;
|
||||||
|
overflow: inherit;
|
||||||
|
}
|
||||||
|
|
||||||
|
section.content ul.subMenu {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
list-style: none !important;
|
||||||
|
font-size: 1.5em;
|
||||||
|
}
|
||||||
|
|
||||||
|
section.content ul.subMenu li {
|
||||||
|
border-left: thin solid #d2d2d8;
|
||||||
|
padding: 5px 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
section.content ul.subMenu li:before {
|
||||||
|
content: "";
|
||||||
|
padding-right: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
section.content ul.subMenu li:hover {
|
||||||
|
background: #d2d2d8;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* --> SUBCONTENT CONSTRUCTION <-- */
|
||||||
|
section.content.page {
|
||||||
|
max-width: 1960px;
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(5, 1fr);
|
||||||
|
grid-template-rows: repeat(16, 1fr);
|
||||||
|
grid-gap: 24px;
|
||||||
|
}
|
||||||
|
|
||||||
|
section.page h1 {
|
||||||
|
font-size: 8em;
|
||||||
|
margin: 0px;
|
||||||
|
padding: 0px;
|
||||||
|
line-height: 0.95em;
|
||||||
|
}
|
||||||
|
|
||||||
|
section.content.page div.imgFeat {
|
||||||
|
grid-column: span 5;
|
||||||
|
grid-row: 1 / 4:
|
||||||
|
}
|
||||||
|
|
||||||
|
section.content.page section.imgs {
|
||||||
|
grid-column: 4 / span 2;
|
||||||
|
grid-row: 2:
|
||||||
|
}
|
||||||
|
|
||||||
|
section.content.page section.imgs>img {
|
||||||
|
max-width: 100%;
|
||||||
|
height: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
section.content.page section.text {
|
||||||
|
grid-column: 1 / span 3;
|
||||||
|
grid-row: 2;
|
||||||
|
}
|
||||||
381
index.html
381
index.html
|
|
@ -5,7 +5,8 @@
|
||||||
<title>wkflw</title>
|
<title>wkflw</title>
|
||||||
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
|
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
|
||||||
|
|
||||||
<link rel="stylesheet" type="text/css" href="css/styles.css">
|
<link rel="stylesheet" type="text/css" href="css/resets.css">
|
||||||
|
<link rel="stylesheet" type="text/css" href="css/master.css">
|
||||||
|
|
||||||
<!-- Matomo -->
|
<!-- Matomo -->
|
||||||
<script type="text/javascript">
|
<script type="text/javascript">
|
||||||
|
|
@ -28,80 +29,336 @@
|
||||||
})();
|
})();
|
||||||
</script>
|
</script>
|
||||||
<!-- End Matomo Code -->
|
<!-- End Matomo Code -->
|
||||||
|
|
||||||
|
<script src="js/audio.js" charset="utf-8" defer></script>
|
||||||
|
<script src="js/synth.js" charset="utf-8" defer></script>
|
||||||
|
<script src="js/interaction.js" charset="utf-8" defer></script>
|
||||||
|
|
||||||
|
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
<body>
|
<body>
|
||||||
|
|
||||||
<header>
|
|
||||||
<h1>max<br>franklin</h1>
|
|
||||||
</header>
|
|
||||||
|
|
||||||
<nav>
|
<nav>
|
||||||
<ul>
|
<span data-link="~"><~</span>
|
||||||
<li style="color: #FF670F;">wrk : </li>
|
<span data-link="works" class="">█</span>
|
||||||
<a href="#" id="audioButton">
|
<span data-link="audio" class="">█</span>
|
||||||
<li>audio</li>
|
<span data-link="teach" class="">█</span>
|
||||||
</a>
|
|
||||||
<a href="#" id="otherButton">
|
|
||||||
<li>other</li>
|
|
||||||
</a>
|
|
||||||
<a href="https://git.suroh.tk/" target="_blank">
|
|
||||||
<li>code</li>
|
|
||||||
</a>
|
|
||||||
</ul>
|
|
||||||
</nav>
|
</nav>
|
||||||
|
|
||||||
<section class="work" id="audioSection">
|
<section style="position: fixed; top: 0; left: 0; margin: 0; padding: 0; width: 100vw; height: 100vh; z-index: -100;">
|
||||||
<h1>AUDIO</h1>
|
<div style="position: relative; width: 100%; height: 100%;">
|
||||||
|
<h1 id="menuItem" class=""></h1>
|
||||||
<ul>
|
</div>
|
||||||
<a href="work/soloWork.html">
|
|
||||||
<li id="soloWork" style="background:url('assets/audio/solo/thumb-_DSC5654.jpg');">
|
|
||||||
<h3>Solo</h3>
|
|
||||||
<p>Solo improvised performance practice employing custom open source software instruments and saxophone.</p>
|
|
||||||
</li>
|
|
||||||
</a>
|
|
||||||
<a href="work/postoastWork.html">
|
|
||||||
<li id="postoastWork" style="background: url('assets/audio/postoast/thumb-pgxpublaunch.jpg');">
|
|
||||||
<h3>POST TOAST</h3>
|
|
||||||
<p>Electronic duo currently playing a live meld of improvised electronica, techno, hip-hop neo-classical music and down-tempo dystopian futurism.</p>
|
|
||||||
</li>
|
|
||||||
</a>
|
|
||||||
</ul>
|
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<section class="work" id="otherSection">
|
|
||||||
<h1>OTHER</h1>
|
|
||||||
|
|
||||||
<ul>
|
<section id="works" class="content">
|
||||||
<a href="work/fragileMasteryWork.html">
|
|
||||||
<li id="fragileMasteryWork" style="background:url('assets/other/fragileMastery/thumb-gradInstallation.jpg');">
|
<section id="home" class="content page">
|
||||||
<h3>Fragile Mastery</h3>
|
|
||||||
<p>Research on improvisation, open source software and their combined ability to question our attributions of value and mastery.</p>
|
</section>
|
||||||
</li>
|
|
||||||
</a>
|
<ul class="subMenu">
|
||||||
<a href="work/euclidWork.html">
|
<li data-link="fragile">Fragile Mastery</li>
|
||||||
<li id="euclidWork" style="background:url('assets/other/tetra/thumb-tetra2.jpg');">
|
<li data-link="euclid">EUCLID</li>
|
||||||
<h3>EUCLID</h3>
|
<li data-link="autoArchive">Autonomous Archive</li>
|
||||||
<p>Interactive improvisationa "article" for Tetra Gama Circulaire #3. Collaboration between DePlayer and the Experimental Publishing Master.</p>
|
<li data-link="adelaide">Adelaïde</li>
|
||||||
</li>
|
|
||||||
</a>
|
|
||||||
<a href="work/autonomousArchiveWork.html">
|
|
||||||
<li id="autonomousArchiveWork" style="background:url('assets/other/autonomousArchive/buildingLightbox.jpg');">
|
|
||||||
<h3>Autonomous Archive</h3>
|
|
||||||
<p>Collaborative project to build an activated archive of a 30 year old living community in Rotterdam.</p>
|
|
||||||
</li>
|
|
||||||
</a>
|
|
||||||
<a href="work/chagrinWork.html">
|
|
||||||
<li id="chagrinWork" style="background:url('assets/other/chagrin/thumb-chagrin1.jpg');">
|
|
||||||
<h3>Adelaïde</h3>
|
|
||||||
<p>Reactive music video made during a 24hr music video challenge. Music by Requin Chagrin.</p>
|
|
||||||
</li>
|
|
||||||
</a>
|
|
||||||
</ul>
|
</ul>
|
||||||
|
|
||||||
|
<!-- FRAGILE PROJECT CONTENT -->
|
||||||
|
<section id="fragile" class="content page">
|
||||||
|
<div class="imgFeat" style="background:url('assets/other/fragileMastery/POD_Cover.sm.png'); background-repeat: none; background-size: cover; height: 500px;"></div>
|
||||||
|
<section class="work text">
|
||||||
|
<h1>fragile mastery</h1>
|
||||||
|
|
||||||
|
<p>Fragile Mastery is structured around conversations I had with my peers who are improvising musicians, supported by research on software, improvisation, and collective practices. These bodies of research are applied to my own works and my
|
||||||
|
improvisational practice involving software and music. My interest in software and improvisation has lead me to ask, how can improvisation augment my practice involving music and software?</p>
|
||||||
|
|
||||||
|
<p>Fragile Mastery is the title of my master's thesis which now forms the basis of my work outside of a performance practice. Manifestations of this research have taken the form of printed material, digital intrusions into music performance
|
||||||
|
tools and spaces, installations, and sound recordings. It also heavily influences my pedagogical pursuits where I try and re-consider implications of mastery and value within the insitutions of a university, classroom, workshop or
|
||||||
|
residency.</p>
|
||||||
|
|
||||||
|
<p>My thesis is freely available ony my <a href="https://git.suroh.tk/" target="_blank">git repository</a>. It was designed for print using all open source tools, and generated using custom scripts which can also be found on my git.</p>
|
||||||
|
|
||||||
|
<img src="assets/other/fragileMastery/thumb-gradInstallation.jpg">
|
||||||
|
</section>
|
||||||
|
|
||||||
|
|
||||||
|
<section class="work imgs">
|
||||||
|
<object data="https://git.suroh.tk/suroh/mastersThesis/src/branch/master/assets/illustrations/headhunter.svg" type="image/svg+xml"></object>
|
||||||
|
</section>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- EUCLID PROJECT CONTENT -->
|
||||||
|
<section id="euclid" class="content page">
|
||||||
|
<div class="imgFeat">
|
||||||
|
<div style="padding:56.25% 0 0 0;position:relative;"><iframe src="https://player.vimeo.com/video/213907704?color=ffffff&byline=0&portrait=0" style="position:absolute;top:0;left:0;width:100%;height:100%;" frameborder="0" webkitallowfullscreen
|
||||||
|
mozallowfullscreen allowfullscreen></iframe></div>
|
||||||
|
<script src="https://player.vimeo.com/api/player.js"></script>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<section class="work text">
|
||||||
|
<h1>Euclid</h1>
|
||||||
|
|
||||||
|
<p>Tetra Gamma Circulaire 3 was a collaborative work between De Player and the Experimental Publishing Master's path at the Piet Zwart Institute.</p>
|
||||||
|
|
||||||
|
<p>The core theme of the publication was the investigation on <em>score</em>. What is a score's function, historically, and how it can be interpreted today.</p>
|
||||||
|
|
||||||
|
<p>I drew on previous experience with music performance, theory and composition, and decided to continue to explore themes that I had previously been investigating - primarily improvisation.</p>
|
||||||
|
|
||||||
|
<object data="assets/other/tetra/euclid.svg" type="image/svg+xml"></object>
|
||||||
|
|
||||||
|
<p>My piece, Euclid, is an improvisational instrument that aims to explore musical improvisational exploration. It is designed to allow the player to explore its musical possibilities, while requiring active experimentation to master its
|
||||||
|
interface. The music produced by Euclid are based upon Euclidian rhythms, a mathematical system that generates traditional rhythmic patterns. Rather than a noise instrument, the musicality encourages continuous compositional exploration and
|
||||||
|
creates a dialogue between performer and instrument.</p>
|
||||||
|
|
||||||
|
<p>The instrument is controlled via a series of touch conductive points. These points work very differently depending on the environmental, and individual conductivity of the player. The instrument therefore has been designed to adjust and
|
||||||
|
learn from the player as the performance progresses. In turn the performer must learn the unique situationally affected intricacies of the instrument, as well as their own affects, allowing for very different performances of the instrument
|
||||||
|
each time.</p>
|
||||||
|
|
||||||
|
<p>The end result was an interactive, improvisational, chaotic music machine. Its score, a mash of software and numbers, humanly unintelligible, and musically irreproducible.</p>
|
||||||
|
|
||||||
|
<p>This project was the catalyst for my Master's thesis, final project and now forms the base of my current practice and research.</p>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section class="work imgs">
|
||||||
|
<img src="assets/other/tetra/tetra.jpg">
|
||||||
|
|
||||||
|
<img src="assets/other/tetra/playingTetra.jpg">
|
||||||
|
|
||||||
|
<img src="assets/other/tetra/euclidianGenerator_mk2.png">
|
||||||
|
|
||||||
|
</section>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section id="autoArchive" class="content page">
|
||||||
|
<div class="imgFeat">
|
||||||
|
<img src="assets/other/autonomousArchive/pgbwstreet.jpg">
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- AUTOARCHIVE PROJECT CONTENT -->
|
||||||
|
<section class="work text">
|
||||||
|
<h1>Autonomous Archive</h1>
|
||||||
|
|
||||||
|
<p>The Autonomous Archive was a collaborative project with Giulia de Giovanelli and Franc Gonzalez. Its goal was to build a local “archival-machine” for the historical living-community Vereniging Poortgebouw, based in Rotterdam. By converting
|
||||||
|
the already extensive paper archive onto a digital system, we aimed to encourage further collaborative collection of materials to maps the legality of the Poortgebouw past, present and future.</p>
|
||||||
|
|
||||||
|
<p>The Autonomous Archive is built upon open source software and designed in a way to allow people to interact with the archive and re-activate the documents held within it. It is designed to allow for new interactions and understandings of
|
||||||
|
the archival material, and to develop further outputs.</p>
|
||||||
|
|
||||||
|
<p>The final form of this project manifested in a custom built server using parts sourced from within the community, custom build software to add to the archive, as well as a possible example of the how to re-activate its contents. The server
|
||||||
|
is a Linux system running Debian which hosts a Mediawiki which serves as an interface to the documents in the archive only accessible within the Poortgebouw. Documents are entered into the archive through a command line interface on the
|
||||||
|
server itself, which asks the archivist questions about the document being added, such as categoies, themes, players involved, and the date. The Autonomous Archive then scans the document, and through Optical Character Recognition (OCR)
|
||||||
|
translates the grpahic into editable text, translates it from dutch to english and uploads it onto the wiki in its various new formats.</p>
|
||||||
|
|
||||||
|
<p>As an example of a possible re-activation of the archive, we also developed a way to print a booklet which includes all the content of the wiki. As the Autonomous Archive is only accessible from within the living community, this generated
|
||||||
|
document acted as a way we were able to distribute our ideologies and methodologies employed within the creation and application of the Autonomous Archive.</p>
|
||||||
|
|
||||||
|
<p>This project is still alive today, and has since manifested in a Master's project within the Experimental Publishing pathway at the Piet Zwart institute in their 4th Special Issue, and presented again within the Temporary Autonomous Bureau
|
||||||
|
in 2018 at TENT gallery in Rotterdam.</p>
|
||||||
|
|
||||||
|
<img src="assets/other/autonomousArchive/aa1-web.jpg" style="float: right; width: 50%; height: auto;">
|
||||||
|
|
||||||
|
<img src="assets/other/autonomousArchive/aa7-web.jpg" style="margin-top: 10px;">
|
||||||
|
|
||||||
|
<img src="assets/other/autonomousArchive/aa8-web.jpg" style="margin-top: 10px;">
|
||||||
|
|
||||||
|
<img src="assets/other/autonomousArchive/aa12-web.jpg" style="margin-top: 10px;">
|
||||||
|
|
||||||
|
<img src="assets/other/autonomousArchive/aa13-web.jpg" style="margin-top: 10px;">
|
||||||
|
|
||||||
|
<img src="assets/other/autonomousArchive/aa14-web.jpg" style="margin-top: 10px;">
|
||||||
|
|
||||||
|
<img src="assets/other/autonomousArchive/aa17-web.jpg" style="margin-top: 10px;">
|
||||||
|
|
||||||
|
<img src="assets/other/autonomousArchive/aa19-web.jpg" style="margin-top: 10px;">
|
||||||
|
|
||||||
|
<img src="assets/other/autonomousArchive/aa20-web.jpg" style="margin-top: 10px;">
|
||||||
|
|
||||||
|
<img src="assets/other/autonomousArchive/aa4-web.jpg" style="margin-top: 10px; width: 50%; height: auto;">
|
||||||
|
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section class="work imgs">
|
||||||
|
<img src="assets/other/autonomousArchive/20171110_0061.jpg">
|
||||||
|
|
||||||
|
<img src="assets/other/autonomousArchive/Print1.jpg">
|
||||||
|
|
||||||
|
<img src="assets/other/autonomousArchive/Files-terminal.png">
|
||||||
|
|
||||||
|
<img src="assets/other/autonomousArchive/web-2.jpg">
|
||||||
|
|
||||||
|
<img src="assets/other/autonomousArchive/web-4.jpg">
|
||||||
|
|
||||||
|
<img src="assets/other/autonomousArchive/web-15.jpg">
|
||||||
|
|
||||||
|
<img src="assets/other/autonomousArchive/20171110_0057.jpg">
|
||||||
|
</section>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- ADELAIDE PROJECT CONTENT -->
|
||||||
|
<section id="adelaide" class="content page">
|
||||||
|
<div class="imgFeat">
|
||||||
|
<div style="padding:56.25% 0 0 0;position:relative;"><iframe src="https://player.vimeo.com/video/154641685?color=ffffff&byline=0&portrait=0" style="position:absolute;top:0;left:0;width:100%;height:100%;" frameborder="0" webkitallowfullscreen
|
||||||
|
mozallowfullscreen allowfullscreen></iframe></div>
|
||||||
|
<script src="https://player.vimeo.com/api/player.js"></script>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<section class="work text">
|
||||||
|
<h1>Adelaïde</h1>
|
||||||
|
|
||||||
|
<p>Adelaïde is a reactive music video developed in Processing in 24hrs. It was part of a 24 hour music video challenge in collaboration with Le Gaité Lyrique, and french band Requin Chagrin.</p>
|
||||||
|
|
||||||
|
<p>The work was done in collaboration with Sanet Stegmann. The visual style was inspired by the Memphis group of artists and designers from the 1960s. All the forms and patterns were generated in processing and were designed to be animated
|
||||||
|
for the video as well as printed.</p>
|
||||||
|
|
||||||
|
<img src="assets/other/memphis/memphis1.png" style="width: 30%; height: auto; display: inline;">
|
||||||
|
<img src="assets/other/memphis/memphis2.png" style="width: 30%; height: auto; display: inline;">
|
||||||
|
<img src="assets/other/memphis/memphis3.png" style="width: 30%; height: auto; display: inline;">
|
||||||
|
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section class="work imgs">
|
||||||
|
<img src="assets/other/chagrin/chagrin1.png">
|
||||||
|
|
||||||
|
<img src="assets/other/chagrin/chagrin2.png">
|
||||||
|
|
||||||
|
<img src="assets/other/chagrin/chagrin3.png">
|
||||||
|
</section>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section id="audio" class="content">
|
||||||
|
|
||||||
|
<ul class="subMenu">
|
||||||
|
<li data-link="solo">solo</li>
|
||||||
|
<li data-link="read-my-lips">read-my-lips</li>
|
||||||
|
<li data-link="postoast">postoast</li>
|
||||||
|
</ul>
|
||||||
|
|
||||||
|
<section id="solo" class="content page">
|
||||||
|
<div class="imgFeat">
|
||||||
|
<img src="assets/audio/solo/thumb-_DSC5695.png">
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<section class="text">
|
||||||
|
<h1>Solo</h1>
|
||||||
|
|
||||||
|
<p>My solo practice embraces the unstable nature of improvisation in software and in music. I aim to examine the agency that improvisation can provide in the context of creative software and performance. I build custom software that acts both
|
||||||
|
as an instrument and collaborator which I perform alongside with a combination of digital hardware and traditional musical instruments. Through the employment of these tools I challenge my ingrained jazz improvisational training, and
|
||||||
|
examine creative relationships we can have with machines.</p>
|
||||||
|
|
||||||
|
<iframe width="100%" height="166" scrolling="no" frameborder="no" allow="autoplay"
|
||||||
|
src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/471930894&color=%23333333&auto_play=false&hide_related=false&show_comments=true&show_user=true&show_reposts=false&show_teaser=true"></iframe>
|
||||||
|
|
||||||
|
<p>My improvisations to date have included hacking MIDI controllers and playing with audio analysis. Such approaches deconstruct my traditional musical training on the saxophone as I find myself attempting to embody routines as defined by
|
||||||
|
software. It is either the programming of my years of formal music training, or a conceived imposition by the "perfection" of technology that makes me question my agency, and even my role as an interactor.</p>
|
||||||
|
|
||||||
|
<p>My performance practice is coupled with research that takes many other forms, where I engage in discussion around agencies a wider adoption of improvisation could provide. Building these instruments is an extension of my improvisational
|
||||||
|
method, which acts as a form of liberation against the standardisation of both musical practices and software development. By employing improvisation towards the development of my tools, I expose the agencies that it might afford us in
|
||||||
|
realms outside of creative practices, and how they might be used to combat outdated structures of hierarchy and value.</p>
|
||||||
|
|
||||||
|
<p>All of the code is freely accessible on my git repository here : <a href="https://git.suroh.tk">git.suroh.tk</a>.</p>
|
||||||
|
|
||||||
|
<iframe width="100%" height="166" scrolling="no" frameborder="no" allow="autoplay"
|
||||||
|
src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/476223060&color=%23333333&auto_play=false&hide_related=true&show_comments=false&show_user=true&show_reposts=false&show_teaser=true"></iframe>
|
||||||
|
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section class="imgs">
|
||||||
|
<img src="assets/audio/solo/patch.png">
|
||||||
|
|
||||||
|
<img src="assets/audio/solo/thumb-_DSC5654.png">
|
||||||
|
</section>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
|
||||||
|
<section id="read-my-lips" class="content page">
|
||||||
|
<div class="imgFeat">
|
||||||
|
<img src="assets/audio/read-my-lips/djuna.jpg">
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<section class="text">
|
||||||
|
<h1>Read My Lips : No New Taxes</h1>
|
||||||
|
|
||||||
|
<p>A collaboration with artist <li href="http://www.amypickles.co.uk/" targe="_blank">Amy Pickles</a> developing and performing part of the sound component. Custom developed a looper mangler using open source software and hardware. The project as described by Amy Pickles.</p>
|
||||||
|
|
||||||
|
<hr>
|
||||||
|
|
||||||
|
<ul>
|
||||||
|
<li>Performance by Amy Pickles with Djuna Couvee, Marta la Torre Rubio and Ana Buljan.</li>
|
||||||
|
<li>Live Sound by Max Franklin.</li>
|
||||||
|
<li>Translation by Sanne Cobussen.</li>
|
||||||
|
</ul>
|
||||||
|
|
||||||
|
<p>ead my lips: No New Taxes. is a performed sound work where the physical structure of Gallery Lecq becomes speaker and aural / oral cavity for the surrounding architecture. The ear / mouth questions the setting of its body, where internal movement is controlled by transaction. The sluice commands passage of the waterway, as the bridge controls movement on land. This system is overlooked by the imposing architecture of Rotterdam’s former Tax Office, where personal financial dealings with the municipality allowed bodies to move in the city.</p>
|
||||||
|
|
||||||
|
<p>The title refers to a statement by George W. Bush in his 1988 election nomination. Though it struck public conscious and helped him win the campaign, these words are now said to have hurt Bush politically, living on as a broken promise.</p>
|
||||||
|
|
||||||
|
<p>A speaker is an electro-acoustic device and a person who delivers a speech. Here we experiment with distributed sounds to pledge a new narrative.</p>
|
||||||
|
|
||||||
|
<ul>
|
||||||
|
<h4>Costumes</h4>
|
||||||
|
<li>Fibre-optic battery powered lights. Corks. Plastic Bags. Shells. Nets.</li>
|
||||||
|
<li>Fabric sourced at the local market, chewing gum wrappers.</li>
|
||||||
|
</ul>
|
||||||
|
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section class="imgs">
|
||||||
|
<img src="assets/audio/read-my-lips/poster.jpg">
|
||||||
|
<p>2 A0 posters covered advertising spots outside the space.</p>
|
||||||
|
</section>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
|
||||||
|
<section id="postoast" class="content page">
|
||||||
|
<div class="imgFeat">
|
||||||
|
<img src="assets/audio/postoast/thumb-FOMORADIO_PostToast.png">
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<section class="text">
|
||||||
|
<h1>POST TOAST</h1>
|
||||||
|
|
||||||
|
<iframe width="100%" height="120" src="https://www.mixcloud.com/widget/iframe/?hide_cover=1&light=1&feed=%2FRedLightRadio%2Fpost-toast-red-light-radio-04-30-2018%2F" frameborder="0"></iframe>
|
||||||
|
|
||||||
|
<p>Post Toast is an electronic duo currently playing a live meld of hypnotic improvised electronica, techno, hip-hop neo-classical music and down-tempo dystopian futurism. Meeting during our Master's studies Ryan Cherewaty and I found
|
||||||
|
intersecting interests in musical tastes and instrumentation and decided to join forces in our living room.</p>
|
||||||
|
|
||||||
|
<p>This side project extends my methodology of improvisation in and with software, forcing me further to break from my musical academic training and aesthetics. Post Toast is a moment where I experiment with my ideologies outside of an art
|
||||||
|
music/performance realm. It has since developed from a casual hobby to a formative part of my improvised, software performance practice.</p>
|
||||||
|
|
||||||
|
<iframe style="border: 0; width: 100%; height: 621px;" src="https://bandcamp.com/EmbeddedPlayer/album=2317484970/size=large/bgcol=ffffff/linkcol=333333/transparent=true/" seamless><a
|
||||||
|
href="http://posttoast.bandcamp.com/album/fomo-radio-live-set-021318">fomo radio live set 02.13.18 by PostToast</a></iframe>
|
||||||
|
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section class="imgs">
|
||||||
|
<img src="assets/audio/postoast/thumb-redlightradio.png">
|
||||||
|
</section>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section id="teach" class="content page">
|
||||||
|
|
||||||
|
<h1 style="font-size: 8em;">teaching</h1>
|
||||||
|
<p>I'm currently engaged in teaching at <a href="https://paris.edu/" target="_blank">Paris College of Art</a> & <a href="https://www.eemi.com/" target="_blank">EEMI (l'école éuropéene des métiers de l'internet)</a> in Paris, FR.</p>
|
||||||
|
|
||||||
|
<p>Experimenting in the realms of design, art, the web, interfaces, music and sound, with undergraduate and master's level students. Some links of our research and work can be found below.</p>
|
||||||
|
|
||||||
|
<ul>
|
||||||
|
<li><a href="https://www.are.na/max-franklin/generative-________" target="_blank">are.a : PCA Generative _____ (2019)</a></li>
|
||||||
|
<li><a href="https://www.are.na/max-franklin/ux-design-lrvclxzbiu" target="_blank">are.na : PCA UX Design (2019)</a></li>
|
||||||
|
<li><a href="https://glitch.com/@generative.blah" target="_blank">glitch : PCA Generative _____ (2019)</a></li>
|
||||||
|
<li><a href="https://glitch.com/@ux.2019.pca" target="_blank">glitch : PCA UX Class (2019)</a></li>
|
||||||
|
<li><a href="https://git.suroh.tk/" target="_blank">git.suroh.tk</a></li>
|
||||||
|
</ul>
|
||||||
|
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<script type="text/javascript" src="js/menu.js"></script>
|
|
||||||
</body>
|
</body>
|
||||||
|
|
||||||
</html>
|
</html>
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,17 @@
|
||||||
|
// audio for events
|
||||||
|
// AUDIO SETUP
|
||||||
|
const audioEngine = new (window.AudioContext || window.webkitAudioContext)()
|
||||||
|
const masterGain = audioEngine.createGain()
|
||||||
|
|
||||||
|
window.onload = function() {
|
||||||
|
// create gain
|
||||||
|
masterGain.gain.value = 0.9
|
||||||
|
masterGain.connect(audioEngine.destination)
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
// AMBIENT
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
// BUTTON HOVER
|
||||||
|
|
@ -0,0 +1,129 @@
|
||||||
|
// interaction
|
||||||
|
const primaryNav = document.querySelector('nav')
|
||||||
|
const menuItem = document.querySelector('#menuItem')
|
||||||
|
|
||||||
|
// TODO: (create voice class per button)
|
||||||
|
let menuVoices = []
|
||||||
|
let activePage
|
||||||
|
|
||||||
|
const subContent = (active) => {
|
||||||
|
let parent = document.querySelector(`\#${active}`)
|
||||||
|
let menu = parent.querySelector(`\.subMenu`)
|
||||||
|
if (menu) {
|
||||||
|
return { menu: menu, parent: parent }
|
||||||
|
} else {
|
||||||
|
return null
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const subMenuListeners = (active) => {
|
||||||
|
let sc = subContent(active)
|
||||||
|
if (sc.menu) {
|
||||||
|
// console.log(`You are on ${active} w\/ a menu`)
|
||||||
|
for (let s of sc.menu.children) {
|
||||||
|
// console.log(s)
|
||||||
|
s.addEventListener('click', () => {
|
||||||
|
showContent(s.dataset.link, sc.parent)
|
||||||
|
})
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
// console.log(`${active} has no menu`)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const showContent = (section, parent = false) => {
|
||||||
|
// console.log(`section: ${section}\nparent: ${parent ? true : false}`)
|
||||||
|
let query
|
||||||
|
if (parent) {
|
||||||
|
// console.log(parent)
|
||||||
|
query = parent.querySelectorAll('.content')
|
||||||
|
className = `content page`
|
||||||
|
} else {
|
||||||
|
query = document.querySelectorAll(`.content`)
|
||||||
|
className = `content`
|
||||||
|
}
|
||||||
|
|
||||||
|
// console.log(query)
|
||||||
|
|
||||||
|
for (let q of query) {
|
||||||
|
if (q.id == section) {
|
||||||
|
// console.log(`active id : ${section}`)
|
||||||
|
subQ = q
|
||||||
|
q.className = `${className} visible`
|
||||||
|
} else {
|
||||||
|
// console.log('hiding divs')
|
||||||
|
q.className = `${className}`
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// console.log(content)
|
||||||
|
}
|
||||||
|
|
||||||
|
const findContent = (domElement, id) => {
|
||||||
|
for (let sect of domElement) {
|
||||||
|
if (id == sect.id) {
|
||||||
|
return sect
|
||||||
|
} else {
|
||||||
|
return null
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// --> PRIMARY NAVIGATION
|
||||||
|
//
|
||||||
|
for (let c of primaryNav.children) {
|
||||||
|
// TODO: (create voice class per button)
|
||||||
|
menuVoices[c.dataset.link] = new Synth(audioEngine)
|
||||||
|
menuVoices[c.dataset.link].gain.connect(masterGain)
|
||||||
|
|
||||||
|
c.addEventListener('click', () => {
|
||||||
|
menuVoices[c.dataset.link].mod()
|
||||||
|
|
||||||
|
for (let _c of primaryNav.children) {
|
||||||
|
if (c === _c && c.dataset.link != '~') {
|
||||||
|
c.className = 'active'
|
||||||
|
activePage = c.dataset.link
|
||||||
|
} else {
|
||||||
|
_c.className = ''
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// SHOW CONTENT FUNCTION
|
||||||
|
showContent(c.dataset.link)
|
||||||
|
|
||||||
|
// subPage Render
|
||||||
|
subMenuListeners(c.dataset.link)
|
||||||
|
})
|
||||||
|
|
||||||
|
c.addEventListener('mouseenter', () => {
|
||||||
|
if (c.dataset.link == '~') {
|
||||||
|
menuItem.textContent = '\u003C\u007E'
|
||||||
|
} else {
|
||||||
|
menuItem.textContent = c.dataset.link
|
||||||
|
}
|
||||||
|
menuItem.className = 'active'
|
||||||
|
menuVoices[c.dataset.link].noteOn()
|
||||||
|
})
|
||||||
|
|
||||||
|
c.addEventListener('mouseout', () => {
|
||||||
|
menuItem.className = 'inactive'
|
||||||
|
menuVoices[c.dataset.link].noteOff()
|
||||||
|
})
|
||||||
|
|
||||||
|
menuItem.addEventListener('transitionend', () => {
|
||||||
|
if (menuItem.className == 'inactive') {
|
||||||
|
menuItem.innerHTML = ''
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
// --> SECONDARY NAVIGATION
|
||||||
|
//
|
||||||
|
if (activePage) {
|
||||||
|
// console.log(activePage)
|
||||||
|
for (let s of subContent(activePage).menu.children) {
|
||||||
|
s.addEventListener('click', () => {
|
||||||
|
// console.log(`sub menu click \: ${s.dataset.link}`)
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
31
js/menu.js
31
js/menu.js
|
|
@ -1,31 +0,0 @@
|
||||||
// GET ELEMENTS TO INTERACT WITH
|
|
||||||
// main menu
|
|
||||||
let audioBut = document.getElementById('audioButton')
|
|
||||||
let otherBut = document.getElementById('otherButton')
|
|
||||||
|
|
||||||
// GET DOMs TO ALTER
|
|
||||||
let audioSection = document.getElementById('audioSection')
|
|
||||||
let otherSection = document.getElementById('otherSection')
|
|
||||||
|
|
||||||
// MAIN MENU
|
|
||||||
audioBut.addEventListener("click", () => {
|
|
||||||
if (audioSection) {
|
|
||||||
otherSection.style.visibility = "hidden"
|
|
||||||
otherSection.style.display = "none"
|
|
||||||
audioSection.style.visibility = "visible"
|
|
||||||
audioSection.style.display = "inherit"
|
|
||||||
} else {
|
|
||||||
console.log('No section')
|
|
||||||
}
|
|
||||||
})
|
|
||||||
|
|
||||||
otherBut.addEventListener("click", () => {
|
|
||||||
if (otherSection) {
|
|
||||||
audioSection.style.visibility = "hidden"
|
|
||||||
audioSection.style.display = "none"
|
|
||||||
otherSection.style.visibility = "visible"
|
|
||||||
otherSection.style.display = "inherit"
|
|
||||||
} else {
|
|
||||||
console.log('No section')
|
|
||||||
}
|
|
||||||
})
|
|
||||||
|
|
@ -0,0 +1,65 @@
|
||||||
|
class Synth {
|
||||||
|
// SYNTH VOICE CONSTRUCTOR
|
||||||
|
// Variables?
|
||||||
|
constructor(audio, type, env = {
|
||||||
|
a: 0.2,
|
||||||
|
r: 0.5,
|
||||||
|
}) {
|
||||||
|
|
||||||
|
this.audio = audio
|
||||||
|
this.t = this.audio.currentTime
|
||||||
|
|
||||||
|
this.env = {
|
||||||
|
a: env.a,
|
||||||
|
r: env.r,
|
||||||
|
}
|
||||||
|
|
||||||
|
// PRIMARY GAIN
|
||||||
|
this.gain = this.audio.createGain()
|
||||||
|
this.gain.gain.value = 0
|
||||||
|
|
||||||
|
// PRIMARY VOICE
|
||||||
|
this.primVoice = this.audio.createOscillator()
|
||||||
|
this.primVoice.type = typeof type === 'string' ? type : 'sine'
|
||||||
|
this.primVoice.connect(this.gain)
|
||||||
|
this.primVoice.start()
|
||||||
|
|
||||||
|
// MOD GAIN
|
||||||
|
this.modGain = this.audio.createGain()
|
||||||
|
this.modGain.gain.value = 0
|
||||||
|
this.modGain.connect(this.gain)
|
||||||
|
|
||||||
|
// MOD VOICE
|
||||||
|
this.modVoice = this.audio.createOscillator()
|
||||||
|
this.modVoice.type = 'triangle'
|
||||||
|
this.modVoice.connect(this.modGain)
|
||||||
|
this.modVoice.start()
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
// OSC -> ADSR -> GAIN
|
||||||
|
noteOn(freq) {
|
||||||
|
// note frequency
|
||||||
|
this.freq = freq ? freq : (Math.random() * 350) + 50
|
||||||
|
this.primVoice.frequency.setValueAtTime(this.freq, this.t)
|
||||||
|
this.modVoice.frequency.setValueAtTime(this.freq - 20, this.t)
|
||||||
|
// clear preScheduled events
|
||||||
|
this.gain.gain.cancelScheduledValues(this.audio.currentTime)
|
||||||
|
// attack
|
||||||
|
this.gain.gain.setTargetAtTime(0.9, this.t + this.env.a, 0.2)
|
||||||
|
}
|
||||||
|
|
||||||
|
noteOff() {
|
||||||
|
// release
|
||||||
|
this.gain.gain.setTargetAtTime(0.0, this.t + this.env.r, 1)
|
||||||
|
}
|
||||||
|
|
||||||
|
mod() {
|
||||||
|
this.modGain.gain.cancelScheduledValues(this.audio.currentTime)
|
||||||
|
// attack
|
||||||
|
this.modGain.gain.setTargetAtTime(0.9, this.audio.currentTime, 0.5)
|
||||||
|
// release
|
||||||
|
this.modGain.gain.setTargetAtTime(0.0, this.audio.currentTime + 0.4, 0.5)
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
Binary file not shown.
|
|
@ -0,0 +1,261 @@
|
||||||
|
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||||
|
<!-- Created with Inkscape (http://www.inkscape.org/) -->
|
||||||
|
|
||||||
|
<svg
|
||||||
|
xmlns:dc="http://purl.org/dc/elements/1.1/"
|
||||||
|
xmlns:cc="http://creativecommons.org/ns#"
|
||||||
|
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
|
||||||
|
xmlns:svg="http://www.w3.org/2000/svg"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
|
||||||
|
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
|
||||||
|
width="1024"
|
||||||
|
height="1122.5197"
|
||||||
|
viewBox="0 0 270.93333 297"
|
||||||
|
version="1.1"
|
||||||
|
id="svg8"
|
||||||
|
inkscape:version="0.92.4 5da689c313, 2019-01-14"
|
||||||
|
sodipodi:docname="outline.svg"
|
||||||
|
enable-background="new">
|
||||||
|
<defs
|
||||||
|
id="defs2" />
|
||||||
|
<sodipodi:namedview
|
||||||
|
id="base"
|
||||||
|
pagecolor="#ffffff"
|
||||||
|
bordercolor="#666666"
|
||||||
|
borderopacity="1.0"
|
||||||
|
inkscape:pageopacity="0.0"
|
||||||
|
inkscape:pageshadow="2"
|
||||||
|
inkscape:zoom="0.67773438"
|
||||||
|
inkscape:cx="333.52075"
|
||||||
|
inkscape:cy="674.36819"
|
||||||
|
inkscape:document-units="mm"
|
||||||
|
inkscape:current-layer="layer5"
|
||||||
|
showgrid="false"
|
||||||
|
units="px"
|
||||||
|
inkscape:window-width="1920"
|
||||||
|
inkscape:window-height="1053"
|
||||||
|
inkscape:window-x="0"
|
||||||
|
inkscape:window-y="0"
|
||||||
|
inkscape:window-maximized="0"
|
||||||
|
inkscape:showpageshadow="false"
|
||||||
|
inkscape:snap-page="true"
|
||||||
|
inkscape:snap-text-baseline="true"
|
||||||
|
showguides="false"
|
||||||
|
inkscape:snap-object-midpoints="true" />
|
||||||
|
<metadata
|
||||||
|
id="metadata5">
|
||||||
|
<rdf:RDF>
|
||||||
|
<cc:Work
|
||||||
|
rdf:about="">
|
||||||
|
<dc:format>image/svg+xml</dc:format>
|
||||||
|
<dc:type
|
||||||
|
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
|
||||||
|
<dc:title></dc:title>
|
||||||
|
</cc:Work>
|
||||||
|
</rdf:RDF>
|
||||||
|
</metadata>
|
||||||
|
<g
|
||||||
|
inkscape:label="background"
|
||||||
|
inkscape:groupmode="layer"
|
||||||
|
id="layer1"
|
||||||
|
transform="translate(0,1.8097168e-5)"
|
||||||
|
style="display:inline">
|
||||||
|
<rect
|
||||||
|
style="fill:#ff5733;fill-opacity:1;stroke:none;stroke-width:13.23177433;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:0"
|
||||||
|
id="rect4520"
|
||||||
|
width="64.183289"
|
||||||
|
height="45.011662"
|
||||||
|
x="-97.832481"
|
||||||
|
y="1.1461079" />
|
||||||
|
<rect
|
||||||
|
style="fill:#33ff57;fill-opacity:1;stroke:none;stroke-width:13.23177433;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
|
||||||
|
id="rect4520-5"
|
||||||
|
width="64.183289"
|
||||||
|
height="45.011662"
|
||||||
|
x="-97.832474"
|
||||||
|
y="51.992603" />
|
||||||
|
<rect
|
||||||
|
style="fill:#5733ff;fill-opacity:1;stroke:none;stroke-width:13.23177433;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
|
||||||
|
id="rect4520-5-2"
|
||||||
|
width="64.183289"
|
||||||
|
height="45.011662"
|
||||||
|
x="-97.832474"
|
||||||
|
y="102.83911" />
|
||||||
|
<rect
|
||||||
|
style="fill:#1e1e3c;fill-opacity:1;stroke:none;stroke-width:13.23177528;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
|
||||||
|
id="rect4520-5-7-0-4"
|
||||||
|
width="64.183289"
|
||||||
|
height="45.011662"
|
||||||
|
x="-97.832474"
|
||||||
|
y="156.9222" />
|
||||||
|
<rect
|
||||||
|
style="fill:#b84535;fill-opacity:1;stroke:none;stroke-width:13.23177433;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:0"
|
||||||
|
id="rect4520-59"
|
||||||
|
width="64.183289"
|
||||||
|
height="45.011662"
|
||||||
|
x="-167.30745"
|
||||||
|
y="1.1461029" />
|
||||||
|
<rect
|
||||||
|
style="fill:#2cb84e;fill-opacity:1;stroke:none;stroke-width:13.23177433;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
|
||||||
|
id="rect4520-5-1"
|
||||||
|
width="64.183289"
|
||||||
|
height="45.011662"
|
||||||
|
x="-167.30743"
|
||||||
|
y="51.992599" />
|
||||||
|
<rect
|
||||||
|
style="fill:#452cc1;fill-opacity:1;stroke:none;stroke-width:13.23177433;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
|
||||||
|
id="rect4520-5-2-0"
|
||||||
|
width="64.183289"
|
||||||
|
height="45.011662"
|
||||||
|
x="-167.30743"
|
||||||
|
y="102.83911" />
|
||||||
|
<rect
|
||||||
|
style="fill:#713238;fill-opacity:1;stroke:none;stroke-width:13.23177433;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:0"
|
||||||
|
id="rect4520-59-6"
|
||||||
|
width="64.183289"
|
||||||
|
height="45.011662"
|
||||||
|
x="-236.78241"
|
||||||
|
y="1.1460991" />
|
||||||
|
<rect
|
||||||
|
style="fill:#257145;fill-opacity:1;stroke:none;stroke-width:13.23177433;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
|
||||||
|
id="rect4520-5-1-7"
|
||||||
|
width="64.183289"
|
||||||
|
height="45.011662"
|
||||||
|
x="-236.78239"
|
||||||
|
y="51.992599" />
|
||||||
|
<rect
|
||||||
|
style="fill:#322584;fill-opacity:1;stroke:none;stroke-width:13.23177433;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
|
||||||
|
id="rect4520-5-2-0-2"
|
||||||
|
width="64.183289"
|
||||||
|
height="45.011662"
|
||||||
|
x="-236.78239"
|
||||||
|
y="102.83911" />
|
||||||
|
<rect
|
||||||
|
style="fill:#3c253a;fill-opacity:1;stroke:none;stroke-width:13.23177433;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:0"
|
||||||
|
id="rect4520-59-6-6"
|
||||||
|
width="64.183289"
|
||||||
|
height="45.011662"
|
||||||
|
x="-306.25735"
|
||||||
|
y="1.1461029" />
|
||||||
|
<rect
|
||||||
|
style="fill:#203c3f;fill-opacity:1;stroke:none;stroke-width:13.23177433;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
|
||||||
|
id="rect4520-5-1-7-1"
|
||||||
|
width="64.183289"
|
||||||
|
height="45.011662"
|
||||||
|
x="-306.25735"
|
||||||
|
y="51.992599" />
|
||||||
|
<rect
|
||||||
|
style="fill:#252056;fill-opacity:1;stroke:none;stroke-width:13.23177433;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
|
||||||
|
id="rect4520-5-2-0-2-4"
|
||||||
|
width="64.183289"
|
||||||
|
height="45.011662"
|
||||||
|
x="-306.25735"
|
||||||
|
y="102.83911" />
|
||||||
|
</g>
|
||||||
|
<g
|
||||||
|
inkscape:groupmode="layer"
|
||||||
|
id="layer2"
|
||||||
|
inkscape:label="text"
|
||||||
|
style="display:inline">
|
||||||
|
<text
|
||||||
|
xml:space="preserve"
|
||||||
|
style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:4.64398956px;line-height:1.25;font-family:sans-serif;-inkscape-font-specification:'sans-serif, Normal';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-feature-settings:normal;text-align:start;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:start;fill:#1e1e3c;fill-opacity:1;stroke:none;stroke-width:0.34829921;"
|
||||||
|
x="32.536438"
|
||||||
|
y="-23.152609"
|
||||||
|
id="text4653"
|
||||||
|
transform="rotate(90)"><tspan
|
||||||
|
sodipodi:role="line"
|
||||||
|
x="32.536438"
|
||||||
|
y="-23.152609"
|
||||||
|
style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:4.64398956px;font-family:sans-serif;-inkscape-font-specification:'sans-serif, Normal';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-feature-settings:normal;text-align:start;writing-mode:lr-tb;text-anchor:start;fill:#1e1e3c;fill-opacity:1;stroke-width:0.34829921;"
|
||||||
|
id="tspan4655">max </tspan><tspan
|
||||||
|
sodipodi:role="line"
|
||||||
|
x="32.536438"
|
||||||
|
y="-17.347622"
|
||||||
|
style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:4.64398956px;font-family:sans-serif;-inkscape-font-specification:'sans-serif, Normal';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-feature-settings:normal;text-align:start;writing-mode:lr-tb;text-anchor:start;fill:#1e1e3c;fill-opacity:1;stroke-width:0.34829921;"
|
||||||
|
id="tspan4990">franklin</tspan></text>
|
||||||
|
<rect
|
||||||
|
style="fill:#1e1e3c;fill-opacity:0.15686275;stroke:none;stroke-width:6;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
|
||||||
|
id="rect4698"
|
||||||
|
width="10.289877"
|
||||||
|
height="10.289877"
|
||||||
|
x="32.474094"
|
||||||
|
y="32.433987" />
|
||||||
|
<rect
|
||||||
|
style="display:inline;fill:#1e1e3c;fill-opacity:0.15686275;stroke:none;stroke-width:6;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
|
||||||
|
id="rect4698-0-5"
|
||||||
|
width="10.289877"
|
||||||
|
height="10.289877"
|
||||||
|
x="63.00964"
|
||||||
|
y="32.433987" />
|
||||||
|
<rect
|
||||||
|
style="display:inline;fill:#1e1e3c;fill-opacity:0.15686275;stroke:none;stroke-width:6;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
|
||||||
|
id="rect4698-0-5-3"
|
||||||
|
width="10.289877"
|
||||||
|
height="10.289877"
|
||||||
|
x="47.741859"
|
||||||
|
y="32.433983" />
|
||||||
|
</g>
|
||||||
|
<g
|
||||||
|
inkscape:groupmode="layer"
|
||||||
|
id="layer3"
|
||||||
|
inkscape:label="audio"
|
||||||
|
style="display:inline">
|
||||||
|
<text
|
||||||
|
xml:space="preserve"
|
||||||
|
style="font-style:normal;font-weight:normal;font-size:26.86905289px;line-height:1.25;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;display:inline;fill:#1e1e3c;fill-opacity:1;stroke:none;stroke-width:0.67172629;"
|
||||||
|
x="25.375586"
|
||||||
|
y="132.11111"
|
||||||
|
id="text4653-8-9"><tspan
|
||||||
|
sodipodi:role="line"
|
||||||
|
x="25.375586"
|
||||||
|
y="132.11111"
|
||||||
|
style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:71.65081024px;font-family:'Fira Code';-inkscape-font-specification:'Fira Code, Normal';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-feature-settings:normal;text-align:start;writing-mode:lr-tb;text-anchor:start;fill:#1e1e3c;fill-opacity:1;stroke-width:0.67172629;"
|
||||||
|
id="tspan4655-3-48">audio</tspan></text>
|
||||||
|
<rect
|
||||||
|
style="display:inline;fill:#1e1e3c;fill-opacity:1;stroke:none;stroke-width:6;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
|
||||||
|
id="rect4698-0-2"
|
||||||
|
width="10.289877"
|
||||||
|
height="10.289877"
|
||||||
|
x="32.474094"
|
||||||
|
y="32.433987" />
|
||||||
|
</g>
|
||||||
|
<g
|
||||||
|
inkscape:groupmode="layer"
|
||||||
|
id="layer4"
|
||||||
|
inkscape:label="teach"
|
||||||
|
style="display:inline">
|
||||||
|
<text
|
||||||
|
xml:space="preserve"
|
||||||
|
style="font-style:normal;font-weight:normal;font-size:26.86905479px;line-height:1.25;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;display:inline;fill:#ff5733;fill-opacity:1;stroke:none;stroke-width:0.67172629"
|
||||||
|
x="25.375586"
|
||||||
|
y="132.11111"
|
||||||
|
id="text4653-8-1-6"><tspan
|
||||||
|
sodipodi:role="line"
|
||||||
|
x="25.375586"
|
||||||
|
y="132.11111"
|
||||||
|
style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:71.65081024px;font-family:'Fira Code';-inkscape-font-specification:'Fira Code, Normal';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-feature-settings:normal;text-align:start;writing-mode:lr-tb;text-anchor:start;fill:#ff5733;fill-opacity:1;stroke-width:0.67172629"
|
||||||
|
id="tspan4655-3-4-3">teach</tspan></text>
|
||||||
|
<rect
|
||||||
|
style="display:inline;fill:#ff5733;fill-opacity:1;stroke:none;stroke-width:6;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
|
||||||
|
id="rect4698-0-2-4"
|
||||||
|
width="10.289877"
|
||||||
|
height="10.289877"
|
||||||
|
x="63.009636"
|
||||||
|
y="32.433983" />
|
||||||
|
</g>
|
||||||
|
<g
|
||||||
|
inkscape:groupmode="layer"
|
||||||
|
id="layer5"
|
||||||
|
inkscape:label="digital"
|
||||||
|
style="display:inline">
|
||||||
|
<rect
|
||||||
|
style="display:inline;fill:#ff5733;fill-opacity:1;stroke:none;stroke-width:6;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
|
||||||
|
id="rect4698-0-2-4-6"
|
||||||
|
width="10.289877"
|
||||||
|
height="10.289877"
|
||||||
|
x="47.741859"
|
||||||
|
y="32.433983" />
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 11 KiB |
|
|
@ -98,5 +98,4 @@
|
||||||
<img src="../assets/other/autonomousArchive/20171110_0057.jpg">
|
<img src="../assets/other/autonomousArchive/20171110_0057.jpg">
|
||||||
</section>
|
</section>
|
||||||
</body>
|
</body>
|
||||||
|
|
||||||
</html>
|
</html>
|
||||||
|
|
|
||||||
|
|
@ -67,5 +67,4 @@
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
</body>
|
</body>
|
||||||
|
|
||||||
</html>
|
</html>
|
||||||
|
|
|
||||||
|
|
@ -76,5 +76,4 @@
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
</body>
|
</body>
|
||||||
|
|
||||||
</html>
|
</html>
|
||||||
|
|
|
||||||
|
|
@ -67,5 +67,4 @@
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
</body>
|
</body>
|
||||||
|
|
||||||
</html>
|
</html>
|
||||||
|
|
|
||||||
|
|
@ -72,5 +72,4 @@
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
</body>
|
</body>
|
||||||
|
|
||||||
</html>
|
</html>
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue