Skip to content

Commit

Permalink
Added type writting animation
Browse files Browse the repository at this point in the history
  • Loading branch information
jacobchartier committed Nov 19, 2024
1 parent 1d4a673 commit b98011f
Show file tree
Hide file tree
Showing 6 changed files with 100 additions and 63 deletions.
28 changes: 15 additions & 13 deletions pages/background.html
Original file line number Diff line number Diff line change
Expand Up @@ -23,30 +23,32 @@
<!-- Navigation bar -->
<nav>
<div class="nav-left">
<h4 class="nav-title" id="nav-title"><a href="../pages/index.html">Jacob Chartier</a></h4>
<p class="nav-subtitle" id="nav-subtitle"><a href="../pages/index.html"><i class="fa-solid fa-arrow-right"></i> Parcours</a></p>
<h4 class="nav-title" id="nav-title">
<a href="../pages/index.html" id="nav-title-text" data-text="Jacob Chartier"></a>
</h4>
<p class="nav-subtitle" id="nav-subtitle">
<a href="../pages/index.html">
<i class="fa-solid fa-arrow-right"></i>
<span id="nav-subtitle-text" data-text="Parcours"></span>
</a>
</p>
</div>

<div class="nav-right">
<div class="dropdown">
<a class="nav-link" id="link-projects" href="../pages/projects.html">Projets <i class="fa-solid fa-angle-down"></i></a>
<div class="dropdown-content" id="dropdown-projects">
<a href="../pages/projects.html#project-p">Portfolio<br><span class="content-desc">Octobre 2024 - Aujourd'hui</span></a>
<a href="../pages/projects.html#project-ct">Connection Terminated<br><span class="content-desc">Janvier 2024 - Mai 2024</span></a>
<a href="../pages/projects.html#project-rs">Rythmic Slash<br><span class="content-desc">Août 2023 - Décembre 2023</span></a>
<a href="../pages/projects.html#project-mt">Multiplayer Test<br><span class="content-desc">Janvier 2024 - Mai 2024</span></a>
<a href="../pages/projects.html#project-tlb">The Last Bite<br><span class="content-desc">Janvier 2023 - Mai 2023</span></a>
<a href="../pages/projects.html#project-p">Jeux vidéo</a>
<a href="../pages/projects.html#project-ct">2023</a>
<a href="../pages/projects.html#project-rs">2022</a>
</div>
</div>

<div class="dropdown">
<a class="nav-link" id="link-background" href="../pages/background.html"><strong>Parcours <i class="fa-solid fa-angle-down"></i></strong></a>
<a class="nav-link" id="link-background" href="../pages/background.html">Parcours <i class="fa-solid fa-angle-down"></i></a>
<div class="dropdown-content" id="dropdown-background">
<a href="../pages/background.html#company-pg">Plaisirs Gastronomiques<br><span class="content-desc">Contrat d'Été 2024</span></a>
<a href="../pages/background.html#diploma-dec">Diplôme d'Études Collégiales<br><span class="content-desc">2022 - Aujourd'hui</span></a>
<a href="../pages/background.html#certification-ma">Certifcat de Manipulateur d'aliments<br><span class="content-desc">2023</span></a>
<a href="../pages/background.html#company-mcd">McDonald's<br><span class="content-desc">2020 - Aujourd'hui</span></a>
<a href="../pages/background.html#diploma-des">Diplôme d'Études Secondaires<br><span class="content-desc">2017 - 2022</span></a>
<a href="../pages/background.html#company-pg">Académique</a>
<a href="../pages/background.html#diploma-dec">Professionnel</a>
</div>
</div>

Expand Down
28 changes: 15 additions & 13 deletions pages/contact.html
Original file line number Diff line number Diff line change
Expand Up @@ -23,34 +23,36 @@
<!-- Navigation bar -->
<nav>
<div class="nav-left">
<h4 class="nav-title" id="nav-title"><a href="../pages/index.html">Jacob Chartier</a></h4>
<p class="nav-subtitle" id="nav-subtitle"><a href="../pages/index.html"><i class="fa-solid fa-arrow-right"></i> Contact</a></p>
<h4 class="nav-title" id="nav-title">
<a href="../pages/index.html" id="nav-title-text" data-text="Jacob Chartier"></a>
</h4>
<p class="nav-subtitle" id="nav-subtitle">
<a href="../pages/index.html">
<i class="fa-solid fa-arrow-right"></i>
<span id="nav-subtitle-text" data-text="Contact"></span>
</a>
</p>
</div>

