commit 337713e72ea404d080fde02ea18ca0a261bf7192 Author: Steve Ayerhart Date: Sat Nov 21 19:39:22 2020 -0500 initial import diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..9ba470d --- /dev/null +++ b/.gitignore @@ -0,0 +1 @@ +.sass-cache \ No newline at end of file diff --git a/content/index.html b/content/index.html new file mode 100644 index 0000000..dcba559 --- /dev/null +++ b/content/index.html @@ -0,0 +1,175 @@ + + + + + + + The Ayerharts + + + + + + + + + +

+ The Ayerharts +

+ LK+S +

+ Steve +

steve.ayerh.art

+ Lee Katherine +

lkayerhart.ist

+ + diff --git a/content/steve/about/index.html b/content/steve/about/index.html new file mode 100644 index 0000000..a8f89e5 --- /dev/null +++ b/content/steve/about/index.html @@ -0,0 +1,42 @@ + + + + + + + + + + + Steve Ayerhart + + +

+ steve + ayerhart +

+ +

blurb

I'm a software developer from Erie, Pennsylvania. During the day I assume the role of a "fullstack" web developer. I mostly write C# and Javascript now. I have written with Ruby, Python, and PHP professionally as well.

I spend most of my waking hours in front of a computer. When I'm not working I enjoy writing and contributing to free software. I also enjoy playing some computers games as well.

+ +

My wife Lee Katherine and I currently live in New Hill North Carolina.

contact

You can mail me at steve@ayerh.art

My GPG key is 0xB6205BE680932292790F622B9475954DBBC6B924

+ + diff --git a/content/steve/index.html b/content/steve/index.html new file mode 100644 index 0000000..c69b4b7 --- /dev/null +++ b/content/steve/index.html @@ -0,0 +1,30 @@ + + + + + + + + + + + Steve Ayerhart + + +

+ steve +

+ +

+ ayerhart +

