diff --git a/inc/css/main.css b/inc/css/main.css index 56640a7..33c8097 100644 --- a/inc/css/main.css +++ b/inc/css/main.css @@ -4,21 +4,25 @@ } :root { - --c1: #030303; - --c2: #EEF5F7; - --c3: #1E473A; - --c4: #8FA441; - --c5: #E98017; - --c6: #E1BC23; + --c1: #fefefe; + --c2: #0e0e0e; + --c3: #d2b2ec; + --c4: #eeaeca; + --c5: #e9bd94; + + --h-header: 8vh; /* + 2 * 2.5vh margin (12.5)*/ + --h-info: 67.5vh; /* 100 - 32.5 */ + --h-ex: 15vh; /* + 2 * 2.5vh bottom (20.0)*/ + + --h-ex-thumb: 14.5vh; } * { margin: 0; padding: 0; text-decoration: none; - color: var(--c1); + color: var(--c2); font-family: hkg, sans-serif; - font-size: 30px; } html, body { @@ -29,34 +33,46 @@ html, body { position: relative; } +body { + background: radial-gradient(ellipse, var(--c3) 0%, var(--c4) 63%, var(--c5) 100%); +} + +header, #bg-box, #exhibition, .flying-text { + border-radius: 0.8vh; +} + /******************* HEADER *******************/ header { + box-sizing: border-box; position: relative; - width: 100%; - height: 10vh; - margin: 2.5vh 0; + height: var(--h-header); + font-size: 1.5vmax; + width: 60%; + margin: 2.5vh auto; text-align: center; + background-color: var(--c1); + z-index: 1; } nav a { display: inline-block; - /* font-size: 1.5em; */ - margin-right: 40px; vertical-align: middle; + min-width: 16%; } -nav a:last-child { - margin-right: 0; +a:hover { + color: var(--c3); } -a:hover { - text-decoration: underline; - color: var(--c5); +#logo { + position: relative; + height: 100%; } #logo img { - height: 90%; + width: calc(var(--h-header) + 3vh); + margin-top: -1.5vh; filter: grayscale(1); } @@ -64,7 +80,6 @@ a:hover { filter: grayscale(0); } - /******************* EXHIBITION *******************/ /* Remove scrollbar in all browsers */ @@ -79,22 +94,25 @@ a:hover { background-color: var(--c1); position: absolute; - bottom: 0px; - right: -20vh; - width: 20vh; - height: 100vw; + /* because of the transform width and height are switched */ + width: var(--h-ex); + height: 95vw; + left: 97.5vw; + bottom: 2.5vh; overflow-y: auto; overflow-x: hidden; + } .thumb-box { - height: 19.5vh; - margin-top: 10vh; + height: var(--h-ex-thumb); + margin-top: calc(var(--h-ex-thumb) * 0.53); /* keep the ~ratio of a photo (spacing should be the same all the time) */ - width: calc(19.5vh*1.49); + width: calc(var(--h-ex-thumb) * 1.49); transform-origin: bottom left; - transform: rotate(90deg) translateX(-30vh); + /* shift the thumbs 1*width to the left */ + transform: rotate(90deg) translateX(calc(var(--h-ex-thumb) * -1.49)); } .thumb-box:last-child { @@ -117,17 +135,17 @@ a:hover { /******************* INFO *******************/ #info-box { - box-sizing: border-box; position: relative; - height: 65vh; - width: 100%; - padding-bottom: 2.5vh; + height: var(--h-info); + width: 95%; + margin: auto; } #bg-box { width: 100%; height: 100%; background-color: var(--c1); + overflow: hidden; } #info-box table { @@ -146,7 +164,6 @@ a:hover { #info-box table * { font-size: 1.35vw; - color: white; } #info-box th { @@ -162,14 +179,14 @@ a:hover { line-height: 2.0vw; font-size: 4.5vw; position: absolute; - right: 2vw; + right: 1.6vw; top: 1.6vw; color: var(--c2); z-index: 1; } #btn-close:hover { - opacity: 0.7; + color: var(--c3); cursor: pointer; } @@ -188,3 +205,33 @@ a:hover { background-size: contain; background-clip: content-box; } + +/******************* HEADER *******************/ + +#welcome { + position: absolute; + height: var(--h-info); + width: 100%; + top: 12.5vh; +} + +#welcome img { + position: relative; + height: calc(var(--h-info) * 0.5); + left: 50vw; + margin-left: calc(var(--h-info) * 0.25 * -0.70); + top: 17vh; +} + +.flying-text { + position: absolute; + display: inline-block; + color: black; + font-size: 0.01vw; + background-color: white; + padding: 0.5vw; + text-align: center; + top: 50%; + left: 50%; + z-index: -1; +} diff --git a/inc/js/main.js b/inc/js/main.js index ec680a6..a4a3faa 100644 --- a/inc/js/main.js +++ b/inc/js/main.js @@ -1,30 +1,24 @@ document.addEventListener("DOMContentLoaded", run); - +// global var to control the animation of the text +var runTextAnimation = true; function run() { - supportFireFox(); initializeClickHandler(); } -/* Firefox seems to handle positioning after transform -differently to webkit based browsers, therefore this -function checks if the current userAgent is FF and sets -the required property for bottom from 0 to 15vh */ -function supportFireFox() { - // console.log(navigator.userAgent); - if (navigator.userAgent.includes("Firefox")) { - // document.getElementById("exhibition").style.bottom = "15vh"; - } -} - function initializeClickHandler() { + let welcome = document.getElementById("welcome"); + flyingText(welcome); document.addEventListener("click", (e) => { let overlay = document.getElementById("info-box"); let curr = e.target; - console.log(curr); if (curr.className === "thumb") { + runTextAnimation = false; + hideElement(welcome); handleThumb(overlay, curr); } else if (curr.id === "btn-close") { - hideOverlay(overlay); + runTextAnimation = true; + flyingText(welcome); + hideElement(overlay); } }); } @@ -38,7 +32,8 @@ function showOverlay(overlay, imgName) { let info = getInfoForImg(imgName); // \xD7 is the multiplication sign in hex overlay.children[0].innerHTML = - `
\xD7
+ ` +
\xD7
${imgName}
@@ -74,8 +69,8 @@ function showOverlay(overlay, imgName) { zoom(0.4, imgName); } -function hideOverlay(overlay) { - overlay.classList.add("hidden"); +function hideElement(elem) { + elem.classList.add("hidden"); } // Get info from server diff --git a/inc/js/text.js b/inc/js/text.js new file mode 100644 index 0000000..3f00c5c --- /dev/null +++ b/inc/js/text.js @@ -0,0 +1,75 @@ +/* +* text.js +* function for the purpose of my portfolio to animate welcome text +* Author: phga/teord +* Date: 2019-10-23 +* Version: 1.0 +*/ +// set a global var "run" to true before running this function +async function flyingText(canvas) { + // TODO: move to argument, load from backend + let statements = ["Keyboard-Nerd", "❤", "Emacs", + "Life == VI Bindings", "GNU/Linux", "Arch Linux", + "Computer Science", "Design", + "Javascript", "C/C++", "Go", "Bash", + "Java", "Python", "QMK", "Vector Graphics", + "Adobe Collection", "OP-1", "Synthesizer", + "6y Work Experience", "Network Security", + "CCNA", "Cisco", "Firewalling", "Project MGMT", + "IT Specialist", "Git", "FreeBSD", "Photography", + "Emacs-Lisp", "Sophos Firewall", + "Microsoft Server", "Appgate", "Palo Alto FW", + "Linux Server", "FreeNAS", "Hardware", + "Arduino", "Electronics", "Soldering", + "Full Stack Networking", "Hotline-Manager", + "Trainer for IT-Specialists", "Matlab/Octave", + "PHP", "CSS", "HTML", "Privacy Advocate"]; + + let stCount = statements.length; + let animationTime = 4; + let maxX , maxY, x, y; + + canvas.classList.remove("hidden"); + + while (runTextAnimation) { + // Browser resize + maxX = canvas.offsetWidth / 2; + maxY = canvas.offsetHeight / 2; + + let curr = document.createElement("p"); + curr.innerHTML = statements[getRand(stCount)]; + curr.className = "flying-text"; + curr.style.transition = `${animationTime}s ease-in`; + + // Get random position + correction to not touch middle to much + x = getRand(maxX * 0.2, maxX); + y = getRand(maxY * 0.45, maxY); + + // Random direction and correction to not touch right border + x = (getRand(2) == 1) ? -1*x : 0.3 * x; + y = (getRand(2) == 1) ? -1*y : 0.8 * y; + + canvas.appendChild(curr); + + // wait till ele is rdy in dom + time between spawns + await sleep(1000); + + // add the stuff that should be animated (transition in class) + curr.style.transform = `translate(${x}px, ${y}px)`; + curr.style.fontSize = `2.8vw`; + + // wait to remove it (async) + setTimeout(() => { + curr.remove(); + }, animationTime * 1000 + 2000); + } +} + +function getRand(max, min) { + min = min || 0; + return min + Math.floor(Math.random() * (max - min)); +} + +function sleep(ms) { + return new Promise((nil) => setTimeout(nil, ms)); +} diff --git a/inc/js/zoom.js b/inc/js/zoom.js index 6d78172..57d4282 100644 --- a/inc/js/zoom.js +++ b/inc/js/zoom.js @@ -14,6 +14,7 @@ function zoom(factor, imgName) { // wait till size of img is calculated setTimeout(() => { var offset = {x: img.width * factor, y: img.height * factor}; + // Fix for firefox, somehow width larger than content (inline-block) magni.style.width = img.width; // setup the padding (bigger zoom canvas) magni.style.padding = offset.y + "px " + offset.x + "px"; diff --git a/tmpl/header.html b/tmpl/header.html index 8b21f14..7285875 100644 --- a/tmpl/header.html +++ b/tmpl/header.html @@ -4,7 +4,10 @@ GALLERY BLOG + + + ABOUT CONTACT diff --git a/tmpl/index.html b/tmpl/index.html index ea2ddc4..179a62c 100644 --- a/tmpl/index.html +++ b/tmpl/index.html @@ -3,6 +3,9 @@
+
+ +
{{range .Pics}}
diff --git a/tmpl/layouts/base.html b/tmpl/layouts/base.html index f6a34a1..70311a2 100644 --- a/tmpl/layouts/base.html +++ b/tmpl/layouts/base.html @@ -6,6 +6,7 @@ + {{block "header" .}}NO HEADER DEFINED{{end}}