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 |
163
index.html
163
index.html
@ -16,7 +16,7 @@
|
|||||||
rel="stylesheet">
|
rel="stylesheet">
|
||||||
|
|
||||||
|
|
||||||
<link rel="stylesheet" href="main.min.css">
|
<link rel="stylesheet" href="main.css">
|
||||||
|
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
@ -44,15 +44,15 @@
|
|||||||
<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;">
|
</nav>
|
||||||
<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>
|
</div>
|
||||||
|
|
||||||
</nav>
|
<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>
|
</div>
|
||||||
|
|
||||||
<button class="hamburger-button">
|
<button class="hamburger-button">
|
||||||
@ -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 <span class="material-icons">mail</span>
|
Email Address <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>
|
||||||
|
|
||||||
|
|||||||
460
main.css
460
main.css
@ -67,6 +67,11 @@ header > div:nth-of-type(1) {
|
|||||||
transform-style: preserve-3d;
|
transform-style: preserve-3d;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
header > div:nth-of-type(2) {
|
||||||
|
position: relative;
|
||||||
|
transform-style: preserve-3d;
|
||||||
|
}
|
||||||
|
|
||||||
header.scrolled {
|
header.scrolled {
|
||||||
padding: 20px;
|
padding: 20px;
|
||||||
background-color: white;
|
background-color: white;
|
||||||
@ -97,7 +102,7 @@ header > a {
|
|||||||
color: inherit;
|
color: inherit;
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
font-weight: 900;
|
font-weight: 700;
|
||||||
position: relative;
|
position: relative;
|
||||||
perspective: 500px;
|
perspective: 500px;
|
||||||
transform-style: preserve-3d;
|
transform-style: preserve-3d;
|
||||||
@ -142,6 +147,7 @@ nav {
|
|||||||
|
|
||||||
.hamburger-button {
|
.hamburger-button {
|
||||||
width: 40px;
|
width: 40px;
|
||||||
|
min-width: 40px;
|
||||||
height: 40px;
|
height: 40px;
|
||||||
padding: 10px 0;
|
padding: 10px 0;
|
||||||
display: none;
|
display: none;
|
||||||
@ -254,6 +260,11 @@ p {
|
|||||||
letter-spacing: .5px;
|
letter-spacing: .5px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
p a {
|
||||||
|
color: var(--main-color);
|
||||||
|
border-bottom: 1px solid var(--main-color);
|
||||||
|
}
|
||||||
|
|
||||||
span {
|
span {
|
||||||
font-size: inherit;
|
font-size: inherit;
|
||||||
font-weight: 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;
|
justify-content: flex-end;
|
||||||
perspective: 600px;
|
perspective: 600px;
|
||||||
padding-bottom: 30px;
|
padding-bottom: 30px;
|
||||||
|
transform-style: preserve-3d;
|
||||||
}
|
}
|
||||||
|
|
||||||
.hero-text-section-graphic img, .hero-text-section-graphic a {
|
.hero-text-section-graphic img, .hero-text-section-graphic a {
|
||||||
@ -482,6 +533,37 @@ input:focus {
|
|||||||
width: 100%;
|
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;
|
min-height: 110vh;
|
||||||
left: -5%;
|
left: -5%;
|
||||||
top: -5%;
|
top: -5%;
|
||||||
opacity: 0.2;
|
opacity: 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
#mountains {
|
#mountains {
|
||||||
@ -536,7 +618,7 @@ input:focus {
|
|||||||
background-size: cover;
|
background-size: cover;
|
||||||
opacity: .8;
|
opacity: .8;
|
||||||
transform-style: preserve-3d;
|
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 {
|
.benjamin-image-block-overlay {
|
||||||
@ -550,16 +632,19 @@ input:focus {
|
|||||||
|
|
||||||
.benjamin-big-text-block {
|
.benjamin-big-text-block {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
|
/* width: 500px;
|
||||||
|
height: 300px; */
|
||||||
font-size: 10.5vw;
|
font-size: 10.5vw;
|
||||||
bottom: 0px;
|
bottom: 0px;
|
||||||
left: 5%;
|
left: 5%;
|
||||||
font-weight: 900;
|
font-weight: 700;
|
||||||
line-height: .8;
|
line-height: .8;
|
||||||
color: white;
|
color: white;
|
||||||
mix-blend-mode: overlay;
|
mix-blend-mode: overlay;
|
||||||
filter: drop-shadow(0 0 20px rgba(0,0,0,0.4));
|
filter: drop-shadow(0 0 20px rgba(0,0,0,0.4));
|
||||||
padding: 40px;
|
padding: 40px;
|
||||||
transform-style: preserve-3d;
|
transform-style: preserve-3d;
|
||||||
|
/* background-color: #747bef; */
|
||||||
/* transition: all .5s ease; */
|
/* 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);
|
color: rgba(0,0,0,0.6);
|
||||||
align-items: flex-end;
|
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);
|
background-color: var(--sec-color-2);
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
perspective: 600px;
|
perspective: 600px;
|
||||||
transform-style: preserve-3d;
|
transform-style: preserve-3d;
|
||||||
|
padding: 0;
|
||||||
/* width: 20%;*/
|
/* width: 20%;*/
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -674,13 +760,152 @@ input:focus {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.portfolio-items-container {
|
.portfolio-items-container {
|
||||||
width: 70%;
|
width: 100%;
|
||||||
height: 70%;
|
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;
|
background-color: white;
|
||||||
box-shadow: 0px 10px 20px -5px rgba(0,0,0,0.2);
|
box-shadow: 0px 10px 20px -5px rgba(0,0,0,0.2);
|
||||||
transform-style: preserve-3d;
|
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) {
|
.about-me-section > div:nth-child(1) {
|
||||||
background-color: var(--sec-color-3);
|
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 {
|
.about-me-section > div:nth-child(2) p {
|
||||||
@ -717,7 +953,8 @@ input:focus {
|
|||||||
color: white;
|
color: white;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
padding: 150px 80px 120px 80px;
|
padding: 150px 80px 120px 80px;
|
||||||
height: auto;
|
height: 100vh;
|
||||||
|
justify-content: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
.my-specialties-section h2 {
|
.my-specialties-section h2 {
|
||||||
@ -739,7 +976,20 @@ input:focus {
|
|||||||
margin-bottom: 30px;
|
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;
|
width: 80px;
|
||||||
height: 80px;
|
height: 80px;
|
||||||
background-color: var(--main-color);
|
background-color: var(--main-color);
|
||||||
@ -756,6 +1006,10 @@ input:focus {
|
|||||||
background-color: rgba(99,105,176,0.6);
|
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) {
|
.my-specialties-section > div > div:nth-of-type(4) {
|
||||||
/* padding: 10px; */
|
/* padding: 10px; */
|
||||||
}
|
}
|
||||||
@ -765,7 +1019,23 @@ input:focus {
|
|||||||
height: 100%;
|
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;
|
padding: 20px;
|
||||||
border-radius: 10px;
|
border-radius: 10px;
|
||||||
background-color: var(--sec-color-1);
|
background-color: var(--sec-color-1);
|
||||||
@ -781,7 +1051,12 @@ input:focus {
|
|||||||
transform: translateX(-50%);
|
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;
|
opacity: 1;
|
||||||
top: -80px;
|
top: -80px;
|
||||||
}
|
}
|
||||||
@ -979,7 +1254,7 @@ input:focus {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.hero-section > div:nth-child(2) {
|
.hero-section > div:nth-child(2) {
|
||||||
padding: 140px 30px 60px 60px;
|
padding: 140px 60px 60px 60px;
|
||||||
font-size: 36px;
|
font-size: 36px;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -992,6 +1267,10 @@ input:focus {
|
|||||||
width: 40%;
|
width: 40%;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.main-text-block {
|
||||||
|
max-width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
.main-text-block h1 a {
|
.main-text-block h1 a {
|
||||||
background-position: 0px 60px;
|
background-position: 0px 60px;
|
||||||
}
|
}
|
||||||
@ -1013,6 +1292,31 @@ input:focus {
|
|||||||
width: 100%;
|
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;
|
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;
|
border-bottom: 2px solid #ddd;
|
||||||
z-index: 0;
|
z-index: 0;
|
||||||
padding-top: 120px;
|
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 {
|
.hero-text-section-graphic {
|
||||||
height: 100%;
|
height: 100%;
|
||||||
width: 50%;
|
width: 40%;
|
||||||
|
right: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.benjamin-image-block-wrapper {
|
.benjamin-image-block-wrapper {
|
||||||
@ -1174,7 +1493,7 @@ input:focus {
|
|||||||
.my-work-section > div:nth-child(2) {
|
.my-work-section > div:nth-child(2) {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: auto;
|
height: auto;
|
||||||
padding: 80px;
|
padding: 40px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.my-work-section h2 {
|
.my-work-section h2 {
|
||||||
@ -1186,7 +1505,20 @@ input:focus {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.portfolio-items-container {
|
.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) {
|
.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 */
|
||||||
|
|
||||||
.my-work-section > div:nth-child(2) {
|
.my-work-section > div:nth-child(2) {
|
||||||
padding: 40px;
|
padding: 20px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.portfolio-items-container {
|
.portfolio-items-container {
|
||||||
height: 300px;
|
height: 600px;
|
||||||
width: 300px;
|
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 */
|
/* Contact Me section */
|
||||||
@ -1347,6 +1731,7 @@ input:focus {
|
|||||||
|
|
||||||
.my-specialties-section {
|
.my-specialties-section {
|
||||||
padding: 100px 20px;
|
padding: 100px 20px;
|
||||||
|
height: auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
@ -1408,6 +1793,24 @@ input:focus {
|
|||||||
height: 70%;
|
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
517
scripts/main.js
517
scripts/main.js
@ -1,25 +1,45 @@
|
|||||||
|
|
||||||
|
|
||||||
|
function ben(element) {
|
||||||
|
return document.querySelector(element);
|
||||||
|
};
|
||||||
|
|
||||||
|
function benA(elements) {
|
||||||
|
return document.querySelectorAll(elements);
|
||||||
|
};
|
||||||
|
|
||||||
|
|
||||||
//############################################# -- Intro Animations
|
//############################################# -- Intro Animations
|
||||||
|
|
||||||
const heroTextSection = document.querySelector(".hero-section > div:nth-child(2)");
|
const preloader = ben("#preloader-container");
|
||||||
const myImageBlock = document.querySelector(".benjamin-image-block-wrapper");
|
const heroTextSection = ben(".hero-section > div:nth-child(2)");
|
||||||
const myBigTextBlock = document.querySelector(".benjamin-big-text-block");
|
const myImageBlock = ben(".benjamin-image-block-wrapper");
|
||||||
const mainTextBlock = document.querySelector(".main-text-block");
|
const myBigTextBlock = ben(".benjamin-big-text-block");
|
||||||
const mainCTA = document.querySelector(".main-cta-button");
|
const mainTextBlock = ben(".main-text-block");
|
||||||
const allHeaderElements = document.querySelectorAll("header *:not(header > div)");
|
const mainCTA = ben(".main-cta-button");
|
||||||
const mountains = document.querySelector("#mountains");
|
const allHeaderElements = benA("header *:not(header > div)");
|
||||||
const clouds = document.querySelector("#clouds");
|
const mountains = ben("#mountains");
|
||||||
const footerController = document.querySelector(".contact-section-controller");
|
const clouds = ben("#clouds");
|
||||||
const header = document.querySelector("header");
|
const footerController = ben(".contact-section-controller");
|
||||||
const heroTxtGraphic = document.querySelector(".hero-text-section-graphic");
|
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() {
|
function intro() {
|
||||||
|
|
||||||
|
preloader.style.pointerEvents = "none";
|
||||||
|
|
||||||
|
anime({
|
||||||
|
targets: preloader,
|
||||||
|
opacity: 0,
|
||||||
|
// pointerEvents: "none",
|
||||||
|
easing: "easeOutQuad",
|
||||||
|
duration: 1200,
|
||||||
|
delay: 800,
|
||||||
|
});
|
||||||
|
|
||||||
if (window.innerWidth > 800) {
|
if (window.innerWidth > 800) {
|
||||||
anime({
|
anime({
|
||||||
targets: heroTextSection,
|
targets: heroTextSection,
|
||||||
@ -110,32 +130,38 @@ function intro() {
|
|||||||
delay: 2600,
|
delay: 2600,
|
||||||
});
|
});
|
||||||
|
|
||||||
if (window.innerWidth > 600) {
|
|
||||||
|
|
||||||
anime({
|
anime({
|
||||||
targets: mountains,
|
targets: mountains,
|
||||||
translateY: [200, 0],
|
translateY: [
|
||||||
opacity: [0, 1],
|
{ 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)",
|
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({
|
anime({
|
||||||
targets: clouds,
|
targets: heroTxtGraphic,
|
||||||
opacity: [0.2, 1],
|
opacity: [0, 1],
|
||||||
|
translateZ: [100, 10],
|
||||||
easing: "easeOutQuad",
|
easing: "easeOutQuad",
|
||||||
duration: 1200,
|
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
|
//############################################# -- Header Scroll interactions
|
||||||
|
|
||||||
var headerController = document.querySelector("#header-controller");
|
var headerController = ben("#header-controller");
|
||||||
var windowRect = {
|
var windowRect = {
|
||||||
rootMargin: "0px",
|
rootMargin: "0px",
|
||||||
};
|
};
|
||||||
@ -225,9 +251,11 @@ function changeHeader(entry) {
|
|||||||
if (entry[0].isIntersecting) {
|
if (entry[0].isIntersecting) {
|
||||||
|
|
||||||
if (window.innerWidth > 800) {
|
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";
|
header.className = "none";
|
||||||
@ -240,7 +268,7 @@ function changeHeader(entry) {
|
|||||||
duration: 400,
|
duration: 400,
|
||||||
easing: "easeOutCubic",
|
easing: "easeOutCubic",
|
||||||
});
|
});
|
||||||
|
}
|
||||||
|
|
||||||
anime({
|
anime({
|
||||||
targets: "header > a > div",
|
targets: "header > a > div",
|
||||||
@ -248,6 +276,14 @@ function changeHeader(entry) {
|
|||||||
opacity: 1,
|
opacity: 1,
|
||||||
duration: 1000,
|
duration: 1000,
|
||||||
});
|
});
|
||||||
|
|
||||||
|
if (window.innerWidth < 801 && window.innerWidth > 450) {
|
||||||
|
anime({
|
||||||
|
targets: socialLinks,
|
||||||
|
opacity: 1,
|
||||||
|
easing: "easeOutCubic",
|
||||||
|
duration: 300,
|
||||||
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
} else {
|
} else {
|
||||||
@ -256,7 +292,7 @@ function changeHeader(entry) {
|
|||||||
|
|
||||||
// if (entry[0].isIntersecting) {
|
// 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 = ""; }
|
if (entry[0].target.className == "contact-section-controller") { item.style.color = ""; }
|
||||||
});
|
});
|
||||||
@ -281,6 +317,15 @@ function changeHeader(entry) {
|
|||||||
opacity: 0,
|
opacity: 0,
|
||||||
duration: 1000,
|
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
|
//############################################# -- 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)");
|
//var sectionContainer = document.querySelector(".my-work-section > div:nth-child(2)");
|
||||||
|
|
||||||
let footerHeaderFn = () => { headerObserver.observe(footerController); };
|
let footerHeaderFn = () => { headerObserver.observe(footerController); };
|
||||||
@ -350,10 +395,10 @@ sections.forEach(item => {
|
|||||||
|
|
||||||
//############################################# -- Content intersection Observer
|
//############################################# -- 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 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" });
|
const contentsIOAlt = new IntersectionObserver(contentsObserverFn, { rootMargin: "0px" });
|
||||||
|
|
||||||
function contentsObserverFn(entries) {
|
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 => {
|
contents.forEach(item => {
|
||||||
@ -409,11 +479,11 @@ anime({
|
|||||||
direction: "alternate",
|
direction: "alternate",
|
||||||
});
|
});
|
||||||
|
|
||||||
const navSections = document.querySelectorAll("section");
|
const navSections = benA("section");
|
||||||
const myWorkNavLink = document.querySelector("#my-work-link");
|
const myWorkNavLink = ben("#my-work-link");
|
||||||
const aboutMeNavLink = document.querySelector("#about-me-link");
|
const aboutMeNavLink = ben("#about-me-link");
|
||||||
const resumeLink = document.querySelector("#resume-link");
|
const resumeLink = ben("#resume-link");
|
||||||
const contactMeNavLink = document.querySelector("#contact-me-link");
|
const contactMeNavLink = ben("#contact-me-link");
|
||||||
|
|
||||||
const anchorLinksObserver = new IntersectionObserver(anchorLinksFn, { rootMargin: "0px", threshold: 0.75 });
|
const anchorLinksObserver = new IntersectionObserver(anchorLinksFn, { rootMargin: "0px", threshold: 0.75 });
|
||||||
|
|
||||||
@ -472,64 +542,126 @@ function parralaxMouse(event) {
|
|||||||
|
|
||||||
// mountains.style.transition = "all .7s ease";
|
// mountains.style.transition = "all .7s ease";
|
||||||
|
|
||||||
clouds.animate([{
|
// let items = [clouds, mountains, myImageBlock, mainTextBlock, heroTxtGraphic, myBigTextBlock];
|
||||||
transform: `translateX(${xPos * -10}px) translateY(${yPos * -10}px)`,
|
|
||||||
}], {
|
// items.forEach(item => { item.style.transition = "all 1s ease" });
|
||||||
easing: "ease",
|
|
||||||
fill: "forwards",
|
// 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([{
|
anime({
|
||||||
transform: `translateX(${xPos * -100}px) translateY(${yPos * -20}px)`,
|
targets: clouds,
|
||||||
}], {
|
translateX: xPos * -10,
|
||||||
easing: "ease",
|
translateY: yPos * -10,
|
||||||
fill: "forwards",
|
easing: "easeOutQuad",
|
||||||
direction: "normal"
|
duration: 500,
|
||||||
});
|
});
|
||||||
|
|
||||||
myImageBlock.animate([{
|
anime({
|
||||||
transform: `translateX(${xPos * -30}px) translateY(${yPos * -10}px) rotateX(${yPos * 4}deg) rotateY(${xPos * -3}deg)`,
|
targets: myImageBlock,
|
||||||
}], {
|
translateX: xPos * -30,
|
||||||
easing: "ease",
|
translateY: yPos * -10,
|
||||||
fill: "forwards",
|
easing: "easeOutQuad",
|
||||||
|
duration: 500,
|
||||||
|
rotateX: yPos * 4,
|
||||||
|
rotateY: xPos * -3
|
||||||
});
|
});
|
||||||
|
|
||||||
mainTextBlock.animate([{
|
anime({
|
||||||
transform: `translateZ(15px) rotateX(${yPos * 2}deg) rotateY(${xPos * -2}deg)`,
|
targets: myBigTextBlock,
|
||||||
}], {
|
translateX: xPos * -40,
|
||||||
easing: "ease-out",
|
translateY: yPos * -20,
|
||||||
fill: "forwards",
|
translateZ: 50,
|
||||||
|
rotateX: yPos * 4,
|
||||||
|
rotateY: xPos * -3,
|
||||||
|
easing: "easeOutQuad",
|
||||||
|
duration: 500,
|
||||||
});
|
});
|
||||||
|
|
||||||
heroTxtGraphic.animate([{
|
anime({
|
||||||
transform: `translateX(${xPos * -5}px) translateY(${yPos * -5}px) translateZ(10px) rotateX(${yPos * 2}deg) rotateY(${xPos * -2}deg)`,
|
targets: mainTextBlock,
|
||||||
}], {
|
translateZ: 15,
|
||||||
easing: "ease",
|
rotateX: yPos * 2,
|
||||||
fill: "forwards",
|
rotateY: xPos * -2,
|
||||||
|
easing: "easeOutQuad",
|
||||||
|
duration: 300,
|
||||||
});
|
});
|
||||||
|
|
||||||
myBigTextBlock.animate([{
|
anime({
|
||||||
transform: `translateX(${xPos * -40}px) translateY(${yPos * -20}px) translateZ(50px) rotateX(${yPos * 4}deg) rotateY(${xPos * -3}deg)`,
|
targets: heroTxtGraphic,
|
||||||
}], {
|
translateX: xPos * -5,
|
||||||
easing: "ease",
|
translateY: yPos * -5,
|
||||||
fill: "forwards",
|
translateZ: 10,
|
||||||
|
rotateX: yPos * 2,
|
||||||
|
rotateY: xPos * -2,
|
||||||
|
easing: "easeOutQuad",
|
||||||
|
duration: 300,
|
||||||
});
|
});
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
const uiuxDesignerLinks = document.querySelectorAll(".main-hero-text a");
|
const uiuxDesignerLinks = benA(".main-hero-text a");
|
||||||
const myImage = document.querySelector(".benjamin-image-block");
|
const myImage = ben(".benjamin-image-block");
|
||||||
const myImageOverlay = document.querySelector(".benjamin-image-block-overlay");
|
const myImageOverlay = ben(".benjamin-image-block-overlay");
|
||||||
const serviceDisplay = document.querySelector(".service-display-block");
|
const serviceDisplay = ben(".service-display-block");
|
||||||
|
|
||||||
uiuxDesignerLinks.forEach(item => {
|
uiuxDesignerLinks.forEach(item => {
|
||||||
|
|
||||||
item.addEventListener("mouseover", function (event) {
|
item.addEventListener("mouseover", function (event) {
|
||||||
|
|
||||||
// myImage.style.transform = "rotateX(1deg) rotateY(2deg) rotateZ(-2deg) translateZ(20px) translateX(20px)";
|
// 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") {
|
if (event.target.className == "uiux-designer-link") {
|
||||||
|
|
||||||
@ -584,14 +716,16 @@ uiuxDesignerLinks.forEach(item => {
|
|||||||
|
|
||||||
//############################################# -- Mobile hamburger interactrions
|
//############################################# -- Mobile hamburger interactrions
|
||||||
|
|
||||||
const hamburgerButton = document.querySelector(".hamburger-button");
|
const hamburgerButton = ben(".hamburger-button");
|
||||||
const mobileNavWrapper = document.querySelector("header > div:nth-of-type(1)");
|
const mobileNavWrapper = ben("header > div:nth-of-type(1)");
|
||||||
let a = 0;
|
let a = 0;
|
||||||
|
|
||||||
hamburgerButton.addEventListener("click", () => {
|
hamburgerButton.addEventListener("click", () => {
|
||||||
|
|
||||||
if (a == 0) {
|
if (a == 0) {
|
||||||
|
|
||||||
|
if (window.innerWidth > 449) {
|
||||||
|
|
||||||
mobileNavWrapper.animate([
|
mobileNavWrapper.animate([
|
||||||
{
|
{
|
||||||
opacity: 0,
|
opacity: 0,
|
||||||
@ -601,20 +735,50 @@ hamburgerButton.addEventListener("click", () => {
|
|||||||
},
|
},
|
||||||
{
|
{
|
||||||
opacity: 1,
|
opacity: 1,
|
||||||
height: "450px",
|
height: "350px",
|
||||||
pointerEvents: "visible",
|
pointerEvents: "visible",
|
||||||
transform: "translateZ(0px) translateY(0px)"
|
transform: "translateZ(0px) translateY(0px)"
|
||||||
}
|
}
|
||||||
], {
|
], {
|
||||||
fill: "both",
|
fill: "both",
|
||||||
duration: 600,
|
duration: 300,
|
||||||
easing: "cubic-bezier( 0.1, 0.63, 0.355, 1 )"
|
easing: "cubic-bezier( 0.1, 0.63, 0.355, 1 )"
|
||||||
});
|
});
|
||||||
} else {
|
} else {
|
||||||
mobileNavWrapper.animate([
|
mobileNavWrapper.animate([
|
||||||
|
{
|
||||||
|
opacity: 0,
|
||||||
|
height: "0px",
|
||||||
|
pointerEvents: "none",
|
||||||
|
transform: "translateZ(50px) translateY(-50px)"
|
||||||
|
},
|
||||||
{
|
{
|
||||||
opacity: 1,
|
opacity: 1,
|
||||||
height: "450px",
|
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",
|
pointerEvents: "visible",
|
||||||
transform: "translateZ(0px) translateY(0px)"
|
transform: "translateZ(0px) translateY(0px)"
|
||||||
|
|
||||||
@ -627,9 +791,37 @@ hamburgerButton.addEventListener("click", () => {
|
|||||||
}
|
}
|
||||||
], {
|
], {
|
||||||
fill: "both",
|
fill: "both",
|
||||||
duration: 600,
|
duration: 300,
|
||||||
easing: "cubic-bezier( 0.1, 0.63, 0.355, 1 )"
|
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;
|
a = -1;
|
||||||
}
|
}
|
||||||
@ -642,10 +834,14 @@ hamburgerButton.addEventListener("click", () => {
|
|||||||
|
|
||||||
hamburgerButton.addEventListener("blur", () => {
|
hamburgerButton.addEventListener("blur", () => {
|
||||||
|
|
||||||
|
if (a == 1) {
|
||||||
|
|
||||||
|
if (window.innerWidth > 449) {
|
||||||
|
|
||||||
mobileNavWrapper.animate([
|
mobileNavWrapper.animate([
|
||||||
{
|
{
|
||||||
opacity: 1,
|
opacity: 1,
|
||||||
height: "450px",
|
height: "350px",
|
||||||
pointerEvents: "visible",
|
pointerEvents: "visible",
|
||||||
transform: "translateZ(0px) translateY(0px)"
|
transform: "translateZ(0px) translateY(0px)"
|
||||||
|
|
||||||
@ -662,7 +858,37 @@ hamburgerButton.addEventListener("blur", () => {
|
|||||||
easing: "cubic-bezier( 0.1, 0.63, 0.355, 1 )"
|
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 )"
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
anime({
|
||||||
|
targets: socialLinks,
|
||||||
|
opacity: 0,
|
||||||
|
easing: "easeOutCubic",
|
||||||
|
duration: 300,
|
||||||
|
});
|
||||||
|
|
||||||
a = 0;
|
a = 0;
|
||||||
|
}
|
||||||
|
|
||||||
// mobileNavWrapper.style.opacity = "1"
|
// 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