<div class="nav-right">
<div class="dropdown">
<a class="nav-link" id="link-projects" href="../pages/projects.html">Projets <i class="fa-solid fa-angle-down"></i></a>
<div class="dropdown-content" id="dropdown-projects">
<a href="../pages/projects.html#project-p">Portfolio<br><span class="content-desc">Octobre 2024 - Aujourd'hui</span></a>
<a href="../pages/projects.html#project-ct">Connection Terminated<br><span class="content-desc">Janvier 2024 - Mai 2024</span></a>
<a href="../pages/projects.html#project-rs">Rythmic Slash<br><span class="content-desc">Août 2023 - Décembre 2023</span></a>
<a href="../pages/projects.html#project-mt">Multiplayer Test<br><span class="content-desc">Janvier 2024 - Mai 2024</span></a>
<a href="../pages/projects.html#project-tlb">The Last Bite<br><span class="content-desc">Janvier 2023 - Mai 2023</span></a>
<a href="../pages/projects.html#project-p">Jeux vidéo</a>
<a href="../pages/projects.html#project-ct">2023</a>
<a href="../pages/projects.html#project-rs">2022</a>
</div>
</div>

<div class="dropdown">
<a class="nav-link" id="link-background" href="../pages/background.html">Parcours <i class="fa-solid fa-angle-down"></i></a>
<div class="dropdown-content" id="dropdown-background">
<a href="../pages/background.html#company-pg">Plaisirs Gastronomiques<br><span class="content-desc">Contrat d'Été 2024</span></a>
<a href="../pages/background.html#diploma-dec">Diplôme d'Études Collégiales<br><span class="content-desc">2022 - Aujourd'hui</span></a>
<a href="../pages/background.html#certification-ma">Certifcat de Manipulateur d'aliments<br><span class="content-desc">2023</span></a>
<a href="../pages/background.html#company-mcd">McDonald's<br><span class="content-desc">2020 - Aujourd'hui</span></a>
<a href="../pages/background.html#diploma-des">Diplôme d'Études Secondaires<br><span class="content-desc">2017 - 2022</span></a>
<a href="../pages/background.html#company-pg">Académique</a>
<a href="../pages/background.html#diploma-dec">Professionnel</a>
</div>
</div>

<a class="nav-link" id="link-contact" href="../pages/contact.html"><strong>Contact</strong></a>
<a class="nav-link" id="link-contact" href="../pages/contact.html">Contact</a>
</div>
</nav>
</body>
Expand Down
26 changes: 14 additions & 12 deletions pages/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -23,30 +23,32 @@
<!-- Navigation bar -->
<nav>
<div class="nav-left">
<h4 class="nav-title" id="nav-title"><a href="../pages/index.html">Jacob Chartier</a></h4>
<p class="nav-subtitle" id="nav-subtitle"><a href="../pages/index.html"><i class="fa-solid fa-arrow-right"></i> Portfolio</a></p>
<h4 class="nav-title" id="nav-title">
<a href="../pages/index.html" id="nav-title-text" data-text="Jacob Chartier"></a>
</h4>
<p class="nav-subtitle" id="nav-subtitle">
<a href="../pages/index.html">
<i class="fa-solid fa-arrow-right"></i>
<span id="nav-subtitle-text" data-text="Portfolio"></span>
</a>
</p>
</div>

