louis/website
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Optimized and cleaned CSS

Browse Source 
Signed-off-by: Louis Vallat <louis@louis-vallat.xyz>
This commit is contained in:
Louis Vallat 2021-09-22 17:23:46 +02:00
parent af7207d0f5
commit 53649e3b1a
No known key found for this signature in database
GPG Key ID: 0C87282F76E61283
4 changed files with 160 additions and 221 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

323
assets/css/main.css
View File

@ -1,30 +1,144 @@
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500&display=swap');
@charset "utf-8";
/* Coded by Louis Vallat */
:root {
--eerie-black: #141414ff;
--royal-purple: #724e91ff;
--saffron: #f8c630ff;
--tea-green: #c5ebc3ff;
--international-orange-engineering: #b80c09ff;
}
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500&display=swap');
html {
scroll-behavior: smooth;
}
body {
height: 100vh;
font-family: 'Roboto', sans-serif;
font-weight: 400;
background-color: #1f1f1f;
}
h1 {
font-size: 4.5rem;
}
h3 {
font-size: 2.25rem;
}
h4 {
font-size: 1.8rem;
}
h5 {
font-size: 1.5rem;
}
h6 {
font-size: 1.3rem;
}
.bold {
font-weight: 500;
}
.button-style {
text-decoration: none;
padding: 13px 32px;
color: black;
font-size: 1em;
border-radius: 8px;
margin-bottom: 10px;
margin-right: 13px;
background-color: white;
transition: cubic-bezier(0.215, 0.610, 0.355, 1) 200ms;
}
.button-style:hover {
background-color: lightgrey;
box-shadow: 0px 0px 6px 0px lightblue;
}
.button-style > img {
height: 0.9em;
margin-right: 5px;
}
.grey {
color: grey;
}
.white {
color: white;
}
.lightgrey {
color: lightgrey;
}
.black {
color: black;
}
.section {
margin-top: 35px;
margin-bottom: 55px;
}
.section > h3, footer > h3 {
margin-bottom: 7px;
letter-spacing: 1px;
}
.center-align-inline {
display: flex;
align-items: center;
}
.icon {
height: 1.8rem;
transition: cubic-bezier(.65,.05,.36,1) 100ms;
margin-left: 10px;
}
.icon:hover {
transform: translateY(-3px);
}
footer {
padding: 65px 10% 145px 10%;
background-color: #0A0A0A;
}
footer > div > p {
line-height: 1.3em;
flex-basis: 40%;
text-align: justify;
}
.flex-sb {
display: flex;
justify-content: space-between;
align-items: flex-start;
flex-wrap: wrap;
}
#additional-information > img {
margin-right: 8px;
}
#additional-information > h6 {
margin-right: 50px;
}
#inspiration {
line-height: 1.3em;
margin-top: 15px;
}
#copyright {
margin-top: 35px;
}
#skills-logos {
margin-top: 55px;
display: flex;
margin-left: 5%;
margin-right: 5%;
justify-content: space-between;
align-content: flex-start;
flex-wrap: wrap;
}
#skills-logos > img {
@ -32,95 +146,23 @@ body {
margin: 5px 20px;
}
.white-outline-png {
filter: drop-shadow(0px 0px 3px white);
}
#schools {
margin: 0px 50px;
margin-top: 55px;
display: flex;
}
#about > div {
margin-bottom: 75px;
}
#call-to-action {
margin-top: 8vh;
}
#call-to-action > a {
text-decoration: none;
color: black;
font-family: 'Roboto', sans-serif;
padding: 13px 32px;
font-size: 1em;
border-radius: 8px;
background-color: white;
transition: cubic-bezier(0.215, 0.610, 0.355, 1) 200ms;
}
#about {
padding: 50px 10% 0px 10%;
}
h3 {
color: white;
font-size: 2.25rem;
font-family: 'Roboto', sans-serif;
font-weight: 500;
margin-bottom: 7px;
letter-spacing: 1px;
}
h5 {
color: grey;
font-size: 1.5rem;
font-family: 'Roboto', sans-serif;
font-weight: 400;
}
#call-to-action > a:hover {
background-color: lightgrey;
box-shadow: 0px 0px 6px 0px lightblue;
}
#call-to-action > a:first-child {
margin-right: 10px;
padding: 20px 10% 35px 10%;
}
#landing-zone {
background-color: var(--eerie-black);
padding: 0px 10% 0px 10%;
background-color: #141414ff;
padding: 0px 10%;
height: 100vh;
display: flex;
}
#presentation {
align-self: center;
}
.white {
color: white;
}
h1 {
font-family: 'Roboto', sans-serif;
font-weight: 500;
font-size: 6rem;
}
#name {
font-family: 'Roboto', sans-serif;
font-weight: 500;
font-size: 1.8rem;
align-items: center;
}
#subtitle {
font-family: 'Roboto', sans-serif;
font-weight: 500;
font-size: 4.5rem;
letter-spacing: 3px;
word-spacing: 4px;
line-height: 1.35em;
@ -134,106 +176,3 @@ h1 {
width: 70px;
margin: 10px;
}
.center-align-inline {
display: flex;
align-items: center;
}
#additional-information > img {
fill: lightgrey;
margin-right: 8px;
}
#additional-information {
font-family: 'Roboto', sans-serif;
font-weight: 400;
font-size: 1.3em;
color: lightgrey;
}
#additional-information > p {
margin-right: 50px;
}
.icons {
height: 1.8rem;
transition: cubic-bezier(.65,.05,.36,1) 100ms;
margin-left: 10px;
}
.icons:hover {
transform: translateY(-3px);
}
footer {
padding: 65px 10% 145px 10%;
background-color: #0A0A0A;
}
footer > div > p {
line-height: 1.3em;
color: grey;
font-size: 1rem;
font-family: 'Roboto', sans-serif;
font-weight: 400;
flex-basis: 40%;
text-align: justify;
}
footer > div {
display: flex;
justify-content: space-between;
}
footer > div > div {
display: flex;
justify-content: space-between;
align-items: flex-start;
flex-wrap: wrap;
}
footer > div > div > a {
text-decoration: none;
color: black;
font-family: 'Roboto', sans-serif;
padding: 13px 32px;
font-size: 1em;
border-radius: 8px;
margin-bottom: 10px;
margin-left: 8px;
background-color: white;
transition: cubic-bezier(0.215, 0.610, 0.355, 1) 200ms;
}
footer > div > div > a > img {
height: 0.9em;
margin-right: 5px;
}
#inspiration {
line-height: 1.3em;
color: grey;
font-size: 1rem;
font-family: 'Roboto', sans-serif;
font-weight: 400;
margin-top: 15px;
}
#inspiration > a {
text-decoration: underline;
color: grey;
}
#copyright > a {
text-decoration: underline;
color: lightgrey;
}
#copyright {
margin-top: 35px;
color: lightgrey;
font-size: 1rem;
font-family: 'Roboto', sans-serif;
font-weight: 400;
}

