From 1cd1ef1142944475e26e91e2d74eb07805b5583e Mon Sep 17 00:00:00 2001 From: BenjaminToby <52448020+BenjaminToby@users.noreply.github.com> Date: Sun, 6 Jun 2021 17:10:42 +0100 Subject: [PATCH] Mobile screens added. --- images/art-logo-2.svg | 1 + images/art-logo-3.svg | 1 + images/art-logo-4.svg | 1 + images/art-logo.svg | 1 + scripts/v2.js | 84 ++++- v2.css | 769 ++++++++++++++++++++++++++++++++++++++++-- v2.html | 88 +++-- 7 files changed, 886 insertions(+), 59 deletions(-) create mode 100644 images/art-logo-2.svg create mode 100644 images/art-logo-3.svg create mode 100644 images/art-logo-4.svg create mode 100644 images/art-logo.svg diff --git a/images/art-logo-2.svg b/images/art-logo-2.svg new file mode 100644 index 0000000..66d64f8 --- /dev/null +++ b/images/art-logo-2.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/images/art-logo-3.svg b/images/art-logo-3.svg new file mode 100644 index 0000000..3a3da09 --- /dev/null +++ b/images/art-logo-3.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/images/art-logo-4.svg b/images/art-logo-4.svg new file mode 100644 index 0000000..7b15d73 --- /dev/null +++ b/images/art-logo-4.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/images/art-logo.svg b/images/art-logo.svg new file mode 100644 index 0000000..6175ab6 --- /dev/null +++ b/images/art-logo.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/scripts/v2.js b/scripts/v2.js index 39dbf00..7a00baf 100644 --- a/scripts/v2.js +++ b/scripts/v2.js @@ -17,6 +17,11 @@ window.addEventListener("scroll", () => { element.style.transform = "translateY(" + (scroll * speed) + "px)"; }); + if(window.innerWidth < 500) { + + translate[0].style.transform = "translateY(" + (scroll * 0.1) + "px)"; + } + // skewedBg.style.transform = "translateY(" + (scroll * skewedBg.dataset.speed) + "px) skewY(-3deg)"; watermark.style.transform = "translateY(" + (scroll * watermark.dataset.speed) + "px) translateX(-50%)"; @@ -28,9 +33,12 @@ window.addEventListener("scroll", () => { //}); window.addEventListener("load", () => { - document.getElementById("skewed-bg").classList.add("skewed-bg"); + document.getElementById("skewed-bg-block").classList.add("skewed-bg"); document.getElementById("preloader").className = "preloader"; document.getElementById("hero-graphic-container").className = "hero-graphic-wrapper"; + document.getElementById("hero-text-controller").className = "hero-text-block"; + document.querySelector(".hero-text-wrapper > a").classList.add("scroll-into-view-intro-2"); + document.querySelector(".hero-watermark").classList.add("scroll-into-view-intro-2"); }); @@ -41,7 +49,7 @@ window.addEventListener("load", () => { //########################################################################################################## -var targets = document.querySelector("#section-2"); +var targets = document.querySelectorAll(".menu-color-change"); var windowRect = { rootMargin: "0px 0px -400px 0px", delay: 100, @@ -56,15 +64,21 @@ function navColorFunction(entries, navColors) { if(entry.isIntersecting) { document.querySelector("header").style.color = "white"; document.querySelector(".hero-graphic-wrapper").style.opacity = "0"; + document.querySelector(".aside-header > a").style.color = "white"; // translate[3].dataset.speed = .2; } else { document.querySelector("header").style.color = "#222"; + document.querySelector(".aside-header > a").style.color = "#222"; document.querySelector(".hero-graphic-wrapper").style.opacity = "1"; } }); } -navColors.observe(targets); +targets.forEach(entry => { + navColors.observe(entry); +}); + + //########################################################################################################## @@ -88,6 +102,11 @@ scrollIntoViewItems.forEach(item => { }); + + + + + //########################################################################################################## //var sectionOneText = document.querySelector("#section-2"); @@ -106,12 +125,18 @@ function sect1Function(entries, sectionOneIo) { // } else if (windowRect.thresholds > 0.5 && windowRect.thresholds < 1) { // translate[3].dataset.speed = .3; // } - translate[4].dataset.speed = .2; - translate[4].style.transition = "all 1.8s cubic-bezier( 0.39, 0.575, 0.565, 1 )"; + + if(window.innerWidth > 800) { + translate[4].dataset.speed = .2; + translate[4].style.transition = "all 1.8s cubic-bezier( 0.39, 0.575, 0.565, 1 )"; + } + } else { - translate[4].style.transition = "all 1.8s cubic-bezier( 0.39, 0.575, 0.565, 1 )"; - translate[4].dataset.speed = 0; - setTimeout(()=> {translate[4].style.transition = "all .8s cubic-bezier( 0.39, 0.575, 0.565, 1 )";}, 1000); + if(window.innerWidth > 800) { + translate[4].style.transition = "all 1.8s cubic-bezier( 0.39, 0.575, 0.565, 1 )"; + translate[4].dataset.speed = 0; + setTimeout(()=> {translate[4].style.transition = "all .8s cubic-bezier( 0.39, 0.575, 0.565, 1 )";}, 1000); + } } }); } @@ -126,3 +151,46 @@ sectionOneIo.observe(translate[4]); + +//############################################################################## -- Hamburger + +document.querySelector(".hamburger-wrapper").addEventListener("click", hamburgerMenuToggle); +//document.querySelector(".hamburger-wrapper").addEventListener("blur", hamburgerCLickOut); + +let hc = 0; + +function hamburgerMenuToggle() { + if (hc == 0) { + document.querySelector("nav").className = "nav-mobile"; + document.querySelector("#aside-heder-block").className = "aside-header-mobile"; + } else { + document.querySelector("nav").className = "none"; + document.querySelector("#aside-heder-block").className = "aside-header"; + hc = -1; + } + hc++; +} + + +window.addEventListener("resize", () => { + if(window.innerWidth > 800) { + document.querySelector("nav").className = "none"; + document.querySelector("#aside-heder-block").className = "aside-header"; + hc = 0; + } +}); + +//function hamburgerCLickOut() { +// document.querySelector("nav").className = "none"; +// document.querySelector("#aside-heder-block").className = "aside-header"; +// hc = 0; +//} + + + + + + + + + diff --git a/v2.css b/v2.css index 86aebea..bd60209 100644 --- a/v2.css +++ b/v2.css @@ -27,9 +27,11 @@ html { body { width: 100%; - display: block; margin: 0px; overflow: hidden; + display: flex; + flex-direction: column; + align-items: center; /*background-color: #B8FFE1;*/ } @@ -44,7 +46,7 @@ header { header > a { font-family: "hennigar"; - font-size: 24px; + font-size: 36px; text-transform: uppercase; border: none; letter-spacing: 1px; @@ -76,6 +78,7 @@ section { justify-content: center; padding: 60px 40px; position: relative; + width: 100%; } section > div { @@ -91,6 +94,17 @@ section > div > div{ flex-direction: column; } +/* +div { + display: flex; + position: relative; + align-items: center; + justify-content: center; + font-size: inherit; + color: inherit; +} +*/ + /*................................................... Text */ @@ -126,7 +140,7 @@ h1 { } h2 { - font-size: 30px; + font-size: 36px; } h3 { @@ -140,11 +154,11 @@ h4 { } p { - font-size: 16px; + font-size: 20px; line-height: 1.5; margin-top: 0px; margin-bottom: 20px; - color: inherit; + color: rgba(0,0,0,0.6); width: 100%; font-weight: 400; } @@ -154,6 +168,8 @@ span { font-weight: inherit; font-family: inherit; color: inherit; + letter-spacing: inherit; + line-height: inherit; } @@ -201,7 +217,7 @@ input:focus { -/*................................................... General classes and IDs */ +/*############################################################# -- General classes and IDs -- */ .preloader-init { position: fixed; @@ -243,8 +259,71 @@ input:focus { z-index: 1000; } +.aside-header-mobile { + position: fixed; + top: 40px; + right: 40px; + display: none; + flex-direction: column; + align-items: flex-end; + z-index: 1000; +} + .aside-header > a { font-size: 14px; + display: flex; + align-items: center; + padding: 5px; + transition: all .3s ease-out; + position: relative; +} + +.email-link-block { + width: 40px; + height: 40px; + border-radius: 20px; + background-color: var(--main-color); + margin-top: 10px; + color: white; + border: none; + justify-content: flex-start; + padding: 10px; +} + +.email-link-block > div:first-child { + width: 100%; + height: 100%; + overflow: hidden; + color: inherit; + display: flex; + align-items: center; + font-size: inherit; +} + +.email-link-block:hover { + background-color: #222; + border: none; + width: 180px; +} + +.aside-mail-anim { + position: absolute; + width: 140%; + height: 140%; + background-color: var(--main-color); + opacity: .2; + border-radius: 50%; + top: 50%; + left: 50%; + transform: translate(-50%,-50%); + z-index: -100; + animation: asidecta 2s infinite; + pointer-events: none; +} + +@keyframes asidecta { + 0% {width: 20px; height: 20px; opacity: .5;} + 100% {width: 80px; height: 80px; opacity: 0;} } .social-media-link-block { @@ -258,6 +337,51 @@ input:focus { margin-top: 10px; } +.hamburger-wrapper { + position: fixed; + top: 20px; + right: 20px; + width: 40px; + height: 40px; + background-color: var(--main-color); + padding: 12px 10px; + display: none; + flex-direction: column; + align-content: center; + justify-content: space-between; + cursor: pointer; + z-index: 2000; + border-radius: 5px; +} + +.hamburger-line { + width: 100%; + height: 2px; + background-color: white; +} + +.hamburger-show { + display: flex; + animation: hamburgershow 1s; + animation-fill-mode: both; + animation-timing-function: cubic-bezier( 0.215, 0.61, 0.355, 1 ); +} + +@keyframes hamburgershow { + 0% {display: flex; opacity: 0; transform: translateX(-100);} + 100% {display: flex; opacity: 1; transform: none;} +} + + + + + +/* ################################################### Body*/ + +.hero-section { + +} + .hero-graphic-wrapper-init { width: 400px; height: 600px; @@ -275,11 +399,12 @@ input:focus { flex-direction: column; align-items: center; margin-right: -20px; - animation: herographicintro 1.5s; -/* animation-fill-mode: both;*/ - animation-delay: 1.3s; + animation: herographicintro 1.3s; + animation-delay: 1.6s; animation-timing-function: cubic-bezier( 0.215, 0.61, 0.355, 1 ); transition: all .8s cubic-bezier( 0.39, 0.575, 0.565, 1 ); + opacity: 0; + animation-fill-mode: both; } @keyframes herographicintro { @@ -288,11 +413,12 @@ input:focus { } #benjamin-hero-text { - font-family: "hennigar"; - font-size: 105px; - text-transform: uppercase; - letter-spacing: 0px; - color: var(--main-color); + background-image: url("images/art-logo-4.svg"); + background-position: center; + background-size: contain; + background-repeat: no-repeat; + width: 100%; + height: 250px; } #toby-hero-text { @@ -322,8 +448,8 @@ input:focus { } .hero-text-wrapper { - width: 240px; - padding-top: 100px; + width: 350px; + padding-top: 50px; align-items: flex-start; margin-left: 50px; } @@ -335,6 +461,7 @@ input:focus { border-radius: 5px; border: none; transition: all .3s ease; + opacity: 0; } .hero-text-wrapper > a:hover { @@ -348,7 +475,7 @@ input:focus { color: #222; font-size: 36px; font-weight: 700; - top: 480px;; + top: 480px; right: 30vw; display: flex; align-items: center; @@ -375,10 +502,26 @@ input:focus { left: 3px; } -.hero-text-block { - font-size: 24px; +.hero-text-block-init { + font-size: 36px; font-weight: 500; margin-bottom: 40px; + opacity: 0; +} + +.hero-text-block { + font-size: 36px; + font-weight: 500; + margin-bottom: 40px; + animation: herotextintro 1.2s; + animation-fill-mode: both; + animation-delay: 1.8s; + animation-timing-function: cubic-bezier( 0.39, 0.575, 0.565, 1 ); +} + +@keyframes herotextintro { + 0% {transform: translateY(50px) rotateX(5deg); opacity: 0;} + 100% {transform: none; opacity: 1;} } .hero-text-block > h1 { @@ -408,14 +551,13 @@ input:focus { .hero-watermark { position: absolute; - font-size: 35em; + font-size: 40em; font-family: "hennigar"; z-index: -1; top: -20px; - left: 50%; - transform: translateX(-50%); color: rgba(0,0,0,0.05); - letter-spacing: 5px; + letter-spacing: 20px; + white-space: nowrap; } .below-fold { @@ -426,7 +568,7 @@ input:focus { .skewed-bg { position: absolute; - width: 100%; + width: 100% !important; height: 400px; transform: skewY(-3deg); background-color: var(--main-color); @@ -439,8 +581,17 @@ input:focus { } @keyframes skewintro { - 0%{transform: none; top: 0;} - 100%{transform: skewY(-3deg); top: -200px;} + 0%{transform: none; top: 0; width: 100%;} + 100%{transform: skewY(-3deg); top: -200px; width: 100%;} +} + +.container { + color: #222; + display: flex; + align-items: flex-end; + text-align: right; + position: relative; + z-index: 10; } .container-darkbg { @@ -545,7 +696,14 @@ input:focus { border-bottom: 2px solid var(--main-color); } -.portfolio-item-image { +.about-me-img-block { + width: 300px; + height: 500px; + background-color: aqua; + margin: -50px 80px 0px 0px; + border-radius: 20px; + background-image: url("images/portfolio-item-1.jpg"); + background-size: cover; } @@ -562,16 +720,16 @@ input:focus { -/*Animations*/ +/* ################################################### Animations*/ .translate { - transition: all .8s cubic-bezier( 0.39, 0.575, 0.565, 1 ); + transition: all .4s cubic-bezier( 0.39, 0.575, 0.565, 1 ); } .fade-in-bottom { animation: fadeinbottom 1s; animation-fill-mode: both; - animation-timing-function: ease-out; + animation-timing-function: cubic-bezier( 0.39, 0.575, 0.565, 1 ); } @keyframes fadeinbottom { @@ -583,6 +741,22 @@ input:focus { opacity: 0; } +.scroll-into-view-intro { + opacity: 0; + animation: fadeinbottom 1s; + animation-fill-mode: both; + animation-timing-function: cubic-bezier( 0.39, 0.575, 0.565, 1 ); + animation-delay: 1.5s; +} + +.scroll-into-view-intro-2 { + opacity: 0; + animation: fadeinbottom 1s; + animation-fill-mode: both; + animation-timing-function: cubic-bezier( 0.39, 0.575, 0.565, 1 ); + animation-delay: 2s; +} + @@ -617,7 +791,314 @@ input:focus { @media (max-width: 800px) { + header { + left: 20px; + top: 20px; + width: 200px; + z-index: 1000; + color: inherit; + } + + header > a { + + } + + nav { + margin-top: 10px; + display: none; + } + .nav-mobile { + flex-direction: column; + align-items: flex-start; + margin-top: 10px; + display: flex; + background-color: white; + padding: 20px 20px 140px 20px; + width: 150px; + box-shadow: 0 0 40px -10px rgba(0,0,0,0.2); + border-radius: 5px; + color: #222; + } + + nav > a { + margin-bottom: 8px; + } + + section { + padding: 60px 30px; + } + + section > div { + width: 100%; + display: flex; + flex-direction: column; + justify-content: flex-start; + align-items: flex-start; + margin: 0; + top: 0; + } + + section > div.mobile-flip { + flex-direction: column-reverse; + } + + section > div > div{ + flex-grow: 1; + width: 100%; + flex-direction: column; + align-items: flex-start; + justify-content: flex-start; + margin: 0; + top: 0; + } + + + + /*................................................... Text */ + + a { + + } + + h1 { + font-size: 36px; + } + + h2 { + font-size: 30px; + } + + h3 { + + } + + h4 { + + } + + p { + font-size: 16px; + } + + + + + + + + + /*................................................... General classes and IDs */ + + .aside-header { + display: none; + } + + .aside-header-mobile { + position: fixed; + top: 240px; + right: auto; + left: 20px; + display: flex; + align-items: flex-start; + padding: 20px; + border-top: 1px solid #ddd; + flex-direction: column; + z-index: 1000; + width: 150px; + } + + .aside-header-mobile > a { + font-size: 14px; + display: flex; + align-items: center; + padding: 5px; + transition: all .3s ease-out; + position: relative; + } + + .hamburger-wrapper { + display: flex; + } + + + + /*###################################*/ + + .hero-section { + padding: 40px 40px; + } + + .hero-container { + flex-direction: row; + padding: 0; + } + + .hero-graphic-wrapper-init { + width: 50%; + height: 600px; + margin-right: none; + margin-left: -20px; + } + + .hero-graphic-wrapper { + width: 50%; + height: 600px; + margin-right: none; + margin-left: 0px; + margin-top: 50px; + } + + #benjamin-hero-text { + margin-bottom: 10px; + width: 100%; + height: 180px; + } + + .hero-graphic-block { + width: 100%; + height: auto; + margin-top: -25px; + } + + .hero-graphic-block > img { + width: 100%; + } + + .hero-text-wrapper { + width: 50%; + padding-top: 40px; + margin-left: 80px; + } + + .scroll-down-link-block { + top: 520px; + right: auto; + width: 70px; + height: 80px; + background-color: transparent; + } + + .scroll-link-icon { + color: white; + } + + .hero-text-block-init { + font-size: 36px; + font-weight: 500; + margin-bottom: 40px; + opacity: 0; + } + + .hero-text-block { + font-size: 30px; + margin-bottom: 20px; + } + + .hero-text-block > h1 { + + } + + .hero-text-block > h1 > span { + + } + + .hero-text-block > h1 > span:hover { + padding: 3px 7px; + } + + .hero-watermark { + font-size: 60vw; + line-height: 10px; + top: 25vw; + } + + .below-fold { + padding-top: 20px; + padding-bottom: 100px; + } + + .skewed-bg { + height: 400px; + margin-top: -100px; + } + + section > div.container { + flex-direction: column; + align-items: flex-start; + justify-content: flex-start; + text-align: left; + width: 100%; + color: #222; + transform: none; + margin: 0; + top: 0; + } + + .container-darkbg { + flex-direction: column; + align-items: flex-start; + justify-content: flex-start; + text-align: left; + width: 100%; + transform: none; + margin-bottom: 40px; + } + + .right-column { + justify-content: flex-start; + width: 100%; + transform: none; + margin-bottom: 40px; + } + + .section-watermark { + font-size: 30vw; + top: -250px; + left: auto; + right: auto; + } + + .portfolio-item { + margin-left: 0; + top: 0; + margin-bottom: 20px; + color: white; + display: flex; + flex-direction: column; + width: 100%; + align-items: flex-start; + justify-content: flex-start; + } + + .portfolio-item:hover { + border: none; + } + + .portfolio-item:first-child { + margin-top: 0px; + top: 0; + } + + .portfolio-item:last-child { + + } + + .portfolio-item > div { + width: 100%; + height: 350px; + } + + .portfolio-item img { + + } + + .about-me-img-block { + width: 80%; + height: 500px; + margin: 0; + align-self: center; + } } @@ -625,20 +1106,244 @@ input:focus { -@media (max-width: 550px) { +@media (max-width: 600px) { + + header { + + } + /*###################################*/ + + .hero-section { + padding: 100px 20px 0px 20px; + } + + .hero-container { + flex-direction: row; + padding: 0; + } + + .hero-graphic-wrapper-init { + width: 50%; + height: 600px; + margin-right: none; + margin-left: -20px; + } + + .hero-graphic-wrapper { + widows: 40%; + min-width: 200px; + height: 600px; + margin-left: -20px; + margin-bottom: -40px; + top: 0; + margin-top: 0; + justify-content: flex-start; + } + + #benjamin-hero-text { + margin-bottom: 0; + width: 100%; + height: 180px; + } + + .hero-graphic-block { + width: 100%; + height: auto; + margin-top: -25px; + } + + .hero-graphic-block > img { + width: 100%; + } + + .hero-text-wrapper { + width: 50%; + padding-top: 20px; + margin-left: 40px; + } + + .hero-text-wrapper > a { + font-size: 14px; + } + + .scroll-down-link-block { + top: 420px; + right: auto; + width: 70px; + height: 80px; + background-color: transparent; + } + + .scroll-link-icon { + color: white; + } + + .hero-text-block-init { + font-size: 24px; + margin-bottom: 20px; + line-height: 1; + } + + .hero-text-block { + font-size: 24px; + margin-bottom: 20px; + line-height: 1; + } + + .hero-text-block > h1 { + + } + + .hero-text-block > h1 > span { + + } + + .hero-text-block > h1 > span:hover { + padding: 3px 7px; + } + + .hero-watermark { + top: 60vw; + } + + .below-fold { + padding-top: 20px; + padding-bottom: 100px; + } + + .skewed-bg { + height: 400px; + margin-top: -70px; + } + + .section-watermark { + font-size: 30vw; + top: -200px; + left: auto; + right: auto; + } + + .portfolio-item > div { + width: 100%; + height: 250px; + } + + .portfolio-item img { + + } + + .about-me-img-block { + width: 100%; + height: 500px; + margin: 0; + } + } -@media (max-width: 450px) { +@media (max-width: 430px) { + /*###################################*/ + .hero-section { + padding: 17vw 20px 0px 20px; + } + + .hero-container { + flex-direction: column; + } + + .hero-graphic-wrapper-init { + width: 100%; + height: 600px; + margin-right: none; + margin-left: -20px; + } + + .hero-graphic-wrapper { + width: 80%; + position: relative; + height: auto; + margin: 0; + top: 0; + justify-content: flex-start; + align-self: center; + } + + #benjamin-hero-text { + margin-bottom: -50px; + width: 100%; + height: 250px; + } + + .hero-graphic-block { + width: 100%; + height: auto; + margin-top: -25px; + } + + .hero-graphic-block > img { + width: 100%; + } + + .hero-text-wrapper { + width: 100%; + padding-top: 20px; + margin-left: 0; + margin-bottom: 250px; + margin-top: -10px; + position: relative; + } + + .scroll-down-link-block { + top: 750px; + } + + .hero-watermark { + top: 400px; + } + + .below-fold { + padding-top: 40px; + padding-bottom: 100px; + margin: 0; + } + + .skewed-bg { + height: 400px; + margin-top: 0px; + } + + .section-watermark { + font-size: 30vw; + top: -200px; + left: auto; + right: auto; + } + + .portfolio-item > div { + width: 100%; + height: 250px; + } + + .portfolio-item img { + + } + + .about-me-img-block { + width: 100%; + height: 500px; + margin: 0; + } + + } diff --git a/v2.html b/v2.html index d52ca84..5e01c7c 100644 --- a/v2.html +++ b/v2.html @@ -10,8 +10,10 @@ Tben Design - + + + @@ -19,10 +21,18 @@ - + + +
+ + + + + +
Tben.Design
-
- My Resume - + +
+ face  My Resume +
-
-
+
+
+
+
+
+ + + + + + + + +
+
-
-
Benjamin
-
Toby
+
+
-
-
+
+
Hi. I'm a

UI/UX Designer, Web Designer, Frontend Web Developer, - Graphic and Motion Designer -

. + Graphic and Motion Designer. +
- Get me on LinkedIn + Get me on LinkedIn
@@ -70,6 +100,7 @@ +
T-BEN
@@ -82,12 +113,13 @@ + -
+ @@ -117,14 +149,32 @@ + -
+
+
+
+
+
+ +
+

A little about Me

+

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Quis ipsum suspendisse ultrices gravida. Risus commodo viverra maecenas accumsan lacus vel facilisis.

+
+ +
About Me
+
+
+ + +
+