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>
|
||||
|
||||
|
||||
460
main.css
460
main.css
@ -67,6 +67,11 @@ header > div:nth-of-type(1) {
|
||||
transform-style: preserve-3d;
|
||||
}
|
||||
|
||||
header > div:nth-of-type(2) {
|
||||
position: relative;
|
||||
transform-style: preserve-3d;
|
||||
}
|
||||
|
||||
header.scrolled {
|
||||
padding: 20px;
|
||||
background-color: white;
|
||||
@ -97,7 +102,7 @@ header > a {
|
||||
color: inherit;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-weight: 900;
|
||||
font-weight: 700;
|
||||
position: relative;
|
||||
perspective: 500px;
|
||||
transform-style: preserve-3d;
|
||||
@ -142,6 +147,7 @@ nav {
|
||||
|
||||
.hamburger-button {
|
||||
width: 40px;
|
||||
min-width: 40px;
|
||||
height: 40px;
|
||||
padding: 10px 0;
|
||||
display: none;
|
||||
@ -254,6 +260,11 @@ p {
|
||||
letter-spacing: .5px;
|
||||
}
|
||||
|
||||
p a {
|
||||
color: var(--main-color);
|
||||
border-bottom: 1px solid var(--main-color);
|
||||
}
|
||||
|
||||
span {
|
||||
font-size: inherit;
|
||||
font-weight: inherit;
|
||||
@ -403,6 +414,45 @@ input:focus {
|
||||
|
||||
|
||||
|
||||
#preloader-container {
|
||||
position: fixed;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
top: 0;
|
||||
left: 0;
|
||||
background-color: #1b239b;
|
||||
z-index: 50000;
|
||||
}
|
||||
|
||||
#preloader-container img:nth-child(1) {
|
||||
min-width: 110%;
|
||||
min-height: 110vh;
|
||||
left: -5%;
|
||||
top: -5%;
|
||||
position: absolute;
|
||||
opacity: .2;
|
||||
}
|
||||
|
||||
#preloader-container img:nth-child(2) {
|
||||
width: 50px;
|
||||
align-self: center;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%,-50%);
|
||||
animation: preloaderanimation 2s ease-in-out infinite normal both;
|
||||
}
|
||||
|
||||
@keyframes preloaderanimation {
|
||||
0%{filter: hue-rotate(0deg);}
|
||||
50%{filter: hue-rotate(90deg);}
|
||||
100%{filter: hue-rotate(0deg);}
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
@ -466,6 +516,7 @@ input:focus {
|
||||
justify-content: flex-end;
|
||||
perspective: 600px;
|
||||
padding-bottom: 30px;
|
||||
transform-style: preserve-3d;
|
||||
}
|
||||
|
||||
.hero-text-section-graphic img, .hero-text-section-graphic a {
|
||||
@ -482,6 +533,37 @@ input:focus {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.hero-text-section-graphic > div:nth-of-type(1) {
|
||||
position: absolute;
|
||||
width: 1vw;
|
||||
height: 1vw;
|
||||
background-color: var(--sec-color-1);
|
||||
top: 30vh;
|
||||
left: -6vw;
|
||||
transform: translateZ(100px) rotate(5deg);
|
||||
}
|
||||
|
||||
.hero-text-section-graphic > div:nth-of-type(2) {
|
||||
position: absolute;
|
||||
width: 2vw;
|
||||
height: 2vw;
|
||||
background-color: var(--sec-color-3);
|
||||
bottom: 30vh;
|
||||
left: -8vw;
|
||||
transform: translateZ(120px) rotate(-25deg);
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
.hero-text-section-graphic > div:nth-of-type(3) {
|
||||
position: absolute;
|
||||
width: 1.5vw;
|
||||
height: 1.5vw;
|
||||
background-color: rgba(99,105,176,0.2);
|
||||
top: 50vh;
|
||||
right: 13vw;
|
||||
transform: translateZ(100px) rotate(-2deg);
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
@ -505,7 +587,7 @@ input:focus {
|
||||
min-height: 110vh;
|
||||
left: -5%;
|
||||
top: -5%;
|
||||
opacity: 0.2;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
#mountains {
|
||||
@ -536,7 +618,7 @@ input:focus {
|
||||
background-size: cover;
|
||||
opacity: .8;
|
||||
transform-style: preserve-3d;
|
||||
transition: all 1s cubic-bezier(0.1, 0.63, 0.355, 1);
|
||||
transition: all .8s cubic-bezier(0.1, 0.63, 0.355, 1);
|
||||
}
|
||||
|
||||
.benjamin-image-block-overlay {
|
||||
@ -550,16 +632,19 @@ input:focus {
|
||||
|
||||
.benjamin-big-text-block {
|
||||
position: absolute;
|
||||
/* width: 500px;
|
||||
height: 300px; */
|
||||
font-size: 10.5vw;
|
||||
bottom: 0px;
|
||||
left: 5%;
|
||||
font-weight: 900;
|
||||
font-weight: 700;
|
||||
line-height: .8;
|
||||
color: white;
|
||||
mix-blend-mode: overlay;
|
||||
filter: drop-shadow(0 0 20px rgba(0,0,0,0.4));
|
||||
padding: 40px;
|
||||
transform-style: preserve-3d;
|
||||
/* background-color: #747bef; */
|
||||
/* transition: all .5s ease; */
|
||||
}
|
||||
|
||||
@ -649,18 +734,19 @@ input:focus {
|
||||
|
||||
}
|
||||
|
||||
.my-work-section > div:nth-child(1) {
|
||||
.my-work-section > div:nth-of-type(1) {
|
||||
color: rgba(0,0,0,0.6);
|
||||
align-items: flex-end;
|
||||
}
|
||||
|
||||
.my-work-section > div:nth-child(2) {
|
||||
.my-work-section > div:nth-of-type(2) {
|
||||
background-color: var(--sec-color-2);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
perspective: 600px;
|
||||
transform-style: preserve-3d;
|
||||
padding: 0;
|
||||
/* width: 20%;*/
|
||||
}
|
||||
|
||||
@ -674,13 +760,152 @@ input:focus {
|
||||
}
|
||||
|
||||
.portfolio-items-container {
|
||||
width: 70%;
|
||||
height: 70%;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
/* background-color: white;
|
||||
box-shadow: 0px 10px 20px -5px rgba(0,0,0,0.2);
|
||||
transform-style: preserve-3d; */
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
perspective: 600px;
|
||||
transform-style: preserve-3d;
|
||||
}
|
||||
|
||||
.portfolio-buttons-container {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.portfolio-buttons-container button {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
background-color: var(--main-color);
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin: 5px;
|
||||
transition: background .3s ease-out;
|
||||
}
|
||||
|
||||
.portfolio-buttons-container button:hover {
|
||||
background-color: var(--dark-color);
|
||||
background-position: -100px 0px;
|
||||
}
|
||||
|
||||
.portfolio-buttons-container button img {
|
||||
width: 15px;
|
||||
height: 15px;
|
||||
}
|
||||
|
||||
.portfolio-right-button {
|
||||
transform: rotate(-90deg);
|
||||
}
|
||||
|
||||
.portfolio-left-button {
|
||||
transform: rotate(90deg);
|
||||
}
|
||||
|
||||
.portfolio-entry {
|
||||
position: absolute;
|
||||
width: 80%;
|
||||
height: 80%;
|
||||
background-color: yellow;
|
||||
overflow: hidden;
|
||||
background-color: white;
|
||||
box-shadow: 0px 10px 20px -5px rgba(0,0,0,0.2);
|
||||
transform-style: preserve-3d;
|
||||
}
|
||||
|
||||
.portfolio-entry > img {
|
||||
width: 100%;
|
||||
position: relative;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.portfolio-entry > div:nth-of-type(1) {
|
||||
width: 90%;
|
||||
padding: 40px 40px 80px 40px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
background-color: rgba(28,55,102,0.9);
|
||||
color: white;
|
||||
position: absolute;
|
||||
z-index: 2000;
|
||||
bottom: 20px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
text-align: center;
|
||||
opacity: 0;
|
||||
transition: all .4s cubic-bezier( 0.1, 0.63, 0.355, 1 );
|
||||
}
|
||||
|
||||
.portfolio-entry:hover > div:nth-of-type(1) {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.portfolio-entry > div:nth-of-type(1) h3, .portfolio-entry div:nth-of-type(1) p {
|
||||
text-align: inherit;
|
||||
}
|
||||
|
||||
.portfolio-entry > div:nth-of-type(1) p {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.portfolio-entry > div:nth-of-type(2) {
|
||||
padding: 10px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
color: white;
|
||||
position: absolute;
|
||||
z-index: 2000;
|
||||
bottom: 10px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
transition: all .4s cubic-bezier( 0.1, 0.63, 0.355, 1 );
|
||||
}
|
||||
|
||||
.portfolio-entry:hover > div:nth-of-type(2) {
|
||||
bottom: 30px;
|
||||
}
|
||||
|
||||
.portfolio-entry:hover .specialty-skill {
|
||||
background-color: var(--sec-color-1);
|
||||
}
|
||||
|
||||
.portfolio-entry:hover .specialty-skill:hover {
|
||||
background-color: rgba(99,105,176,0.6);
|
||||
}
|
||||
|
||||
.portfolio-entry .specialty-skill {
|
||||
background-color: var(--main-color);
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.portfolio-entry .specialty-skill img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
#github-to-asana-animation {
|
||||
width: 250px;
|
||||
height: 400px;
|
||||
filter: drop-shadow(0px 10px 20px rgba(0,0,0,0.2));
|
||||
position: absolute;
|
||||
top: 20px;
|
||||
right: 20px;
|
||||
}
|
||||
|
||||
#github-to-asana > img {
|
||||
width: 80%;
|
||||
box-shadow: 0px 0px 40px -5px rgba(0,0,0,0.2);
|
||||
margin-left: 40px;
|
||||
margin-top: -550px;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
@ -697,7 +922,18 @@ input:focus {
|
||||
|
||||
.about-me-section > div:nth-child(1) {
|
||||
background-color: var(--sec-color-3);
|
||||
/* width: 20%;*/
|
||||
overflow: hidden;
|
||||
padding: 0;
|
||||
align-items: flex-start;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
.about-me-section img {
|
||||
mix-blend-mode: multiply;
|
||||
opacity: 0;
|
||||
position: relative;
|
||||
top: -150px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.about-me-section > div:nth-child(2) p {
|
||||
@ -717,7 +953,8 @@ input:focus {
|
||||
color: white;
|
||||
text-align: center;
|
||||
padding: 150px 80px 120px 80px;
|
||||
height: auto;
|
||||
height: 100vh;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.my-specialties-section h2 {
|
||||
@ -739,7 +976,20 @@ input:focus {
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
.my-specialties-section > div > div {
|
||||
/* .my-specialties-section > div > div {
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
background-color: var(--main-color);
|
||||
margin: 10px;
|
||||
border-radius: 50%;
|
||||
transform-style: preserve-3d;
|
||||
padding: 20px;
|
||||
cursor: pointer;
|
||||
transition: all .8s cubic-bezier(0.075, 0.82, 0.165, 1);
|
||||
position: relative;
|
||||
} */
|
||||
|
||||
.specialty-skill {
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
background-color: var(--main-color);
|
||||
@ -756,6 +1006,10 @@ input:focus {
|
||||
background-color: rgba(99,105,176,0.6);
|
||||
}
|
||||
|
||||
.specialty-skill:hover {
|
||||
background-color: rgba(99,105,176,0.6);
|
||||
}
|
||||
|
||||
.my-specialties-section > div > div:nth-of-type(4) {
|
||||
/* padding: 10px; */
|
||||
}
|
||||
@ -765,7 +1019,23 @@ input:focus {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.my-specialties-section > div > div > div {
|
||||
/* .my-specialties-section > div > div > div {
|
||||
padding: 20px;
|
||||
border-radius: 10px;
|
||||
background-color: var(--sec-color-1);
|
||||
color: white;
|
||||
position: absolute;
|
||||
top: -70px;
|
||||
left: 50%;
|
||||
box-shadow: 0px 10px 20px -5px rgba(0,0,0,0.3);
|
||||
white-space: nowrap;
|
||||
transition: all .4s cubic-bezier(0.075, 0.82, 0.165, 1);
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
transform: translateX(-50%);
|
||||
} */
|
||||
|
||||
.specialty-skill > div {
|
||||
padding: 20px;
|
||||
border-radius: 10px;
|
||||
background-color: var(--sec-color-1);
|
||||
@ -781,7 +1051,12 @@ input:focus {
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
|
||||
.my-specialties-section > div > div:hover > div {
|
||||
/* .my-specialties-section > div > div:hover > div {
|
||||
opacity: 1;
|
||||
top: -80px;
|
||||
} */
|
||||
|
||||
.specialty-skill:hover > div {
|
||||
opacity: 1;
|
||||
top: -80px;
|
||||
}
|
||||
@ -979,7 +1254,7 @@ input:focus {
|
||||
}
|
||||
|
||||
.hero-section > div:nth-child(2) {
|
||||
padding: 140px 30px 60px 60px;
|
||||
padding: 140px 60px 60px 60px;
|
||||
font-size: 36px;
|
||||
}
|
||||
|
||||
@ -992,6 +1267,10 @@ input:focus {
|
||||
width: 40%;
|
||||
}
|
||||
|
||||
.main-text-block {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.main-text-block h1 a {
|
||||
background-position: 0px 60px;
|
||||
}
|
||||
@ -1013,6 +1292,31 @@ input:focus {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.hero-text-section-graphic > div:nth-of-type(1) {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.hero-text-section-graphic > div:nth-of-type(2) {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.hero-text-section-graphic > div:nth-of-type(3) {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.about-me-section > div:nth-child(1) {
|
||||
height: 600px;
|
||||
}
|
||||
|
||||
.about-me-section > div:nth-child(2) {
|
||||
max-height: 600px;
|
||||
}
|
||||
|
||||
.about-me-section img {
|
||||
width: 120%;
|
||||
top: -50px;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
@ -1025,6 +1329,15 @@ input:focus {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
header > a > div {
|
||||
position: absolute;
|
||||
left: 46px;
|
||||
}
|
||||
|
||||
header img:not(#linkedin img) {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
@ -1086,7 +1399,12 @@ input:focus {
|
||||
border-bottom: 2px solid #ddd;
|
||||
z-index: 0;
|
||||
padding-top: 120px;
|
||||
box-shadow: 0px 10px 20px rgba(0,0,0,0.5);
|
||||
box-shadow: 0px 10px 20px rgba(0,0,0,0.1);
|
||||
}
|
||||
|
||||
header > div:nth-of-type(2) {
|
||||
position: relative;
|
||||
transform-style: preserve-3d;
|
||||
}
|
||||
|
||||
|
||||
@ -1110,7 +1428,8 @@ input:focus {
|
||||
|
||||
.hero-text-section-graphic {
|
||||
height: 100%;
|
||||
width: 50%;
|
||||
width: 40%;
|
||||
right: 0;
|
||||
}
|
||||
|
||||
.benjamin-image-block-wrapper {
|
||||
@ -1174,7 +1493,7 @@ input:focus {
|
||||
.my-work-section > div:nth-child(2) {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
padding: 80px;
|
||||
padding: 40px;
|
||||
}
|
||||
|
||||
.my-work-section h2 {
|
||||
@ -1186,7 +1505,20 @@ input:focus {
|
||||
}
|
||||
|
||||
.portfolio-items-container {
|
||||
height: 400px;
|
||||
height: 600px;
|
||||
}
|
||||
|
||||
.portfolio-buttons-container {
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.my-work-section > div:nth-of-type(1) {
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.portfolio-entry {
|
||||
width: 100%;
|
||||
height: 500px;
|
||||
}
|
||||
|
||||
|
||||
@ -1201,7 +1533,16 @@ input:focus {
|
||||
}
|
||||
|
||||
.about-me-section > div:nth-child(1) {
|
||||
height: 500px;
|
||||
height: 600px;
|
||||
}
|
||||
|
||||
.about-me-section > div:nth-child(2) {
|
||||
padding: 60px;
|
||||
}
|
||||
|
||||
.about-me-section img {
|
||||
top: -100px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
|
||||
@ -1318,14 +1659,57 @@ input:focus {
|
||||
/* My work section */
|
||||
|
||||
.my-work-section > div:nth-child(2) {
|
||||
padding: 40px;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.portfolio-items-container {
|
||||
height: 300px;
|
||||
width: 300px;
|
||||
height: 600px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.portfolio-entry > div:nth-of-type(2) {
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.portfolio-entry > div:nth-of-type(1) {
|
||||
padding: 40px 20px 160px 20px;
|
||||
width: 100%;
|
||||
bottom: 0;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
#github-to-asana > img {
|
||||
margin-left: 0px;
|
||||
margin-top: -550px;
|
||||
width: 90%;
|
||||
}
|
||||
|
||||
#github-to-asana-animation {
|
||||
width: 200px;
|
||||
height: 300px;
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
right: 10px;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
.about-me-section > div:nth-child(2) {
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.about-me-section img {
|
||||
top: 0;
|
||||
width: 120%;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
/* Contact Me section */
|
||||
@ -1347,6 +1731,7 @@ input:focus {
|
||||
|
||||
.my-specialties-section {
|
||||
padding: 100px 20px;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
}
|
||||
@ -1408,6 +1793,24 @@ input:focus {
|
||||
height: 70%;
|
||||
}
|
||||
|
||||
header > div:nth-of-type(2) {
|
||||
margin-top: 165px;
|
||||
opacity: 0;
|
||||
border-top: 1px solid #ddd;
|
||||
width: 100%;
|
||||
justify-content: center;
|
||||
padding-top: 15px;
|
||||
}
|
||||
|
||||
header > div:nth-of-type(1) {
|
||||
padding-top: 200px;
|
||||
}
|
||||
|
||||
.hero-text-section-graphic {
|
||||
height: 105%;
|
||||
width: 60%;
|
||||
}
|
||||
|
||||
|
||||
|
||||
}
|
||||
@ -1417,10 +1820,21 @@ input:focus {
|
||||
|
||||
|
||||
|
||||
@media (max-width: 350px) {
|
||||
@media (max-width: 382px) {
|
||||
|
||||
.about-me-section img {
|
||||
width: auto;
|
||||
min-height: 100%;
|
||||
top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@media (max-width: 320px) {
|
||||
|
||||
#github-to-asana > img {
|
||||
width: 120%;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
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
@ -1,25 +1,45 @@
|
||||
|
||||
|
||||
function ben(element) {
|
||||
return document.querySelector(element);
|
||||
};
|
||||
|
||||
function benA(elements) {
|
||||
return document.querySelectorAll(elements);
|
||||
};
|
||||
|
||||
|
||||
//############################################# -- Intro Animations
|
||||
|
||||
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");
|
||||
const preloader = ben("#preloader-container");
|
||||
const heroTextSection = ben(".hero-section > div:nth-child(2)");
|
||||
const myImageBlock = ben(".benjamin-image-block-wrapper");
|
||||
const myBigTextBlock = ben(".benjamin-big-text-block");
|
||||
const mainTextBlock = ben(".main-text-block");
|
||||
const mainCTA = ben(".main-cta-button");
|
||||
const allHeaderElements = benA("header *:not(header > div)");
|
||||
const mountains = ben("#mountains");
|
||||
const clouds = ben("#clouds");
|
||||
const footerController = ben(".contact-section-controller");
|
||||
const header = ben("header");
|
||||
const heroTxtGraphic = ben(".hero-text-section-graphic");
|
||||
const socialLinks = ben("header > div:nth-of-type(2)");
|
||||
// const heroTextGraphics = ben(".hero-text-section-graphic");
|
||||
|
||||
|
||||
function intro() {
|
||||
|
||||
preloader.style.pointerEvents = "none";
|
||||
|
||||
anime({
|
||||
targets: preloader,
|
||||
opacity: 0,
|
||||
// pointerEvents: "none",
|
||||
easing: "easeOutQuad",
|
||||
duration: 1200,
|
||||
delay: 800,
|
||||
});
|
||||
|
||||
if (window.innerWidth > 800) {
|
||||
anime({
|
||||
targets: heroTextSection,
|
||||
@ -110,32 +130,38 @@ function intro() {
|
||||
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: mountains,
|
||||
translateY: [
|
||||
{ value: 200, duration: 0, delay: 0 },
|
||||
{ value: 0, duration: 1500, delay: 1000 }
|
||||
],
|
||||
left: [
|
||||
{ value: 0, duration: 0, delay: 0 },
|
||||
{ value: -50, duration: 800, delay: 1600 },
|
||||
],
|
||||
opacity: [
|
||||
{ value: 0, duration: 0, delay: 0 },
|
||||
{ value: 1, duration: 1500, delay: 1000 },
|
||||
],
|
||||
easing: "cubicBezier(0.1, 0.63, 0.355, 1)",
|
||||
});
|
||||
|
||||
anime({
|
||||
targets: clouds,
|
||||
opacity: [0.2, 1],
|
||||
targets: heroTxtGraphic,
|
||||
opacity: [0, 1],
|
||||
translateZ: [100, 10],
|
||||
easing: "easeOutQuad",
|
||||
duration: 1200,
|
||||
delay: 800,
|
||||
delay: 2000,
|
||||
});
|
||||
|
||||
anime({
|
||||
targets: benA(".hero-text-section-graphic *"),
|
||||
opacity: [0, 1],
|
||||
easing: "easeOutQuad",
|
||||
duration: 800,
|
||||
delay: anime.stagger(300, { start: 3000 }, { easing: 'easeOutQuad' }),
|
||||
});
|
||||
|
||||
}
|
||||
@ -213,7 +239,7 @@ introInit();
|
||||
|
||||
//############################################# -- Header Scroll interactions
|
||||
|
||||
var headerController = document.querySelector("#header-controller");
|
||||
var headerController = ben("#header-controller");
|
||||
var windowRect = {
|
||||
rootMargin: "0px",
|
||||
};
|
||||
@ -225,9 +251,11 @@ function changeHeader(entry) {
|
||||
if (entry[0].isIntersecting) {
|
||||
|
||||
if (window.innerWidth > 800) {
|
||||
document.querySelectorAll(".nav-link").forEach(item => {
|
||||
benA(".nav-link.footer-special").forEach(item => {
|
||||
|
||||
if (entry[0].target.className == "contact-section-controller") { item.style.color = "white"; }
|
||||
if (entry[0].target.className == "contact-section-controller") {
|
||||
item.style.color = "white";
|
||||
}
|
||||
});
|
||||
|
||||
header.className = "none";
|
||||
@ -240,13 +268,21 @@ function changeHeader(entry) {
|
||||
duration: 400,
|
||||
easing: "easeOutCubic",
|
||||
});
|
||||
}
|
||||
|
||||
anime({
|
||||
targets: "header > a > div",
|
||||
translateX: 0,
|
||||
opacity: 1,
|
||||
duration: 1000,
|
||||
});
|
||||
|
||||
if (window.innerWidth < 801 && window.innerWidth > 450) {
|
||||
anime({
|
||||
targets: "header > a > div",
|
||||
translateX: 0,
|
||||
targets: socialLinks,
|
||||
opacity: 1,
|
||||
duration: 1000,
|
||||
easing: "easeOutCubic",
|
||||
duration: 300,
|
||||
});
|
||||
}
|
||||
|
||||
@ -256,7 +292,7 @@ function changeHeader(entry) {
|
||||
|
||||
// if (entry[0].isIntersecting) {
|
||||
|
||||
document.querySelectorAll(".nav-link").forEach(item => {
|
||||
benA(".nav-link.footer-special").forEach(item => {
|
||||
|
||||
if (entry[0].target.className == "contact-section-controller") { item.style.color = ""; }
|
||||
});
|
||||
@ -281,6 +317,15 @@ function changeHeader(entry) {
|
||||
opacity: 0,
|
||||
duration: 1000,
|
||||
});
|
||||
|
||||
if (window.innerWidth < 801 && window.innerWidth > 450) {
|
||||
anime({
|
||||
targets: socialLinks,
|
||||
opacity: 0,
|
||||
easing: "easeOutCubic",
|
||||
duration: 300,
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -313,7 +358,7 @@ window.addEventListener("load", () => {
|
||||
|
||||
//############################################# -- Secitons intersection Observer
|
||||
|
||||
const sections = document.querySelectorAll(".scroll-into-view");
|
||||
const sections = benA(".scroll-into-view");
|
||||
//var sectionContainer = document.querySelector(".my-work-section > div:nth-child(2)");
|
||||
|
||||
let footerHeaderFn = () => { headerObserver.observe(footerController); };
|
||||
@ -350,10 +395,10 @@ sections.forEach(item => {
|
||||
|
||||
//############################################# -- Content intersection Observer
|
||||
|
||||
const contents = document.querySelectorAll(".scroll-into-view-content");
|
||||
const contents = benA(".scroll-into-view-content");
|
||||
const contentsIO = new IntersectionObserver(contentsObserverFn, { rootMargin: "0px 0px -100px 0px" });
|
||||
|
||||
const contentsAlt = document.querySelectorAll(".scroll-into-view-content-2");
|
||||
const contentsAlt = benA(".scroll-into-view-content-2");
|
||||
const contentsIOAlt = new IntersectionObserver(contentsObserverFn, { rootMargin: "0px" });
|
||||
|
||||
function contentsObserverFn(entries) {
|
||||
@ -379,6 +424,31 @@ function contentsObserverFn(entries) {
|
||||
|
||||
}
|
||||
|
||||
const myImageAboutSectionObserver = new IntersectionObserver(contentsObserverAboutImg, { rootMargin: "0px 0px -200px 0px", });
|
||||
const myImageAbout = ben(".about-me-section img");
|
||||
|
||||
function contentsObserverAboutImg(entries) {
|
||||
|
||||
if (entries[0].isIntersecting) {
|
||||
myImageAbout.animate([
|
||||
{
|
||||
transform: "none",
|
||||
opacity: .5,
|
||||
}
|
||||
], {
|
||||
duration: 1300,
|
||||
easing: "cubic-bezier(0.1, 0.63, 0.355, 1)",
|
||||
fill: "forwards",
|
||||
delay: 1000,
|
||||
});
|
||||
|
||||
myImageAboutSectionObserver.unobserve(myImageAbout);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
myImageAboutSectionObserver.observe(myImageAbout);
|
||||
|
||||
|
||||
|
||||
contents.forEach(item => {
|
||||
@ -409,11 +479,11 @@ anime({
|
||||
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 navSections = benA("section");
|
||||
const myWorkNavLink = ben("#my-work-link");
|
||||
const aboutMeNavLink = ben("#about-me-link");
|
||||
const resumeLink = ben("#resume-link");
|
||||
const contactMeNavLink = ben("#contact-me-link");
|
||||
|
||||
const anchorLinksObserver = new IntersectionObserver(anchorLinksFn, { rootMargin: "0px", threshold: 0.75 });
|
||||
|
||||
@ -472,64 +542,126 @@ function parralaxMouse(event) {
|
||||
|
||||
// mountains.style.transition = "all .7s ease";
|
||||
|
||||
clouds.animate([{
|
||||
transform: `translateX(${xPos * -10}px) translateY(${yPos * -10}px)`,
|
||||
}], {
|
||||
easing: "ease",
|
||||
fill: "forwards",
|
||||
// let items = [clouds, mountains, myImageBlock, mainTextBlock, heroTxtGraphic, myBigTextBlock];
|
||||
|
||||
// items.forEach(item => { item.style.transition = "all 1s ease" });
|
||||
|
||||
// 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",
|
||||
// });
|
||||
|
||||
|
||||
anime({
|
||||
targets: mountains,
|
||||
translateX: xPos * -100,
|
||||
translateY: yPos * -20,
|
||||
easing: "easeOutQuad",
|
||||
duration: 700,
|
||||
});
|
||||
|
||||
mountains.animate([{
|
||||
transform: `translateX(${xPos * -100}px) translateY(${yPos * -20}px)`,
|
||||
}], {
|
||||
easing: "ease",
|
||||
fill: "forwards",
|
||||
direction: "normal"
|
||||
anime({
|
||||
targets: clouds,
|
||||
translateX: xPos * -10,
|
||||
translateY: yPos * -10,
|
||||
easing: "easeOutQuad",
|
||||
duration: 500,
|
||||
});
|
||||
|
||||
myImageBlock.animate([{
|
||||
transform: `translateX(${xPos * -30}px) translateY(${yPos * -10}px) rotateX(${yPos * 4}deg) rotateY(${xPos * -3}deg)`,
|
||||
}], {
|
||||
easing: "ease",
|
||||
fill: "forwards",
|
||||
anime({
|
||||
targets: myImageBlock,
|
||||
translateX: xPos * -30,
|
||||
translateY: yPos * -10,
|
||||
easing: "easeOutQuad",
|
||||
duration: 500,
|
||||
rotateX: yPos * 4,
|
||||
rotateY: xPos * -3
|
||||
});
|
||||
|
||||
mainTextBlock.animate([{
|
||||
transform: `translateZ(15px) rotateX(${yPos * 2}deg) rotateY(${xPos * -2}deg)`,
|
||||
}], {
|
||||
easing: "ease-out",
|
||||
fill: "forwards",
|
||||
anime({
|
||||
targets: myBigTextBlock,
|
||||
translateX: xPos * -40,
|
||||
translateY: yPos * -20,
|
||||
translateZ: 50,
|
||||
rotateX: yPos * 4,
|
||||
rotateY: xPos * -3,
|
||||
easing: "easeOutQuad",
|
||||
duration: 500,
|
||||
});
|
||||
|
||||
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",
|
||||
anime({
|
||||
targets: mainTextBlock,
|
||||
translateZ: 15,
|
||||
rotateX: yPos * 2,
|
||||
rotateY: xPos * -2,
|
||||
easing: "easeOutQuad",
|
||||
duration: 300,
|
||||
});
|
||||
|
||||
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",
|
||||
anime({
|
||||
targets: heroTxtGraphic,
|
||||
translateX: xPos * -5,
|
||||
translateY: yPos * -5,
|
||||
translateZ: 10,
|
||||
rotateX: yPos * 2,
|
||||
rotateY: xPos * -2,
|
||||
easing: "easeOutQuad",
|
||||
duration: 300,
|
||||
});
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
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");
|
||||
const uiuxDesignerLinks = benA(".main-hero-text a");
|
||||
const myImage = ben(".benjamin-image-block");
|
||||
const myImageOverlay = ben(".benjamin-image-block-overlay");
|
||||
const serviceDisplay = ben(".service-display-block");
|
||||
|
||||
uiuxDesignerLinks.forEach(item => {
|
||||
|
||||
item.addEventListener("mouseover", function (event) {
|
||||
|
||||
// myImage.style.transform = "rotateX(1deg) rotateY(2deg) rotateZ(-2deg) translateZ(20px) translateX(20px)";
|
||||
myImage.style.width = "23vw";
|
||||
myImage.style.width = "20vw";
|
||||
|
||||
if (event.target.className == "uiux-designer-link") {
|
||||
|
||||
@ -584,51 +716,111 @@ uiuxDesignerLinks.forEach(item => {
|
||||
|
||||
//############################################# -- Mobile hamburger interactrions
|
||||
|
||||
const hamburgerButton = document.querySelector(".hamburger-button");
|
||||
const mobileNavWrapper = document.querySelector("header > div:nth-of-type(1)");
|
||||
const hamburgerButton = ben(".hamburger-button");
|
||||
const mobileNavWrapper = ben("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)"
|
||||
if (window.innerWidth > 449) {
|
||||
|
||||
},
|
||||
{
|
||||
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 )"
|
||||
mobileNavWrapper.animate([
|
||||
{
|
||||
opacity: 0,
|
||||
height: "0px",
|
||||
pointerEvents: "none",
|
||||
transform: "translateZ(50px) translateY(-50px)"
|
||||
},
|
||||
{
|
||||
opacity: 1,
|
||||
height: "350px",
|
||||
pointerEvents: "visible",
|
||||
transform: "translateZ(0px) translateY(0px)"
|
||||
}
|
||||
], {
|
||||
fill: "both",
|
||||
duration: 300,
|
||||
easing: "cubic-bezier( 0.1, 0.63, 0.355, 1 )"
|
||||
});
|
||||
} else {
|
||||
mobileNavWrapper.animate([
|
||||
{
|
||||
opacity: 0,
|
||||
height: "0px",
|
||||
pointerEvents: "none",
|
||||
transform: "translateZ(50px) translateY(-50px)"
|
||||
},
|
||||
{
|
||||
opacity: 1,
|
||||
height: "420px",
|
||||
pointerEvents: "visible",
|
||||
transform: "translateZ(0px) translateY(0px)"
|
||||
}
|
||||
], {
|
||||
fill: "both",
|
||||
duration: 300,
|
||||
easing: "cubic-bezier( 0.1, 0.63, 0.355, 1 )"
|
||||
});
|
||||
}
|
||||
|
||||
anime({
|
||||
targets: socialLinks,
|
||||
opacity: 1,
|
||||
easing: "easeOutCubic",
|
||||
duration: 300,
|
||||
});
|
||||
|
||||
} else {
|
||||
|
||||
if (window.innerWidth > 449) {
|
||||
mobileNavWrapper.animate([
|
||||
{
|
||||
opacity: 1,
|
||||
height: "350px",
|
||||
pointerEvents: "visible",
|
||||
transform: "translateZ(0px) translateY(0px)"
|
||||
|
||||
},
|
||||
{
|
||||
opacity: 0,
|
||||
height: "0px",
|
||||
pointerEvents: "none",
|
||||
transform: "translateZ(50px) translateY(-50px)"
|
||||
}
|
||||
], {
|
||||
fill: "both",
|
||||
duration: 300,
|
||||
easing: "cubic-bezier( 0.1, 0.63, 0.355, 1 )"
|
||||
});
|
||||
} else {
|
||||
mobileNavWrapper.animate([
|
||||
{
|
||||
opacity: 1,
|
||||
height: "420px",
|
||||
pointerEvents: "visible",
|
||||
transform: "translateZ(0px) translateY(0px)"
|
||||
|
||||
},
|
||||
{
|
||||
opacity: 0,
|
||||
height: "0px",
|
||||
pointerEvents: "none",
|
||||
transform: "translateZ(50px) translateY(-50px)"
|
||||
}
|
||||
], {
|
||||
fill: "both",
|
||||
duration: 300,
|
||||
easing: "cubic-bezier( 0.1, 0.63, 0.355, 1 )"
|
||||
});
|
||||
}
|
||||
|
||||
anime({
|
||||
targets: socialLinks,
|
||||
opacity: 0,
|
||||
easing: "easeOutCubic",
|
||||
duration: 300,
|
||||
});
|
||||
|
||||
a = -1;
|
||||
@ -642,27 +834,61 @@ hamburgerButton.addEventListener("click", () => {
|
||||
|
||||
hamburgerButton.addEventListener("blur", () => {
|
||||
|
||||
mobileNavWrapper.animate([
|
||||
{
|
||||
opacity: 1,
|
||||
height: "450px",
|
||||
pointerEvents: "visible",
|
||||
transform: "translateZ(0px) translateY(0px)"
|
||||
if (a == 1) {
|
||||
|
||||
},
|
||||
{
|
||||
opacity: 0,
|
||||
height: "0px",
|
||||
pointerEvents: "none",
|
||||
transform: "translateZ(50px) translateY(-50px)"
|
||||
if (window.innerWidth > 449) {
|
||||
|
||||
mobileNavWrapper.animate([
|
||||
{
|
||||
opacity: 1,
|
||||
height: "350px",
|
||||
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 )"
|
||||
});
|
||||
|
||||
} else {
|
||||
mobileNavWrapper.animate([
|
||||
{
|
||||
opacity: 1,
|
||||
height: "420px",
|
||||
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 )"
|
||||
});
|
||||
}
|
||||
], {
|
||||
fill: "both",
|
||||
duration: 600,
|
||||
easing: "cubic-bezier( 0.1, 0.63, 0.355, 1 )"
|
||||
});
|
||||
|
||||
a = 0;
|
||||
anime({
|
||||
targets: socialLinks,
|
||||
opacity: 0,
|
||||
easing: "easeOutCubic",
|
||||
duration: 300,
|
||||
});
|
||||
|
||||
a = 0;
|
||||
}
|
||||
|
||||
// mobileNavWrapper.style.opacity = "1"
|
||||
});
|
||||
@ -675,6 +901,125 @@ hamburgerButton.addEventListener("blur", () => {
|
||||
|
||||
|
||||
|
||||
ben(".my-specialties-section button").addEventListener("click", () => {
|
||||
window.location = "docs/Benjamin-Toby-CV.pdf";
|
||||
});
|
||||
|
||||
|
||||
|
||||
|
||||
//############################################# -- My Work Slider
|
||||
|
||||
const portfolioContainter = ben(".portfolio-items-container");
|
||||
const portfolioEntries = benA(".portfolio-entry");
|
||||
const portfolioLeftButton = ben(".portfolio-left-button");
|
||||
const portfolioRightButton = ben(".portfolio-right-button");
|
||||
|
||||
let p = 0;
|
||||
|
||||
function portfolioClickEvents() {
|
||||
|
||||
// anime({
|
||||
// targets: portfolioEntries,
|
||||
// opacity: [1, 0],
|
||||
// translateZ: [0, -50],
|
||||
// duration: 300,
|
||||
// easing: "cubic-bezier( 0.1, 0.63, 0.355, 1 )"
|
||||
// });
|
||||
|
||||
if (p == 0) {
|
||||
portfolioLeftButton.style.opacity = ".2";
|
||||
} else if (p == (portfolioEntries.length - 1)) {
|
||||
portfolioRightButton.style.opacity = ".2";
|
||||
}
|
||||
|
||||
|
||||
portfolioEntries.forEach(entry => {
|
||||
// entry.style.opacity = "0";
|
||||
|
||||
entry.animate([
|
||||
{ opacity: 0, transform: "translateZ(-50px)", pointerEvents: "none" }
|
||||
], {
|
||||
duration: 500,
|
||||
fill: "both",
|
||||
easing: "cubic-bezier( 0.1, 0.63, 0.355, 1 )"
|
||||
});
|
||||
});
|
||||
|
||||
// portfolioEntries[p].style.opacity = "1";
|
||||
// anime({
|
||||
// targets: (portfolioEntries[p]),
|
||||
// opacity: [0, 1],
|
||||
// translateZ: [-50, 0],
|
||||
// duration: 300,
|
||||
// easing: "cubic-bezier( 0.1, 0.63, 0.355, 1 )",
|
||||
// delay: 200,
|
||||
// });
|
||||
|
||||
portfolioEntries[p].animate([
|
||||
{ opacity: 1, transform: "translateZ(0px)", pointerEvents: "visible" }
|
||||
], {
|
||||
duration: 500,
|
||||
fill: "both",
|
||||
delay: 200,
|
||||
easing: "cubic-bezier( 0.1, 0.63, 0.355, 1 )"
|
||||
});
|
||||
}
|
||||
|
||||
portfolioClickEvents();
|
||||
portfolioLeftButton.style.opacity = ".2";
|
||||
|
||||
portfolioRightButton.addEventListener("click", () => {
|
||||
if (p == (portfolioEntries.length - 1)) { return; };
|
||||
p++;
|
||||
portfolioClickEvents();
|
||||
portfolioLeftButton.style.opacity = "1";
|
||||
});
|
||||
|
||||
portfolioLeftButton.addEventListener("click", () => {
|
||||
if (p == 0) { return; };
|
||||
p--;
|
||||
portfolioClickEvents();
|
||||
portfolioRightButton.style.opacity = "1";
|
||||
});
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
//############################################# -- Lottie Animations
|
||||
|
||||
const portfolioEntry1 = ben("#transcend-barriers");
|
||||
const portfolioEntry2 = ben("#github-to-asana-animation");
|
||||
|
||||
const portfolioEntry1Animation = lottie.loadAnimation({
|
||||
container: portfolioEntry1,
|
||||
renderer: 'svg',
|
||||
loop: true,
|
||||
autoplay: true,
|
||||
path: "scripts/portfolio-item-1.json"
|
||||
});
|
||||
|
||||
const portfolioEntry2Animation = lottie.loadAnimation({
|
||||
container: portfolioEntry2,
|
||||
renderer: 'svg',
|
||||
loop: true,
|
||||
autoplay: true,
|
||||
path: "scripts/portfolio-item-2.json"
|
||||
});
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
@ -682,5 +1027,3 @@ hamburgerButton.addEventListener("blur", () => {
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
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