2
assets/images/location.svg
View File

@ -1 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24" height="24px" viewBox="0 0 24 24" width="24px" fill="#FFFFFF"><g><rect fill="none" height="24" width="24"/></g><g><path d="M12,2c-4.2,0-8,3.22-8,8.2c0,3.18,2.45,6.92,7.34,11.23c0.38,0.33,0.95,0.33,1.33,0C17.55,17.12,20,13.38,20,10.2 C20,5.22,16.2,2,12,2z M12,12c-1.1,0-2-0.9-2-2c0-1.1,0.9-2,2-2c1.1,0,2,0.9,2,2C14,11.1,13.1,12,12,12z"/></g></svg>
<svg xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24" height="24px" viewBox="0 0 24 24" width="24px" fill="lightgrey"><g><rect fill="none" height="24" width="24"/></g><g><path d="M12,2c-4.2,0-8,3.22-8,8.2c0,3.18,2.45,6.92,7.34,11.23c0.38,0.33,0.95,0.33,1.33,0C17.55,17.12,20,13.38,20,10.2 C20,5.22,16.2,2,12,2z M12,12c-1.1,0-2-0.9-2-2c0-1.1,0.9-2,2-2c1.1,0,2,0.9,2,2C14,11.1,13.1,12,12,12z"/></g></svg>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 420 B

