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

Added intro

Browse Source
This commit is contained in:
BenjaminToby 2021-06-05 16:11:16 +01:00
parent 5c855e092f
commit 5794177725
3 changed files with 74 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
scripts/v2.js
View File

@ -20,4 +20,14 @@ window.addEventListener("scroll", () => {
// skewedBg.style.transform = "translateY(" + (scroll * skewedBg.dataset.speed) + "px) skewY(-3deg)";
watermark.style.transform = "translateY(" + (scroll * watermark.dataset.speed) + "px) translateX(-50%)";
});
//window.scrollBy({
// top: -100,
// behavior: "smooth"
//});
window.addEventListener("load", () => {
document.getElementById("skewed-bg").classList.add("skewed-bg");
document.getElementById("preloader").className = "preloader";
});

74
v2.css
View File

@ -42,11 +42,11 @@ header {
}
header > a {
font-family: Impact;
font-family: hennigar;
font-size: 24px;
text-transform: uppercase;
border: none;
letter-spacing: 0px;
letter-spacing: 1px;
}
nav {
@ -105,13 +105,15 @@ a:hover {
}
h1, h2, h3, h4 {
font-family: Impact;
font-family: hennigar;
margin-top: 0px;
margin-bottom: 15px;
width: 100%;
line-height: 1.2;
color: inherit;
text-transform: uppercase;
letter-spacing: 1px;
font-weight: normal;
}
h1 {
@ -120,7 +122,7 @@ h1 {
}
h2 {
font-size: 24px;
font-size: 30px;
}
h3 {
@ -192,6 +194,36 @@ input:focus {
/*................................................... General classes and IDs */
.preloader-init {
position: fixed;
width: 100vw;
height: 100vh;
background-color: var(--main-color);
bottom: 0;
left: 0;
z-index: 2000;
}
.preloader {
position: fixed;
width: 100vw;
height: 100vh;
background-color: var(--main-color);
bottom: 0;
left: 0;
z-index: 2000;
animation: preloaderexit 1s;
animation-fill-mode: both;
animation-delay: 1s;
animation-timing-function: cubic-bezier( 0.215, 0.61, 0.355, 1 );
}
@keyframes preloaderexit {
0%{display: none; transform: none; opacity: 1; height: 100vh;}
99%{transform: skewY(-3deg); opacity: 1; height: 0px; bottom: -200px;}
100%{display: none; transform: skewY(-3deg); opacity: 0; height: 0px;}
}
.aside-header {
position: fixed;
top: 40px;
@ -227,21 +259,21 @@ input:focus {
}
#benjamin-hero-text {
font-family: Impact;
font-size: 90px;
font-family: hennigar;
font-size: 105px;
text-transform: uppercase;
letter-spacing: -2px;
letter-spacing: 0px;
color: var(--main-color);
}
#toby-hero-text {
font-family: Impact;
font-size: 180px;
font-family: hennigar;
font-size: 205px;
text-transform: uppercase;
letter-spacing: -4px;
letter-spacing: 0px;
color: var(--main-color);
line-height: 1;
margin-top: -48px;
margin-top: -63px;
}
.hero-graphic-block {
@ -249,7 +281,7 @@ input:focus {
height: 300px;
background-color: var(--main-color);
border-radius: 20px;
margin-top: -30px;
margin-top: -35px;
display: flex;
align-items: center;
justify-content: center;
@ -347,13 +379,14 @@ input:focus {
.hero-watermark {
position: absolute;
font-size: 30em;
font-family: Impact;
font-size: 35em;
font-family: hennigar;
z-index: -1;
top: 20px;
top: -20px;
left: 50%;
transform: translateX(-50%);
color: rgba(0,0,0,0.05)
color: rgba(0,0,0,0.05);
letter-spacing: 2px;
}
.below-fold {
@ -370,6 +403,15 @@ input:focus {
background-color: var(--main-color);
top: -200px;
z-index: -1;
animation: skewintro 1.2s;
animation-fill-mode: both;
animation-delay: 1s;
animation-timing-function: cubic-bezier( 0.39, 0.575, 0.565, 1 );
}
@keyframes skewintro {
0%{transform: none; top: 0;}
100%{transform: skewY(-3deg); top: -200px;}
}
.container-darkbg {

10
v2.html
View File

@ -11,7 +11,7 @@
<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|Impact" rel="stylesheet">
<link href="http://fonts.cdnfonts.com/css/impacted" rel="stylesheet">
<link href="http://fonts.cdnfonts.com/css/hennigar" rel="stylesheet">
<link rel="stylesheet" href="v2.css">
@ -21,6 +21,8 @@
<body><!-- ...................................................................................................................... Body -->
<div class="preloader-init" id="preloader"></div>
<header>
<a>Tben.Design</a>
<nav>
@ -38,7 +40,7 @@
<section style="z-index:1;">
<div>
<div class="hero-graphic-wrapper translate" data-speed=".3">
<div class="hero-graphic-wrapper translate" data-speed=".25">
<div id="benjamin-hero-text">Benjamin</div>
<div id="toby-hero-text">Toby</div>
<div class="hero-graphic-block">
@ -46,7 +48,7 @@
</div>
</div>
<div class="hero-text-wrapper translate" data-speed=".2">
<div class="hero-text-wrapper translate" data-speed=".15">
<div class="hero-text-block">
Hi. I'm a
<h1>
@ -87,7 +89,7 @@
</div>
<div></div>
</div>
<div class="skewed-bg"></div>
<div id="skewed-bg"></div>
</section>