Added the projects

jacobchartier · Nov 27, 2024 · 7af1033 · 7af1033
1 parent b98011f
commit 7af1033
Show file tree

Hide file tree

Showing 8 changed files with 445 additions and 130 deletions.
diff --git a/index.html b/index.html
@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <!-- Title & Favicon -->
+        <title>Portfolio &#128900; Jacob Chartier</title>
+        <link rel="icon" href="assets/icons/favicon.ico">
+
+        <!-- Metadata -->
+        <meta charset="UTF-8">
+        <meta name="viewport" content="width=device-width, initial-scale=1.0">
+
+        <!-- Stylesheets & Scripts -->
+        <link rel="stylesheet" href="styles/structure.css">
+        <link rel="stylesheet" href="styles/component.css">
+
+        <script src="scripts/animation.js" defer></script>
+
+        <!-- Libraries -->
+        <script src="https://kit.fontawesome.com/25c1aaeca1.js" crossorigin="anonymous"></script>
+        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
+    </head>
+    <body>
+        <!-- Navigation bar -->
+        <nav>
+            <div class="nav-left">
+                <h4 class="nav-title" id="nav-title">
+                    <a href="index.html" id="nav-title-text" data-animation-content="Jacob Chartier" data-animation-speed="120"></a>
+                </h4>
+                <p class="nav-subtitle" id="nav-subtitle">
+                    <a href="index.html">
+                        <i class="fa-solid fa-arrow-right"></i> 
+                        <span id="nav-subtitle-text" data-animation-content="Portfolio" data-animation-speed="220"></span>
+                    </a>
+                </p>
+            </div>
+
+            <div class="nav-right">
+                <a class="nav-link" id="link-projects" href="pages/projects.html">Projets</a>
+                <a class="nav-link" id="link-background" href="pages/background.html">Parcours</a>
+                <a class="nav-link" id="link-contact" href="pages/contact.html">Contact</a>
+            </div>
+        </nav>
+    </body>
+</html>
diff --git a/pages/background.html b/pages/background.html
@@ -24,36 +24,24 @@
         <nav>
             <div class="nav-left">
                 <h4 class="nav-title" id="nav-title">
-                    <a href="../pages/index.html" id="nav-title-text" data-text="Jacob Chartier"></a>
+                    <a href="../index.html" id="nav-title-text" data-animation-content="Jacob Chartier" data-animation-speed="120"></a>
                 </h4>
                 <p class="nav-subtitle" id="nav-subtitle">
-                    <a href="../pages/index.html">
+                    <a href="../index.html">
                         <i class="fa-solid fa-arrow-right"></i> 
-                        <span id="nav-subtitle-text" data-text="Parcours"></span>
+                        <span id="nav-subtitle-text" data-animation-content="Parcours" data-animation-speed="120"></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">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">Académique</a>
-                        <a href="../pages/background.html#diploma-dec">Professionnel</a>
-                    </div>
-                </div>
-
+                <a class="nav-link" id="link-projects" href="../pages/projects.html">Projets</a>
+                <a class="nav-link" id="link-background" href="../pages/background.html">Parcours</a>
                 <a class="nav-link" id="link-contact" href="../pages/contact.html">Contact</a>
             </div>
         </nav>
+
+        <main>
+        </main>
     </body>
 </html>
diff --git a/pages/contact.html b/pages/contact.html
@@ -24,34 +24,19 @@
         <nav>
             <div class="nav-left">
                 <h4 class="nav-title" id="nav-title">
-                    <a href="../pages/index.html" id="nav-title-text" data-text="Jacob Chartier"></a>
+                    <a href="../index.html" id="nav-title-text" data-animation-content="Jacob Chartier" data-animation-speed="120"></a>
                 </h4>
                 <p class="nav-subtitle" id="nav-subtitle">
-                    <a href="../pages/index.html">
+                    <a href="../index.html">
                         <i class="fa-solid fa-arrow-right"></i> 
