diff --git a/css/master.css b/css/master.css new file mode 100644 index 0000000..119fc3f --- /dev/null +++ b/css/master.css @@ -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; +} diff --git a/css/print.css b/css/print.css deleted file mode 100755 index e69de29..0000000 diff --git a/css/resets.css b/css/resets.css deleted file mode 100644 index c043909..0000000 --- a/css/resets.css +++ /dev/null @@ -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; -} diff --git a/css/styles.css b/css/styles.css deleted file mode 100755 index e3d763e..0000000 --- a/css/styles.css +++ /dev/null @@ -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 */ - -} diff --git a/index.html b/index.html index cc46197..f9bdd8f 100755 --- a/index.html +++ b/index.html @@ -1,72 +1,37 @@ - - wkflw - - - + + wkflw + + + + + + + + + -
-

max
franklin

- menu -
+ - +
+
+

+
+
-
-

=> audio

+
- -
+
-
-

=> other

- - -
- - + diff --git a/js/audio.js b/js/audio.js new file mode 100644 index 0000000..f9d106d --- /dev/null +++ b/js/audio.js @@ -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 diff --git a/js/interaction.js b/js/interaction.js new file mode 100644 index 0000000..c4c9795 --- /dev/null +++ b/js/interaction.js @@ -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 = '' + } + }) +} diff --git a/js/menu.js b/js/menu.js deleted file mode 100755 index f7102cf..0000000 --- a/js/menu.js +++ /dev/null @@ -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"); - } -}); diff --git a/prototyping/outline.pdf b/prototyping/outline.pdf new file mode 100644 index 0000000..32ecb34 Binary files /dev/null and b/prototyping/outline.pdf differ diff --git a/prototyping/outline.svg b/prototyping/outline.svg new file mode 100644 index 0000000..d83b7af --- /dev/null +++ b/prototyping/outline.svg @@ -0,0 +1,261 @@ + + + + + + + + + + image/svg+xml + + + + + + + + + + + + + + + + + + + + + + max franklin + + + + + + audio + + + + teach + + + + + +