diff --git a/index.html b/index.html new file mode 100644 index 0000000..c28da3a --- /dev/null +++ b/index.html @@ -0,0 +1,44 @@ + + + + + Portfolio 🞄 Jacob Chartier + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/pages/background.html b/pages/background.html index 8f6ddf4..b675fe9 100644 --- a/pages/background.html +++ b/pages/background.html @@ -24,36 +24,24 @@ + +
+
\ No newline at end of file diff --git a/pages/contact.html b/pages/contact.html index 5ed7c82..e906320 100644 --- a/pages/contact.html +++ b/pages/contact.html @@ -24,34 +24,19 @@ diff --git a/pages/index.html b/pages/index.html deleted file mode 100644 index 9dba387..0000000 --- a/pages/index.html +++ /dev/null @@ -1,59 +0,0 @@ - - - - - Portfolio 🞄 Jacob Chartier - - - - - - - - - - - - - - - - - - - - - \ No newline at end of file diff --git a/pages/projects.html b/pages/projects.html index 92e4b0a..301078e 100644 --- a/pages/projects.html +++ b/pages/projects.html @@ -24,36 +24,146 @@ + +
+
+

Portfolio

+
+ +
+ +
+
+

Tous les projets

+ Portfolio
+ Connection Terminated
+ Rythmic Slash
+ Multiplayer Test
+ Tower Defense
+ The Last Bite
+
- -
- Parcours -
- Académique - Professionnel -
+
+
+ +
+
+
+

Portfolio

+

08.11.2024 - Aujourd'hui +

+ +

This is my personal portfolio made using HTML, CSS, JavaScript and tools like Bootstrap and jQuery.

- Contact +
+ Github + jacobchartier.com +
+
+ +
+ +
+
+

Connection Terminated

+

12.01.2024 - 19.04.2024

+ +

Turn-based open world game made with Unity, where you need to fight enemies with different items and attack.

+
+ +
+ Github +
+
+ +
+ +
+
+

Rythmic Slash

+

18.10.2023 - 05.12.2023

+ +

- + +
+ Github +
+
+ +
+ +
+
+

Multiplayer Test

+

24.01.2024 - 01.05.2024

+ +

+
+ +
+ Github +
+
+ +
+ +
+
+

Tower Defense

+

21.03.2024 - 29.03.2024

+ +

+
+ +
+ Github +
+
+ +
+ +
+
+

The Last Bite

+

31.01.2023 - 03.05.2024

+ +