-                        <span id="nav-subtitle-text" data-text="Contact"></span>
+                        <span id="nav-subtitle-text" data-animation-content="Contact" data-animation-speed="220"></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">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">Académique</a>
-                        <a href="../pages/background.html#diploma-dec">Professionnel</a>
-                    </div>
-                </div>
-
+                <a class="nav-link" id="link-projects" href="../pages/projects.html">Projets</a>
+                <a class="nav-link" id="link-background" href="../pages/background.html">Parcours</a>
                 <a class="nav-link" id="link-contact" href="../pages/contact.html">Contact</a>
             </div>
         </nav>

diff --git a/pages/index.html b/pages/index.html
diff --git a/pages/projects.html b/pages/projects.html
@@ -24,36 +24,146 @@
         <nav>
             <div class="nav-left">
                 <h4 class="nav-title" id="nav-title">
-                    <a href="../pages/index.html" id="nav-title-text" data-text="Jacob Chartier"></a>
+                    <a href="../index.html" id="nav-title-text" data-animation-content="Jacob Chartier" data-animation-speed="120"></a>
                 </h4>
                 <p class="nav-subtitle" id="nav-subtitle">
-                    <a href="../pages/index.html">
+                    <a href="../index.html">
                         <i class="fa-solid fa-arrow-right"></i> 
-                        <span id="nav-subtitle-text" data-text="Projets"></span>
+                        <span id="nav-subtitle-text" data-animation-content="Projets" data-animation-speed="220"></span>
+
+                        <span id="breadcrumbs-separator" data-animation-content=" / " data-animation-speed="100"></span>
+
+                        <span id="nav-subtitle-breadcrumbs" data-animation-content="" data-animation-speed="100"></span>
+
+                        <span id="project-breadcrumbs-portfolio" data-animation-content="Portfolio" data-animation-speed="100"></span>
+                        <span id="project-breadcrumbs-connectionterminated" data-animation-content="Connection Terminated" data-animation-speed="100"></span>
+                        <span id="project-breadcrumbs-rythmicslash" data-animation-content="Rythmic Slash" data-animation-speed="100"></span>
+                        <span id="project-breadcrumbs-multiplayertest" data-animation-content="Multiplayer Test" data-animation-speed="100"></span>
+                        <span id="project-breadcrumbs-towerdefense" data-animation-content="Tower Defense" data-animation-speed="100"></span>
+                        <span id="project-breadcrumbs-thelastbite" data-animation-content="The Last Bite" data-animation-speed="100"></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">Jeux vidéo</a>
-                        <a href="../pages/projects.html#project-ct">2023</a>
-                        <a href="../pages/projects.html#project-rs">2022</a>
+                <a class="nav-link" id="link-projects" href="../pages/projects.html">Projets</a>
+                <a class="nav-link" id="link-background" href="../pages/background.html">Parcours</a>
+                <a class="nav-link" id="link-contact" href="../pages/contact.html">Contact</a>
+            </div>
+        </nav>
+
+        <header class="container">
+            <div class="header-left">
+                <p class="header-project-name" id="header-project-name">Portfolio</p>
+            </div>
+
+                <div class="header-right">
+
+                    <div class="card">
+                        <div class="card-body">
+                            <h4 class="card-title">Tous les projets</h4>
+                            <a onclick="typewritterTransition('nav-subtitle-breadcrumbs', 'project-breadcrumbs-portfolio')" href="#project-portfolio" class="card-description">Portfolio</a><br>
+                            <a onclick="typewritterTransition('nav-subtitle-breadcrumbs', 'project-breadcrumbs-connectionterminated')" href="#project-connectionterminated" class="card-description">Connection Terminated</a><br>
+                            <a onclick="typewritterTransition('nav-subtitle-breadcrumbs', 'project-breadcrumbs-rythmicslash')" href="#project-rythmicslash" class="card-description">Rythmic Slash</a><br>
+                            <a onclick="typewritterTransition('nav-subtitle-breadcrumbs', 'project-breadcrumbs-multiplayertest')" href="#project-multiplayertest" class="card-description">Multiplayer Test</a><br>
+                            <a onclick="typewritterTransition('nav-subtitle-breadcrumbs', 'project-breadcrumbs-towerdefense')" href="#project-towerdefense" class="card-description">Tower Defense</a><br>
+                            <a onclick="typewritterTransition('nav-subtitle-breadcrumbs', 'project-breadcrumbs-thelastbite')" href="#project-thelastbite" class="card-description">The Last Bite</a><br>
+                        </div>
                     </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">Académique</a>