+ + diff --git a/images/digital.jpg b/images/digital.jpg new file mode 100644 index 0000000..0f9bad8 Binary files /dev/null and b/images/digital.jpg differ diff --git a/images/vintage.jpg b/images/vintage.jpg new file mode 100644 index 0000000..c556dfa Binary files /dev/null and b/images/vintage.jpg differ diff --git a/images/vinyl.jpg b/images/vinyl.jpg new file mode 100644 index 0000000..7b1c3ee Binary files /dev/null and b/images/vinyl.jpg differ diff --git a/js/waves.js b/js/waves.js new file mode 100644 index 0000000..d271144 --- /dev/null +++ b/js/waves.js @@ -0,0 +1,105 @@ +;(function() { + "use strict" + var gl, canvas, program, buffer; + var attributeLocation; + var timeLocation, resolutionLocation; + + window.addEventListener("load", initWebGL, false); + + function getRenderingContext() { + canvas = document.querySelector("canvas"); + canvas.width = canvas.clientWidth; + canvas.height = canvas.clientHeight; + + var gl = canvas.getContext("webgl") || canvas.getContext("experimental-webgl"); + + if (!gl) { + // TODO: show something fancy + console.log("failed to get webcontext"); + return null; + } + + gl.viewport(0, 0, gl.drawingBufferWidth, gl.drawingBufferHeight); + + return gl; + }; + + function render(time) { + gl.viewport(0, 0, canvas.width, canvas.height); + + gl.clearColor(1.0, 0.0, 0.0, 1.0); + gl.clear(gl.COLOR_BUFFER_BIT); + + gl.useProgram(program); + + gl.enableVertexAttribArray(attributeLocation); + gl.vertexAttribPointer(attributeLocation, 2, gl.FLOAT, false, 0, 0); + + gl.bindBuffer(gl.ARRAY_BUFFER, buffer); + gl.uniform2f(resolutionLocation, canvas.width, canvas.height); + gl.uniform1f(timeLocation, time * 0.001); + + gl.drawArrays(gl.TRIANGLES, 0, 6); + + window.requestAnimationFrame(render, canvas); + } + + function initAttributes() { + buffer = gl.createBuffer(); + gl.bindBuffer(gl.ARRAY_BUFFER, buffer); + gl.bufferData( + gl.ARRAY_BUFFER, + new Float32Array([ + -1.0, -1.0, + 1.0, -1.0, + -1.0, 1.0, + -1.0, 1.0, + 1.0, -1.0, + 1.0, 1.0, + ]), + gl.STATIC_DRAW); + } + + function initWebGL(event) { + window.removeEventListener(event.type, initWebGL, false); + + if (!(gl = getRenderingContext())) + return; + + initAttributes(); + + var vertexSource = + `attribute vec2 a_position; + void main() { gl_Position = vec4(a_position, 0, 1);}`; + + var vertexShader = gl.createShader(gl.VERTEX_SHADER); + + gl.shaderSource(vertexShader, vertexSource); + gl.compileShader(vertexShader); + + var wavesSource = document.querySelector('#waves').text; + var wavesShader = gl.createShader(gl.FRAGMENT_SHADER); + + gl.shaderSource(wavesShader, wavesSource); + gl.compileShader(wavesShader); + + var compilationLog = gl.getShaderInfoLog(wavesShader); + + // TODO: show link/compile errors? + + program = gl.createProgram(); + + gl.attachShader(program, vertexShader); + gl.attachShader(program, wavesShader); + + gl.linkProgram(program); + gl.useProgram(program); + + attributeLocation = gl.getAttribLocation(program, "a_position"); + + timeLocation = gl.getUniformLocation(program, "iTime"); + resolutionLocation = gl.getUniformLocation(program, "iResolution"); + + render(); + }; +})(); diff --git a/nginx/music.ayerh.art.conf b/nginx/music.ayerh.art.conf new file mode 100644 index 0000000..7f7c5d1 --- /dev/null +++ b/nginx/music.ayerh.art.conf @@ -0,0 +1,49 @@ +server { + server_name music.ayerh.art; + listen 443; + + root /home/steve/sites/music.ayerh.art; + + location ~ /.well-known { + allow all; + } + + location / { + proxy_set_header Accept-Encoding ""; + + # TODO: handle params? + proxy_pass https://musicbrainz.org/ws/2/collection?editor=sayerhat + + xslt_stylesheet /home/steve/sites/music.ayerh.art/xslt/collections.xsl; + xslt_types *; + } + + location ~* "^/(?[a-f\d]{8}-[a-f\d]{4}-[a-f\d]{4}-[a-f\d]{4}-[a-f\d]{12})$" { + proxy_set_header Accept-Encoding ""; + + # TODO: handle params? + proxy_pass https://musicbrainz.org/ws/2/collection/$uuid/releases?inc=artist-credits+releases; + + xslt_stylesheet /home/steve/sites/music.ayerh.art/xslt/collection.xsl; + xslt_types *; + } + + location ~* "^/.+" { + try_files $request_uri =404; + } + + ssl_certificate {path-to-full-pem} + ssl_certificate_key {path-to-privkey} +} + +server { + server_name music.ayerh.art; + + if ($host = music.ayerh.art) { + return 301 https://$host$request_uri; + } + + location ~ /.well-known { + allow all; + } +} diff --git a/style/fonts/AlegreyaSansSC-ExtraBold.ttf b/style/fonts/AlegreyaSansSC-ExtraBold.ttf new file mode 100755 index 0000000..7de6b77 Binary files /dev/null and b/style/fonts/AlegreyaSansSC-ExtraBold.ttf differ diff --git a/style/scss/music.scss b/style/scss/music.scss new file mode 100644 index 0000000..3b62106 --- /dev/null +++ b/style/scss/music.scss @@ -0,0 +1,212 @@ +@import "_layout.scss" ; + +html, body { + padding: 0; + margin: 0; + background-color: #f8f8ff; + + h1 { + text-align: center; + color: #444444; + font: 500 2em sans-serif; + } + + nav { + text-align: center; + border-bottom: 1px solid; + border-image-slice: 1; + border-image-source: linear-gradient(to right, transparent, #444444, transparent); + + ol { + margin: 0; + padding: 0 0 5px 0; + } + + .crumbs ol { + margin: 0; + list-style-type: none; + padding: 0; + } + + .crumb { + display: inline-block; + color: #444444; + font: 500 1em sans-serif; + + a { + color: lighten(#444444, 45%); + text-decoration: none; + + &:after { + display: inline-block; + color: #333333; + content: '\2015'; + font-size: 1em; + font-weight: bold; + padding: 0 6px 0; + } + } + } + } +} + +.collections { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + height: 100vh; + text-align: center; + .collection-link { + display: flex; + justify-content: center; + flex-direction: column; + text-align: center; + width: 100vw; + background-position: center; + background-clip: text; + -webkit-text-stroke: 2px #111111; + + &:after { + text-shadow: 1px 1px 1px #444444; + color: transparent; + } + &.vintage { + background-image: url(vintage.jpg); + background-size: 50%; + } + &.vinyl { + background-image: url(vinyl.jpg); + background-size: 25%; + } + &.digital { + background-image: url(digital.jpg); + background-size: 35%; + } + + a { + font-family: 'Righteous'; + font-size: 10vw; + font-weight: 800; + text-decoration: none; + color: transparent; + } + } + +} + +.collection { + display: flex; + align-content: center; + justify-content: center; + padding: 20px 0 20px 0; + + .albums { + width: 95vw; + display: flex; + flex-wrap: wrap; + justify-content: center; + + .album { + display: flex; + flex-direction: column; + align-content: center; + margin: 10px; + min-width: 300px; + min-height: 300px; + + .album-info { + h2 { + margin: 1em 0 0 0; + } + h3 { + margin: 0 0 1em 0; + } + + h2, h3 { + a { + text-decoration: none; + color: #444444; + } + } + + .underline { + display: block; + width: 100%; + position: relative; + transition: all .3s ease-in-out; + &:before { + left: 50%; + background-image: linear-gradient(to right, #444444, transparent); + } + &:after { + right: 50%; + background-image: linear-gradient(to left, #444444, transparent); + } + &:before, &:after { + content: ""; + position: absolute; + bottom: -1px; + width: 0px; + height: 1px; + margin: 5px 0 0; + transition: all .3s ease-in-out; + transition-duration: 0.5s; + opacity: 0; + } + } + .title { + font: 300 1em sans-serif; + text-align: center; + + transition-property: transform; + transition: all .3s ease-in-out; + transition-duration: .5s; + } + .artist { + text-align: center; + font: small-caps 400 .85em sans-serif; + transition: all .3s ease-in-out; + transition-property: transform; + transition-duration: .5s; + display: block; + } + } + + &:hover { + .underline { + &:before, &:after { + width: 50%; + opacity: 1; + } + } + .album-info .title { + transform: translateY(-.5em); + &:after { + opacity: 1; + -webkit-transform: scale(1); + transform: scale(1); + } + } + .album-info .artist { + transform: translateY(.5em); + } + } + .cover-art { + align-self: center; + img { + min-height: 250px; + max-height: 250px; + min-width: 250px; + max-width: 250px; + height: 100%; + width: 100%; + object-fit: stretch; + border: 1px solid #444444; + border-radius: 2px; + } + } + } + } +} + diff --git a/style/scss/perspective.scss b/style/scss/perspective.scss new file mode 100644 index 0000000..dd4b8be --- /dev/null +++ b/style/scss/perspective.scss @@ -0,0 +1,128 @@ +@font-face { + font-family: 'Open Sans Condensed'; + font-weight: 300; + font-display: swap; + src: local('Open Sans Condensed'); +} +@font-face { + font-family: 'Alegreya Sans SC'; + font-weight: 900; + font-weight: extra-bold; + font-display: swap; + src: local('Alegreya Sans Sc'); +} + +* { + margin: 0; + padding: 0; +} + +html { + background-color: #f4f7f6; + display: flex; + justify-content: center; + align-items: center; + + main { + max-width: 40em; + padding: 1em; + } + + section h2 { + margin: 1em 0; + font-family: 'Open Sans Condensed', sans-serif; + text-transform: uppercase; + border-bottom: 1px solid #b43434; + } + + code + p, p + p{ + margin: 1em 0; + } + + &.perspective { + min-height: 100vh; + overflow: hidden; + + body { + position: relative; + bottom: 5em; + } + + div.name { + text-decoration: none; + color: #666666; + font-family: 'Alegreya Sans SC'; + filter: drop-shadow(1px 1px #333333); + text-transform: uppercase; + font-size: 5em; + font-weight: 900; + transform: skew(60deg, -30deg); + position: relative; + + &:first-child { + right: 1em; + } + + &:last-child { + left: 1em; + } + } + + div.nav { + transform: skew(0deg, -30deg); + } + } +} + +header { + h1 { + display: flex; + justify-content: space-evenly; + } + + a.name { + text-decoration: none; + color: #666666; + font-family: 'Alegreya Sans SC'; + font-size: 2em; + filter: drop-shadow(1px 1px #333333); + } + .name { + &:first-child { + padding-right: .25em; + } + &:last-child { + padding-left: .25em; + } + } +} + +nav, ul, li { + margin: 0; + padding: 0; + display: inline; +} + +nav { + font-family: 'Open Sans Condensed', sans-serif; + font-size: 2em; + + ul { + background-color: #b43434; + display: flex; + justify-content: space-around; + } + a { + text-decoration: none; + color: #333333; + } + + li { + padding: 0 5px; + &:hover { + a { + color: #f4f6f7; + } + } + } +} diff --git a/style/scss/waves.scss b/style/scss/waves.scss new file mode 100644 index 0000000..9cfb0c0 --- /dev/null +++ b/style/scss/waves.scss @@ -0,0 +1,85 @@ +body { + padding: 0; + margin: 0; + display: flex; + flex-direction: column; + height: 100vh; +} + +header { + span.full-name { + position: absolute; + margin: 15px 0 0 15px; + background-color: transparent; + font-family: 'Major Mono Display', monospace; + letter-spacing: .5em; + font-size: 6vw; + color: #fff; + mix-blend-mode: overlay; + } +} + +section { + a { + text-decoration: none; + color: #731a22; + + &:visited { + color: #434343; + text-decoration: underline; + } + } + + &#content { + display: flex; + color: #434343; + font-family: 'Montserrat', sans-serif; + text-decoration: none; + width: 100vw; + justify-content: space-evenly; + flex: 1; + flex-wrap: wrap; + + .lk, .l-s, .steve { + display: flex; + flex-direction: column; + min-width: 30vw; + text-align: center; + word-wrap: break-word; + + ul { + display: flex; + flex-direction: column; + flex: 1; + justify-content: space-evenly; + margin: 0; + padding: 0; + list-style-type: none; + } + + .name { + span:first-child { + font-family: 'Major Mono Display', monospace; + letter-spacing: .5em; + font-size: 3vw; + font-weight: 1000; + + @media screen and (max-width: 40em) { + font-size: 1em; + } + } + } + } + } +} + +canvas { + display: block; + width: 100vw; + min-height: 25vh; + + margin: auto; + padding: 0; + border: none; + background-color: #fff; +} diff --git a/xslt/mb-collection.xsl b/xslt/mb-collection.xsl new file mode 100644 index 0000000..c7d1928 --- /dev/null +++ b/xslt/mb-collection.xsl @@ -0,0 +1,80 @@ + + + + + + https://musicbrainz.org + https://coverartarchive.org/release + https://static.bonerbonerboner.com + + + <!DOCTYPE html> + + + + + + + + <xsl:value-of select="mb:metadata/mb:collection/mb:name"/> + + + +

+ + + + + + + + + +

+ +

+ + + +

+ + +

+ +

+ + diff --git a/xslt/mb-collections.xsl b/xslt/mb-collections.xsl new file mode 100644 index 0000000..7b47f6b --- /dev/null +++ b/xslt/mb-collections.xsl @@ -0,0 +1,89 @@ + + + + + + https://static.bonerbonerboner.com + + + <!DOCTYPE html> + + + + + + + + + Ayerhart Music Collections + + + +

+ +

+ + + + + +

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

+ + + + + + + + + + + + + + + + + + + + + +