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

first deployment site

Browse Source
This commit is contained in:
BenjaminToby 2021-07-02 06:13:23 +01:00
parent b19e5b64a2
commit 83cdd53187
12 changed files with 1078 additions and 227 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
docs/Benjamin-Toby-CV.pdf Normal file
View File

Binary file not shown.

BIN
images/Project_GitToAsana_LandingPage_002.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 502 KiB

BIN
images/my-image-large.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 94 KiB

12
images/white-arrow.svg Normal file
View File

@ -0,0 +1,12 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 25.3.1, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 30 30" style="enable-background:new 0 0 30 30;" xml:space="preserve">
<style type="text/css">
.st0{fill:#FFFFFF;}
</style>
<g>
<path class="st0" d="M28.6,13.4l-11,9.4c-0.7,0.6-1.7,0.9-2.6,0.9c-0.9,0-1.8-0.3-2.6-0.9l-11-9.4C-0.3,12-0.5,9.4,1,7.7
C2.4,6,5,5.8,6.6,7.2l8.4,7.2l8.4-7.2C25.1,5.8,27.6,6,29,7.7C30.5,9.4,30.3,12,28.6,13.4z"/>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 626 B

165
index.html
View File

@ -16,7 +16,7 @@
rel="stylesheet"> rel="stylesheet">
<link rel="stylesheet" href="main.min.css"> <link rel="stylesheet" href="main.css">
</head> </head>
@ -44,17 +44,17 @@
<nav> <nav>
<a href="#my-work" id="my-work-link" class="nav-link">My Work</a> <a href="#my-work" id="my-work-link" class="nav-link">My Work</a>
<a href="#about-me" id="about-me-link" class="nav-link">About Me</a> <a href="#about-me" id="about-me-link" class="nav-link">About Me</a>
<a href="#my-specialties" id="resume-link" class="nav-link">Resume</a> <a href="#my-specialties" id="resume-link" class="nav-link footer-special">Resume</a>
<a href="#contact-me" id="contact-me-link" class="nav-link">Contact Me</a> <a href="#contact-me" id="contact-me-link" class="nav-link footer-special">Contact Me</a>
<div style="display: flex;align-items: center;">
<a href="mailto:benoti.san@gmail.com" class="social-media-links material-icons" id="mail">mail</a>
<a href="#" class="social-media-links material-icons" id="linkedin"><img src="images/linkedin.svg"
alt=""></a>
</div>
</nav> </nav>
</div> </div>
<div style="display: flex;align-items: center;">
<a href="mailto:benoti.san@gmail.com" class="social-media-links material-icons" id="mail">mail</a>
<a href="https://linkedin.com/in/benjamin-toby" class="social-media-links material-icons" id="linkedin"
target="_blank"><img src="images/linkedin.svg" alt=""></a>
</div>
<button class="hamburger-button"> <button class="hamburger-button">
<div></div> <div></div>
<div></div> <div></div>
@ -72,6 +72,19 @@
<!-- #################################################################################-- Preloader -->
<div id="preloader-container">
<img src="images/clouds.jpg" alt="">
<img src="images/logo-v3.svg" alt="">
</div>
<!-- #################################################################################-- Hero --> <!-- #################################################################################-- Hero -->
@ -82,10 +95,10 @@
<div class="main-text-block"> <div class="main-text-block">
Hi. I’m a Hi. I’m a
<h1 class="main-hero-text"> <h1 class="main-hero-text">
<a href="" class="uiux-designer-link">UI UX Designer</a>, <a href="#" class="uiux-designer-link">UI UX Designer</a>,
<a href="" class="web-designer-link">Web Designer</a>, <a href="#" class="web-designer-link">Web Designer</a>,
<a href="" class="frontend-designer-link">Frontend Web Developer</a>, <a href="#" class="frontend-designer-link">Frontend Web Developer</a>,
<a href="" class="graphic-motion-designer-link">Graphic and motion Designer</a>. <a href="#" class="graphic-motion-designer-link">Graphic and motion Designer</a>.
</h1> <br> </h1> <br>
<button class="main-cta-button"><a href="#contact-me">Let's Talk</a></button> <button class="main-cta-button"><a href="#contact-me">Let's Talk</a></button>
</div> </div>
@ -103,6 +116,10 @@
<a href="#my-work"> <a href="#my-work">
<img src="images/down-arrow.svg" alt=""> <img src="images/down-arrow.svg" alt="">
</a> </a>
<div></div>
<div></div>
<div></div>
</div> </div>
</div> </div>
@ -131,13 +148,76 @@
<section class="my-work-section" id="my-work"> <section class="my-work-section" id="my-work">
<div> <div>
<h2 class="scroll-into-view-content" data-delay="200">Some of My Work</h2> <h2 class="scroll-into-view-content" data-delay="200">Some of My Work</h2>
<p class="scroll-into-view-content" data-delay="400">Lorem ipsum dolor sit amet, consectetur adipiscing <p class="scroll-into-view-content" data-delay="400">Here are a few of my works: you can find more of my
elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Quis ipsum suspendisse ultrices work on my <a href="https://99designs.com/profiles/2220588" target="_blank">99designs</a> profile.</p>
gravida. Risus commodo viverra maecenas accumsan lacus vel facilisis. </p> <div class="portfolio-buttons-container">
<button class="portfolio-left-button"><img src="images/white-arrow.svg" alt=""></button>
<button class="portfolio-right-button"><img src="images/white-arrow.svg" alt=""></button>
</div>
</div> </div>
<div class="scroll-into-view"> <div class="scroll-into-view">
<div class="portfolio-items-container scroll-into-view-content" data-delay="800"></div> <div class="portfolio-items-container scroll-into-view-content" data-delay="800">
<!-- Porfolio entry -->
<div class="portfolio-entry" id="transcend-barriers">
<!-- <img src="images/my-image-large.jpg" alt=""> -->
<div>
<h3>Transcend Barriers Animation</h3>
<p>This animations was made for web view. I used aftereffects and bodymoving to accomplish this:
the result? High definition svg anmimation that looks crisp on any resolution and maintains
a relatively light weight</p>
</div>
<div>
<div class="specialty-skill">
<div>Adobe Illustrator</div><img src="images/illustrator.svg" alt="">
</div>
<div class="specialty-skill">
<div>Adobe After Effects</div><img src="images/aftereffects.svg" alt="">
</div>
<div class="specialty-skill">
<div>javascript</div><img src="images/javascript.svg" alt="">
</div>
</div>
</div>
<!-- Porfolio entry -->
<div class="portfolio-entry" id="github-to-asana">
<!-- <img src="images/mountains.png" alt=""> -->
<div>
<h3>Github to Asana</h3>
<p>This project is an ongoing webapp that connects github to asana. In this project I'm focusing
on the UI/UX, together with frontend functionality.</p>
</div>
<div>
<div class="specialty-skill">
<div>Adobe Photoshop</div><img src="images/photoshop.svg" alt="">
</div>
<div class="specialty-skill">
<div>Adobe Illustrator</div><img src="images/illustrator.svg" alt="">
</div>
<div class="specialty-skill">
<div>Adobe After Effects</div><img src="images/aftereffects.svg" alt="">
</div>
<div class="specialty-skill">
<div>HTML5</div><img src="images/html5.svg" alt="">
</div>
<div class="specialty-skill">
<div>CSS3</div><img src="images/css3.svg" alt="">
</div>
<div class="specialty-skill">
<div>javascript</div><img src="images/javascript.svg" alt="">
</div>
<div class="specialty-skill">
<div>Git version control</div><img src="images/git-version-control.svg" alt="">
</div>
</div>
<img src="images/Project_GitToAsana_LandingPage_002.jpg" alt="">
<div id="github-to-asana-animation"></div>
</div>
</div>
</div> </div>
</section> </section>
@ -153,13 +233,15 @@
<section class="about-me-section" id="about-me"> <section class="about-me-section" id="about-me">
<div class="scroll-into-view"> <div class="scroll-into-view">
<img src="images/my-image-large.jpg" alt="">
</div> </div>
<div> <div>
<h2 class="scroll-into-view-content">About Me</h2> <h2 class="scroll-into-view-content">About Me</h2>
<p class="scroll-into-view-content">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod <p class="scroll-into-view-content">I've traversed multiple fields over the past decade: from engineering
tempor incididunt ut labore et dolore magna aliqua. Quis ipsum suspendisse ultrices gravida. Risus studies, to solar power constructions, to web design, graphic design, 2d animations, and code. Over the
commodo viverra maecenas accumsan lacus vel facilisis. </p> years I've learnt the best skill: which is learnability and adaptability: hence I aim to cut across many
different fields: the world changes fast, and I think this is the only skill that matters.</p>
</div> </div>
</section> </section>
@ -175,68 +257,67 @@
<section class="my-specialties-section" id="my-specialties"> <section class="my-specialties-section" id="my-specialties">
<h2 class="scroll-into-view-content">My Tools For Creating Awesomeness</h2> <h2 class="scroll-into-view-content">My Tools For Creating Awesomeness</h2>
<p class="scroll-into-view-content">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod <p class="scroll-into-view-content">Ever expanding and ever improving, I have proffesional grade understanding
tempor incididunt ut labore et dolore magna aliqua. Quis ipsum suspendisse ultrices gravida. Risus commodo of the tools below. But I don't plan to stop here.</p>
viverra maecenas accumsan lacus vel facilisis. </p>
<div> <div>
<div class="scroll-into-view-content" data-delay="0"> <div class="specialty-skill scroll-into-view-content" data-delay="0">
<div>Adobe Photoshop</div><img src="images/photoshop.svg" alt=""> <div>Adobe Photoshop</div><img src="images/photoshop.svg" alt="">
</div> </div>
<div class="scroll-into-view-content" data-delay="100"> <div class="specialty-skill scroll-into-view-content" data-delay="100">
<div>Adobe Illustrator</div><img src="images/illustrator.svg" alt=""> <div>Adobe Illustrator</div><img src="images/illustrator.svg" alt="">
</div> </div>
<div class="scroll-into-view-content" data-delay="200"> <div class="specialty-skill scroll-into-view-content" data-delay="200">
<div>Adobe After Effects</div><img src="images/aftereffects.svg" alt=""> <div>Adobe After Effects</div><img src="images/aftereffects.svg" alt="">
</div> </div>
<div class="scroll-into-view-content" data-delay="300"> <div class="specialty-skill scroll-into-view-content" data-delay="300">
<div>HTML 5</div><img src="images/html5.svg" alt=""> <div>HTML 5</div><img src="images/html5.svg" alt="">
</div> </div>
<div class="scroll-into-view-content" data-delay="400"> <div class="specialty-skill scroll-into-view-content" data-delay="400">
<div>CSS3</div><img src="images/css3.svg" alt=""> <div>CSS3</div><img src="images/css3.svg" alt="">
</div> </div>
<div class="scroll-into-view-content" data-delay="500"> <div class="specialty-skill scroll-into-view-content" data-delay="500">
<div>javascript</div><img src="images/javascript.svg" alt=""> <div>javascript</div><img src="images/javascript.svg" alt="">
</div> </div>
<div class="scroll-into-view-content" data-delay="600"> <div class="specialty-skill scroll-into-view-content" data-delay="600">
<div>Git Version Control</div><img src="images/git-version-control.svg" alt=""> <div>Git Version Control</div><img src="images/git-version-control.svg" alt="">
</div> </div>
<div class="scroll-into-view-content" data-delay="700"> <div class="specialty-skill scroll-into-view-content" data-delay="700">
<div>Figma</div><img src="images/figma.svg" alt=""> <div>Figma</div><img src="images/figma.svg" alt="">
</div> </div>
<div class="scroll-into-view-content" data-delay="800"> <div class="specialty-skill scroll-into-view-content" data-delay="800">
<div>Wordpress</div><img src="images/wordpress.svg" alt=""> <div>Wordpress</div><img src="images/wordpress.svg" alt="">
</div> </div>
<div class="scroll-into-view-content-2" data-delay="900"> <div class="specialty-skill scroll-into-view-content-2" data-delay="900">
<div>Webflow</div><img src="images/webflow.svg" alt=""> <div>Webflow</div><img src="images/webflow.svg" alt="">
</div> </div>
<div class="scroll-into-view-content-2" data-delay="1000"> <div class="specialty-skill scroll-into-view-content-2" data-delay="1000">
<div>Adobe XD</div><img src="images/adobe-xd.svg" alt=""> <div>Adobe XD</div><img src="images/adobe-xd.svg" alt="">
</div> </div>
<div class="scroll-into-view-content-2" data-delay="1100"> <div class="specialty-skill scroll-into-view-content-2" data-delay="1100">
<div>Visual Studio Code</div><img src="images/vs-code.svg" alt=""> <div>Visual Studio Code</div><img src="images/vs-code.svg" alt="">
</div> </div>
<div class="scroll-into-view-content-2" data-delay="1200"> <div class="specialty-skill scroll-into-view-content-2" data-delay="1200">
<div>Dreamweaver</div><img src="images/dreamweaver.svg" alt=""> <div>Dreamweaver</div><img src="images/dreamweaver.svg" alt="">
</div> </div>
<div class="scroll-into-view-content-2" data-delay="1300"> <div class="specialty-skill scroll-into-view-content-2" data-delay="1300">
<div>Adobe Animate</div><img src="images/adobe animate.svg" alt=""> <div>Adobe Animate</div><img src="images/adobe animate.svg" alt="">
</div> </div>
<div class="scroll-into-view-content-2" data-delay="1400"> <div class="specialty-skill scroll-into-view-content-2" data-delay="1400">
<div>Affinity Photo and Affinity Designer</div><img src="images/affinity.svg" alt=""> <div>Affinity Photo and Affinity Designer</div><img src="images/affinity.svg" alt="">
</div> </div>
</div> </div>
@ -258,8 +339,9 @@
<div> <div>
<h2 class="scroll-into-view-content">So. Let's talk</h2> <h2 class="scroll-into-view-content">So. Let's talk</h2>
<p class="scroll-into-view-content">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod <p class="scroll-into-view-content">Your business is my business as soon as you hit that contact button. I'm
tempor incididunt ut labore et dolore magna aliqua. </p> ready
to attend to your needs as soon as possible. Just drop a line.</p>
<a href="mailto:benoti.san@gmail.com" class="scroll-into-view-content-2" data-delay="500"> <a href="mailto:benoti.san@gmail.com" class="scroll-into-view-content-2" data-delay="500">
Email Address&nbsp;<span class="material-icons">mail</span> Email Address&nbsp;<span class="material-icons">mail</span>
</a> </a>
@ -303,7 +385,8 @@
<!-- #################################################################################-- Scripts --> <!-- #################################################################################-- Scripts -->
<script src="scripts/anime.min.js"></script> <script src="scripts/anime.min.js"></script>
<script src="scripts/main.min.js"></script> <script src="scripts/lottie.min.js"></script>
<script src="scripts/main.js"></script>
</body> </body>

466
main.css
View File

File diff suppressed because it is too large Load Diff

1
main.min.css vendored
View File

File diff suppressed because one or more lines are too long

15
scripts/lottie.min.js vendored Normal file
View File

File diff suppressed because one or more lines are too long

627
scripts/main.js
View File

File diff suppressed because it is too large Load Diff

17
scripts/main.min.js vendored
View File

@ -1,17 +0,0 @@
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})

1
scripts/portfolio-item-1.json Normal file
View File

File diff suppressed because one or more lines are too long

1
scripts/portfolio-item-2.json Normal file
View File

File diff suppressed because one or more lines are too long