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

New elements added to hero section

Browse Source
This commit is contained in:
BenjaminToby 2021-05-26 14:16:53 +01:00
parent a32335656f
commit 3903a4f8ca
9 changed files with 194 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
images/body-bg.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 34 KiB

BIN
images/mobile-app.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 77 KiB

BIN
images/pain-splatter-1.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 57 KiB

BIN
images/stone-wall-bg.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 56 KiB

18
index.html
View File

@ -19,6 +19,10 @@
<body><!-- ...................................................................................................................... Body --> <body><!-- ...................................................................................................................... Body -->
<div id="wavy-line"></div>
<div class="body-bg"></div>
<header> <header>
<a class="nav-link-block" style="border:none;"><span style="font-family:'Satisfy';">Tben</span>design</a> <a class="nav-link-block" style="border:none;"><span style="font-family:'Satisfy';">Tben</span>design</a>
<nav> <nav>
@ -42,7 +46,7 @@
<section class="hero-section"> <section class="hero-section">
<div class="container-1200px hero-content-container"> <div class="container-1200px hero-content-container">
<div class="column-50"> <div class="column-50">
<h1 style="background-color:#fff;color:#333;">Benjamin Toby.</h1> <h1 class="my-name">Benjamin Toby.</h1>
<h2 class="hero-subtext">Hi! I'm a <h2 class="hero-subtext">Hi! I'm a
<a class="hero-content-link" id="ui-ux-design">UI UX Designer</a>, <a class="hero-content-link" id="ui-ux-design">UI UX Designer</a>,
<a class="hero-content-link" id="web-design">Web&nbsp;Designer</a>, <a class="hero-content-link" id="web-design">Web&nbsp;Designer</a>,
@ -67,12 +71,22 @@
</div> </div>
</div> </div>
<div class="column-50 centered-content" style="perspective:600px;z-index:-1;"> <div class="column-50 centered-content" id="animation-half-column">
<div class="face-wrapper" id="my-face-wrapper"> <div class="face-wrapper" id="my-face-wrapper">
<div id="my-face"></div> <div id="my-face"></div>
<div id="color-overlay"></div> <div id="color-overlay"></div>
<div class="hero-image-blur"></div> <div class="hero-image-blur"></div>
<!--
<div class="paint-spatter"></div>
<div class="morphing-shapes-container">
</div>
-->
<div id="morph-shape-1"></div>
<div id="morph-shape-2"></div>
<div id="morph-shape-3"></div>
</div> </div>
</div> </div>
</div> </div>
<div class="container-1200px" style="justify-content:center;align-items:center;padding:0;margin-top:-20px;"> <div class="container-1200px" style="justify-content:center;align-items:center;padding:0;margin-top:-20px;">

153
main.css
View File

