-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
185 lines (169 loc) · 8.04 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
<!DOCTYPE html>
<html lang="">
<head>
<meta charset="utf-8">
<title>Jean Vintache · Accueil</title>
<base href="https://jean.vintache.eu/">
<link rel="stylesheet" href="css/spectre.css">
<link rel="stylesheet" href="css/spectre-exp.min.css">
<link rel="stylesheet" href="css/spectre-icons.min.css">
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/fa/css/all.css">
</head>
<body>
<header>
<div class="container grid-lg">
<div class="columns" id="header-banner">
<div class="column text-left hide-md col-6">
<h2><a href="./index.html">Jean Vintache</a></h2>
</div> <!-- title -->
<div class="column text-right hide-md col-6">
<a href="https://github.com/VJean" class="btn btn-lg btn-link tooltip tooltip-bottom" data-tooltip="Github">
<i class="fab fa-github fa-lg"></i>
</a>
<a href="https://www.linkedin.com/in/jeanvintache" class="btn btn-lg btn-link tooltip tooltip-bottom" data-tooltip="LinkedIn">
<i class="fab fa-linkedin-in fa-lg"></i>
</a>
</div> <!-- links -->
<div class="column text-center show-md col-md-12">
<h2><a href="./index.html">Jean Vintache</a></h2>
</div> <!-- title -->
<div class="column text-center show-md col-md-12">
<a href="https://github.com/VJean" class="btn btn-lg btn-link tooltip tooltip-bottom" data-tooltip="Github">
<i class="fab fa-github fa-lg"></i>
</a>
<a href="https://www.linkedin.com/in/jeanvintache" class="btn btn-lg btn-link tooltip tooltip-bottom" data-tooltip="LinkedIn">
<i class="fab fa-linkedin-in fa-lg"></i>
</a>
</div> <!-- links -->
</div> <!-- columns -->
<div class="columns col-gapless">
<div class="column text-left">
<ul class="breadcrumb">
<li class="breadcrumb-item">
</li>
</ul>
</div> <!-- breadcrumbs -->
<div class="column col-2 text-right">
<a href="index.html" class="btn btn-link">FR</a><span>/</span><a href="en/index.html" class="btn btn-link">EN</a>
</div> <!-- lang switcher -->
<div class="column col-1 text-right">
<button id="theme-switcher" class="btn btn-link tooltip tooltip-left" data-tooltip="Theme">
<i class="fas fa-adjust"></i>
</button>
</div> <!-- theme switcher -->
</div> <!-- columns -->
</div>
</header>
<div class="container centered grid-lg"> <!-- main container -->
<div class="columns">
<div class="column col-11 col-mx-auto">
<section class="text-justify">
<p>Bonjour ! 👋</p>
<p>Je m'appelle Jean.</p>
<p>Je suis un ingénieur en informatique diplômé de l'Université de Technologie de Compiègne. Depuis mars 2017, je travaille sur des sujets d'indexation et de stockage distribué pour de grands volumes de données, en effectuant des tâches de recherche et développement, d'intégration, d'exploitation et de maintien en conditions opérationnelles.</p>
<p>Ce site propose une présentation succinte de mon parcours professionnel, ainsi que quelques articles à propos de certains projets personnels.</p>
<p>Je suis joignable sur <a href="https://www.linkedin.com/in/jeanvintache">LinkedIn</a> ou bien tout simplement via mail à l'adresse <code>pré[email protected]</code>, en remplaçant <code>prénom</code> et <code>nom</code>, par… les miens.</p>
<p class="text-center">Bonne visite !</p>
</section>
</div> <!-- column -->
<div class="column col-6 col-md-12">
<div class="card">
<div class="card-header">
<div class="card-title h5">Mon parcours</div>
<div class="card-subtitle text-gray">Un aperçu de mon parcours professionnel</div>
</div>
<div class="card-footer">
<a href="./parcours.html" class="btn btn-primary"><i class="icon icon-forward"></i> Voir</a>
</div>
</div>
</div>
<div class="column col-6 col-md-12">
<div class="card">
<div class="card-header">
<div class="card-title h5">Mes <small>(petits)</small> projets</div>
<div class="card-subtitle text-gray">Articles à propos de certains de mes projets</div>
</div>
<div class="card-footer">
<a href="./projets.html" class="btn btn-primary"><i class="icon icon-forward"></i> Voir</a>
</div>
</div>
</div>
</div> <!-- columns -->
</div> <!-- main container -->
<footer>
<div class="container grid-lg">
<div class="columns">
<div class="column col-12 text-center">
<p>Jean Vintache © 2022</p>
</div>
</div>
</div>
</footer>
</body>
<script>
/*** Color scheme
First check for local preference in localStorage
then check @prefers-color-scheme media
Website's toggle changes the theme and stores it in localStorage
Changing preferred color scheme from the OS resets the localStorage and sets the theme accordingly.
***/
function get_current_theme() {
return localStorage.getItem('theme');
}
function setDarkMode() {
document.documentElement.setAttribute('data-theme', 'dark');
}
function setLightMode() {
document.documentElement.setAttribute('data-theme', 'light');
}
function activateDarkMode() {
console.log('You changed your preferred color scheme system-wide to dark. Also removing local preference from localStorage.');
setDarkMode();
localStorage.removeItem('theme');
}
function activateLightMode() {
console.log('You changed your preferred color scheme system-wide to light. Also removing local preference from localStorage.');
setLightMode();
localStorage.removeItem('theme');
}
function switchTheme(e) {
const currentTheme = get_current_theme();
console.log('Switching theme, and storing local preference in localStorage.');
if (currentTheme === 'light') {
setDarkMode();
localStorage.setItem('theme', 'dark');
}
else {
setLightMode();
localStorage.setItem('theme', 'light');
}
}
const currentTheme = get_current_theme()
if (currentTheme) {
console.log('Setting theme from local storage.')
document.documentElement.setAttribute('data-theme', currentTheme);
} else {
const isDarkMode = window.matchMedia("(prefers-color-scheme: dark)").matches;
const isLightMode = window.matchMedia("(prefers-color-scheme: light)").matches;
const isNotSpecified = window.matchMedia("(prefers-color-scheme: no-preference)").matches;
const hasNoSupport = !isDarkMode && !isLightMode && !isNotSpecified;
if(isDarkMode) {
console.log('Setting dark theme from @prefers-color-scheme media.')
setDarkMode();
}
if(isLightMode) {
console.log('Setting light theme from @prefers-color-scheme media.')
setLightMode();
}
if(isNotSpecified || hasNoSupport) {
console.log('You specified no preference for a color scheme or your browser does not support it. Default is dark.');
setDarkMode();
}
}
window.matchMedia("(prefers-color-scheme: dark)").addListener(e => e.matches && activateDarkMode())
window.matchMedia("(prefers-color-scheme: light)").addListener(e => e.matches && activateLightMode())
const theme_button = document.querySelector('#theme-switcher');
theme_button.addEventListener('click', switchTheme, false);
</script>
</html>