<div class="nav-right">
<div class="dropdown">
<a class="nav-link" id="link-projects" href="../pages/projects.html">Projets <i class="fa-solid fa-angle-down"></i></a>
<div class="dropdown-content" id="dropdown-projects">
<a href="../pages/projects.html#project-p">Portfolio<br><span class="content-desc">Octobre 2024 - Aujourd'hui</span></a>
<a href="../pages/projects.html#project-ct">Connection Terminated<br><span class="content-desc">Janvier 2024 - Mai 2024</span></a>
<a href="../pages/projects.html#project-rs">Rythmic Slash<br><span class="content-desc">Août 2023 - Décembre 2023</span></a>
<a href="../pages/projects.html#project-mt">Multiplayer Test<br><span class="content-desc">Janvier 2024 - Mai 2024</span></a>
<a href="../pages/projects.html#project-tlb">The Last Bite<br><span class="content-desc">Janvier 2023 - Mai 2023</span></a>
<a href="../pages/projects.html#project-p">Jeux vidéo</a>
<a href="../pages/projects.html#project-ct">2023</a>
<a href="../pages/projects.html#project-rs">2022</a>
</div>
</div>

<div class="dropdown">
<a class="nav-link" id="link-background" href="../pages/background.html">Parcours <i class="fa-solid fa-angle-down"></i></a>
<div class="dropdown-content" id="dropdown-background">
<a href="../pages/background.html#company-pg">Plaisirs Gastronomiques<br><span class="content-desc">Contrat d'Été 2024</span></a>
<a href="../pages/background.html#diploma-dec">Diplôme d'Études Collégiales<br><span class="content-desc">2022 - Aujourd'hui</span></a>
<a href="../pages/background.html#certification-ma">Certifcat de Manipulateur d'aliments<br><span class="content-desc">2023</span></a>
<a href="../pages/background.html#company-mcd">McDonald's<br><span class="content-desc">2020 - Aujourd'hui</span></a>
<a href="../pages/background.html#diploma-des">Diplôme d'Études Secondaires<br><span class="content-desc">2017 - 2022</span></a>
<a href="../pages/background.html#company-pg">Académique</a>
<a href="../pages/background.html#diploma-dec">Professionnel</a>
</div>
</div>

Expand Down
28 changes: 15 additions & 13 deletions pages/projects.html
Original file line number Diff line number Diff line change
Expand Up @@ -23,30 +23,32 @@
<!-- Navigation bar -->
<nav>
<div class="nav-left">
<h4 class="nav-title" id="nav-title"><a href="../pages/index.html">Jacob Chartier</a></h4>
<p class="nav-subtitle" id="nav-subtitle"><a href="../pages/index.html"><i class="fa-solid fa-arrow-right"></i> Projets</a></p>
<h4 class="nav-title" id="nav-title">
<a href="../pages/index.html" id="nav-title-text" data-text="Jacob Chartier"></a>
</h4>
<p class="nav-subtitle" id="nav-subtitle">
<a href="../pages/index.html">
<i class="fa-solid fa-arrow-right"></i>
<span id="nav-subtitle-text" data-text="Projets"></span>
</a>
</p>
</div>

<div class="nav-right">
<div class="dropdown">
<a class="nav-link" id="link-projects" href="../pages/projects.html"><strong>Projets <i class="fa-solid fa-angle-down"></i></strong></a>
<a class="nav-link" id="link-projects" href="../pages/projects.html">Projets <i class="fa-solid fa-angle-down"></i></a>
<div class="dropdown-content" id="dropdown-projects">
<a href="../pages/projects.html#project-p">Portfolio<br><span class="content-desc">Octobre 2024 - Aujourd'hui</span></a>
<a href="../pages/projects.html#project-ct">Connection Terminated<br><span class="content-desc">Janvier 2024 - Mai 2024</span></a>
<a href="../pages/projects.html#project-rs">Rythmic Slash<br><span class="content-desc">Août 2023 - Décembre 2023</span></a>
<a href="../pages/projects.html#project-mt">Multiplayer Test<br><span class="content-desc">Janvier 2024 - Mai 2024</span></a>
<a href="../pages/projects.html#project-tlb">The Last Bite<br><span class="content-desc">Janvier 2023 - Mai 2023</span></a>
<a href="../pages/projects.html#project-p">Jeux vidéo</a>
<a href="../pages/projects.html#project-ct">2023</a>
<a href="../pages/projects.html#project-rs">2022</a>
</div>
</div>

