-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathabout_me.html
216 lines (188 loc) · 13.4 KB
/
about_me.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
<meta content="ie=edge" http-equiv="X-UA-Compatible"/>
<title location="title">Michael Bleuez | Software Engineer</title>
<meta content="Michael Bleuez" name="author"/>
<meta content="About me" name="description"/>
<meta content="keywords,here" name="keywords"/>
<link href="tailwind.min.css" rel="stylesheet"/> <!--Replace with your tailwind.css once created-->
<link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.0/animate.min.css" rel="stylesheet"/>
</head>
<body class="bg-gray-200 font-sans leading-normal tracking-normal">
<!--Header-->
<div class="w-full m-0 p-0 bg-cover bg-bottom" style="background-image:url('cover.jpg'); height: 60vh; max-height:460px;">
<div class="container max-w-4xl mx-auto pt-16 md:pt-32 text-center break-normal">
<!--Title-->
<p class="text-white font-extrabold text-3xl md:text-5xl" configurable="title">About me</p>
<p class="text-xl md:text-2xl text-gray-500" configurable="welcome"></p>
</div>
</div>
<!--Container-->
<div class="container px-4 md:px-0 max-w-6xl mx-auto -mt-32">
<div class="mx-0 sm:mx-6">
<!--Nav-->
<nav class="mt-0 w-full">
<div class="container mx-auto flex items-center">
<div class="flex w-1/2 pl-4 text-sm">
<ul class="list-reset flex justify-between flex-1 md:flex-none flex-wrap items-center" location="nav_list">
<a class="inline-block py-2 px-2 text-white no-underline hover:underline" configurable="link_name" href="index.html">HOME</a>
<a class="inline-block py-2 px-2 text-white no-underline hover:underline" configurable="link_name" href="projects.html">PROJECTS</a>
<a class="inline-block py-2 px-2 text-white no-underline hover:underline" configurable="link_name" href="jobs.html">JOBS</a>
<a class="inline-block py-2 px-2 text-white no-underline hover:underline" configurable="link_name" href="contact.html">CONTACT</a></ul>
</div>
</div>
</nav>
<div class="bg-gray-200 w-full text-xl md:text-2xl text-gray-800 leading-normal rounded-t">
<!--Lead Card-->
<!--/Lead Card-->
<!--Posts Container-->
<div class="flex h-full bg-white rounded overflow-hidden shadow-lg">
<a class="flex flex-wrap no-underline hover:no-underline" location="linkto">
<div class="w-full md:w-1/3 rounded-t">
<img class="h-full w-full shadow" location="cover" src="assets/music.jpg"/>
</div>
<div class="w-full md:w-2/3 flex flex-col flex-grow flex-shrink">
<div class="flex-1 bg-white rounded-t rounded-b-none overflow-hidden shadow-lg">
<p class="w-full text-gray-600 text-xs md:text-sm pt-6 px-6" configurable="lead_card_title">MUSIC</p>
<div class="w-full font-bold text-xl text-gray-900 px-6" configurable="lead_card_welcome_bold_message">Music lover and decent pianist</div>
<p class="text-gray-800 font-serif text-base px-6 mb-5" configurable="lead_card_message" style="white-space:pre-wrap">I love very very much music. I appreciate most genres but particularly house, electro, and more recently pop and french songs.
Below, some of my favorite artists (yep, there's a bunch):
</p>
</div>
<div class="flex-none mt-auto bg-white rounded-b rounded-t-none overflow-hidden shadow-lg p-2">
<div class="flex items-center">
<img alt="Avatar of Author" class="w-8 h-8 rounded-full mr-4 avatar" data-tippy-content="TheFatRat" location="avatar" src="assets/the-fatrat.jpg"/>
<img alt="Avatar of Author" class="w-8 h-8 rounded-full mr-4 avatar" data-tippy-content="Clean Bandit" location="avatar" src="assets/cleanbandit.jpg"/>
<img alt="Avatar of Author" class="w-8 h-8 rounded-full mr-4 avatar" data-tippy-content="Lindsey Stirling" location="avatar" src="assets/lindsey.jpg"/>
<img alt="Avatar of Author" class="w-8 h-8 rounded-full mr-4 avatar" data-tippy-content="Avicii" location="avatar" src="assets/avicii.jpg"/>
<img alt="Avatar of Author" class="w-8 h-8 rounded-full mr-4 avatar" data-tippy-content="Aurora" location="avatar" src="assets/aurora.jpg"/>
<img alt="Avatar of Author" class="w-8 h-8 rounded-full mr-4 avatar" data-tippy-content="Sound Remedy" location="avatar" src="assets/soundremedy.jpg"/>
<img alt="Avatar of Author" class="w-8 h-8 rounded-full mr-4 avatar" data-tippy-content="Ed Sheeran" location="avatar" src="assets/edsheeran.png"/>
<img alt="Avatar of Author" class="w-8 h-8 rounded-full mr-4 avatar" data-tippy-content="Florence + the Machine" location="avatar" src="assets/florencemachine.jpg"/>
<img alt="Avatar of Author" class="w-8 h-8 rounded-full mr-4 avatar" data-tippy-content="grandson" location="avatar" src="assets/grandson.jpg"/>
<img alt="Avatar of Author" class="w-8 h-8 rounded-full mr-4 avatar" data-tippy-content="Nightwish" location="avatar" src="assets/nightwish.jpg"/>
<img alt="Avatar of Author" class="w-8 h-8 rounded-full mr-4 avatar" data-tippy-content="Illenium" location="avatar" src="assets/illenium.jpg"/>
<img alt="Avatar of Author" class="w-8 h-8 rounded-full mr-4 avatar" data-tippy-content="Imagine Dragons" location="avatar" src="assets/imaginedragons.jpg"/>
</div>
</div>
<div class="flex-none mt-auto bg-white rounded-b rounded-t-none overflow-hidden shadow-lg p-2">
<div class="flex items-center">
<img alt="Avatar of Author" class="w-8 h-8 rounded-full mr-4 avatar" data-tippy-content="K-391" location="avatar" src="assets/k391.jpg"/>
<img alt="Avatar of Author" class="w-8 h-8 rounded-full mr-4 avatar" data-tippy-content="Owl City" location="avatar" src="assets/owlcity.jpg"/>
<img alt="Avatar of Author" class="w-8 h-8 rounded-full mr-4 avatar" data-tippy-content="Panda Eyes" location="avatar" src="assets/pandaeyes.jpg"/>
<img alt="Avatar of Author" class="w-8 h-8 rounded-full mr-4 avatar" data-tippy-content="Pink Floyd" location="avatar" src="assets/pinkfloyd.png"/>
<img alt="Avatar of Author" class="w-8 h-8 rounded-full mr-4 avatar" data-tippy-content="RL Grime" location="avatar" src="assets/rlgrime.jpg"/>
<img alt="Avatar of Author" class="w-8 h-8 rounded-full mr-4 avatar" data-tippy-content="Secret Garden" location="avatar" src="assets/secretgarden.jpg"/>
<img alt="Avatar of Author" class="w-8 h-8 rounded-full mr-4 avatar" data-tippy-content="Skip The Use" location="avatar" src="assets/skiptheuse.jpg"/>
<img alt="Avatar of Author" class="w-8 h-8 rounded-full mr-4 avatar" data-tippy-content="Black Eyed Peas" location="avatar" src="assets/bep.jpg"/>
<img alt="Avatar of Author" class="w-8 h-8 rounded-full mr-4 avatar" data-tippy-content="The Chainsmokers" location="avatar" src="assets/chainsmokers.png"/>
<img alt="Avatar of Author" class="w-8 h-8 rounded-full mr-4 avatar" data-tippy-content="Unlike Pluto" location="avatar" src="assets/unlikepluto.jpg"/>
<img alt="Avatar of Author" class="w-8 h-8 rounded-full mr-4 avatar" data-tippy-content="Xan Griffin" location="avatar" src="assets/xan.jpg"/>
<img alt="Avatar of Author" class="w-8 h-8 rounded-full mr-4 avatar" data-tippy-content="Hoshi" location="avatar" src="assets/hoshi.jpg"/>
</div>
</div>
</div>
<!-- SEPARATION -->
<div class="w-full flex flex-col flex-grow flex-shrink">
<br>
</div>
<!-- SEPARATION -->
<div class="w-full md:w-2/3 flex flex-col flex-grow flex-shrink">
<div class="flex-1 bg-white rounded-t rounded-b-none overflow-hidden shadow-lg">
<p class="w-full text-gray-600 text-xs md:text-sm pt-6 px-6" configurable="lead_card_title">PHILOSOPHY</p>
<div class="w-full font-bold text-xl text-gray-900 px-6" configurable="lead_card_welcome_bold_message">Basically, happiness and connecting with people</div>
<p class="text-gray-800 font-serif text-base px-6 mb-5" configurable="lead_card_message" style="white-space:pre-wrap">
I notice how much happiness is forgotten during everyday life. The feel of the rain, the smell of that flower, the warmth of a kin are gifts I want to accept. I found the book 'The Art of Happiness' by the Dalaï Lama and Howard Cutler life-changing.
I'm a very calm and patient person, though that doesn't prevent me from having and expressing my own opinions, sometimes a bit too frankly... whoops.
</div>
</div> <div class="w-full md:w-1/3 rounded-t">
<img class="h-full w-full shadow" location="cover" src="assets/flower.jpg"/>
</div>
<!-- SEPARATION -->
<div class="w-full flex flex-col flex-grow flex-shrink">
<br>
</div>
<!-- SEPARATION -->
<div class="w-full md:w-1/3 rounded-t">
<img class="h-full w-full shadow" location="cover" src="assets/cat.jpg"/>
</div>
<div class="w-full md:w-2/3 flex flex-col flex-grow flex-shrink">
<div class="flex-1 bg-white rounded-t rounded-b-none overflow-hidden shadow-lg">
<p class="w-full text-gray-600 text-xs md:text-sm pt-6 px-6" configurable="lead_card_title">SPORTS</p>
<div class="w-full font-bold text-xl text-gray-900 px-6" configurable="lead_card_welcome_bold_message">Both sea and mountain</div>
<p class="text-gray-800 font-serif text-base px-6 mb-5" configurable="lead_card_message" style="white-space:pre-wrap">
Favorite would definitively go to sailing (catamaran).
Skiing is nice too, a bit of hiking won't kill me, and some people will say the first one isn't a sport, but I can hold my own at kicker and ping-pong. Try me!
</div>
</div>
<!-- SEPARATION -->
<div class="w-full flex flex-col flex-grow flex-shrink">
<br>
</div>
<!-- SEPARATION -->
<div class="w-full md:w-2/3 flex flex-col flex-grow flex-shrink">
<div class="flex-1 bg-white rounded-t rounded-b-none overflow-hidden shadow-lg">
<p class="w-full text-gray-600 text-xs md:text-sm pt-6 px-6" configurable="lead_card_title">HOBBIES</p>
<div class="w-full font-bold text-xl text-gray-900 px-6" configurable="lead_card_welcome_bold_message">Anything can fly!</div>
<p class="text-gray-800 font-serif text-base px-6 mb-5" configurable="lead_card_message" style="white-space:pre-wrap">
I've spent a lot of time flying RC models (and making the weirdest possible craft).
So far, I've flown a plane made with LEGOs and a custom 3D-vectored aerobatic plane, both handmade, recently tried my hand at skydiving and paragliding, but those didn't beat the adrenalin of an 'uncontrolled rapid landing' stopped just inches before the ground.
Nowadays, I spend most of my free time coding and watching anime/movies.
</div>
</div>
<div class="w-full md:w-1/3 rounded-t">
<img class="h-full w-full shadow" location="cover" src="assets/plane.jpg"/>
</div>
<!-- SEPARATION -->
<div class="w-full flex flex-col flex-grow flex-shrink">
<br>
</div>
<!-- SEPARATION -->
<div class="w-full md:w-1/3 rounded-t">
<img class="h-full w-full shadow" location="cover" src="assets/linux.png"/>
</div>
<div class="w-full md:w-2/3 flex flex-col flex-grow flex-shrink">
<div class="flex-1 bg-white rounded-t rounded-b-none overflow-hidden shadow-lg">
<p class="w-full text-gray-600 text-xs md:text-sm pt-6 px-6" configurable="lead_card_title">TECH</p>
<div class="w-full font-bold text-xl text-gray-900 px-6" configurable="lead_card_welcome_bold_message">❤️ nerding out on everything</div>
<p class="text-gray-800 font-serif text-base px-6 mb-5" configurable="lead_card_message" style="white-space:pre-wrap">
Starting out on mainstream OSes, I've distro-hopped Linux (and ROM-hopped on my smartphone) for a fair bit of time. As a proficient user, Windows doesn't even compare, but somehow I still HAVE to fill out Microsoft Word documents... Having a free, hackable and open ecosystem to work and play with is starting to become a 'must' for me.
(nerd warning)
I ran ArchLinux for a few years but I'm now using Garuda KDE with a BTRFS+LUKS along linux-zen and zram setup, on that not-so-linux-friendly ideapad 5 pro. My mini-pc server runs on plain Ubuntu, as my plethora of self-hosted services is fully dockerized anyway.
</div>
</div>
<!-- SEPARATION -->
<div class="w-full flex flex-col flex-grow flex-shrink">
<br>
</div>
<!-- SEPARATION -->
<div class="w-full md:w-2/3 flex flex-col flex-grow flex-shrink">
<div class="flex-1 bg-white rounded-t rounded-b-none overflow-hidden shadow-lg">
<p class="w-full text-gray-600 text-xs md:text-sm pt-6 px-6" configurable="lead_card_title">IDEAS</p>
<div class="w-full font-bold text-xl text-gray-900 px-6" configurable="lead_card_welcome_bold_message">My future projects, or at least what I'd like to do when I have some time</div>
<p class="text-gray-800 font-serif text-base px-6 mb-5" configurable="lead_card_message" style="white-space:pre-wrap">
- KDE connect over bluetooth
- Create my own good music player (WIP)
- Play around with neural networks libs
- Collaborate to Neovim itself
- Implement absolute volume management in Linux
</div>
</div>
<div class="w-full md:w-1/3 rounded-t">
<img class="h-full w-full shadow" location="cover" src="assets/rust.png"/>
</div>
</div>
</div>
</div>
</div>
<script src="https://unpkg.com/popper.js@1/dist/umd/popper.min.js"></script>
<script src="https://unpkg.com/tippy.js@4"></script>
<script>
//Init tooltips
tippy('.avatar')
</script>
</body>
</html>