-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
239 lines (236 loc) · 18 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
<!doctype html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link href="./dist/index.css" rel="stylesheet">
<title>Lead-Developer Web | Jérémy PASTOURET</title>
</head>
<body class="text-gray-900 leading-normal">
<div role="document" class="min-h-screen flex flex-col">
<header role="banner" class="w-full p-4 bg-gray-100 dark:bg-gray-600 flex items-center justify-between">
<div class="flex align-center">
<svg width="32" height="32" fill="currentColor" class="mt-1 mr-2">
<path fill-rule="evenodd" clip-rule="evenodd"
d="M16 2a1.4 1.4 0 011.4 1.4v1.4a1.4 1.4 0 11-2.8 0V3.4A1.4 1.4 0 0116 2zM6.1 6.1a1.4 1.4 0 011.98 0l.99.99a1.4 1.4 0 11-1.98 1.98l-.99-.99a1.4 1.4 0 010-1.98zm19.8 0a1.4 1.4 0 010 1.98l-.99.99a1.4 1.4 0 01-1.98-1.98l.99-.99a1.4 1.4 0 011.98 0zM9 16a7 7 0 1114 0 7 7 0 01-14 0zm-7 0a1.4 1.4 0 011.4-1.4h1.4a1.4 1.4 0 110 2.8H3.4A1.4 1.4 0 012 16zm23.8 0a1.4 1.4 0 011.4-1.4h1.4a1.4 1.4 0 110 2.8h-1.4a1.4 1.4 0 01-1.4-1.4zm-2.87 6.93a1.4 1.4 0 011.98 0l.99.99a1.4 1.4 0 01-1.98 1.98l-.99-.99a1.4 1.4 0 010-1.98zm-15.84 0a1.4 1.4 0 011.98 1.98l-.99.99a1.4 1.4 0 01-1.98-1.98l.99-.99zM16 25.8a1.4 1.4 0 011.4 1.4v1.4a1.4 1.4 0 11-2.8 0v-1.4a1.4 1.4 0 011.4-1.4z" fill="url(#paint0_linear)"></path><defs><linearGradient id="paint0_linear" x1="2" y1="2" x2="30" y2="30" gradientUnits="userSpaceOnUse"><stop class="transition-all duration-200" stop-color="#d4d4d8"></stop><stop class="transition-all duration-200" offset="1" stop-color="#d4d4d8"></stop></linearGradient></defs>
</svg>
<div class="relative inline-block w-10 select-none">
<input type="checkbox" name="toggle" id="toggle"
class="transition-transform transform translate-x-0 duration-500 theme-switch absolute block w-8 h-8 rounded-full bg-white appearance-none cursor-pointer mx-1 my-1"/>
<label for="toggle" class="theme-switch-label block overflow-hidden w-20 h-10 rounded-full bg-yellow-300 cursor-pointer"></label>
</div>
<svg width="24" height="24" fill="currentColor"
class="text-gray-400 mt-1.5 ml-12">
<path fill-rule="evenodd" clip-rule="evenodd"
d="M9.353 2.939a1 1 0 01.22 1.08 8 8 0 0010.408 10.408 1 1 0 011.301 1.3A10.003 10.003 0 0112 22C6.477 22 2 17.523 2 12c0-4.207 2.598-7.805 6.273-9.282a1 1 0 011.08.22z"></path>
</svg>
</div>
<nav role="navigation" tabindex="-1" aria-label="Main">
<ul class="flex align-center spacing-x-4 dark:text-blue-300">
<li><a href="#content" aria-current="page">Accueil</a></li>
</ul>
</nav>
</header>
<main class="flex-grow w-full p-4 bg-white dark:bg-black" id="content" tabindex="-1">
<div class="max-w-5xl mx-auto mt-10">
<h1 class="text-5xl lg:text-3xl font-bold leading-tight mb-4 text-center dark:text-white"><a
href="/" rel="home"
>Jérémy PASTOURET</a></h1>
<h1 class="text-5xl lg:text-3xl leading-tight mb-4 text-center dark:text-white">Lead-Developer Web</h1>
<p class="leading-tight text-lg mb-4 text-center from-gray-400 dark:text-blue-300">Phalcon - Laravel - VueJS - Tailwind CSS
- GitHub</p>
<div class="flex mt-10">
<div class="flex mx-auto space-y-1">
<div class="bg-gradient-to-r from-cyan-400 to-fuchsia-600 rounded-full p-1"><a
class="block bg-white p-1 rounded-full dark:bg-blue-200"><img class="w-40" src="https://musing-wescoff-37deb3.netlify.app/assets/images/me.png"
alt=""></a></div>
</div>
</div>
<!-- https://dev.to/ananyaneogi/create-a-dark-light-mode-switch-with-css-variables-34l8-->
<section class="text-gray-600 body-font py-5">
<div class="container px-5 py-5 mx-auto">
<div class="text-center mb-20">
<p class="text-base leading-relaxed xl:w-2/4 lg:w-3/4 mx-auto text-gray-500 dark:text-blue-200">Explore les
nouvelles technologies, langages et frameworks afin de vous proposer les solutions les
plus modernes.</p>
<div class="flex mt-6 justify-center">
<div class="w-16 h-1 rounded-full bg-indigo-500 inline-flex"></div>
</div>
</div>
<div class="flex flex-wrap sm:-m-4 -mx-4 -mb-10 -mt-4 md:space-y-0 space-y-6">
<div class="p-4 md:w-1/3 flex flex-col text-center items-center">
<div
class="w-20 h-20 inline-flex items-center justify-center rounded-full bg-indigo-100 text-indigo-500 mb-5 flex-shrink-0">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
stroke="currentColor" class="w-10 h-10">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M14 10l-2 1m0 0l-2-1m2 1v2.5M20 7l-2 1m2-1l-2-1m2 1v2.5M14 4l-2-1-2 1M4 7l2-1M4 7l2 1M4 7v2.5M12 21l-2-1m2 1l2-1m-2 1v-2.5M6 18l-2-1v-2.5M18 18l2-1v-2.5" />
</svg></div>
<div class="flex-grow">
<h2 class="text-gray-900 dark:text-blue-500 text-lg title-font font-medium mb-3">Blogueur</h2>
<p class="leading-relaxed text-base dark:text-white">Partage de connaissances, tutoriels détaillés,
présentation de services pratiques sur le média Les Enovateurs.</p><a
class="mt-3 text-indigo-500 inline-flex items-center"
href="https://les-enovateurs.com">En savoir plus <svg fill="none"
stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
stroke-width="2" class="w-4 h-4 ml-2" viewBox="0 0 24 24">
<path d="M5 12h14M12 5l7 7-7 7"></path>
</svg></a>
</div>
</div>
<div class="p-4 md:w-1/3 flex flex-col text-center items-center">
<div
class="w-20 h-20 inline-flex items-center justify-center rounded-full bg-indigo-100 text-indigo-500 mb-5 flex-shrink-0">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
stroke="currentColor" class="w-10 h-10">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M11.049 2.927c.3-.921 1.603-.921 1.902 0l1.519 4.674a1 1 0 00.95.69h4.915c.969 0 1.371 1.24.588 1.81l-3.976 2.888a1 1 0 00-.363 1.118l1.518 4.674c.3.922-.755 1.688-1.538 1.118l-3.976-2.888a1 1 0 00-1.176 0l-3.976 2.888c-.783.57-1.838-.197-1.538-1.118l1.518-4.674a1 1 0 00-.363-1.118l-3.976-2.888c-.784-.57-.38-1.81.588-1.81h4.914a1 1 0 00.951-.69l1.519-4.674z" />
</svg></div>
<div class="flex-grow">
<h2 class="text-gray-900 dark:text-blue-500 text-lg title-font font-medium mb-3">Entrepreneur</h2>
<p class="leading-relaxed text-base dark:text-white">Créateur de services modernes comme <a
href="https://garwen.fr/" class="text-indigo-500">Garwen</a> (pour augmenter
la durée de vie de vos objets) et <a class="text-indigo-500"
href="https://unlock-my-data.com/">Unlock My Data</a> (pour protéger vos
données personnelles).</p><a
class="mt-3 text-indigo-500 inline-flex items-center"
href="https://garwen.fr/">En savoir plus <svg fill="none" stroke="currentColor"
stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
class="w-4 h-4 ml-2" viewBox="0 0 24 24">
<path d="M5 12h14M12 5l7 7-7 7"></path>
</svg></a>
</div>
</div>
<div class="p-4 md:w-1/3 flex flex-col text-center items-center">
<div
class="w-20 h-20 inline-flex items-center justify-center rounded-full bg-indigo-100 text-indigo-500 mb-5 flex-shrink-0">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
stroke="currentColor" class="w-10 h-10">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M15.232 5.232l3.536 3.536m-2.036-5.036a2.5 2.5 0 113.536 3.536L6.5 21.036H3v-3.572L16.732 3.732z" />
</svg></div>
<div class="flex-grow">
<h2 class="text-gray-900 dark:text-blue-500 text-lg title-font font-medium mb-3">Auteur</h2>
<p class="leading-relaxed text-base dark:text-white">Réalisation complète d'un livre sur Phalcon
publié aux Editions ENI. Cet ouvrage permet aux juniors comme aux développeurs
expérimentés de prendre en main ce framework.</p><a
class="mt-3 text-indigo-500 inline-flex items-center"
href="https://www.editions-eni.fr/livre/phalcon-3-developpez-des-applications-web-complexes-et-performantes-en-php-9782409022746?utm_source=e-novateurs&utm_medium=affiliation&utm_campaign=2020-01-16-JPASTOURET&xtor=AL-3910-[JPASTOURET]">En
savoir plus <svg fill="none" stroke="currentColor" stroke-linecap="round"
stroke-linejoin="round" stroke-width="2" class="w-4 h-4 ml-2"
viewBox="0 0 24 24">
<path d="M5 12h14M12 5l7 7-7 7"></path>
</svg></a>
</div>
</div>
</div>
</div>
</section>
<section class="bg-gray-100 dark:bg-gray-500 w-full h-2/3 overflow-hidden absolute left-0">
<div class="w-full mx-auto flex flex-wrap transform -rotate-35 skew-x-2 scale-150">
<div class="p-1 mx-6">
<div
class="z-10 flex p-2 items-center flex-col h-44 w-96 rounded-md shadow-md my-4 transform duration-200 move-item">
<img class="rounded-md w-full h-full object-cover" src="https://musing-wescoff-37deb3.netlify.app/assets/images/enov2.png"></div>
</div>
<div class="p-1 mx-6">
<div
class="dark:bg-white z-20 flex p-2 items-center flex-col h-44 w-96 rounded-md shadow-md my-4 transform duration-200 move-item">
<img class="rounded-md w-full h-full object-cover" src="https://musing-wescoff-37deb3.netlify.app/assets/images/enov2.png"></div>
</div>
<div class="p-1 mx-6">
<div
class="dark:bg-white z-20 flex p-2 items-center flex-col h-44 w-96 rounded-md shadow-md my-4 transform duration-200 move-item">
<img class="rounded-md w-full h-full object-cover" src="https://musing-wescoff-37deb3.netlify.app/assets/images/enov2.png"></div>
</div>
<div class="p-1 mx-6">
<div
class="dark:bg-white z-20 flex p-2 items-center flex-col h-44 w-96 rounded-md shadow-md my-4 transform duration-200 move-item">
<img class="rounded-md w-full h-full object-cover" src="https://musing-wescoff-37deb3.netlify.app/assets/images/garwen.png">
</div>
</div>
<div class="p-1 mx-6">
<div
class="dark:bg-white z-20 flex p-2 items-center flex-col h-44 w-96 rounded-md shadow-md my-4 transform duration-200 move-item">
<img class="rounded-md w-full h-full object-cover" src="https://musing-wescoff-37deb3.netlify.app/assets/images/garwen.png">
</div>
</div>
<div class="p-1 mx-6">
<div
class="dark:bg-white z-20 flex p-2 items-center flex-col h-44 w-96 rounded-md shadow-md my-4 transform duration-200 move-item">
<img class="rounded-md w-full h-full object-cover" src="https://musing-wescoff-37deb3.netlify.app/assets/images/garwen2.png">
</div>
</div>
<div class="p-1 mx-6">
<div
class="dark:bg-white z-20 flex p-2 items-center flex-col h-44 w-96 rounded-md shadow-md my-4 transform duration-200 move-item">
<img class="rounded-md w-full h-full object-cover" src="https://musing-wescoff-37deb3.netlify.app/assets/images/unlock.png">
</div>
</div>
<div class="p-1 mx-6">
<div
class="dark:bg-white z-20 flex p-2 items-center flex-col h-44 w-96 rounded-md shadow-md my-4 transform duration-200 move-item">
<img class="rounded-md w-full h-full object-cover" src="https://musing-wescoff-37deb3.netlify.app/assets/images/unlock.png">
</div>
</div>
<div class="p-1 mx-6">
<div
class="dark:bg-white z-20 flex p-2 items-center flex-col h-44 w-96 rounded-md shadow-md my-4 transform duration-200 move-item">
<img class="rounded-md w-full h-full object-cover" src="https://musing-wescoff-37deb3.netlify.app/assets/images/unlock2.jpg">
</div>
</div>
<div class="p-1 mx-6">
<div
class="dark:bg-white z-20 flex p-2 items-center flex-col h-44 w-96 rounded-md shadow-md my-4 transform duration-200 move-item">
<img class="rounded-md w-full h-full object-cover" src="https://musing-wescoff-37deb3.netlify.app/assets/images/unlock2.jpg">
</div>
</div>
<div class="p-1 mx-6">
<div
class="dark:bg-white z-20 flex p-2 items-center flex-col h-44 w-96 rounded-md shadow-md my-4 transform duration-200 move-item">
<img class="rounded-md w-full h-full object-cover" src="https://musing-wescoff-37deb3.netlify.app/assets/images/enov.jpg"></div>
</div>
<div class="p-1 mx-6">
<div
class="dark:bg-white z-20 flex p-2 items-center flex-col h-44 w-96 rounded-md shadow-md my-4 transform duration-200 move-item">
<img class="rounded-md w-full h-full object-cover" src="https://musing-wescoff-37deb3.netlify.app/assets/images/enov.jpg"></div>
</div>
<div class="p-1 mx-6">
<div
class="dark:bg-white z-20 flex p-2 items-center flex-col h-44 w-96 rounded-md shadow-md my-4 transform duration-200 move-item">
<img class="rounded-md w-full h-full object-cover" src="https://musing-wescoff-37deb3.netlify.app/assets/images/enov.jpg"></div>
</div>
</div>
</section>
</div>
</main>
<footer role="contentinfo" class="w-full p-4 bg-gray-100 flex items-center justify-center space-x-2"><span
class="font-mono text-xs">© Jérémy PASTOURET 2021</span> <a
href="https://github.com/jenovateurs"><svg xmlns="http://www.w3.org/2000/svg" role="presentation"
focusable="false" class="w-6 h-6 fill-current">
<path fill-rule="evenodd" clip-rule="evenodd"
d="M12.026 2c-5.509 0-9.974 4.465-9.974 9.974 0 4.406 2.857 8.145 6.821 9.465.499.09.679-.217.679-.481 0-.237-.008-.865-.011-1.696-2.775.602-3.361-1.338-3.361-1.338-.452-1.152-1.107-1.459-1.107-1.459-.905-.619.069-.605.069-.605 1.002.07 1.527 1.028 1.527 1.028.89 1.524 2.336 1.084 2.902.829.091-.645.351-1.085.635-1.334-2.214-.251-4.542-1.107-4.542-4.93 0-1.087.389-1.979 1.024-2.675-.101-.253-.446-1.268.099-2.64 0 0 .837-.269 2.742 1.021a9.582 9.582 0 012.496-.336 9.554 9.554 0 012.496.336c1.906-1.291 2.742-1.021 2.742-1.021.545 1.372.203 2.387.099 2.64.64.696 1.024 1.587 1.024 2.675 0 3.833-2.33 4.675-4.552 4.922.355.308.675.916.675 1.846 0 1.334-.012 2.41-.012 2.737 0 .267.178.577.687.479C19.146 20.115 22 16.379 22 11.974 22 6.465 17.535 2 12.026 2z" />
</svg> <span class="sr-only">GitHub</span></a></footer>
</div>
<script type="text/javascript">
const toggleSwitch = document.querySelector('input[type="checkbox"].theme-switch');
if (localStorage.theme === 'dark' || (!('theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
document.documentElement.classList.add('dark');
toggleSwitch.checked = true;
} else {
document.documentElement.classList.remove('dark')
}
function switchTheme(e) {
if (e.target.checked) {
localStorage.setItem('theme', 'dark');
document.documentElement.classList.add('dark');
}
else {
localStorage.setItem('theme', 'light');
document.documentElement.classList.remove('dark')
}
}
toggleSwitch.addEventListener('change', switchTheme, false);
</script>
</body>
</html>