tben/personal-site
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

More refinements

Browse Source
This commit is contained in:
BenjaminToby 2021-06-07 05:57:50 +01:00
parent bc7dbb470b
commit 663a214554
4 changed files with 116 additions and 64 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
images/placeholder-portrait-2.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 27 KiB

12
scripts/v2.js
View File

@ -155,7 +155,6 @@ sectionOneIo.observe(translate[4]);
//############################################################################## -- Hamburger //############################################################################## -- Hamburger
document.querySelector(".hamburger-wrapper").addEventListener("click", hamburgerMenuToggle); document.querySelector(".hamburger-wrapper").addEventListener("click", hamburgerMenuToggle);
//document.querySelector(".hamburger-wrapper").addEventListener("blur", hamburgerCLickOut);
let hc = 0; let hc = 0;
@ -180,11 +179,12 @@ window.addEventListener("resize", () => {
} }
}); });
//function hamburgerCLickOut() {
// document.querySelector("nav").className = "none"; document.querySelector(".hamburger-wrapper").onblur = () => {
// document.querySelector("#aside-heder-block").className = "aside-header"; document.querySelector("nav").className = "none";
// hc = 0; document.querySelector("#aside-heder-block").className = "aside-header";
//} hc = 0;
}

132
v2.css
View File

@ -45,12 +45,15 @@ header {
} }
header > a { header > a {
font-family: "Anton"; font-family: "Squada One";
font-size: 36px; font-size: 36px;
text-transform: uppercase; text-transform: uppercase;
border: none; border: none;
letter-spacing: 1px; letter-spacing: -1px;
color: inherit; color: inherit;
position: relative;
z-index: 100;
line-height: 36px;
} }
nav { nav {
@ -63,8 +66,9 @@ nav {
nav > a { nav > a {
margin-bottom: 10px; margin-bottom: 10px;
font-size: 14px; font-size: 16px;
color: inherit; color: inherit;
font-weight: 600;
} }
nav > a:hover { nav > a:hover {
@ -123,7 +127,7 @@ a:hover {
} }
h1, h2, h3, h4 { h1, h2, h3, h4 {
font-family: "Anton"; font-family: "Squada One";
margin-top: 0px; margin-top: 0px;
margin-bottom: 15px; margin-bottom: 15px;
width: 100%; width: 100%;
@ -172,6 +176,22 @@ span {
line-height: inherit; line-height: inherit;
} }
span > a {
font-size: inherit;
font-weight: inherit;
font-family: inherit;
color: inherit;
letter-spacing: inherit;
line-height: inherit;
border: inherit;
border-color: inherit;
}
span > a:hover {
border: inherit;
border-color: inherit;
}
@ -219,6 +239,10 @@ input:focus {
/*############################################################# -- General classes and IDs -- */ /*############################################################# -- General classes and IDs -- */
.nav-mobile {
}
.preloader-init { .preloader-init {
position: fixed; position: fixed;
width: 100vw; width: 100vw;
@ -368,8 +392,8 @@ input:focus {
} }
@keyframes hamburgershow { @keyframes hamburgershow {
0% {display: flex; opacity: 0; transform: translateX(-100);} 0% {display: flex; opacity: 0; left: -100px;}
100% {display: flex; opacity: 1; transform: none;} 100% {display: flex; opacity: 1;left: 0;}
} }
@ -422,7 +446,7 @@ input:focus {
} }
#toby-hero-text { #toby-hero-text {
font-family: "Anton"; font-family: "Squada One";
font-size: 205px; font-size: 205px;
text-transform: uppercase; text-transform: uppercase;
letter-spacing: 0px; letter-spacing: 0px;
@ -445,6 +469,7 @@ input:focus {
.hero-graphic-block > img { .hero-graphic-block > img {
position: relative; position: relative;
top: -40px; top: -40px;
width: 400px;
} }
.hero-text-wrapper { .hero-text-wrapper {
@ -552,7 +577,7 @@ input:focus {
.hero-watermark { .hero-watermark {
position: absolute; position: absolute;
font-size: 40em; font-size: 40em;
font-family: "Anton"; font-family: "Squada One";
z-index: -1; z-index: -1;
top: -20px; top: -20px;
color: rgba(0,0,0,0.05); color: rgba(0,0,0,0.05);
@ -612,7 +637,7 @@ input:focus {
} }
.section-watermark { .section-watermark {
font-family: "Anton"; font-family: "Squada One";
position: absolute; position: absolute;
color: rgba(0,0,0,0.05); color: rgba(0,0,0,0.05);
font-size: 15em; font-size: 15em;
@ -733,8 +758,9 @@ input:focus {
} }
@keyframes fadeinbottom { @keyframes fadeinbottom {
0% {transform: translateY(100px) rotateX(5deg); opacity: 0;} 0% {transform: translateY(100px) rotateX(5deg); opacity: 0; pointer-events: none;}
100% {transform: none; opacity: 1;} 99% {transform: none; opacity: 1; pointer-events: none;}
100% {transform: none; opacity: 1; pointer-events: auto;}
} }
.scroll-into-view { .scroll-into-view {
@ -800,7 +826,7 @@ input:focus {
} }
header > a { header > a {
margin: 0;
} }
nav { nav {
@ -809,16 +835,28 @@ input:focus {
} }
.nav-mobile { .nav-mobile {
position: fixed;
top: 0;
left: 0;
flex-direction: column; flex-direction: column;
align-items: flex-start; align-items: center;
margin-top: 10px; margin-top: 0;
display: flex; display: flex;
background-color: white; background-color: white;
padding: 20px 20px 140px 20px; padding: 80px 20px 140px 20px;
width: 150px; width: 100vw;
height: 400px;
box-shadow: 0 0 40px -10px rgba(0,0,0,0.2); box-shadow: 0 0 40px -10px rgba(0,0,0,0.2);
border-radius: 5px; border-radius: 5px;
color: #222; color: #222;
text-align: center;
animation: hamburgershow .5s;
animation-fill-mode: both;
animation-timing-function: cubic-bezier( 0.215, 0.61, 0.355, 1 );
}
.nav-mobile > a {
text-align: center;
} }
nav > a { nav > a {
@ -898,23 +936,27 @@ input:focus {
position: fixed; position: fixed;
top: 240px; top: 240px;
right: auto; right: auto;
left: 20px; left: 0;
display: flex; display: flex;
align-items: flex-start; align-items: center;
padding: 20px; padding: 20px 0 0 0;
border-top: 1px solid #ddd; border-top: 1px solid #ddd;
flex-direction: column; flex-direction: column;
z-index: 1000; z-index: 1000;
width: 150px; width: 100%;
animation: hamburgershow .5s;
animation-fill-mode: both;
animation-timing-function: cubic-bezier( 0.215, 0.61, 0.355, 1 );
animation-delay: .1s;
} }
.aside-header-mobile > a { .aside-header-mobile > a {
font-size: 14px;
display: flex; display: flex;
align-items: center; align-items: center;
padding: 5px; padding: 5px;
transition: all .3s ease-out; transition: all .3s ease-out;
position: relative; position: relative;
text-align: center;
} }
.hamburger-wrapper { .hamburger-wrapper {
@ -926,7 +968,7 @@ input:focus {
/*###################################*/ /*###################################*/
.hero-section { .hero-section {
padding: 40px 40px; padding: 60px 40px 40px 40px;
} }
.hero-container { .hero-container {
@ -942,10 +984,10 @@ input:focus {
} }
.hero-graphic-wrapper { .hero-graphic-wrapper {
width: 50%; width: 40%;
height: 600px; height: 600px;
margin-right: none; margin-right: none;
margin-left: 0px; margin-left: 20px;
margin-top: 50px; margin-top: 50px;
} }
@ -962,11 +1004,12 @@ input:focus {
} }
.hero-graphic-block > img { .hero-graphic-block > img {
width: 100%; width: 300px;
top: -100px;
} }
.hero-text-wrapper { .hero-text-wrapper {
width: 50%; width: 60%;
padding-top: 40px; padding-top: 40px;
margin-left: 80px; margin-left: 80px;
} }
@ -1020,7 +1063,7 @@ input:focus {
.skewed-bg { .skewed-bg {
height: 400px; height: 400px;
margin-top: -100px; margin-top: -80px;
} }
section > div.container { section > div.container {
@ -1133,36 +1176,42 @@ input:focus {
} }
.hero-graphic-wrapper { .hero-graphic-wrapper {
widows: 40%; width: 200px;
min-width: 200px;
height: 600px; height: 600px;
margin-left: -20px; margin-left: 0px;
margin-bottom: -40px; margin-bottom: -40px;
top: 0; top: 0;
margin-top: 0; margin-top: 0;
justify-content: flex-start; justify-content: flex-start;
align-items: center;
display: flex;
} }
#benjamin-hero-text { #benjamin-hero-text {
margin-bottom: 0; margin: 0 0 -10px 0;
width: 100%; width: 220px;
height: 180px; height: 180px;
align-self: center;
left: 12px;
right: 0;
} }
.hero-graphic-block { .hero-graphic-block {
width: 100%; width: 250px;
height: auto; height: 200px;
margin-top: -25px; margin-top: -25px;
} }
.hero-graphic-block > img { .hero-graphic-block > img {
width: 100%; position: absolute;
width: 300px;
} }
.hero-text-wrapper { .hero-text-wrapper {
width: 50%; width: 50%;
min-width: 220px;
padding-top: 20px; padding-top: 20px;
margin-left: 40px; margin-left: 60px;
} }
.hero-text-wrapper > a { .hero-text-wrapper > a {
@ -1253,7 +1302,7 @@ input:focus {
/*###################################*/ /*###################################*/
.hero-section { .hero-section {
padding: 17vw 20px 0px 20px; padding: 60px 20px 0px 20px;
} }
.hero-container { .hero-container {
@ -1281,16 +1330,19 @@ input:focus {
margin-bottom: -50px; margin-bottom: -50px;
width: 100%; width: 100%;
height: 250px; height: 250px;
left: auto;
right: auto;
} }
.hero-graphic-block { .hero-graphic-block {
width: 100%; width: 250px;
height: auto; height: 250px;
margin-top: -25px; margin-top: -25px;
} }
.hero-graphic-block > img { .hero-graphic-block > img {
width: 100%; width: 280px;
position: absolute;
} }
.hero-text-wrapper { .hero-text-wrapper {

36
v2.html
View File

@ -10,7 +10,7 @@
<title>Tben Design</title> <title>Tben Design</title>
<meta name="description" content="Web/Graphic/Motion Designer, UI UX Designer, Frontend Web Developer"> <meta name="description" content="Web/Graphic/Motion Designer, UI UX Designer, Frontend Web Developer">
<link rel="shortcut icon" type="image/x-icon" href="/images-dw/favicon.ico"> <link rel="shortcut icon" type="image/x-icon" href="/images-dw/favicon.ico">
<link href="https://fonts.googleapis.com/css?family=Lato:400,500,700,800|Material+Icons|Anton" rel="stylesheet"> <link href="https://fonts.googleapis.com/css?family=Lato:400,500,700,800|Material+Icons|Anton|Squada+One|Coda" rel="stylesheet">
<link href="http://fonts.cdnfonts.com/css/hennigar" rel="stylesheet"> <link href="http://fonts.cdnfonts.com/css/hennigar" rel="stylesheet">
<!-- <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">--> <!-- <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">-->
@ -34,19 +34,19 @@
<!-- #################################################################################-- Header --> <!-- #################################################################################-- Header -->
<header> <header>
<a>Tben.Design</a> <a href="#">Tben.Design</a>
<nav> <nav>
<a>About Me</a> <a href="#">About Me</a>
<a>My Work</a> <a href="#">My Work</a>
<a>My Certifications</a> <a href="#">My Certifications</a>
<a>Contact Me</a> <a href="#">Contact Me</a>
</nav> </nav>
</header> </header>
<div class="aside-header" id="aside-heder-block"> <div class="aside-header" id="aside-heder-block">
<a href="#"><span class="material-icons">face</span>&nbsp;&nbsp;My&nbsp;Resume</a> <a href="#"><span class="material-icons">face</span>&nbsp;&nbsp;My&nbsp;Resume</a>
<a class="email-link-block"> <a href="#" class="email-link-block">
<div> <div>
<span class="material-icons" style="margin-left: 3px;">mail</span> <span class="material-icons" style="margin-left: 3px;">mail</span>
&nbsp;&nbsp;&nbsp;Get&nbsp;in&nbsp;touch&nbsp;with&nbsp;me &nbsp;&nbsp;&nbsp;Get&nbsp;in&nbsp;touch&nbsp;with&nbsp;me
@ -56,11 +56,11 @@
</a> </a>
</div> </div>
<div class="hamburger-wrapper"> <a class="hamburger-wrapper" href="#">
<div class="hamburger-line"></div> <div class="hamburger-line"></div>
<div class="hamburger-line"></div> <div class="hamburger-line"></div>
<div class="hamburger-line"></div> <div class="hamburger-line"></div>
</div> </a>
@ -75,7 +75,7 @@
<div class="hero-graphic-controller translate" data-speed=".25"> <div class="hero-graphic-controller translate" data-speed=".25">
<div id="benjamin-hero-text"></div> <div id="benjamin-hero-text"></div>
<div class="hero-graphic-block"> <div class="hero-graphic-block">
<img src="images/placeholder-portrait.png" alt="" width="380px" height="auto"> <img src="images/placeholder-portrait-2.png" alt="" width="380px" height="auto">
</div> </div>
</div> </div>
</div> </div>
@ -84,10 +84,10 @@
<div class="hero-text-block-init" style="transform-style:preserve-3d;" id="hero-text-controller"> <div class="hero-text-block-init" style="transform-style:preserve-3d;" id="hero-text-controller">
Hi. I'm a Hi. I'm a
<h1 style="font-family:inherit;"> <h1 style="font-family:inherit;">
<span>UI/UX Designer</span>, <span><a href="#">UI/UX Designer</a></span>,
<span>Web Designer</span>, <span><a href="#">Web Designer</a></span>,
<span>Frontend Web Developer</span>, <span><a href="#">Frontend Web Developer</a></span>,
<span>Graphic and Motion Designer</span>. <span><a href="#">Graphic and Motion Designer</a></span>.
</h1> </h1>
</div> </div>
<a href="#" id="linkedin-link-block">Get&nbsp;me&nbsp;on&nbsp;LinkedIn</a> <a href="#" id="linkedin-link-block">Get&nbsp;me&nbsp;on&nbsp;LinkedIn</a>
@ -115,7 +115,7 @@
<!-- #################################################################################-- My Work Section --> <!-- #################################################################################-- My Work Section -->
<section class="below-fold translate menu-color-change" data-speed=".1" id="section-2" style="perspective:600px;"> <section class="below-fold translate menu-color-change" data-speed=".1" id="section-2">
<div style="perspective:400px;transform-style:preserve-3d;"> <div style="perspective:400px;transform-style:preserve-3d;">
<div class="container-darkbg translate" data-speed="0" style="perspective:400px;transform-style:preserve-3d;"> <div class="container-darkbg translate" data-speed="0" style="perspective:400px;transform-style:preserve-3d;">
<h2 class="scroll-into-view">Some of my Work</h2> <h2 class="scroll-into-view">Some of my Work</h2>
@ -123,17 +123,17 @@
</div> </div>
<div class="right-column" style="perspective:400px;transform-style:preserve-3d;"> <div class="right-column" style="perspective:400px;transform-style:preserve-3d;">
<a class="portfolio-item scroll-into-view"> <a href="#" class="portfolio-item scroll-into-view">
<div><img src="images/portfolio-item-3.jpg" alt=""></div> <div><img src="images/portfolio-item-3.jpg" alt=""></div>
<h4>Portfolio Item Title</h4> <h4>Portfolio Item Title</h4>
</a> </a>
<a class="portfolio-item scroll-into-view"> <a href="#" class="portfolio-item scroll-into-view">
<div><img src="images/portfolio-item-2.jpg" alt=""></div> <div><img src="images/portfolio-item-2.jpg" alt=""></div>
<h4>Portfolio Item Title</h4> <h4>Portfolio Item Title</h4>
</a> </a>
<a class="portfolio-item scroll-into-view"> <a href="#" class="portfolio-item scroll-into-view">
<div><img src="images/portfolio-item-1.jpg" alt=""></div> <div><img src="images/portfolio-item-1.jpg" alt=""></div>
<h4>Portfolio Item Title</h4> <h4>Portfolio Item Title</h4>
</a> </a>