-                        <a href="../pages/background.html#diploma-dec">Professionnel</a>
-                    </div>
+            </div>
+        </header>
+
+        <main>
+            <section id="project-portfolio">
+                <div class="left">
+                    <h4 class="section-title">Portfolio</h4>
+                    <p class="section-subtitle"><strong>08.11.2024</strong> - <strong><span class="tag-present">Aujourd'hui</span></strong>
+                </p>
+
+                    <p class="section-description">This is my personal portfolio made using HTML, CSS, JavaScript and tools like Bootstrap and jQuery.</p>
                 </div>
 
-                <a class="nav-link" id="link-contact" href="../pages/contact.html">Contact</a>
+                <div class="right section-links">
+                    <a href="https://github.com/jacobchartier/Portfolio" class="link github"><i class="fa-brands fa-github"></i> Github</a>
+                    <a href="https://jacobchartier.com/" class="link website"><i class="fa-solid fa-link"></i> jacobchartier.com</a>
+                </div>
+            </section>
+
+            <hr>
+
+            <section id="project-connectionterminated">
+                <div class="left">
+                    <h4 class="section-title">Connection Terminated</h4>
+                    <p class="section-subtitle"><strong>12.01.2024</strong> - <strong>19.04.2024</strong></p>
+
+                    <p class="section-description">Turn-based open world game made with Unity, where you need to fight enemies with different items and attack.</p>
+                </div>
+
+                <div class="right section-links">
+                    <a href="https://github.com/jacobchartier/Portfolio" class="link github"><i class="fa-brands fa-github"></i> Github</a>
+                </div>
+            </section>
+
+            <hr>
+
+            <section id="project-rythmicslash">
+            <div class="left">
+                <h4 class="section-title">Rythmic Slash</h4>
+                <p class="section-subtitle"><strong>18.10.2023</strong> - <strong>05.12.2023</strong></p>
+
+                <p class="section-description"></p>
             </div>
-        </nav>
+
+            <div class="right section-links">
+                <a href="https://github.com/jacobchartier/Portfolio" class="link github"><i class="fa-brands fa-github"></i> Github</a>
+            </div>
+            </section>
+
+            <hr>
+
+            <section id="project-multiplayertest">
+                <div class="left">
+                <h4 class="section-title">Multiplayer Test</h4>
+                <p class="section-subtitle"><strong>24.01.2024</strong> - <strong>01.05.2024</strong></p>
+
+                <p class="section-description"></p>
+            </div>
+
+            <div class="right section-links">
+                <a href="https://github.com/jacobchartier/Portfolio" class="link github"><i class="fa-brands fa-github"></i> Github</a>
+            </div>
+            </section>
+
+            <hr>
+
+            <section id="project-towerdefense">
+                <div class="left">
+                <h4 class="section-title">Tower Defense</h4>
+                <p class="section-subtitle"><strong>21.03.2024</strong> - <strong>29.03.2024</strong></p>
+
+                <p class="section-description"></p>
+            </div>
+
+            <div class="right section-links">
+                <a href="https://github.com/jacobchartier/Portfolio" class="link github"><i class="fa-brands fa-github"></i> Github</a>
+            </div>
+            </section>
+
+            <hr>
+
+            <section id="project-thelastbite">
+                <div class="left">
+                <h4 class="section-title">The Last Bite</h4>
+                <p class="section-subtitle"><strong>31.01.2023</strong> - <strong>03.05.2024</strong></p>
+
+                <p class="section-description"></p>
+            </div>
+
+            <div class="right section-links">
+                <a href="https://github.com/jacobchartier/Portfolio" class="link github"><i class="fa-brands fa-github"></i> Github</a>
+            </div>
+            </section>
+        </main>
     </body>
 </html>