-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathindex.html
246 lines (236 loc) · 16.8 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
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<title>My first (good) Bootstrap site</title>
<style></style>
</head>
<body>
<nav class="navbar navbar-expand-md navbar-dark bg-info">
<div class="container">
<button class="navbar-toggler" data-toggle="collapse" data-target="#mainNav">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse row navbar-collapse pl-3" id="mainNav">
<div class="navbar-nav col-md-6">
<a href="#" class="nav-item nav-link active">Home</a>
</div>
<div class="navbar-nav col-md-6 justify-content-end">
<a href="#" class="nav-item nav-link">About</a>
<a href="#" class="nav-item nav-link">Contact</a>
</div>
</div>
</div>
</nav>
<div class="jumbotron jumbotron-fluid bg-info text-white">
<div class="container">
<h1 class="display-1 text-break">Welcome!</h1>
<p class="lead text-md-center">
<em>
On actualy the first good bootstrap website that I made
<svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-emoji-smile-upside-down" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" d="M8 1a7 7 0 1 1 0 14A7 7 0 0 1 8 1zm0-1a8 8 0 1 1 0 16A8 8 0 0 1 8 0z"/>
<path fill-rule="evenodd" d="M4.285 6.433a.5.5 0 0 0 .683-.183A3.498 3.498 0 0 1 8 4.5c1.295 0 2.426.703 3.032 1.75a.5.5 0 0 0 .866-.5A4.498 4.498 0 0 0 8 3.5a4.5 4.5 0 0 0-3.898 2.25.5.5 0 0 0 .183.683z"/>
<path d="M7 9.5C7 8.672 6.552 8 6 8s-1 .672-1 1.5.448 1.5 1 1.5 1-.672 1-1.5zm4 0c0-.828-.448-1.5-1-1.5s-1 .672-1 1.5.448 1.5 1 1.5 1-.672 1-1.5z"/>
</svg>
.
</em>
</p>
</div>
</div>
<div class="container">
<h2 class="display-4 text-center text-md-left pt-5 my-4">Meet my Creations</h2>
<nav class="nav nav-pills justify-content-center flex-column flex-md-row pb-2" id="pills-tab" role="tablist">
<a class="nav-link active" id="pills-home-tab" data-toggle="pill" href="#pills-home" role="tab" aria-controls="pills-home" aria-selected="true">My bike list</a>
<a class="nav-link" id="pills-profile-tab" data-toggle="pill" href="#pills-profile" role="tab" aria-controls="pills-profile" aria-selected="false">This website</a>
<a class="nav-link" id="pills-akap-tab" data-toggle="pill" href="#pills-akap" role="tab" aria-controls="pills-akap" aria-selected="false">The akap website</a>
</nav>
<div class="tab-content mb-5" id="pills-tabContent">
<div class="tab-pane fade show active" id="pills-home" role="tabpanel" aria-labelledby="pills-home-tab">
<h3>
<svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-bicycle" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" d="M3 12a2 2 0 1 0 0-4 2 2 0 0 0 0 4zm0 1a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm10-1a2 2 0 1 0 0-4 2 2 0 0 0 0 4zm0 1a3 3 0 1 0 0-6 3 3 0 0 0 0 6z"/>
<path fill-rule="evenodd" d="M4 4.5a.5.5 0 0 1 .5-.5H6a.5.5 0 0 1 0 1v.5h4.14l.386-1.158A.5.5 0 0 1 11 4h1a.5.5 0 0 1 0 1h-.64l-.311.935 2.375 3.8a.5.5 0 1 1-.848.53L10.5 6.943l-2.076 3.322A.5.5 0 0 1 8 10.5H3a.5.5 0 0 1-.424-.765L5 5.857V5h-.5a.5.5 0 0 1-.5-.5zm1.5 2.443L3.902 9.5h3.196L5.5 6.943zM8 9.057L9.598 6.5H6.402L8 9.057z"/>
</svg>
My bike list
<small>
<a target="_blank" rel="noopener noreferrer" href="https://the-bike-list.herokuapp.com/">
Vist it
<svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-box-arrow-up-right" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" d="M1.5 13A1.5 1.5 0 0 0 3 14.5h8a1.5 1.5 0 0 0 1.5-1.5V9a.5.5 0 0 0-1 0v4a.5.5 0 0 1-.5.5H3a.5.5 0 0 1-.5-.5V5a.5.5 0 0 1 .5-.5h4a.5.5 0 0 0 0-1H3A1.5 1.5 0 0 0 1.5 5v8zm7-11a.5.5 0 0 1 .5-.5h5a.5.5 0 0 1 .5.5v5a.5.5 0 0 1-1 0V2.5H9a.5.5 0 0 1-.5-.5z"/>
<path fill-rule="evenodd" d="M14.354 1.646a.5.5 0 0 1 0 .708l-8 8a.5.5 0 0 1-.708-.708l8-8a.5.5 0 0 1 .708 0z"/>
</svg>
</a>
</small>
</h3>
<p>This just a bike list website where you can add and remove bikes from a list. It's made with React, Apollo and Bootstrap for the frontend, for the backend it's use a MongoDB database, GraphQL, Nodejs</p>
<span class="badge badge-pill badge-info">ReactJS</span>
<span class="badge badge-pill badge-info">Apollo</span>
<span class="badge badge-pill badge-info">Bootstrap</span>
<span class="badge badge-pill badge-dark">Nodejs</span>
<span class="badge badge-pill badge-dark">GraphQL</span>
<span class="badge badge-pill badge-dark">MongoDB</span>
</div>
<div class="tab-pane fade" id="pills-profile" role="tabpanel" aria-labelledby="pills-profile-tab">
<h3>My first bootstrap website <small class="text-muted">(the one you are actualy on)</small></h3>
<p>This is a simple static html file with some bootstrap class on it. But it actually looks quite good for the first type. It can also serve as a bad portfolio.</p>
<span class="badge badge-pill badge-info">Html</span>
<span class="badge badge-pill badge-info">Bootstrap</span>
</div>
<div class="tab-pane fade" id="pills-akap" role="tabpanel" aria-labelledby="pills-akap-tab">
<h3>A website build for the "Assemblée des Kots-à-Projets de Namur"
<small>
<a target="_blank" rel="noopener noreferrer" href="http://www.akap-namur.be/">
Vist it
<svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-box-arrow-up-right" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" d="M1.5 13A1.5 1.5 0 0 0 3 14.5h8a1.5 1.5 0 0 0 1.5-1.5V9a.5.5 0 0 0-1 0v4a.5.5 0 0 1-.5.5H3a.5.5 0 0 1-.5-.5V5a.5.5 0 0 1 .5-.5h4a.5.5 0 0 0 0-1H3A1.5 1.5 0 0 0 1.5 5v8zm7-11a.5.5 0 0 1 .5-.5h5a.5.5 0 0 1 .5.5v5a.5.5 0 0 1-1 0V2.5H9a.5.5 0 0 1-.5-.5z"/>
<path fill-rule="evenodd" d="M14.354 1.646a.5.5 0 0 1 0 .708l-8 8a.5.5 0 0 1-.708-.708l8-8a.5.5 0 0 1 .708 0z"/>
</svg>
</a>
</small>
</h3>
<p>This web site is build to give to student group a central place to shine and display their latest news</p>
<span class="badge badge-pill badge-info">NextJS</span>
<span class="badge badge-pill badge-info">Apollo</span>
<span class="badge badge-pill badge-info">Matérial-UI</span>
<span class="badge badge-pill badge-dark">Strapi</span>
<span class="badge badge-pill badge-dark">GraphQL</span>
<span class="badge badge-pill badge-dark">Docker</span>
</div>
</div>
</div>
<div class="container">
<h1 class="text-center text-md-left pt-5 my-4">What's going on in the neighborhood?</h1>
<p>I'm currently working on a python project with scikit-learn. My purpose is to deep dive into the AI and machine learning world. I'm reading the "Hands on machine learning" book to do so.</p>
<span class="badge badge-pill badge-light">Python</span>
<span class="badge badge-pill badge-light">Scikit-learn</span>
<span class="badge badge-pill badge-light">TensorFlow</span>
</div>
<div class="container">
<h1 class="display-4 text-center pt-5 my-4">Tech. that I already used</h1>
<!-- cards -->
<div class="row">
<div class="col-6 col-md-4 col-lg-3">
<div class="card m-2">
<img src="img/nodejs.png" alt="nodejs logo" class="card-img-top img-fluid p-1"/>
<div class="card-body">
<h3 class="card-title">Nodejs</h3>
<p class="text-muted text-truncate">Node.js is an open-source, cross-platform,</p>
<a target="_blank" rel="noopener noreferrer" href="https://nodejs.org/en/" class="stretched-link">
<svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-file-earmark-text-fill" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" d="M2 3a2 2 0 0 1 2-2h5.293a1 1 0 0 1 .707.293L13.707 5a1 1 0 0 1 .293.707V13a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V3zm7 2V2l4 4h-3a1 1 0 0 1-1-1zM4.5 8a.5.5 0 0 0 0 1h7a.5.5 0 0 0 0-1h-7zM4 10.5a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 0 1h-7a.5.5 0 0 1-.5-.5zm0 2a.5.5 0 0 1 .5-.5h4a.5.5 0 0 1 0 1h-4a.5.5 0 0 1-.5-.5z"/>
</svg>
Got to the Docs
</a>
</div>
</div>
</div>
<div class="col-6 col-md-4 col-lg-3">
<div class="card m-2">
<img src="img/react.png" alt="react logo" class="card-img-top img-fluid"/>
<div class="card-body">
<h3 class="card-title">React (web framework)</h3>
<p class="text-muted text-truncate"><span data-toggle="tooltip" title="(also known as React.js or ReactJS)" class="text-info" data-placement="top">React</span> is an open-source JavaScript library for building user interfaces.</p>
<a target="_blank" rel="noopener noreferrer" href="https://fr.reactjs.org/" class="stretched-link">
<svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-file-earmark-text-fill" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" d="M2 3a2 2 0 0 1 2-2h5.293a1 1 0 0 1 .707.293L13.707 5a1 1 0 0 1 .293.707V13a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V3zm7 2V2l4 4h-3a1 1 0 0 1-1-1zM4.5 8a.5.5 0 0 0 0 1h7a.5.5 0 0 0 0-1h-7zM4 10.5a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 0 1h-7a.5.5 0 0 1-.5-.5zm0 2a.5.5 0 0 1 .5-.5h4a.5.5 0 0 1 0 1h-4a.5.5 0 0 1-.5-.5z"/>
</svg>
Got to the Docs
</a>
</div>
</div>
</div>
<div class="col-6 col-md-4 col-lg-3">
<div class="card m-2">
<img src="img/graphql.png" alt="graphql logo" class="card-img-top img-fluid"/>
<div class="card-body">
<h3 class="card-title">GraphQL</h3>
<p class="text-muted text-truncate">GraphQL is an open-source data query and manipulation language for APIs</p>
<a target="_blank" rel="noopener noreferrer" href="https://graphql.org/" class="stretched-link">
<svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-file-earmark-text-fill" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" d="M2 3a2 2 0 0 1 2-2h5.293a1 1 0 0 1 .707.293L13.707 5a1 1 0 0 1 .293.707V13a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V3zm7 2V2l4 4h-3a1 1 0 0 1-1-1zM4.5 8a.5.5 0 0 0 0 1h7a.5.5 0 0 0 0-1h-7zM4 10.5a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 0 1h-7a.5.5 0 0 1-.5-.5zm0 2a.5.5 0 0 1 .5-.5h4a.5.5 0 0 1 0 1h-4a.5.5 0 0 1-.5-.5z"/>
</svg>
Got to the Docs
</a>
</div>
</div>
</div>
<div class="col-6 col-md-4 col-lg-3">
<div class="card m-2">
<img src="img/mongodb.png" alt="mongodb logo" class="card-img-top img-fluid"/>
<div class="card-body">
<h3 class="card-title">MongoDB</h3>
<p class="text-muted text-truncate">MongoDB is a cross-platform document-oriented database program.</p>
<a target="_blank" rel="noopener noreferrer" href="https://www.mongodb.com/fr" class="stretched-link">
<svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-file-earmark-text-fill" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" d="M2 3a2 2 0 0 1 2-2h5.293a1 1 0 0 1 .707.293L13.707 5a1 1 0 0 1 .293.707V13a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V3zm7 2V2l4 4h-3a1 1 0 0 1-1-1zM4.5 8a.5.5 0 0 0 0 1h7a.5.5 0 0 0 0-1h-7zM4 10.5a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 0 1h-7a.5.5 0 0 1-.5-.5zm0 2a.5.5 0 0 1 .5-.5h4a.5.5 0 0 1 0 1h-4a.5.5 0 0 1-.5-.5z"/>
</svg>
Got to the Docs
</a>
</div>
</div>
</div>
<div class="col-6 col-md-4 col-lg-3">
<div class="card m-2">
<img src="img/git.png" alt="git logo" class="card-img-top img-fluid"/>
<div class="card-body">
<h3 class="card-title">Git</h3>
<p class="text-muted text-truncate">Git is a distributed version-control system for tracking changes in source code during software development.</p>
<a target="_blank" rel="noopener noreferrer" href="https://git-scm.com/" class="stretched-link">
<svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-file-earmark-text-fill" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" d="M2 3a2 2 0 0 1 2-2h5.293a1 1 0 0 1 .707.293L13.707 5a1 1 0 0 1 .293.707V13a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V3zm7 2V2l4 4h-3a1 1 0 0 1-1-1zM4.5 8a.5.5 0 0 0 0 1h7a.5.5 0 0 0 0-1h-7zM4 10.5a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 0 1h-7a.5.5 0 0 1-.5-.5zm0 2a.5.5 0 0 1 .5-.5h4a.5.5 0 0 1 0 1h-4a.5.5 0 0 1-.5-.5z"/>
</svg>
Got to the Docs
</a>
</div>
</div>
</div>
<div class="col-6 col-md-4 col-lg-3">
<div class="card m-2">
<img src="img/vuejs.png" alt="vuejs logo" class="card-img-top img-fluid"/>
<div class="card-body">
<h3 class="card-title">Vuejs</h3>
<p class="text-muted text-truncate">Vue.js is an open-source model–view–viewmodel JavaScript framework for building user interfaces and single-page applications.</p>
<a target="_blank" rel="noopener noreferrer" href="https://vuejs.org/" class="stretched-link">
<svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-file-earmark-text-fill" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" d="M2 3a2 2 0 0 1 2-2h5.293a1 1 0 0 1 .707.293L13.707 5a1 1 0 0 1 .293.707V13a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V3zm7 2V2l4 4h-3a1 1 0 0 1-1-1zM4.5 8a.5.5 0 0 0 0 1h7a.5.5 0 0 0 0-1h-7zM4 10.5a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 0 1h-7a.5.5 0 0 1-.5-.5zm0 2a.5.5 0 0 1 .5-.5h4a.5.5 0 0 1 0 1h-4a.5.5 0 0 1-.5-.5z"/>
</svg>
Got to the Docs
</a>
</div>
</div>
</div>
<div class="col-6 col-md-4 col-lg-3">
<div class="card m-2">
<img src="img/apollo.png" alt="mongodb logo" class="card-img-top img-fluid p-1"/>
<div class="card-body">
<h3 class="card-title">Apollo</h3>
<p class="text-muted text-truncate">Apollo is a platform for building a data graph, a communication layer that seamlessly connects your application clients (such as React and iOS apps) to your back-end services.</p>
<a target="_blank" rel="noopener noreferrer" href="https://www.apollographql.com/" class="stretched-link">
<svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-file-earmark-text-fill" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" d="M2 3a2 2 0 0 1 2-2h5.293a1 1 0 0 1 .707.293L13.707 5a1 1 0 0 1 .293.707V13a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V3zm7 2V2l4 4h-3a1 1 0 0 1-1-1zM4.5 8a.5.5 0 0 0 0 1h7a.5.5 0 0 0 0-1h-7zM4 10.5a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 0 1h-7a.5.5 0 0 1-.5-.5zm0 2a.5.5 0 0 1 .5-.5h4a.5.5 0 0 1 0 1h-4a.5.5 0 0 1-.5-.5z"/>
</svg>
Got to the Docs
</a>
</div>
</div>
</div>
</div>
</div>
<div class="container"></div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>
<script>
$(function () {
$('[data-taggle="tooltip"]').tooltip();
});
</script>
</body>
</html>