Changing website design completely

This commit is contained in:
suroh 2019-03-15 15:53:48 +01:00
parent 797294905b
commit ab4f7128c9
10 changed files with 433 additions and 228 deletions

57
css/master.css Normal file
View File

@ -0,0 +1,57 @@
/* 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: 1.2em;
color: #1e1e3cff;
margin: 0;
padding: 0;
}
a, a:visited {
color: #1e1e3cff;
text-decoration: none;
}
/* --> NAVIGATION <-- */
nav {
margin: 20px;
}
nav>span {
font-size: 1.5em;
color: #1e1e3c33;
transition: color ease 0.1s;
}
nav>span:hover {
color: #1e1e3cff;
transition: color ease 0.1s;
cursor: pointer;
}
h1#menuItem {
position: absolute;
left: 20px;
bottom: 20px;
margin: 0;
padding: 0;
font-size: 31vw;
opacity: 0;
transform: translateY(300px);
transition: opacity ease-in-out 0.1s, transform ease-in-out 0.1s;
}
h1#menuItem.active {
opacity: 1 !important;
transform: translateY(0px) !important;
}
/* --> MAINPAGE CONSTRUCTION <-- */
section#content {
margin: 40px 20px;
}

View File

View File

@ -1,52 +0,0 @@
@import url('https://cdn.jsdelivr.net/gh/tonsky/FiraCode@1.206/distr/fira code.css');
body {
padding: 0;
margin: 0;
font-family: 'fira code', monospace;
font-weight: 100;
}
h1, h2, h3, h4, h5 {
font-weight: 100;
margin: 0;
}
/* -~ NAV ~- */
a#mobileButt {
visibility: hidden;
height: 0px;
font-size: 5em;
}
nav ul {
list-style: none;
padding: 0;
margin: 0;
}
nav ul li {
display: inline-block;
}
nav ul li.spacer {
color: #FF670F;
}
/* -~ WORK ~- */
.work ul {
list-style: none;
padding: 0;
margin: 0;
}
.work ul li {
}
.work ul li h3 {
margin: 0;
}
.work ul li p {
margin: 0;
}

View File

@ -1,72 +0,0 @@
/* Portables ----------- */
@media only screen
and (max-device-width : 1024px) {
/* Styles */
body {
width: 100vw;
height: 100vh;
}
/* -~ HEADER ~- */
header {
position: relative;
}
/* -~ NAV ~- */
a#mobileButt {
position: absolute;
bottom: 0px;
right: 0px;
visibility: visible;
}
nav.navigation {
position: fixed;
display: block;
width: 100%;
max-height: 0px;
overflow: hidden;
background: #FFF;
transition: all 0.25s ease;
}
nav.navigation.open {
max-height: 100vh;
transition: all 1s ease;
}
nav.navigation ul {
list-style: none;
margin: 10% 0 0 0;
font-size: 2em;
}
nav.navigation ul li {
display: block;
text-align: center;
padding: 5px 0 7px;
}
nav.navigation ul li.spacer {
color: #FF670F;
}
}
/* Desktops and laptops ----------- */
@media only screen
and (min-width : 1224px) {
/* Styles */
}
/* Large screens ----------- */
@media only screen
and (min-width : 1824px) {
/* Styles */
}

View File