After

Width:  |  Height:  |  Size: 423 B

2
assets/images/work.svg
View File

@ -1 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#FFFFFF"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M20 6h-4V4c0-1.11-.89-2-2-2h-4c-1.11 0-2 .89-2 2v2H4c-1.11 0-1.99.89-1.99 2L2 19c0 1.11.89 2 2 2h16c1.11 0 2-.89 2-2V8c0-1.11-.89-2-2-2zm-6 0h-4V4h4v2z"/></svg>
<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="lightgrey"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M20 6h-4V4c0-1.11-.89-2-2-2h-4c-1.11 0-2 .89-2 2v2H4c-1.11 0-1.99.89-1.99 2L2 19c0 1.11.89 2 2 2h16c1.11 0 2-.89 2-2V8c0-1.11-.89-2-2-2zm-6 0h-4V4h4v2z"/></svg>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 310 B

After

Width:  |  Height:  |  Size: 313 B

54
index.html
View File

@ -20,32 +20,32 @@ PAGE CODED BY :
</head>
<body>
<div id="landing-zone">
<div id="presentation">
<div>
<div class="center-align-inline">
<img src="assets/images/square_pp.jpg" id="profile-picture">
<h2 class="white" id="name">Louis Vallat</h2>
<h4 class="white bold">Louis Vallat</h4>
<div class="center-align-inline">
<a href="https://gitlab.com/lovallat" target="_blank" title="Gitlab"><img src="/assets/images/gitlab-icon-rgb.svg" class="icons" alt="Gitlab RGB logo"/></a>
<a href="https://twitter.com/VallatLouis" target="_blank" title="Twitter"><img src="/assets/images/twitter-logo-blue.svg" class="icons" alt="Twitter blue logo"/></a>
<a href="https://www.linkedin.com/in/louis-vallat/" target="_blank" title="LinkedIN"><img src="/assets/images/LI-In-Bug.png" class="icons" alt="LinkedIN small blue logo"/></a>
<a href="https://gitlab.com/lovallat" target="_blank" title="Gitlab"><img src="/assets/images/gitlab-icon-rgb.svg" class="icon" alt="Gitlab RGB logo"/></a>
<a href="https://twitter.com/VallatLouis" target="_blank" title="Twitter"><img src="/assets/images/twitter-logo-blue.svg" class="icon" alt="Twitter blue logo"/></a>
<a href="https://www.linkedin.com/in/louis-vallat/" target="_blank" title="LinkedIN"><img src="/assets/images/LI-In-Bug.png" class="icon" alt="LinkedIN small blue logo"/></a>
</div>
</div>
<h1 class="white" id="subtitle">Un étudiant développeur, passionné de technologies, quelles qu'elles soient.</h1>
<div class="center-align-inline" id="additional-information">
<img src="/assets/images/work.svg" alt="Logo travail valise"/><p>Étudiant ingénieur en informatique</p>
<img src="/assets/images/location.svg" alt="Logo localisation"/><p>Bordeaux &mdash; France</p>
<h1 class="white bold" id="subtitle">Un étudiant développeur, passionné de technologies, quelles qu'elles soient.</h1>
<div class="center-align-inline lightgrey" id="additional-information">
<img src="/assets/images/work.svg" alt="Logo travail valise"/><h6>Étudiant ingénieur en informatique</h6>
<img src="/assets/images/location.svg" alt="Logo localisation"/><h6>Bordeaux &mdash; France</h6>
</div>
<div id="call-to-action" class="center-align-inline">
<a href="mailto:contact@louis-vallat.xyz">Me contacter</a>
<a href="#about">En savoir plus</a>
<a class="button-style" href="mailto:contact@louis-vallat.xyz">Me contacter</a>
<a class="button-style" href="#about">En savoir plus</a>
</div>
</div>
</div>
<div id="about">
<div id="skills">
<h3>Compétences</h3>
<h5>Des technologies que j'utilise souvent</h5>
<div id="skills-logos">
<div id="skills" class="section">
<h3 class="white bold">Compétences</h3>
<h5 class="grey">Des technologies que j'utilise souvent</h5>
<div id="skills-logos" class="flex-sb">
<img alt="Logo Docker" title="Docker" src="/assets/images/docker-monochromatic.png"/>
<img alt="Logo Git" title="Git" src="/assets/images/git-logo-orange.png"/>
<img alt="Logo Tux" title="Linux" src="/assets/images/tux.svg"/>
@ -60,23 +60,23 @@ PAGE CODED BY :
<!-- more information, footer -->
</div>
<footer>
<h3>À propos</h3>
<div>
<p>
<h3 class="white bold">À propos</h3>
<div class="flex-sb">
<p class="grey">
Véritable factotum du développement, j'aime mettre les mains dans le cambouis.</br>Je gère ma propre infrastructure, qui ne cesse d'évoluer au fil des ans, qui héberge nombre de mes projets informatiques. J'aime aussi régler des problèmes avec du code, l'automatisation me fascine et le devops me passionne.</br>Je suis aussi passionné de 👨‍💻, 📸, 🚄 et de 👨‍🔧.
</p>
<div>
<a href="mailto:contact@louis-vallat.xyz" target="_blank"><img src="/assets/images/send.svg" alt="Logo envoi"/>Me contacter</a>
<a href="/key.gpg"><img src="/assets/images/key.svg" alt="Logo de clef"/>Ma clef GPG</a>
<a href="https://gallery.louis-vallat.xyz" target="_blank"><img src="/assets/images/camera.svg" alt="Logo d'appareil photo"/>Gallerie photo</a>
<a href="https://blog.louis-vallat.xyz" target="_blank"><img src="/assets/images/article.svg" alt="Logo d'article"/>Blog</a>
<div class="flex-sb">
<a class="button-style" href="mailto:contact@louis-vallat.xyz" target="_blank"><img src="/assets/images/send.svg" alt="Logo envoi"/>Me contacter</a>
<a class="button-style" href="/key.gpg"><img src="/assets/images/key.svg" alt="Logo de clef"/>Ma clef GPG</a>
<a class="button-style" href="https://gallery.louis-vallat.xyz" target="_blank"><img src="/assets/images/camera.svg" alt="Logo d'appareil photo"/>Gallerie photo</a>
<a class="button-style" href="https://blog.louis-vallat.xyz" target="_blank"><img src="/assets/images/article.svg" alt="Logo d'article"/>Blog</a>
</div>
</div>
<p id="inspiration">
Design inspiré par <a href="https://louisgrasset.fr/" target="_blank">ceci</a> et <a href="https://dribbble.com/shots/6672981-Personal-Website-Idea-V2/attachments/6672981-Personal-Website-Idea-V2?mode=media" target="_blank">ceci</a>.
<p id="inspiration" class="grey">
Design inspiré par <a href="https://louisgrasset.fr/" target="_blank" class="grey">ceci</a> et <a class="grey" href="https://dribbble.com/shots/6672981-Personal-Website-Idea-V2/attachments/6672981-Personal-Website-Idea-V2?mode=media" target="_blank">ceci</a>.
<p>
<p id="copyright">
Louis Vallat &mdash; 2021 &mdash; Made with ❤ and <a href="https://gitlab.com/lovallat/louis-vallat.xyz" target="_blank">Open Source</a>.
<p class="lightgrey" id="copyright">
Louis Vallat &mdash; 2021 &mdash; Made with ❤ and <a class="lightgrey" href="https://gitlab.com/lovallat/louis-vallat.xyz" target="_blank">Open Source</a>.
</p>
</footer>
</body>