<div class="dropdown">
<a class="nav-link" id="link-background" href="../pages/background.html">Parcours <i class="fa-solid fa-angle-down"></i></a>
<div class="dropdown-content" id="dropdown-background">
<a href="../pages/background.html#company-pg">Plaisirs Gastronomiques<br><span class="content-desc">Contrat d'Été 2024</span></a>
<a href="../pages/background.html#diploma-dec">Diplôme d'Études Collégiales<br><span class="content-desc">2022 - Aujourd'hui</span></a>
<a href="../pages/background.html#certification-ma">Certifcat de Manipulateur d'aliments<br><span class="content-desc">2023</span></a>
<a href="../pages/background.html#company-mcd">McDonald's<br><span class="content-desc">2020 - Aujourd'hui</span></a>
<a href="../pages/background.html#diploma-des">Diplôme d'Études Secondaires<br><span class="content-desc">2017 - 2022</span></a>
<a href="../pages/background.html#company-pg">Académique</a>
<a href="../pages/background.html#diploma-dec">Professionnel</a>
</div>
</div>

Expand Down
51 changes: 40 additions & 11 deletions scripts/animation.js
Original file line number Diff line number Diff line change
@@ -1,35 +1,64 @@
const typeWritterSpeed = 120;
let isNavbarRendered = false;

const navbarAnimDuration = 1000, dropdownAnimDuration = 300;

$(document).ready(function() {
$('nav').slideDown(1000, function() {
$("#nav-title, #nav-subtitle, #link-about, #link-projects, #link-background, #link-contact").each(function(i) {
$(this).delay(i*100).animate({opacity: "100%"});
$(this).delay(i*20).animate({opacity: "100%"});
})

isNavbarRendered = true;
typeWritter("nav-title-text", GetText("#nav-title-text"), typeWritterSpeed);
typeWritter("nav-subtitle-text", GetText("#nav-subtitle-text"), typeWritterSpeed+100);

});
});

$('#link-projects, #dropdown-projects').mouseenter(function() {
// Make sure that the navbar is rendrered before showing the projects dropdown
if (isNavbarRendered)
$('#dropdown-projects').slideDown(dropdownAnimDuration);

// Delay the animation to make it appear after the navbar is rendered
$('#dropdown-projects').delay(navbarAnimDuration).slideDown(dropdownAnimDuration);
})
$('#dropdown-background').slideUp(dropdownAnimDuration);

// Make sure that the navbar is rendrered before showing the projects dropdown
if (isNavbarRendered)
$('#dropdown-projects').slideDown(dropdownAnimDuration);

// Delay the animation to make it appear after the navbar is rendered
$('#dropdown-projects').delay(navbarAnimDuration).slideDown(dropdownAnimDuration);

});

$('#link-background, #dropdown-background').mouseenter(function() {
$('#dropdown-projects').slideUp(dropdownAnimDuration);

// Make sure that the navbar is rendrered before showing the background dropdown
if (isNavbarRendered)
$('#dropdown-background').slideDown(dropdownAnimDuration);

// Delay the animation to make it appear after the navbar is rendered
$('#dropdown-background').delay(navbarAnimDuration).slideDown(dropdownAnimDuration);
})
});

$('.dropdown').mouseleave(function() {
$('#dropdown-projects, #dropdown-background').slideUp(dropdownAnimDuration);
})
$('#dropdown-projects, #dropdown-background').slideUp(dropdownAnimDuration).delay();
});

function typeWritter(id, text, speed) {
let index = 0;

function nextChar() {
if (index < text.length) {
document.getElementById(id).innerHTML += text.charAt(index++);
setTimeout(nextChar, speed);
}
}

if (index < text.length) {
document.getElementById(id).innerHTML += text.charAt(index++);
setTimeout(nextChar, speed);
}
}

function GetText(id) {
return document.querySelector(id).dataset.text;
}
2 changes: 1 addition & 1 deletion styles/component.css
Original file line number Diff line number Diff line change
Expand Up @@ -57,7 +57,7 @@ a {
}

.content-desc {
font-family: 'Fira Sans';
font-family: 'Fira Mono';

font-size: smaller;
color: #C7C7C7;
Expand Down

0 comments on commit b98011f

Please sign in to comment.