@ -1,72 +1,37 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <head>
<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/resets.css"> <link rel="stylesheet" type="text/css" href="css/resets.css">
<link rel="stylesheet" type="text/css" href="css/styles.css"> <link rel="stylesheet" type="text/css" href="css/master.css">
<script src="js/interaction.js" charset="utf-8" defer></script>
<script src="js/audio.js" charset="utf-8" defer></script>
</head> </head>
<body> <body>
<header>
<h1>max<br>franklin</h1>
<a id="mobileButt">menu</a>
</header>
<nav>
<nav class="navigation"> <span data-link="works"></span>
<ul> <span data-link="audio"></span>
<li class="spacer">wrk : </li> <span data-link="teach"></span>
<a href="#" id="audioButton"><li>audio</li></a>
<a href="#" id="otherButton"><li>other</li></a>
<a href="https://git.suroh.tk/" target="_blank"><li>code</li></a>
<li class="spacer">rsch : </li>
<a href="https://ied.suroh.tk/"><li>IED</li></a>
<a href="https://work.suroh.tk/research/"><li>wiki</li></a>
<li class="spacer">cv : </li>
<a href="cv.html"><li>me</li></a>
</ul>
</nav> </nav>
<section class="work" id="audioSection"> <section style="position: fixed; top: 0; left: 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"> <section id="content">
<h1>=> other</h1>
<ul>
<a href="work/fragileMasteryWork.html"><li id="fragileMasteryWork" style="background:url('assets/other/fragileMastery/thumb-gradInstallation.jpg');">
<h3>Fragile Mastery</h3>
<p>Research on improvisation, open source software and their combined ability to question our attributions of value and mastery.</p>
</li></a>
<a href="work/euclidWork.html"><li id="euclidWork" style="background:url('assets/other/tetra/thumb-tetra2.jpg');">
<h3>EUCLID</h3>
<p>Interactive improvisationa "article" for Tetra Gama Circulaire #3. Collaboration between DePlayer and the Experimental Publishing Master.</p>
</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>
</section> </section>
<script type="text/javascript" src="js/menu.js"></script>
</body> </body>
</html> </html>

58
js/audio.js Normal file
View File

@ -0,0 +1,58 @@
// audio for events
// AUDIO SETUP
let audioEngine = new(window.AudioContext || window.webkitAudioContext)()
let masterGain = audioEngine.createGain()
let voice = {
gain: audioEngine.createGain(),
osc: audioEngine.createOscillator(),
adsr: {
a: typeof amount === 'number' ? amount * 1000 : 0.025,
d: typeof amount === 'number' ? amount * 1000 : 0.5,
sv: typeof amount === 'number' ? amount : 0.8,
r: typeof amount === 'number' ? amount * 1000 : 0.5,
t: audioEngine.currentTime
},
play: function(note) {
freq = typeof note === 'number' ? note : (Math.random() * 350) + 50
this.osc.frequency.setValueAtTime(freq, audioEngine.currentTime)
this.engage()
},
engage: function() {
// clear preScheduled events
this.gain.gain.cancelScheduledValues(this.adsr.t)
// initial value
this.gain.gain.setValueAtTime(0.0, this.adsr.t)
// attack
this.gain.gain.setTargetAtTime(0.9, this.adsr.t, this.adsr.a)
// decay
this.gain.gain.setTargetAtTime(this.adsr.sv, this.adsr.t + this.adsr.a, this.adsr.d)
},
release: function() {
this.adsr.t = audioEngine.currentTime
// release
this.gain.gain.setTargetAtTime(0.0, this.adsr.t, this.adsr.r)
}
}
window.onload = function() {
// create gain
voice.gain.gain.setValueAtTime(0.0001, audioEngine.currentTime)
masterGain.gain.value = 0.9
voice.gain.connect(masterGain)
// create oscilator
voice.osc.type = 'sine'
voice.osc.connect(voice.gain)
voice.osc.start()
masterGain.connect(audioEngine.destination)
}
// AMBIENT
// BUTTON HOVER

33
js/interaction.js Normal file
View File

@ -0,0 +1,33 @@
// interaction
const primaryNav = document.querySelector('nav')
const menuItem = document.querySelector('#menuItem')
// TODO: (create voice class per button)
// let menuVoices = []
for (let c of primaryNav.children) {
// TODO: (create voice class per button)
// menuVoices[c.dataset.link] = new voice()
c.addEventListener('click', () => {
console.log(`clicked : ${c.dataset.link}`)
})
c.addEventListener('mouseenter', () => {
menuItem.innerHTML = c.dataset.link
menuItem.className = 'active'
voice.play()
})
c.addEventListener('mouseout', () => {
menuItem.className = 'inactive'
voice.release()
})
menuItem.addEventListener('transitionend', () => {
if (menuItem.className == 'inactive') {
menuItem.innerHTML = ''
}
})
}

View File

@ -1,45 +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')
}
})
// MOBILE menu
var menuButton = document.querySelector("#mobileButt");
menuButton.addEventListener("click", function(event) {
event.preventDefault();
var parent = document.querySelector(".navigation");
if (parent.classList.contains("open")) {
parent.classList.remove("open");
} else {
parent.classList.add("open");
}
});

BIN
prototyping/outline.pdf Normal file

Binary file not shown.

261
prototyping/outline.svg Normal file
View File

@ -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