@ -176,10 +176,6 @@ input:focus {
position: relative; position: relative;
} }
section.hero-section {
padding: 0px 40px 40px 40px;
}
/*................................................... Nav */ /*................................................... Nav */
@ -238,6 +234,40 @@ section.hero-section {
/*................................................... Hero Section */ /*................................................... Hero Section */
section.hero-section {
padding: 0px 40px 40px 40px;
}
.my-name {
color: #222;
padding: 0px;
font-size: 60px;
}
.body-bg {
position: fixed;
z-index: -1;
width: 100%;
opacity: .5;
min-height: 100vh;
background-image: url("images/stone-wall-bg.jpg");
background-size: cover;
}
#wavy-line {
width: 100%;
position: absolute;
z-index: -1;
top: 350px;
left: 0;
opacity: .5;
display: none;
}
.body-bg.gradient {
/*background-image: linear-gradient(rgba(0,0,0,0.05), rgba(0,0,0,0));*/
}
.hero-content-container { .hero-content-container {
align-items: center; align-items: center;
} }
@ -289,12 +319,7 @@ section.hero-section {
border: none; border: none;
} }
.my-name {
color: #3C60DE;
background-color: #E6EDFF;
padding: 0 10px;
font-size: 1.5em;
}
.linkedin-block { .linkedin-block {
padding: 10px 20px 10px 10px; padding: 10px 20px 10px 10px;
@ -322,6 +347,11 @@ section.hero-section {
border: 3px solid rgba(255,255,255,0.5); border: 3px solid rgba(255,255,255,0.5);
} }
#animation-half-column {
perspective: 600px;
z-index: -1;
}
#my-face { #my-face {
width: 500px; width: 500px;
height: 500px; height: 500px;
@ -336,8 +366,8 @@ section.hero-section {
position: relative; position: relative;
animation: facehover 3s infinite; animation: facehover 3s infinite;
animation-timing-function: ease; animation-timing-function: ease;
transform-style: preserve-3d;
transition: all .4s ease-out; transition: all .4s ease-out;
perspective: 600px;
/* transform: rotate3d(20,-20,0,20deg); rotateX(60deg) rotateY(60deg)*/ /* transform: rotate3d(20,-20,0,20deg); rotateX(60deg) rotateY(60deg)*/
} }
@ -385,6 +415,62 @@ section.hero-section {
opacity: .05; opacity: .05;
} }
.paint-spatter {
position: absolute;
top: 0;
left: 0;
background-image: url("images/pain-splatter-1.png");
background-size: cover;
width: 100%;
height: 100%;
z-index: -10;
transform: scale(1.5);
mix-blend-mode: lighten;
opacity: .1;
}
.morphing-shapes-container {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
mix-blend-mode: multiply;
z-index: -10;
transition: all .3s ease;
}
#morph-shape-1 {
width: 100px;
height: 100px;
position: absolute;
top: 10px;
left: 10px;
}
#morph-shape-2 {
width: 150px;
height: 150px;
position: absolute;
bottom: 120px;
right: -60px;
z-index: -10;
}
#morph-shape-3 {
width: 60px;
height: 60px;
position: absolute;
top: 30px;
right: 30px;
opacity: .5;
z-index: -10;
}
.scroll-down-icon { .scroll-down-icon {
font-size:80px; font-size:80px;
font-weight:400; font-weight:400;
@ -491,6 +577,16 @@ section.hero-section {
right: -20vw; right: -20vw;
} }
#wavy-line {
width: 300%;
top: 500px;
}
#morph-shape-1 {
top: 20px;
left: 60px;
}
} }
@ -561,6 +657,34 @@ section.hero-section {
height: 400px; height: 400px;
} }
.face-wrapper {
margin-top: -100vw;
width: 400px;
height: 400px;
right: -50vw;
}
#wavy-line {
width: 300%;
top: 450px;
}
#morph-shape-1 {
top: 20px;
left: 60px;
width: 50px;
height: 50px;
}
}
@media (max-width: 350px) {
.face-wrapper { .face-wrapper {
margin-top: -130vw; margin-top: -130vw;
width: 400px; width: 400px;
@ -568,6 +692,13 @@ section.hero-section {
right: -50vw; right: -50vw;
} }
#morph-shape-1 {
top: 10px;
left: 90px;
width: 50px;
height: 50px;
}
} }

34
scripts/main.js
View File

