Skip to content

Commit

Permalink
Fixed nav bar and added typing animation
Browse files Browse the repository at this point in the history
  • Loading branch information
@mehulgoel873
mehulgoel873 committed May 14, 2024
1 parent 8ef0fc2 commit a3296a7
Show file tree
Hide file tree
Showing 6 changed files with 224 additions and 22 deletions.
Binary file added Images/socialMedia/png/004-mail.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added Images/socialMedia/png/gmail.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
150 changes: 148 additions & 2 deletions app.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ particlesJS('particles-js',
"value": 80,
"density": {
"enable": true,
"value_area": 800
"value_area": 600
}
},
"color": {
Expand Down Expand Up @@ -117,4 +117,150 @@ particlesJS('particles-js',
}
}

);
);

function typing_animation() {
let text_element = document.querySelector(".typing-container .text");
let text_array = text_element.innerHTML.split("");
let text_array_slice = text_element.innerHTML.split(" ");
let text_len = text_array.length;
console.log(text_len)

const word_len = text_array_slice.map((word) => {
return word.length;
})

console.log(word_len);

let timings = {
easing: `steps(${Number(word_len[0] + 1)}, end)`,
delay: 1000,
duration: 2000,
fill: 'forwards'
}

let cursor_timings = {
duration: 700,
iterations: Infinity,
easing: 'cubic-bezier(0,.26,.44,.93)'
}

document.querySelector(".text_cursor").animate([
{
opacity: 0
},
{
opacity: 0, offset: 0.7
},
{
opacity: 1
}
], cursor_timings);

if (text_array_slice.length == 1) {
timings.easing = `steps(${Number(word_len[0])}, end)`;

let reveal_animation = document.querySelector(".text_hide").animate([
{ left: '0%' },
{ left: `${(100 / text_len) * (word_len[0])}%` }
], timings);

document.querySelector(".text_cursor").animate([
{ left: '0%' },
{ left: `${(100 / text_len) * (word_len[0])}%` }
], timings);

reveal_animation.onfinish = () => {
setTimeout(() => {
document.querySelector('.text_hide').animate([
{left: '0%'}
], {
duration: 2000,
easing: 'cubic-bezier(.73,0,.38,.88)'
});
document.querySelector('.text_cursor').animate([
{left: '0%'}
], {
duration: 2000,
easing: 'cubic-bezier(.73,0,.38,.88)'
});
typing_animation();
}, 1000);
}
} else {
document.querySelector(".text_hide").animate([
{ left: '0%' },
{ left: `${(100 / text_len) * (word_len[0] + 1)}%` }
], timings);

document.querySelector(".text_cursor").animate([
{ left: '0%' },
{ left: `${(100 / text_len) * (word_len[0] + 1)}%` }
], timings);
}


for (let i = 1; i < text_array_slice.length; i++) {
// console.log(word_len);
// console.log(text_array_slice.length);
const single_word_len = word_len[i];
// console.log(single_word_len);

if (i == 1) {
var left_instance = (100 / text_len) * (word_len[i - 1] + 1);
// console.log(left_instance);
}

let timings_2 = {
easing: `steps(${Number(single_word_len + 1)}, end)`,
delay: (2 * (i + 1) + (2 * i)) * (700),
// delay: ((i*2)-1)*1000,
duration: 2000,
fill: 'forwards'
}

if (i == (text_array_slice.length - 1)) {
timings_2.easing = `steps(${Number(single_word_len)}, end)`;
let reveal_animation = document.querySelector(".text_hide").animate([
{ left: `${left_instance}%` },
{ left: `${left_instance + ((100 / text_len) * (word_len[i]))}%` }
], timings_2);

document.querySelector(".text_cursor").animate([
{ left: `${left_instance}%` },
{ left: `${left_instance + ((100 / text_len) * (word_len[i]))}%` }
], timings_2);

reveal_animation.onfinish = () => {
setTimeout(() => {
document.querySelector('.text_hide').animate([
{left: '0%'}
], {
duration: 1500,
easing: 'cubic-bezier(.73,0,.38,.88)'
});
document.querySelector('.text_cursor').animate([
{left: '0%'}
], {
duration: 1500,
easing: 'cubic-bezier(.73,0,.38,.88)'
});
typing_animation();
}, 1000);
}
} else {
document.querySelector(".text_hide").animate([
{ left: `${left_instance}%` },
{ left: `${left_instance + ((100 / text_len) * (word_len[i] + 1))}%` }
], timings_2);

document.querySelector(".text_cursor").animate([
{ left: `${left_instance}%` },
{ left: `${left_instance + ((100 / text_len) * (word_len[i] + 1))}%` }
], timings_2);
}

left_instance = left_instance + ((100 / text_len) * (word_len[i] + 1));
}
}
typing_animation();
68 changes: 57 additions & 11 deletions css/style.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ nav {
left: 0;
z-index: 1;
display: flex;
height: 12vh;
height: 8vh;
width: 100%;
background-color: rgba(215, 232, 186, 0.3);
align-items: center;
Expand All @@ -25,7 +25,7 @@ nav .logo-container {
}

nav .logo-container img {
height: 9vh;
height: 6vh;
}

nav .nav-links {
Expand All @@ -37,7 +37,7 @@ nav .nav-links {

nav .nav-links a {
display: inline-block;
font-size: 36px;
font-size: 3vh;
text-decoration: none;
color: #fff;
padding: 20px 5px;
Expand Down Expand Up @@ -67,26 +67,41 @@ nav .nav-links a:hover::before {
}

nav .nav-links a:last-child {
background-color: #ff7f2d;
padding: 10px 50px;
border-radius: 20px;
padding: 0.5vh;
border-radius: 1.5vh;
color: #FFB560;
}

nav .nav-links a:last-child::before {
content: '';
display: block;
width: 100%;
height: 3px;
background-color: #ffc98c;
position: absolute;
bottom: 0.5vh;
left: 0;
transform: scaleX(0);
transition: transform 0.3s ease-in-out;
}

nav .nav-links a:last-child:hover {
background-color: #FFB560;
text-decoration: none;
color: #ffc98c;
}

nav .nav-links a:last-child:hover::before {
transform: scaleX(0);
transform: scaleX(1);
}



/* Styling for the welcome text and image */
.welcome-section {
text-align: center;
padding: 12vh 0vh;
padding: 6vh 0vh;
width: 100%;
height: max-content;
}
.image-wrapper {
display: inline-block;
Expand Down Expand Up @@ -124,12 +139,43 @@ nav .nav-links a:last-child:hover::before {
}

.text-wrapper p {
font-size: 5vh;
margin-top: 1.5vh;
font-size: 3.75vh;
margin-top: 2vh;
margin-bottom: 0;
line-height: 1;
}

.typing-container .text{
font-family: 'Roboto Mono', monospace;
font-size: 2rem;
}

.typing-container {
position: relative;
width: max-content;
margin-left: auto;
margin-right: auto;
}

.typing-container .text_hide{
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background-color: #32373B;
}

.typing-container .text_cursor{
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background-color: transparent;
border-left: 3px solid #ff7f2d;
}

.welcome-section .nav-links {
display: flex;
justify-content: center;
Expand Down
10 changes: 8 additions & 2 deletions css/utlities.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,11 +3,17 @@ h1 {
}

h3 {
font-family: 'Source Sans Pro', sans-serif;
font-family: "Source Code Pro", monospace;
font-optical-sizing: auto;
font-weight: 900;
font-style: normal;
}

p, a{
font-family: 'Source Sans Pro', sans-serif;
font-family: "Source Code Pro", monospace;
font-optical-sizing: auto;
font-weight: 500;
font-style: normal;
}

#orange {
Expand Down
18 changes: 11 additions & 7 deletions home.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@
<!-- Current Fonts: https://fonts.google.com/share?selection.family=Righteous%7CSource%20Sans%20Pro-->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Righteous&family=Source+Sans+Pro:wght@400;600&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Source+Code+Pro:ital,wght@0,200..900;1,200..900&family=Righteous&family=Source+Sans+Pro:wght@400;600&display=swap" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="css/utlities.css">
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
Expand All @@ -17,10 +17,7 @@
<img src="logos\png\logo-no-background.png" alt="Mehul Goel's logo">
</div>
<div class="nav-links">
<a href="#">Home</a>
<a href="#about">About Me</a>
<a href="#portfolio">Portfolio</a>
<a href="mailto:[email protected]">Email Me</a>
<a href="mailto:[email protected]">Resumè</a>
</div>
</nav>
<section class="welcome-section" id = "particles-js">
Expand All @@ -31,9 +28,16 @@
<div class="text-wrapper" >
<h3>Hello I'm</h3>
<h1 id = "orange">Mehul Goel</h1>
<p>Tinkerer. Developer. Problem Solver.</p>
<div class="typing-container">
<div class="text_hide"></div>
<!----------------------------->
<!--Change the number of words in the text and the animation will still work-->
<p class="text">Tinkerer. Developer. Innovator.</p>
<!-------------------------------------->
<div class="text_cursor"></div>
</div>
<div class="nav-links">
<a href="mailto:[email protected]"><img src="Images/socialMedia/png/004-apple.png"></a>
<a href="mailto:[email protected]"><img src="Images/socialMedia/png/004-mail.png"></a>
<a href="https://github.com/mehulgoel873"><img src="Images/socialMedia/png/005-github.png"></a>
<a href="https://www.linkedin.com/in/mehulgoel873/"><img src="Images/socialMedia/png/002-linkedin.png"></a>
<a href="https://www.youtube.com/@mehulgoel873"><img src="Images/socialMedia/png/001-youtube.png"></a>
Expand Down

0 comments on commit a3296a7

Please sign in to comment.