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
document.querySelector(".hamburger-wrapper").addEventListener("click", hamburgerMenuToggle);
//document.querySelector(".hamburger-wrapper").addEventListener("blur", hamburgerCLickOut);
let hc = 0;
@ -180,11 +179,12 @@ window.addEventListener("resize", () => {
}
});
//function hamburgerCLickOut() {
// document.querySelector("nav").className = "none";
// document.querySelector("#aside-heder-block").className = "aside-header";
// hc = 0;
//}
document.querySelector(".hamburger-wrapper").onblur = () => {
document.querySelector("nav").className = "none";
document.querySelector("#aside-heder-block").className = "aside-header";
hc = 0;
}

132
v2.css
View File

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

36
v2.html
View File

@ -10,7 +10,7 @@
<title>Tben Design</title>
<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 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="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">-->
@ -34,19 +34,19 @@
<!-- #################################################################################-- Header -->
<header>
<a>Tben.Design</a>
<a href="#">Tben.Design</a>
<nav>
<a>About Me</a>
<a>My Work</a>
<a>My Certifications</a>
<a>Contact Me</a>
<a href="#">About Me</a>
<a href="#">My Work</a>
<a href="#">My Certifications</a>
<a href="#">Contact Me</a>
</nav>
</header>
<div class="aside-header" id="aside-heder-block">
<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>
<span class="material-icons" style="margin-left: 3px;">mail</span>
&nbsp;&nbsp;&nbsp;Get&nbsp;in&nbsp;touch&nbsp;with&nbsp;me
@ -56,11 +56,11 @@
</a>
</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>
</a>
@ -75,7 +75,7 @@
<div class="hero-graphic-controller translate" data-speed=".25">
<div id="benjamin-hero-text"></div>
<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>
@ -84,10 +84,10 @@
<div class="hero-text-block-init" style="transform-style:preserve-3d;" id="hero-text-controller">
Hi. I'm a
<h1 style="font-family:inherit;">
<span>UI/UX Designer</span>,
<span>Web Designer</span>,
<span>Frontend Web Developer</span>,
<span>Graphic and Motion Designer</span>.
<span><a href="#">UI/UX Designer</a></span>,
<span><a href="#">Web Designer</a></span>,
<span><a href="#">Frontend Web Developer</a></span>,
<span><a href="#">Graphic and Motion Designer</a></span>.
</h1>
</div>
<a href="#" id="linkedin-link-block">Get&nbsp;me&nbsp;on&nbsp;LinkedIn</a>
@ -115,7 +115,7 @@
<!-- #################################################################################-- 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 class="container-darkbg translate" data-speed="0" style="perspective:400px;transform-style:preserve-3d;">
<h2 class="scroll-into-view">Some of my Work</h2>
@ -123,17 +123,17 @@
</div>
<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>
<h4>Portfolio Item Title</h4>
</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>
<h4>Portfolio Item Title</h4>
</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>
<h4>Portfolio Item Title</h4>
</a>