@ -3,6 +3,9 @@ var faceWrapper = document.getElementById("my-face-wrapper");
lottie.setQuality("low"); lottie.setQuality("low");
var myFaceContainer = document.getElementById("my-face"); var myFaceContainer = document.getElementById("my-face");
var morphShape1Container = document.getElementById("morph-shape-1");
var morphShape2Container = document.getElementById("morph-shape-2");
var morphShape3Container = document.getElementById("morph-shape-3");
var myFace = lottie.loadAnimation({ var myFace = lottie.loadAnimation({
container: myFaceContainer, container: myFaceContainer,
@ -12,7 +15,36 @@ var myFace = lottie.loadAnimation({
autoplay: false, autoplay: false,
}); });
myFace.setSpeed(1); var morphShape1 = lottie.loadAnimation({
container: morphShape1Container,
path: "scripts/morphing-shape-1.json",
renderer: "svg",
loop: true,
autoplay: true,
});
var morphShape2 = lottie.loadAnimation({
container: morphShape2Container,
path: "scripts/morphing-shape-1.json",
renderer: "svg",
loop: true,
autoplay: true,
});
morphShape1.setSpeed(1.5);
var morphShape3 = lottie.loadAnimation({
container: morphShape3Container,
path: "scripts/morphing-shape-1.json",
renderer: "svg",
loop: true,
autoplay: true,
});
morphShape3.setSpeed(2);
function steadyState() { function steadyState() {
myFace.playSegments([44, 205], true); myFace.playSegments([44, 205], true);

1
scripts/morphing-shape-1.json Normal file
View File

@ -0,0 +1 @@
{"v":"5.7.6","fr":30,"ip":0,"op":362,"w":200,"h":200,"nm":"Comp 1","ddd":0,"assets":[],"layers":[{"ddd":0,"ind":1,"ty":4,"nm":"Shape Layer 1","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[108,101.75,0],"ix":2,"l":2},"a":{"a":0,"k":[8,1.75,0],"ix":1,"l":2},"s":{"a":0,"k":[100,100,100],"ix":6,"l":2}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":1,"k":[{"i":{"x":0.51,"y":1},"o":{"x":0.506,"y":0},"t":0,"s":[{"i":[[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0]],"v":[[-64.5,-75],[-11,85],[24.5,-17.5]],"c":true}]},{"i":{"x":0.438,"y":1},"o":{"x":0.53,"y":0},"t":121,"s":[{"i":[[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0]],"v":[[-16.5,-48.5],[-86.5,87.5],[87,-85]],"c":true}]},{"i":{"x":0.432,"y":1},"o":{"x":0.475,"y":0},"t":240,"s":[{"i":[[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0]],"v":[[79,25.5],[-8,-32],[-85.5,85]],"c":true}]},{"t":361,"s":[{"i":[[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0]],"v":[[-64.5,-75],[-11,85],[24.5,-17.5]],"c":true}]}],"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"st","c":{"a":0,"k":[0,0,0,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":0,"ix":5},"lc":1,"lj":1,"ml":4,"bm":0,"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"fl","c":{"a":0,"k":[0,0,0,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Shape 1","np":3,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":364,"st":0,"bm":0}],"markers":[]}

1
scripts/wavy-line.json Normal file
View File

@ -0,0 +1 @@
{"v":"5.7.6","fr":30,"ip":0,"op":182,"w":1440,"h":300,"nm":"Comp 1","ddd":0,"assets":[],"layers":[{"ddd":0,"ind":1,"ty":4,"nm":"Shape Layer 1","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[732,83.933,0],"ix":2,"l":2},"a":{"a":0,"k":[12,173.933,0],"ix":1,"l":2},"s":{"a":0,"k":[100,100,100],"ix":6,"l":2}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":1,"k":[{"i":{"x":0.406,"y":1},"o":{"x":0.333,"y":0},"t":0,"s":[{"i":[[0,0],[-220.336,0],[-276.265,-22.751],[0,0]],"o":[[0,0],[278,0],[340,28],[0,0]],"v":[[-740,270],[-352,208],[320,280],[762,220]],"c":false}]},{"i":{"x":0.667,"y":1},"o":{"x":0.497,"y":0},"t":90,"s":[{"i":[[0,0],[-220.28,-4.969],[-254.604,-13.3],[0,0]],"o":[[0,0],[266,6],[268,14],[0,0]],"v":[[-780,216],[-334,268],[348,228],[776,284]],"c":false}]},{"t":182,"s":[{"i":[[0,0],[-220.336,0],[-276.265,-22.751],[0,0]],"o":[[0,0],[278,0],[340,28],[0,0]],"v":[[-740,270],[-352,208],[320,280],[762,220]],"c":false}]}],"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"st","c":{"a":0,"k":[0,0,0,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":2,"ix":5},"lc":1,"lj":1,"ml":4,"bm":0,"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Shape 1","np":3,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":182,"st":0,"bm":0}],"markers":[]}