-
Benjamin Toby.
+
Benjamin Toby.
-
diff --git a/main.css b/main.css
index df3c02a..c270269 100644
--- a/main.css
+++ b/main.css
@@ -176,10 +176,6 @@ input:focus {
position: relative;
}
-section.hero-section {
- padding: 0px 40px 40px 40px;
-}
-
/*................................................... Nav */
@@ -238,6 +234,40 @@ 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 {
align-items: center;
}
@@ -289,12 +319,7 @@ section.hero-section {
border: none;
}
-.my-name {
- color: #3C60DE;
- background-color: #E6EDFF;
- padding: 0 10px;
- font-size: 1.5em;
-}
+
.linkedin-block {
padding: 10px 20px 10px 10px;
@@ -322,6 +347,11 @@ section.hero-section {
border: 3px solid rgba(255,255,255,0.5);
}
+#animation-half-column {
+ perspective: 600px;
+ z-index: -1;
+}
+
#my-face {
width: 500px;
height: 500px;
@@ -336,8 +366,8 @@ section.hero-section {
position: relative;
animation: facehover 3s infinite;
animation-timing-function: ease;
- transform-style: preserve-3d;
transition: all .4s ease-out;
+ perspective: 600px;
/* transform: rotate3d(20,-20,0,20deg); rotateX(60deg) rotateY(60deg)*/
}
@@ -385,6 +415,62 @@ section.hero-section {
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 {
font-size:80px;
font-weight:400;
@@ -491,6 +577,16 @@ section.hero-section {
right: -20vw;
}
+ #wavy-line {
+ width: 300%;
+ top: 500px;
+ }
+
+ #morph-shape-1 {
+ top: 20px;
+ left: 60px;
+ }
+
}
@@ -561,6 +657,34 @@ section.hero-section {
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 {
margin-top: -130vw;
width: 400px;
@@ -568,6 +692,13 @@ section.hero-section {
right: -50vw;
}
+ #morph-shape-1 {
+ top: 10px;
+ left: 90px;
+ width: 50px;
+ height: 50px;
+ }
+
}
diff --git a/scripts/main.js b/scripts/main.js
index 2dae967..8c4ffc3 100644
--- a/scripts/main.js
+++ b/scripts/main.js
@@ -3,6 +3,9 @@ var faceWrapper = document.getElementById("my-face-wrapper");
lottie.setQuality("low");
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({
container: myFaceContainer,
@@ -12,7 +15,36 @@ var myFace = lottie.loadAnimation({
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() {
myFace.playSegments([44, 205], true);
diff --git a/scripts/morphing-shape-1.json b/scripts/morphing-shape-1.json
new file mode 100644
index 0000000..feacf39
--- /dev/null
+++ b/scripts/morphing-shape-1.json
@@ -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":[]}
\ No newline at end of file
diff --git a/scripts/wavy-line.json b/scripts/wavy-line.json
new file mode 100644
index 0000000..cefebb0
--- /dev/null
+++ b/scripts/wavy-line.json
@@ -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":[]}
\ No newline at end of file