first deployment site
This commit is contained in:
BenjaminToby
parent
b19e5b64a2
commit
83cdd53187
BIN
docs/Benjamin-Toby-CV.pdf
Normal file
BIN
docs/Benjamin-Toby-CV.pdf
Normal file
Binary file not shown.
BIN
images/Project_GitToAsana_LandingPage_002.jpg
Normal file
BIN
images/Project_GitToAsana_LandingPage_002.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 502 KiB |
BIN
images/my-image-large.jpg
Normal file
BIN
images/my-image-large.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 94 KiB |
12
images/white-arrow.svg
Normal file
12
images/white-arrow.svg
Normal 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>
|
||||
|
After Width: | Height: | Size: 626 B |
165
index.html
165
index.html
@ -16,7 +16,7 @@
|
||||
rel="stylesheet">
|
||||
|
||||
|
||||
<link rel="stylesheet" href="main.min.css">
|
||||
<link rel="stylesheet" href="main.css">
|
||||
|
||||
</head>
|
||||
|
||||
@ -44,17 +44,17 @@
|
||||
<nav>
|
||||
<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="#my-specialties" id="resume-link" class="nav-link">Resume</a>
|
||||
<a href="#contact-me" id="contact-me-link" class="nav-link">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>
|
||||
|
||||
<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 footer-special">Contact Me</a>
|
||||
</nav>
|
||||
</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">
|
||||
<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 -->
|
||||
|
||||
@ -82,10 +95,10 @@
|
||||
<div class="main-text-block">
|
||||
Hi. I’m a
|
||||
<h1 class="main-hero-text">
|
||||
<a href="" class="uiux-designer-link">UI UX Designer</a>,
|
||||
<a href="" class="web-designer-link">Web Designer</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="uiux-designer-link">UI UX Designer</a>,
|
||||
<a href="#" class="web-designer-link">Web Designer</a>,
|
||||
<a href="#" class="frontend-designer-link">Frontend Web Developer</a>,
|
||||
<a href="#" class="graphic-motion-designer-link">Graphic and motion Designer</a>.
|
||||
</h1> <br>
|
||||
<button class="main-cta-button"><a href="#contact-me">Let's Talk</a></button>
|
||||
</div>
|
||||
@ -103,6 +116,10 @@
|
||||
<a href="#my-work">
|
||||
<img src="images/down-arrow.svg" alt="">
|
||||
</a>
|
||||
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -131,13 +148,76 @@
|
||||
<section class="my-work-section" id="my-work">
|
||||
<div>
|
||||
<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
|
||||
elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Quis ipsum suspendisse ultrices
|
||||
gravida. Risus commodo viverra maecenas accumsan lacus vel facilisis. </p>
|
||||
<p class="scroll-into-view-content" data-delay="400">Here are a few of my works: you can find more of my
|
||||
work on my <a href="https://99designs.com/profiles/2220588" target="_blank">99designs</a> profile.</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 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>
|
||||
</section>
|
||||
|
||||
@ -153,13 +233,15 @@
|
||||
|
||||
<section class="about-me-section" id="about-me">
|
||||
<div class="scroll-into-view">
|
||||
<img src="images/my-image-large.jpg" alt="">
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<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
|
||||
tempor incididunt ut labore et dolore magna aliqua. Quis ipsum suspendisse ultrices gravida. Risus
|
||||
commodo viverra maecenas accumsan lacus vel facilisis. </p>
|
||||
<p class="scroll-into-view-content">I've traversed multiple fields over the past decade: from engineering
|
||||
studies, to solar power constructions, to web design, graphic design, 2d animations, and code. Over the
|
||||
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>
|
||||
</section>
|
||||
|
||||
@ -175,68 +257,67 @@
|
||||
|
||||
<section class="my-specialties-section" id="my-specialties">
|
||||
<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
|
||||
tempor incididunt ut labore et dolore magna aliqua. Quis ipsum suspendisse ultrices gravida. Risus commodo
|
||||
viverra maecenas accumsan lacus vel facilisis. </p>
|
||||
<p class="scroll-into-view-content">Ever expanding and ever improving, I have proffesional grade understanding
|
||||
of the tools below. But I don't plan to stop here.</p>
|
||||
|
||||
<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>
|
||||
|
||||
<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>
|
||||
|
||||
<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>
|
||||
|
||||
<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>
|
||||
|
||||
<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>
|
||||
|
||||
<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>
|
||||
|
||||
<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>
|
||||
|
||||
<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>
|
||||
|
||||
<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>
|
||||
|
||||
<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>
|
||||
|
||||
<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>
|
||||
|
||||
<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>
|
||||
|
||||
<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>
|
||||
|
||||
<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>
|
||||
|
||||
<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>
|
||||
</div>
|
||||
@ -258,8 +339,9 @@
|
||||
<div>
|
||||
<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
|
||||
tempor incididunt ut labore et dolore magna aliqua. </p>
|
||||
<p class="scroll-into-view-content">Your business is my business as soon as you hit that contact button. I'm
|
||||
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">
|
||||
Email Address <span class="material-icons">mail</span>
|
||||
</a>
|
||||
@ -303,7 +385,8 @@
|
||||
<!-- #################################################################################-- Scripts -->
|
||||
|
||||
<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>
|
||||
|
||||
|
||||
1
main.min.css
vendored
1
main.min.css
vendored
File diff suppressed because one or more lines are too long
15
scripts/lottie.min.js
vendored
Normal file
15
scripts/lottie.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
627
scripts/main.js
627
scripts/main.js
File diff suppressed because it is too large
Load Diff
17
scripts/main.min.js
vendored
17
scripts/main.min.js
vendored
@ -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
1
scripts/portfolio-item-1.json
Normal file
File diff suppressed because one or more lines are too long
1
scripts/portfolio-item-2.json
Normal file
1
scripts/portfolio-item-2.json
Normal file
File diff suppressed because one or more lines are too long
Loading…
Reference in New Issue
Block a user