-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
1 lines (1 loc) · 10.9 KB
/
index.html
1
<!DOCTYPE html><html><head><meta charset=utf-8><title>cyanjoe</title><link href="https://fonts.googleapis.com/css?family=Raleway:300,400,400i,600" rel=stylesheet><!--[if IE]><link rel="shortcut icon" href="favicon.ico"><![endif]--><link rel=apple-touch-icon sizes=57x57 href=static/assets/favicon/apple-icon-57x57.png><link rel=apple-touch-icon sizes=60x60 href=static/assets/favicon/apple-icon-60x60.png><link rel=apple-touch-icon sizes=72x72 href=static/assets/favicon/apple-icon-72x72.png><link rel=apple-touch-icon sizes=76x76 href=static/assets/favicon/apple-icon-76x76.png><link rel=apple-touch-icon sizes=114x114 href=static/assets/favicon/apple-icon-114x114.png><link rel=apple-touch-icon sizes=120x120 href=static/assets/favicon/apple-icon-120x120.png><link rel=apple-touch-icon sizes=144x144 href=static/assets/favicon/apple-icon-144x144.png><link rel=apple-touch-icon sizes=152x152 href=static/assets/favicon/apple-icon-152x152.png><link rel=apple-touch-icon sizes=180x180 href=static/assets/favicon/apple-icon-180x180.png><link rel=icon type=image/png sizes=192x192 href=static/assets/favicon/android-icon-192x192.png><link rel=icon type=image/png sizes=32x32 href=static/assets/favicon/favicon-32x32.png><link rel=icon type=image/png sizes=96x96 href=static/assets/favicon/favicon-96x96.png><link rel=icon type=image/png sizes=16x16 href=static/assets/favicon/favicon-16x16.png><link rel=manifest href=static/assets/favicon/manifest.json><meta name=msapplication-TileColor content=#ffffff><meta name=msapplication-TileImage content=static/assets/favicon/ms-icon-144x144.png><meta name=theme-color content=#ffffff><meta name=viewport content="width=device-width,initial-scale=1"><style>@media (min-width:1200px){.Title{font-size:4vw}.Title-subtitle{font-size:3.5vw}.Contact-wrapper{font-size:2.3vw}.Social a{padding:.25vw}.Social img,.Social svg{width:1.5vw;height:1.5vw;transition:width 1s ease,height 1s ease;transition-delay:4s}.step2 .Social img,.step2 .Social svg{width:2vw;height:2vw}}*,::after,::before{box-sizing:border-box}body,html{width:100vw;height:100vh;min-height:100%;margin:0;padding:0}body{font:1em/1.1 Raleway,sans-serif;overflow:hidden}a,body{text-decoration:none;color:#000}a{display:inline-block;padding:.25em .4em;margin-bottom:-.25em}a:hover{background:#000;color:#fff}.Wrapper{position:relative;width:100%;height:100vh}.Info,.Logo{position:absolute}.Logo{left:50%;top:48%;margin-left:-100vw;margin-top:-150vw;width:200vw;height:300vw;opacity:0;transform:scale(.08);transition:opacity 1.5s,transform 1.5s ease}.Info,.Social{left:0;width:100%}.Step2-logo{opacity:0;transform:scale(.1)}.step0 .Step1-logo{opacity:1;transform:scale(.1)}.Info{z-index:100;height:50vh;bottom:50%;margin-bottom:1vw;display:flex;justify-content:flex-end;align-items:center;flex-direction:column}.Title-wrapper{margin-bottom:2em}.Title-wrapper>*{display:block;text-align:center}.Title{font-size:5vw;font-weight:600;margin-bottom:.05em}.Title-subtitle{font-size:4.5vw;font-weight:400;font-style:italic}.Title-subtitle>span{-moz-font-feature-settings:"salt";-webkit-font-feature-settings:"salt";font-feature-settings:"salt"}.Contact-wrapper{display:flex;flex-direction:column;justify-content:center;align-items:center;font-size:3.3vw}.Contact-mail,.Contact-tel,.Title,.Title-subtitle{opacity:0;transform:scale(.8) translateX(1vw)}.step2 .Contact-mail,.step2 .Contact-tel,.step2 .Title,.step2 .Title-subtitle{opacity:1;transform:none;transition:opacity .5s,transform .5s ease}.step2 .Title{transition-delay:3s}.step2 .Title-subtitle{transition-delay:3.2s}.step2 .Contact-mail{transition-delay:3.4s}.step2 .Contact-tel{transition-delay:3.6s}.Social{position:fixed;bottom:0;padding-bottom:1em;padding-left:1em;height:6vw;min-height:30px;display:flex;justify-content:flex-start;align-items:flex-end}.Social a{display:inline-block;padding:.5vw;opacity:.5;margin-right:1em;transition:margin-right 1s ease 4s}.Social a:hover{opacity:1}.Social a:hover svg path{fill:#fff}.Social img,.Social svg{width:2vw!important;height:2vw!important;min-width:20px!important;min-height:20px!important;transition:width 1s ease,height 1s ease,min-width 1s ease,min-height 1s ease;transition-delay:4s}.step0 .Social{height:4vw!important;opacity:1;transition:margin-right .1s,width .1s,height .1s,opacity .5s}.step2 .Social img,.step2 .Social svg{width:4vw!important;height:4vw!important;min-width:30px!important;min-height:30px!important}.Step1-background{display:flex;justify-content:center;width:100%;height:100vh}.Step1-background-elm{width:25%;background:#ccc;opacity:0;transition:width 2.25s ease,height 2.5s ease,opacity 1s;height:0}.step1 .Step1-background-elm{opacity:1;height:100vh}.Step1-background-elm1{background:#F386AF}.Step1-background-elm2{background:#81C88F}.Step1-background-elm3{background:#ffe15e}.Step1-background-elm4{background:#00AEEF}.Step1-background-elm1,.Step1-background-elm3{align-self:flex-end}.Step1-background-elm2,.Step1-background-elm4,.step1.step2 .Step1-background-elm1,.step1.step2 .Step1-background-elm3{align-self:flex-start}.step1.step2 .Step1-background-elm{opacity:0;transition:width 1s ease,height 1s ease,opacity .5s .5s}.step1.step2 .Step1-background-elm4{height:0;width:100%;opacity:1;margin-left:auto;transition:width 1s ease 1s,height 1s ease 2s}.step1.step2 .Step1-background-elm2{align-self:flex-end}.step1.step2 .Step1-background-elm1,.step1.step2 .Step1-background-elm2,.step1.step2 .Step1-background-elm3{height:0;width:0;transition:width .5s ease 1s,height 1s ease,opacity .5s .5s}.step1.step2 .Step1-logo{opacity:0;transition:opacity 1s 3s}.step1.step2 .Step2-logo{opacity:1;transition:opacity 1s 3s}@media (max-width:600px){.Logo,.Step2-logo{transform:scale(.12)}.step0 .Step1-logo{transform:scale(.18)}.Info{margin-bottom:3vw}.Title-wrapper{margin-bottom:.8em}.Title{font-size:8vw}.Title-subtitle{font-size:7.5vw}.Contact-wrapper{font-size:5.3vw}.Social{height:6vw!important}.Social a{padding:1vw!important}.Social img,.Social svg{width:4vw!important;height:4vw!important}.step2 .Social img,.step2 .Social svg{width:6vw!important;height:6vw!important}}</style></head><body><div class=Wrapper><div class=Step1-background><div class="Step1-background-elm Step1-background-elm1"></div><div class="Step1-background-elm Step1-background-elm2"></div><div class="Step1-background-elm Step1-background-elm3"></div><div class="Step1-background-elm Step1-background-elm4"></div></div><a href=#mail/cyanjoe/com/bf class=Convert><svg class="Logo Step1-logo" alt=cyanjoe width=200px height=300px viewBox="0 0 200 300" version=1.1 xmlns=http://www.w3.org/2000/svg xmlns:xlink=http://www.w3.org/1999/xlink><title>cyanjoe logo</title><circle cx=100 cy=100 r=90 fill=none stroke=black stroke-width=10 /><polygon points="100,240 20,200 20,280" fill=none stroke=black stroke-width=10 /><polygon points="100,240 180,280 180,200" fill=none stroke=black stroke-width=10 /></svg> <svg class="Logo Step2-logo" alt=cyanjoe width=200px height=300px viewBox="0 0 200 300" version=1.1 xmlns=http://www.w3.org/2000/svg xmlns:xlink=http://www.w3.org/1999/xlink><title>cyanjoe bow-tie</title><polygon points="100,240 20,200 20,280" fill=none stroke=black stroke-width=10 /><polygon points="100,240 180,280 180,200" fill=none stroke=black stroke-width=10 /></svg></a><div class=Info><div class=Title-wrapper><span class=Title>Benjamin Falk</span> <span class=Title-subtitle>Software Engineer</span></div><div class=Contact-wrapper><a href=#mail/cyanjoe/com/bf class="Contact-mail Convert">---</a> <a href=#tel/43/677/618/240/66 class="Contact-tel Convert">---</a></div></div><div class=Social><a href=https://www.linkedin.com/in/lumio/ ><svg alt=LinkedIn xmlns=http://www.w3.org/2000/svg viewBox="0 0 120 120"><path d="M114.9 71.9v40.6H91.4V74.6c0-9.5-3.4-16-11.9-16-6.5 0-10.4 4.4-12.1 8.6-.6 1.5-.8 3.6-.8 5.7v39.6H43s.3-64.2 0-70.8h23.6v10c0 .1-.1.2-.2.2h.2v-.2C69.7 46.9 75.3 40 87.8 40c15.5 0 27.1 10.1 27.1 31.9zM18.4 7.5c-8.1 0-13.3 5.3-13.3 12.2 0 6.8 5.1 12.2 13 12.2h.2c8.2 0 13.3-5.4 13.3-12.2-.2-6.9-5.1-12.2-13.2-12.2zm-11.9 105H30V41.7H6.5v70.8z"/></svg></a><a href=https://github.com/lumio><svg alt=Github xmlns=http://www.w3.org/2000/svg viewBox="0 0 120 120"><path d="M109.1 32.9c-5.1-8.7-12-15.6-20.6-20.6C79.8 7.2 70.3 4.7 60 4.7s-19.8 2.5-28.5 7.6-15.6 12-20.6 20.6c-5.1 8.7-7.6 18.2-7.6 28.5 0 12.4 3.6 23.5 10.8 33.3 7.2 9.9 16.5 16.7 28 20.5 1.3.2 2.3.1 3-.5.6-.6 1-1.3 1-2.2v-4-6.6l-1.7.3c-1.1.2-2.4.3-4.1.3-1.6 0-3.4-.2-5.1-.5-1.8-.3-3.4-1.1-4.9-2.2-1.5-1.2-2.6-2.7-3.2-4.5L26 93.5c-.5-1.1-1.3-2.4-2.3-3.8-1.1-1.4-2.1-2.3-3.2-2.8l-.5-.3c-.3-.2-.7-.5-1-.9-.3-.3-.5-.7-.7-1-.1-.3 0-.6.4-.9s1.1-.3 2.1-.3l1.5.2c1 .2 2.2.8 3.7 1.8s2.6 2.3 3.6 3.8c1.1 2 2.5 3.6 4.1 4.6 1.6 1.1 3.2 1.6 4.8 1.6 1.6 0 3-.1 4.2-.4 1.2-.2 2.3-.6 3.3-1.1.4-3.3 1.6-5.8 3.6-7.6-2.8-.3-5.3-.7-7.6-1.3-2.2-.6-4.6-1.6-6.9-2.9-2.4-1.3-4.4-3-5.9-4.9-1.6-2-2.9-4.6-3.9-7.8s-1.5-6.9-1.5-11.1c0-6 1.9-11 5.8-15.2-1.8-4.5-1.7-9.5.5-15.1 1.4-.4 3.5-.1 6.4 1 2.8 1.1 4.9 2.1 6.2 2.8 1.3.8 2.4 1.5 3.1 2C50.4 32.6 55.1 32 60 32s9.6.6 14.2 1.9l2.8-1.8c1.9-1.2 4.2-2.3 6.8-3.3 2.6-1 4.6-1.3 6-.8 2.2 5.6 2.4 10.6.6 15.1 3.9 4.2 5.8 9.3 5.8 15.2 0 4.2-.5 7.9-1.5 11.1-1 3.2-2.3 5.8-3.9 7.8-1.6 1.9-3.6 3.6-6 4.9-2.4 1.3-4.7 2.3-6.9 2.9-2.2.6-4.8 1-7.6 1.3 2.6 2.2 3.8 5.7 3.8 10.5v15.6c0 .9.3 1.6.9 2.2.6.6 1.6.8 2.9.5 11.4-3.8 20.7-10.6 28-20.5 7.2-9.9 10.8-21 10.8-33.3 0-10.2-2.5-19.7-7.6-28.4z"/></svg></a></div></div><script>"use strict";!function(e,t,o,n,a,i,s){e.GoogleAnalyticsObject=a,e[a]=e[a]||function(){(e[a].q=e[a].q||[]).push(arguments)},e[a].l=1*new Date,i=t.createElement(o),s=t.getElementsByTagName(o)[0],i.async=1,i.src="https://www.google-analytics.com/analytics.js",s.parentNode.insertBefore(i,s)}(window,document,"script",0,"ga"),ga("create","UA-65544814-3","auto"),ga("send","pageview");try{var styles={init:["font-size: 16px","font-weight: bold","color: #00aeef","padding: 1em 0 .5em 2.5em"],text:["font-size: 12px","font-style: italic"]},styledLog=function(e,t){console.info("%c "+e,t.join(";"))},defLog=function(e){styledLog(e,styles.text)};styledLog("Hello there!",styles.init),defLog("So nice of you to come by!"),defLog("I'm a web stylist/developer and a huge fan"),defLog("of component based developing. That’s why I"),defLog("mostly work with ReactJS. But I’m open minded"),defLog("and up for new things.."),defLog(""),defLog("Feel free to contact me.")}catch(e){}var loadHasFired=!1,loadCallback=function(){loadHasFired||(loadHasFired=!0,setTimeout(function(){return document.body.classList.add("step0")},500),setTimeout(function(){return document.body.classList.add("step1")},1e3),setTimeout(function(){return document.body.classList.add("step2")},4e3),setTimeout(function(){var e=document.querySelectorAll(".Convert");[].forEach.call(e,function(e){var t=e.getAttribute("href").split("/"),o="",n="";switch(t[0]){case"#mail":n="mailto:"+(o=t[3]+"@"+t[1]+"."+t[2]);break;case"#tel":o="+"+(t=t.splice(1)).join(" "),n="tel:+"+t.join("")}e.setAttribute("href",n),"---"===e.innerText&&(e.innerText=o)})},10))};document.onload=loadCallback,window.onload=loadCallback</script></body></html>