137 lines
4.9 KiB
HTML
137 lines
4.9 KiB
HTML
<style>
|
|
/* specific banners */
|
|
#top_banner {
|
|
position: absolute;
|
|
top: 0px;
|
|
left: 0px;
|
|
width: 100%;
|
|
}
|
|
|
|
#hero_section {
|
|
min-height: 100vh;
|
|
grid-template-columns: 1fr auto 1fr;
|
|
grid-template-rows: 1fr auto auto;
|
|
|
|
.title {
|
|
/*
|
|
older safari doesn't not support flex gap
|
|
I could use a workaround :
|
|
https://stackoverflow.com/questions/65452057/flexbox-gap-workaround-for-safari
|
|
but it doesn't work with wrap
|
|
so instead I make them in columns and add a margin
|
|
|
|
gap: 10px 30px;
|
|
*/
|
|
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
|
|
> *:first-child {
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
&#name {
|
|
margin: 30px 0px 20px 0px;
|
|
}
|
|
|
|
&#title {
|
|
margin: 20px 0px 20px 0px;
|
|
}
|
|
}
|
|
|
|
.subtitle {
|
|
text-align: center;
|
|
display: inline-block;
|
|
max-width: 700px;
|
|
margin: 0px auto;
|
|
}
|
|
}
|
|
</style>
|
|
|
|
<!-- * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
|
|
* *
|
|
* * * * * * * * * * * * * *
|
|
* * * * * * * * * *
|
|
* * * * * * * * * *
|
|
* * * * * * * * *
|
|
* * * * * * * * * * * * *
|
|
* * * * * * * *
|
|
* * * * * * * *
|
|
* * * * * * * *
|
|
* * * * * * * * * * * * * *
|
|
* *
|
|
* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * -->
|
|
|
|
<!--
|
|
I moved this outside the hero section,
|
|
so that i can change my mind to put it or not without having to change the grid rows height
|
|
-->
|
|
<div
|
|
id="top_banner"
|
|
class="banner banner_size_0 banner_speed_50 banner_reverse grid_full_width"
|
|
aria-label="banner delimitation in ASCII art"
|
|
></div>
|
|
|
|
<section class="section hero" id="hero_section">
|
|
<header>
|
|
<!-- prettier-ignore -->
|
|
<h1 aria-label="hugo lamy" id="name" class="title">
|
|
<span aria-hidden="true" class="pre pre_small">
|
|
|
|
|
|
|
|
|
|
|
|
</span>
|
|
<span aria-hidden="true" class="pre pre_small">
|
|
|
|
|
|
|
|
|
|
|
|
</span>
|
|
</h1>
|
|
|
|
<!-- prettier-ignore -->
|
|
<h1 aria-label="programmeur informatique" id="title" class="title">
|
|
<span aria-hidden="true" class="pre">
|
|
<span class="fr">
|
|
|
|
|
|
|
|
|
|
|
|
</span>
|
|
<span class="en">
|
|
|
|
|
|
|
|
|
|
|
|
</span>
|
|
</span>
|
|
</h1>
|
|
|
|
<p class="subtitle">
|
|
<span class="fr">
|
|
Bonjour, je suis un développeur inventif, méthodique, et passionné par
|
|
l'informatique, et plus particulièrement le libre et l'open source.
|
|
J'aime explorer de nouvelles solutions techniques et comprendre les
|
|
systèmes en profondeur :-]
|
|
</span>
|
|
<span class="en">
|
|
Hello, I am a creative, methodical developer with a passion for computer
|
|
science, particularly free and open-source software. I enjoy exploring
|
|
new technical solutions and gaining a deep understanding of systems :-]
|
|
</span>
|
|
</p>
|
|
</header>
|
|
|
|
<div class="mouse"><div class="frames mouse_1 pre"></div></div>
|
|
<div
|
|
class="banner banner_size_3 banner_speed_30 grid_full_width"
|
|
aria-label="banner delimitation in ASCII art"
|
|
></div>
|
|
</section>
|