Add main animation, more content, and interactions
This commit is contained in:
BenjaminToby
parent
af228dfc91
commit
eac0269e97
BIN
images/Profile-Pic.jpg
Normal file
BIN
images/Profile-Pic.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.5 KiB |
41
index.html
41
index.html
@ -20,7 +20,7 @@
|
||||
<body><!-- ...................................................................................................................... Body -->
|
||||
|
||||
<header>
|
||||
<a class="nav-link-block"><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 style="float:right;">
|
||||
<ul>
|
||||
<li class="navlink-li"><a href="#" class="navlink">About Me</a></li>
|
||||
@ -31,21 +31,50 @@
|
||||
</nav>
|
||||
</header>
|
||||
|
||||
|
||||
|
||||
|
||||
<section class="hero-section">
|
||||
<div class="container-1200px">
|
||||
<div class="column-50">
|
||||
<h1>Hi. I'm <span class="my-name">Benjamin Toby</span> .<br>And I design great stuff.</h1>
|
||||
<h2 class="hero-subtext">
|
||||
<a href="#" class="hero-content-link">UI UX Design</a>,
|
||||
<a href="#" class="hero-content-link">Web Design</a>,
|
||||
<a href="#" class="hero-content-link">Frontend Web Develpment</a>,
|
||||
<a href="#" class="hero-content-link">Graphic and Motion Design</a>.
|
||||
<a href="#" class="hero-content-link" id="ui-ux-design">UI UX Design</a>,
|
||||
<a href="#" class="hero-content-link" id="web-design">Web Design</a>,
|
||||
<a href="#" class="hero-content-link" id="frontend-dev">Frontend Web Develpment</a>,
|
||||
<a href="#" class="hero-content-link" id="graphic-design">Graphic and Motion Design</a>.
|
||||
</h2>
|
||||
<p></p>
|
||||
|
||||
<a href="#" style="border:none;margin-top:15px;display:flex;justify-content:flex-start;">
|
||||
<div class="linkedin-block">
|
||||
<div class="linkedin-profile-pic-block">
|
||||
<img src="images/Profile-Pic.jpg" alt="" width="40" height="40">
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h3 style="font-size:16px;font-weight:500;color:white;margin:0;">Find me on Linkedin</h3>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="column-50 centered-content" style="perspective:600px;">
|
||||
<div class="face-wrapper" id="my-face-wrapper"> <div id="my-face"></div> </div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/lottie-web/5.7.8/lottie.min.js" integrity="sha512-w58XJ/0dVbEfZVJoJyBUOTMGBWmIW4jEYJSA0898d2L0Ghpum0FvwK7qTuHhkTctApzrchv3Neli+28ajI4+fg==" crossorigin="anonymous"></script>
|
||||
|
||||
<script src="scripts/main.js"></script>
|
||||
|
||||
</body>
|
||||
|
||||
|
||||
|
||||
74
main.css
74
main.css
@ -79,7 +79,7 @@ h2 {
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: 30px;
|
||||
font-size: 24px;
|
||||
margin-top: 0px;
|
||||
margin-bottom: 10px;
|
||||
color: inherit;
|
||||
@ -89,20 +89,10 @@ h3 {
|
||||
}
|
||||
|
||||
h4 {
|
||||
font-size: 24px;
|
||||
margin-top: 0px;
|
||||
margin-bottom: 10px;
|
||||
color: inherit;
|
||||
width: 100%;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
h5 {
|
||||
font-size: 18px;
|
||||
margin-top: 0px;
|
||||
margin-bottom: 10px;
|
||||
color: inherit;
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
line-height: 1.5;
|
||||
}
|
||||
@ -173,6 +163,8 @@ input:focus {
|
||||
width: 100%;
|
||||
max-width: 1200px;
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.column-50 {
|
||||
@ -188,7 +180,10 @@ input:focus {
|
||||
.nav-link-block {
|
||||
font-size: 30px;
|
||||
font-weight: 800;
|
||||
border: none;
|
||||
}
|
||||
|
||||
.nav-link-block:hover {
|
||||
opacity: .5;
|
||||
}
|
||||
|
||||
.navlink-li {
|
||||
@ -233,6 +228,61 @@ input:focus {
|
||||
letter-spacing: -3px;
|
||||
}
|
||||
|
||||
.linkedin-block {
|
||||
padding: 10px 20px 10px 10px;
|
||||
background-color: #0a66c2;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
border-radius: 100px;
|
||||
}
|
||||
|
||||
.linkedin-block:hover {
|
||||
padding: 10px 25px 10px 15px;
|
||||
background-color: #0C529B;
|
||||
}
|
||||
|
||||
.linkedin-profile-pic-block {
|
||||
width: 35px;
|
||||
height: 35px;
|
||||
border-radius: 100px;
|
||||
margin-right: 10px;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border: 3px solid rgba(255,255,255,0.5);
|
||||
}
|
||||
|
||||
#my-face {
|
||||
width: 500px;
|
||||
height: 500px;
|
||||
position: relative;
|
||||
margin-top: -40px;
|
||||
}
|
||||
|
||||
.face-wrapper {
|
||||
width: 500px;
|
||||
height: 500px;
|
||||
position: relative;
|
||||
animation: facehover 3s infinite;
|
||||
animation-timing-function: ease;
|
||||
transform-style: preserve-3d;
|
||||
transition: all .4s ease-out;
|
||||
/* transform: rotate3d(20,-20,0,20deg); rotateX(60deg) rotateY(60deg)*/
|
||||
}
|
||||
|
||||
@keyframes facehover {
|
||||
0% {top:0;}
|
||||
50% {top:5px;}
|
||||
100% {top:0;}
|
||||
}
|
||||
|
||||
.centered-content {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
1
scripts/face.json
Normal file
1
scripts/face.json
Normal file
File diff suppressed because one or more lines are too long
103
scripts/main.js
Normal file
103
scripts/main.js
Normal file
@ -0,0 +1,103 @@
|
||||
var uiUXLink = document.getElementById("ui-ux-design");
|
||||
var webDesignLink = document.getElementById("web-design");
|
||||
var frontentDevLink = document.getElementById("frontend-dev");
|
||||
var graphicDesignLink = document.getElementById("graphic-design");
|
||||
var faceWrapper = document.getElementById("my-face-wrapper");
|
||||
|
||||
lottie.setQuality("low");
|
||||
|
||||
var myFaceContainer = document.getElementById("my-face");
|
||||
|
||||
var myFace = lottie.loadAnimation({
|
||||
container: myFaceContainer,
|
||||
path: "scripts/face.json",
|
||||
renderer: "svg",
|
||||
loop: false,
|
||||
autoplay: false,
|
||||
});
|
||||
|
||||
myFace.setSpeed(1);
|
||||
|
||||
function steadyState() {
|
||||
myFace.playSegments([44, 205], true);
|
||||
myFace.loop = true;
|
||||
}
|
||||
|
||||
var startSteadyState;
|
||||
|
||||
|
||||
|
||||
window.addEventListener("load", () => {
|
||||
myFace.playSegments([0, 50], true);
|
||||
startSteadyState = setTimeout(() => {steadyState();}, 1000);
|
||||
});
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
//--------------------------------------------------------------------------- UI UX
|
||||
uiUXLink.addEventListener("mouseover", () => {
|
||||
clearTimeout(startSteadyState);
|
||||
myFace.loop = false;
|
||||
myFace.playSegments([210, 249], true);
|
||||
faceWrapper.style.transform = "rotate3d(20,-20,0,20deg) translateZ(-50px)";
|
||||
});
|
||||
|
||||
uiUXLink.addEventListener("mouseout", () => {
|
||||
startSteadyState = setTimeout(() => {steadyState();}, 500);
|
||||
faceWrapper.style.transform = "none";
|
||||
});
|
||||
|
||||
//--------------------------------------------------------------------------- Web Design
|
||||
webDesignLink.addEventListener("mouseover", () => {
|
||||
clearTimeout(startSteadyState);
|
||||
myFace.loop = false;
|
||||
myFace.playSegments([210, 249], true);
|
||||
faceWrapper.style.transform = "rotate3d(20,-20,0,20deg) translateZ(-50px)";
|
||||
});
|
||||
|
||||
webDesignLink.addEventListener("mouseout", () => {
|
||||
startSteadyState = setTimeout(() => {steadyState();}, 500);
|
||||
faceWrapper.style.transform = "none";
|
||||
});
|
||||
|
||||
//--------------------------------------------------------------------------- Frontend Dev
|
||||
frontentDevLink.addEventListener("mouseover", () => {
|
||||
clearTimeout(startSteadyState);
|
||||
myFace.loop = false;
|
||||
myFace.playSegments([210, 249], true);
|
||||
faceWrapper.style.transform = "rotate3d(20,-20,0,20deg) translateZ(-50px)";
|
||||
});
|
||||
|
||||
frontentDevLink.addEventListener("mouseout", () => {
|
||||
startSteadyState = setTimeout(() => {steadyState();}, 500);
|
||||
faceWrapper.style.transform = "none";
|
||||
});
|
||||
|
||||
//--------------------------------------------------------------------------- Graphic and Animation Design
|
||||
graphicDesignLink.addEventListener("mouseover", () => {
|
||||
clearTimeout(startSteadyState);
|
||||
myFace.loop = false;
|
||||
myFace.playSegments([210, 249], true);
|
||||
faceWrapper.style.transform = "rotate3d(20,-20,0,20deg) translateZ(-50px)";
|
||||
});
|
||||
|
||||
graphicDesignLink.addEventListener("mouseout", () => {
|
||||
startSteadyState = setTimeout(() => {steadyState();}, 500);
|
||||
faceWrapper.style.transform = "none";
|
||||
});
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user