personal-site/scripts/main.min.js

const heroTextSection=document.querySelector(".hero-section > div:nth-child(2)");const myImageBlock=document.querySelector(".benjamin-image-block-wrapper");const myBigTextBlock=document.querySelector(".benjamin-big-text-block");const mainTextBlock=document.querySelector(".main-text-block");const mainCTA=document.querySelector(".main-cta-button");const allHeaderElements=document.querySelectorAll("header *:not(header > div)");const mountains=document.querySelector("#mountains");const clouds=document.querySelector("#clouds");const footerController=document.querySelector(".contact-section-controller");const header=document.querySelector("header");const heroTxtGraphic=document.querySelector(".hero-text-section-graphic");function intro(){if(window.innerWidth>800){anime({targets:heroTextSection,width:[0,"50%"],translateX:[200,0],easing:"cubicBezier( 0.93, 0, 0.09, 1 )",duration:1500,delay:1000,})}else if(window.innerWidth<801&&window.innerWidth>600){anime({targets:heroTextSection,width:[0,"60%"],translateX:[200,0],easing:"cubicBezier( 0.93, 0, 0.09, 1 )",duration:1500,delay:1000,})}else if(window.innerWidth<601){anime({targets:heroTextSection,width:[0,"100%"],translateX:[500,0],easing:"cubicBezier( 0.93, 0, 0.09, 1 )",duration:1500,delay:0,})}
anime({targets:allHeaderElements,translateX:[-20,0],opacity:[0,1],easing:"easeOutQuad",duration:800,delay:anime.stagger(100,{start:1000}),});anime({targets:myBigTextBlock,translateY:[100,0],translateZ:50,opacity:[0,1],easing:"cubicBezier( 0.1, 0.63, 0.355, 1 )",duration:1200,delay:2000,});anime({targets:myImageBlock,translateY:[100,0],opacity:[0,1],easing:"cubicBezier( 0.1, 0.63, 0.355, 1 )",duration:1500,delay:2200,});if(window.innerWidth<601){anime({targets:mainTextBlock,translateX:[-50,0],translateZ:[30,0],opacity:[0,1],easing:"cubicBezier( 0.1, 0.63, 0.355, 1 )",duration:1200,delay:2500,})}else{anime({targets:mainTextBlock,translateX:[-50,0],translateZ:[30,15],opacity:[0,1],easing:"cubicBezier( 0.1, 0.63, 0.355, 1 )",duration:1200,delay:2500,})}
anime({targets:mainCTA,translateX:[-50,0],opacity:[0,1],easing:"cubicBezier( 0.1, 0.63, 0.355, 1 )",duration:1200,delay:2600,});if(window.innerWidth>600){anime({targets:mountains,translateY:[200,0],opacity:[0,1],easing:"cubicBezier(0.1, 0.63, 0.355, 1)",duration:1500,delay:1000,})
anime({targets:mountains,left:[0,-50],easing:"easeOutQuad",duration:800,delay:1600,})}
anime({targets:clouds,opacity:[0.2,1],easing:"easeOutQuad",duration:1200,delay:800,})}
function introInit(){if(window.innerWidth<601){anime({targets:heroTextSection,width:[0],translateX:500,duration:0})}else{anime({targets:heroTextSection,width:[0],translateX:200,duration:0})}
anime({targets:allHeaderElements,translateX:[-20],opacity:[0],duration:0});anime({targets:myBigTextBlock,translateY:[100],opacity:[0],duration:0});anime({targets:myImageBlock,translateY:[100],opacity:[0],duration:0});anime({targets:mainTextBlock,translateX:[-50],opacity:[0],duration:0});anime({targets:mainCTA,translateX:[-50],opacity:[0],duration:0});anime({targets:mountains,opacity:0,duration:0})}
introInit();var headerController=document.querySelector("#header-controller");var windowRect={rootMargin:"0px",};var headerObserver=new IntersectionObserver(changeHeader,windowRect);function changeHeader(entry){if(entry[0].isIntersecting){if(window.innerWidth>800){document.querySelectorAll(".nav-link").forEach(item=>{if(entry[0].target.className=="contact-section-controller"){item.style.color="white"}});header.className="none";anime({targets:"header > a > img",width:40,height:100,top:0,duration:400,easing:"easeOutCubic",});anime({targets:"header > a > div",translateX:0,opacity:1,duration:1000,})}}else{if(window.innerWidth>800){document.querySelectorAll(".nav-link").forEach(item=>{if(entry[0].target.className=="contact-section-controller"){item.style.color=""}});header.classList.add("scrolled");anime({targets:"header > a > img",width:60,height:130,top:20,duration:400,easing:"easeOutCubic",})}
anime({targets:"header > a > div",translateX:-50,opacity:0,duration:1000,})}}
window.addEventListener("load",()=>{setTimeout(()=>{intro()},1000);setTimeout(()=>{headerObserver.observe(headerController)},3000);if(window.innerWidth>800){setTimeout(()=>{window.addEventListener("mousemove",parralaxMouse)},4000)}});const sections=document.querySelectorAll(".scroll-into-view");let footerHeaderFn=()=>{headerObserver.observe(footerController)};var windowRect2={rootMargin:"0px 0px -200px 0px",};var sectionsIO=new IntersectionObserver(sectionsObserverFn,windowRect2);function sectionsObserverFn(entries){entries.forEach(entry=>{if(entry.isIntersecting){entry.target.classList.add("scrolled-into-view");if(entry.target.id=="footer-right-section"&&entries[2]){return}
if(window.innerWidth>800){footerHeaderFn()}}})}
sections.forEach(item=>{sectionsIO.observe(item)});const contents=document.querySelectorAll(".scroll-into-view-content");const contentsIO=new IntersectionObserver(contentsObserverFn,{rootMargin:"0px 0px -100px 0px"});const contentsAlt=document.querySelectorAll(".scroll-into-view-content-2");const contentsIOAlt=new IntersectionObserver(contentsObserverFn,{rootMargin:"0px"});function contentsObserverFn(entries){entries.forEach(entry=>{if(entry.isIntersecting){entry.target.animate([{transform:"none",opacity:1,}],{duration:1300,easing:"cubic-bezier(0.1, 0.63, 0.355, 1)",fill:"forwards",delay:(entry.target.dataset.delay),});contentsIO.unobserve(entry.target);contentsIOAlt.unobserve(entry.target)}})}
contents.forEach(item=>{contentsIO.observe(item)});contentsAlt.forEach(item=>{contentsIOAlt.observe(item)});anime({targets:".hero-text-section-graphic img",translateY:[-5,5],easing:"easeInOutQuad",duration:1000,loop:!0,direction:"alternate",});const navSections=document.querySelectorAll("section");const myWorkNavLink=document.querySelector("#my-work-link");const aboutMeNavLink=document.querySelector("#about-me-link");const resumeLink=document.querySelector("#resume-link");const contactMeNavLink=document.querySelector("#contact-me-link");const anchorLinksObserver=new IntersectionObserver(anchorLinksFn,{rootMargin:"0px",threshold:0.75});navSections.forEach(item=>{anchorLinksObserver.observe(item)});function anchorLinksFn(entries){if(entries[3]){return}
entries.forEach(entry=>{myWorkNavLink.classList.remove("active-anchor");aboutMeNavLink.classList.remove("active-anchor");resumeLink.classList.remove("active-anchor");contactMeNavLink.classList.remove("active-anchor");if(entry.target.className=="hero-section"){return}else if(entry.target.className=="my-work-section"){myWorkNavLink.classList.add("active-anchor")}else if(entry.target.className=="about-me-section"){aboutMeNavLink.classList.add("active-anchor")}else if(entry.target.className=="my-specialties-section"){resumeLink.classList.add("active-anchor")}else if(entry.target.className=="contact-section"){contactMeNavLink.classList.add("active-anchor")}else{myWorkNavLink.classList.remove("active-anchor");aboutMeNavLink.classList.remove("active-anchor");resumeLink.classList.remove("active-anchor");contactMeNavLink.classList.remove("active-anchor")}})}
function parralaxMouse(event){let xPos=(event.clientX/window.innerWidth)-0.5;let yPos=(event.clientY/window.innerHeight)-0.5;clouds.animate([{transform:`translateX(${xPos * -10}px) translateY(${yPos * -10}px)`,}],{easing:"ease",fill:"forwards",});mountains.animate([{transform:`translateX(${xPos * -100}px) translateY(${yPos * -20}px)`,}],{easing:"ease",fill:"forwards",direction:"normal"});myImageBlock.animate([{transform:`translateX(${xPos * -30}px) translateY(${yPos * -10}px) rotateX(${yPos * 4}deg) rotateY(${xPos * -3}deg)`,}],{easing:"ease",fill:"forwards",});mainTextBlock.animate([{transform:`translateZ(15px) rotateX(${yPos * 2}deg) rotateY(${xPos * -2}deg)`,}],{easing:"ease-out",fill:"forwards",});heroTxtGraphic.animate([{transform:`translateX(${xPos * -5}px) translateY(${yPos * -5}px) translateZ(10px) rotateX(${yPos * 2}deg) rotateY(${xPos * -2}deg)`,}],{easing:"ease",fill:"forwards",});myBigTextBlock.animate([{transform:`translateX(${xPos * -40}px) translateY(${yPos * -20}px) translateZ(50px) rotateX(${yPos * 4}deg) rotateY(${xPos * -3}deg)`,}],{easing:"ease",fill:"forwards",})}
const uiuxDesignerLinks=document.querySelectorAll(".main-hero-text a");const myImage=document.querySelector(".benjamin-image-block");const myImageOverlay=document.querySelector(".benjamin-image-block-overlay");const serviceDisplay=document.querySelector(".service-display-block");uiuxDesignerLinks.forEach(item=>{item.addEventListener("mouseover",function(event){myImage.style.width="23vw";if(event.target.className=="uiux-designer-link"){myImageOverlay.style.backgroundColor="rgba(237,125,113,0.8)"}else if(event.target.className=="web-designer-link"){myImageOverlay.style.backgroundColor="rgba(117,240,230,0.8)"}else if(event.target.className=="frontend-designer-link"){myImageOverlay.style.backgroundColor="rgba(116,123,239,0.8)"}else if(event.target.className=="graphic-motion-designer-link"){myImageOverlay.style.backgroundColor="rgba(28,55,102,0.8)"}})});uiuxDesignerLinks.forEach(item=>{item.addEventListener("mouseout",function(){myImage.style.transform="none";myImageOverlay.style.backgroundColor="transparent";myImage.style.width="100%"})});const hamburgerButton=document.querySelector(".hamburger-button");const mobileNavWrapper=document.querySelector("header > div:nth-of-type(1)");let a=0;hamburgerButton.addEventListener("click",()=>{if(a==0){mobileNavWrapper.animate([{opacity:0,height:"0px",pointerEvents:"none",transform:"translateZ(50px) translateY(-50px)"},{opacity:1,height:"450px",pointerEvents:"visible",transform:"translateZ(0px) translateY(0px)"}],{fill:"both",duration:600,easing:"cubic-bezier( 0.1, 0.63, 0.355, 1 )"})}else{mobileNavWrapper.animate([{opacity:1,height:"450px",pointerEvents:"visible",transform:"translateZ(0px) translateY(0px)"},{opacity:0,height:"0px",pointerEvents:"none",transform:"translateZ(50px) translateY(-50px)"}],{fill:"both",duration:600,easing:"cubic-bezier( 0.1, 0.63, 0.355, 1 )"});a=-1}
a++});hamburgerButton.addEventListener("blur",()=>{mobileNavWrapper.animate([{opacity:1,height:"450px",pointerEvents:"visible",transform:"translateZ(0px) translateY(0px)"},{opacity:0,height:"0px",pointerEvents:"none",transform:"translateZ(50px) translateY(-50px)"}],{fill:"both",duration:600,easing:"cubic-bezier( 0.1, 0.63, 0.355, 1 )"});a=0})