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

add alt favicon and footer controller

Browse Source
This commit is contained in:
BenjaminToby 2021-06-19 11:03:18 +01:00
parent f7b7690086
commit d61f2c5975
4 changed files with 87 additions and 52 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
images/favicon2.ico Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 797 B

7
index.html
View File

@ -10,7 +10,8 @@
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Tben Design V3</title>
<meta name="description" content="Web/Graphic/Motion Designer, UI UX Designer, Frontend Web Developer">
<link rel="shortcut icon" href="https://www.dropbox.com/s/fftv7ewhi13tisa/favicon.ico?dl=0" type="image/x-icon">
<link rel="shortcut icon" href="https://benjamintoby.github.io/personal_site/images/favicon2.ico"
type="image/x-icon">
<link href="https://fonts.googleapis.com/css?family=Poppins:400,500,600,700,800|Material+Icons" rel="stylesheet">
@ -170,7 +171,7 @@
<!-- #################################################################################-- Contact Me -->
<section class="my-work-section">
<section class="contact-section">
<div>
<h2 class="scroll-into-view-content">So. Let's have a chat</h2>
<p class="scroll-into-view-content">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
@ -212,6 +213,8 @@
</form>
</div>
<div class="contact-section-controller"></div>
</section>

29
main.css
View File

@ -507,7 +507,7 @@ input:focus {
/*############################################################# -- About Me -- */
/*############################################################# -- My Specialties -- */
.my-specialties-section {
justify-content: flex-start;
@ -554,6 +554,33 @@ input:focus {
/*############################################################# -- Contact Me -- */
.contact-section {
position: relative;
}
.contact-section > div:nth-of-type(2) {
background-color: var(--sec-color-1);
}
.contact-section-controller {
width: 100%;
height: 100px;
position: absolute;
bottom: 0;
left: 0;
padding: 0;
}

47
scripts/main.js
View File

@ -13,6 +13,8 @@ const mainCTA = document.querySelector(".main-cta-button");
const allHeaderElements = document.querySelectorAll("header *");
const mountains = document.querySelectorAll("#mountains");
const clouds = document.querySelectorAll("#clouds");
const footerController = document.querySelector(".contact-section-controller");
const header = document.querySelector("header");
function intro() {
@ -29,11 +31,11 @@ function intro() {
anime({
targets: allHeaderElements,
translateX: [-20, 0],
// rotateY: [50, 0],
// rotateY: [50, 0],
opacity: [0, 1],
easing: "easeOutQuad",
duration: 800,
delay: anime.stagger(100, {start: 1000}/* , {easing: 'easeOutQuad'} */),
delay: anime.stagger(100, { start: 1000 }/* , {easing: 'easeOutQuad'} */),
});
anime({
@ -162,8 +164,8 @@ var headerObserver = new IntersectionObserver(changeHeader, windowRect);
function changeHeader(entry) {
if(entry[0].isIntersecting) {
document.querySelector("header").className = "none";
if (entry[0].isIntersecting) {
header.className = "none";
anime({
targets: "header img",
width: 40,
@ -181,7 +183,7 @@ function changeHeader(entry) {
});
} else {
document.querySelector("header").classList.add("scrolled");
header.classList.add("scrolled");
anime({
targets: "header img",
width: 60,
@ -211,7 +213,7 @@ setTimeout(() => {
window.addEventListener("load", () => {
setTimeout(() => {intro();}, 1000);
setTimeout(() => { intro(); }, 1000);
});
@ -235,17 +237,18 @@ var sectionsIO = new IntersectionObserver(sectionsObserverFn, windowRect2);
function sectionsObserverFn(entries) {
entries.forEach(entry => {
if(entry.isIntersecting) {
if (entry.isIntersecting) {
entry.target.classList.add("scrolled-into-view");
headerObserver.observe(footerController);
// anime({
// targets: contents[entry.target.firstElementChild],
// width: [0, "50%"],
// easing: "cubicBezier( 0.93, 0, 0.09, 1 )",
// opacity: [0, 1],
// duration: 1200,
// });
}
// anime({
// targets: contents[entry.target.firstElementChild],
// width: [0, "50%"],
// easing: "cubicBezier( 0.93, 0, 0.09, 1 )",
// opacity: [0, 1],
// duration: 1200,
// });
}
});
}
@ -267,9 +270,9 @@ const contentsIO = new IntersectionObserver(contentsObserverFn, windowRect2);
function contentsObserverFn(entries) {
entries.forEach(entry => {
if(entry.isIntersecting) {
if (entry.isIntersecting) {
entry.target.classList.add("scrolled-into-view-content");
}
}
});
}
@ -293,19 +296,19 @@ const myToolsIconsAnimated = anime({
targets: myToolsIcons,
translateX: [-20, 0],
translateY: [-20, 0],
// rotateY: [50, 0],
// rotateY: [50, 0],
opacity: [0, 1],
easing: "easeOutQuad",
duration: 1200,
delay: anime.stagger(150, {start: 200}),
delay: anime.stagger(150, { start: 200 }),
loop: false,
autoplay: false,
complete: function() { myToolsIconsAnimated.remove(myToolsIcons); },
complete: function () { myToolsIconsAnimated.remove(myToolsIcons); },
});
function myToolsFn(entries) {
if(entries[0].isIntersecting) {
if (entries[0].isIntersecting) {
myToolsIconsAnimated.play();
}
@ -326,6 +329,8 @@ myToolsIO.observe(myToolsParagraph);
//############################################# -- Contact Form
//var form = document.getElementById("my-form");
//
// async function handleSubmit(event) {