+
+ +
+ Github +
+
+
\ No newline at end of file diff --git a/scripts/animation.js b/scripts/animation.js index 6a8d22e..28335c0 100644 --- a/scripts/animation.js +++ b/scripts/animation.js @@ -1,4 +1,3 @@ -const typeWritterSpeed = 120; let isNavbarRendered = false; const navbarAnimDuration = 1000, dropdownAnimDuration = 300; @@ -10,9 +9,11 @@ $(document).ready(function() { }) isNavbarRendered = true; - typeWritter("nav-title-text", GetText("#nav-title-text"), typeWritterSpeed); - typeWritter("nav-subtitle-text", GetText("#nav-subtitle-text"), typeWritterSpeed+100); + typewritterAnimation("nav-title-text"); + typewritterAnimation("nav-subtitle-text"); + + setTimeout(typewritterAnimation('nav-subtitle-breadcrumbs'), 1000); }); }); @@ -43,22 +44,84 @@ $('.dropdown').mouseleave(function() { $('#dropdown-projects, #dropdown-background').slideUp(dropdownAnimDuration).delay(); }); -function typeWritter(id, text, speed) { +// [Get Animation Content] Function to get, with an id, the content for an animation. +// Returns the content as a string. +function getAnimationContent(id) { + return document.querySelector('#' + id).dataset.animationContent; +} + +// [Get Animation Speed] Function to get, with an id, the speed for an animation. +// Returns the number in miliseconds +function getAnimationSpeed(id) { + return document.querySelector('#' + id).dataset.animationSpeed; +} + +// [Type Writter Animation] Function to play a type writting animation. +// The text can be set in the 'data-typewritter-text' attribute inside the html. +// The animation speed can be set in the 'data-typewritter-speed' attribute inside the html. +function typewritterAnimation(id) { + // Variable to keep track of the current index. let index = 0; - function nextChar() { - if (index < text.length) { - document.getElementById(id).innerHTML += text.charAt(index++); - setTimeout(nextChar, speed); + // Recursive function that add the next character in the html. + function insertNextChar() { + // Check if the current index is less than the text length. + if (index < getAnimationContent(id).length) { + // Add the character of the current index to the html document. + document.getElementById(id).innerHTML += getAnimationContent(id).charAt(index++); + + // Call itself to print the next character. + setTimeout(insertNextChar, getAnimationSpeed(id)); } } + + // Call of insertNextChar to start the animation. + insertNextChar(); +} + +function typedeleterAnimation(id, start = 0) { + let index = getAnimationContent(id).length; - if (index < text.length) { - document.getElementById(id).innerHTML += text.charAt(index++); - setTimeout(nextChar, speed); + function removePreviousChar() { + if (index > 0) { + document.getElementById(id).innerHTML = getAnimationContent(id).slice(start, index--); + setTimeout(removePreviousChar, getAnimationSpeed(id)); + } } + + removePreviousChar(); } -function GetText(id) { - return document.querySelector(id).dataset.text; +let breadcrumbs = false; + +function typewritterTransition(destination, text, start = 0) { + if (breadcrumbs === false) + typewritterAnimation('breadcrumbs-separator'); + + breadcrumbs = true; + + let index = document.getElementById(destination).innerHTML.length; + + function insertNextChar() { + // Check if the current index is less than the text length. + if (index < getAnimationContent(text).length) { + // Add the character of the current index to the html document. + document.getElementById(destination).innerHTML += getAnimationContent(text).charAt(index++); + + // Call itself to print the next character. + setTimeout(insertNextChar, getAnimationSpeed(destination)); + } + } + + function removePreviousChar() { + if (index > -1) { + document.getElementById(destination).innerHTML = document.getElementById(destination).innerHTML.slice(start, index--); + setTimeout(removePreviousChar, getAnimationSpeed(destination)); + } + else { + insertNextChar(); + } + } + + removePreviousChar(); } \ No newline at end of file diff --git a/styles/component.css b/styles/component.css index be5ade6..2f82447 100644 --- a/styles/component.css +++ b/styles/component.css @@ -13,6 +13,38 @@ a { font-size: 10px; } +/* Cards */ +.card { + background-color: #00000080; + backdrop-filter: blur(20px); + + border: 1px solid #ffffff20; + border-radius: 15px; + + width: 300px; + height: 450px; +} + +.card-title { + font-size: 24px; + text-align: center; + font-family: 'Fira Mono'; + padding: 20px 20px 5px 20px; +} + +.card-description { + font-size: 16px; + text-align: justify; + + font-family: 'Fira Sans'; + padding: 5px 20px 20px 20px; +} + +.card-image { + margin: 20px 20px 0px 20px; + border-radius: 15px; + width: fit-content; +} /* Dropdown */ .dropdown { padding-bottom: 10px; @@ -61,4 +93,101 @@ a { font-size: smaller; color: #C7C7C7; +} + + +/* Time lines */ +.timeline { + width: 5px; +} + +.timeline-section { +} + +.timeline-bullet::after { + content: ''; + position: inherit; + width: 15px; + height: 15px; + right: 12px; + background-color: #90fff0; + border: 4px solid #90fff080; + top: -3px; + border-radius: 50%; + z-index: 1; + float: left; +} + +.timeline-solid { + position: inherit; + height: 100px; + width: 0px; + border-radius: 10px; + border: 3px solid #80808080; +} + +.timeline-dashed { + position: inherit; + height: 100px; + width: 0px; + border-radius: 10px; + border: 3px dashed #80808080; +} + +.title { + padding-left: 20px; +} + + +.tag-present { + background-color: #ff004080; + border-radius: 5px; + padding: 4px; +} + +link { + background-color: #ff004080; + border-radius: 5px; + padding: 4px; +} + +.section-links { + text-align: right; + display: flex; + flex-direction: column; +} + + +.css { + font-size: 25px; + color: #663399; +} + + +.container { + width: 80%; + height: 80%; + + background-color: #101010; + background-image: + linear-gradient(#aaaaaa80 2px, transparent 2px), + linear-gradient(90deg, #aaaaaa80 2px, transparent 2px), + linear-gradient(#99999980 1px, transparent 1px), + linear-gradient(90deg, #99999980 1px, transparent 1px); + background-size: 100px 100px, 100px 100px, 20px 20px, 20px 20px; + background-position: -2px -2px, -2px -2px, -1px -1px, -1px -1px; + } + +.header-project-name { + margin-top: 50px; + font-family: 'Fira Mono'; + font-size: 64px; + font-weight: 700; +} + +.header-title { + margin-top: 50px; + font-family: 'Fira Mono'; + font-size: 36px; + font-weight: 700; } \ No newline at end of file diff --git a/styles/structure.css b/styles/structure.css index 487a0ae..f136007 100644 --- a/styles/structure.css +++ b/styles/structure.css @@ -8,6 +8,8 @@ * { margin: 0; padding: 0; + scroll-padding-top: 110px; + scroll-behavior: smooth; } body { @@ -16,6 +18,7 @@ body { font-family: 'Fira Sans'; font-style: normal; + } /* Navigation bar */ @@ -84,4 +87,56 @@ nav { .nav-link:hover { color: #FFFFFF; +} + + +main { + padding: 20px 10% 300px 10%; + + display: flex; + flex-direction: column; +} + +header { + padding: 110px 10% 0px 10%; + margin: 0%; + background-image: url("../assets/images/background.png"); + background-size: cover; + min-height: 600px; +} + +.header-left { + float: left; +} + +.header-right { + transform: translateY(15%); + float: right; + + display: flex; + justify-content: space-between; + width: 60%; +} + +h2 { + font-size: 30px; + padding: 20px; +} + +section { + padding: 25px, 50px, 25px, 50px; + margin-top: 25px; +} + +.section-title { + font-size: 24px; +} + +.section-subtitle { + font-family: 'Fira Mono'; + font-size: 14px; +} + +.section-description { + padding: 35px 0px 35px 0px; } \ No newline at end of file