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

Add main animation, more content, and interactions

Browse Source
This commit is contained in:
BenjaminToby 2021-05-24 23:29:55 +01:00
parent af228dfc91
commit eac0269e97
5 changed files with 201 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
images/Profile-Pic.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.5 KiB

41
index.html
View File

@ -20,7 +20,7 @@
<body><!-- ...................................................................................................................... Body --> <body><!-- ...................................................................................................................... Body -->
<header> <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;"> <nav style="float:right;">
<ul> <ul>
<li class="navlink-li"><a href="#" class="navlink">About Me</a></li> <li class="navlink-li"><a href="#" class="navlink">About Me</a></li>
@ -31,21 +31,50 @@
</nav> </nav>
</header> </header>
<section class="hero-section"> <section class="hero-section">
<div class="container-1200px"> <div class="container-1200px">
<div class="column-50"> <div class="column-50">
<h1>Hi. I'm <span class="my-name">Benjamin Toby</span>&nbsp;.<br>And I design great stuff.</h1> <h1>Hi. I'm <span class="my-name">Benjamin Toby</span>&nbsp;.<br>And I design great stuff.</h1>
<h2 class="hero-subtext"> <h2 class="hero-subtext">
<a href="#" class="hero-content-link">UI UX Design</a>, <a href="#" class="hero-content-link" id="ui-ux-design">UI UX Design</a>,
<a href="#" class="hero-content-link">Web Design</a>, <a href="#" class="hero-content-link" id="web-design">Web Design</a>,
<a href="#" class="hero-content-link">Frontend Web Develpment</a>, <a href="#" class="hero-content-link" id="frontend-dev">Frontend Web Develpment</a>,
<a href="#" class="hero-content-link">Graphic and Motion Design</a>. <a href="#" class="hero-content-link" id="graphic-design">Graphic and Motion Design</a>.
</h2> </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>
</div> </div>
</section> </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> </body>

74
main.css
View File

@ -79,7 +79,7 @@ h2 {
} }
h3 { h3 {
font-size: 30px; font-size: 24px;
margin-top: 0px; margin-top: 0px;
margin-bottom: 10px; margin-bottom: 10px;
color: inherit; color: inherit;
@ -89,20 +89,10 @@ h3 {
} }
h4 { h4 {
font-size: 24px;
margin-top: 0px;
margin-bottom: 10px;
color: inherit;
width: 100%;
line-height: 1.5;
}
h5 {
font-size: 18px; font-size: 18px;
margin-top: 0px; margin-top: 0px;
margin-bottom: 10px; margin-bottom: 10px;
color: inherit; color: inherit;
text-align: center;
width: 100%; width: 100%;
line-height: 1.5; line-height: 1.5;
} }
@ -173,6 +163,8 @@ input:focus {
width: 100%; width: 100%;
max-width: 1200px; max-width: 1200px;
display: flex; display: flex;
align-items: flex-start;
position: relative;
} }
.column-50 { .column-50 {
@ -188,7 +180,10 @@ input:focus {
.nav-link-block { .nav-link-block {
font-size: 30px; font-size: 30px;
font-weight: 800; font-weight: 800;
border: none; }
.nav-link-block:hover {
opacity: .5;
} }
.navlink-li { .navlink-li {
@ -233,6 +228,61 @@ input:focus {
letter-spacing: -3px; 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
View File

File diff suppressed because one or more lines are too long

103
scripts/main.js Normal file
View 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";
});