-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
132 lines (121 loc) · 6.26 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
<!DOCTYPE html>
<html>
<head>
<!-- Title & Favicon -->
<title>Portfolio 🞄 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>
<script type="module" src="scripts/components.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="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">Projects</a>
<a class="nav-link" id="link-background" href="pages/background.html">Background</a>
<a class="nav-link" id="link-contact" href="pages/contact.html">Contact</a>
</div>
</nav>
<!-- Header -->
<header>
<h1 class="header-title">Jacob Chartier</h1>
<h4 class="header-subtitle">19 years old 🞄 Student in computer science</h4>
</header>
<!-- Page content -->
<main>
<!-- Study background section -->
<section id="background-study">
<h2 class="title">My study background</h2>
<div class="timeline">
<div class="timeline-item">
<div class="timeline-content">
<h3>Computer Science - Video Game Programming</h3>
<p><i class="fa-solid fa-map-pin"></i> Collège LaSalle 🞄 2022 - 2025</p>
</div>
</div>
<div class="timeline-item">
<div class="timeline-content">
<h3>Diplôme d'études Secondaires</h3>
<p><i class="fa-solid fa-map-pin"></i> Polyvalente Deux-Montagnes 🞄 2016 - 2022</p>
</div>
</div>
</section>
<!-- Job background section -->
<section id="background-jobs">
<h2 class="title">My professional background</h2>
<div class="timeline">
<div class="timeline-item">
<div class="timeline-content">
<h3>Shift Manager</h3>
<p><i class="fa-solid fa-map-pin"></i> McDonald's 🞄 2020 to Today</p>
</div>
</div>
<div class="timeline-item">
<div class="timeline-content">
<h3>Production Worker</h3>
<p><i class="fa-solid fa-map-pin"></i> Plaisirs Gastronomiques 🞄 Summer 2024</p>
</div>
</div>
</div>
</section>
<!-- Section (Projects) -->
<section id="projects">
<h2 class="title">Some academic projects</h2>
<p class="section-description">I mainly code in <code class="csharp">C#</code>, but I also know <code class="cpp">C++</code>, <code class="java">Java</code> and <code class="javascript">JavaScript</code></p>
<div class="container row">
<div class="card">
<div class="card-body">
<h4 class="card-title">The Last Bite</h4>
<p class="card-description">Platform game made with a custom engine based on the SDL2 library, where you need to collect space ship pieces to clear the level.</p>
<a href="pages/projects.html#TheLastBite" class="link-button right">Go to Project</a>
</div>
</div>
<div class="card">
<div class="card-body">
<h4 class="card-title">Rythmic Slash</h4>
<p class="card-description">Platform game made with Unity 2D, where you need to reach the end of the level while avoiding or fighting the enemies.</p>
<a href="pages/projects.html#RythmicSlash" class="link-button right">Go to Project</a>
</div>
</div>
<div class="card">
<div class="card-body">
<h4 class="card-title">Connection Terminated</h4>
<p class="card-description">Turn-based open world game made with Unity, where you need to fight enemies with different items and attack.</p>
<a href="pages/projects.html#ConnectionTerminated" class="link-button right">Go to Project</a>
</div>
</div>
</div>
</section>
</main>
<!-- Footer -->
<footer>
<div class="row">
<h2 class="title">Jacob Chartier</h2>
<div>
<a class="title" href="https://github.com/jacobchartier/"><i class="fa-brands fa-github"></i></a>
<a class="title" href="https://linkedin.com/in/jacobchartier/"><i class="fa-brands fa-linkedin"></i></a>
</div>
</div>
</footer>
</body>
</html>