🎨 Added lazy loading on <img> and fallback font

This commit is contained in:
Florian Sylvain
2022-02-06 18:38:23 +01:00
parent 6a5ef9672c
commit 1f4e0640f0
2 changed files with 10 additions and 10 deletions
+6 -6
View File
@@ -42,7 +42,7 @@
<div class="to-fade" id="about">
<h2>About</h2>
<div class="block">
<img class="to-grow" src="assets/imgs/FlorianSylvain.jpg">
<img loading="lazy" class="to-grow" src="assets/imgs/FlorianSylvain.jpg">
<p>
IT student at Gustave Eiffel University and R&D Developer Apprentice at WATT Earth, I've always been passionate about computer science. Web design, video games, and algorithms are my main spearhead in computer science.
</p>
@@ -142,7 +142,7 @@
<!-- ---------- Articles contents ---------- -->
<div id="pong2D" class="article-content ">
<img src="assets/imgs/Pong2D.gif">
<img loading="lazy" src="assets/imgs/Pong2D.gif">
<h3>Pong2D</h3>
<p>
My first project in Python (with Pygame). It's a simple pong, with a main menu, a pause menu and a game over.
@@ -154,7 +154,7 @@
</div>
<div id="pong3D" class="article-content">
<img src="assets/imgs/Pong3D.gif">
<img loading="lazy" src="assets/imgs/Pong3D.gif">
<h3>Pong3D</h3>
<p>
My very first project on Unity. It's a simple pong with some effects and a rather calm atmosphere.
@@ -169,7 +169,7 @@
</div>
<div id="risitasBot" class="article-content">
<img src="assets/imgs/RisitasBot.gif">
<img loading="lazy" src="assets/imgs/RisitasBot.gif">
<h3>Risitas Bot</h3>
<p>
Risitas_Bot is a Discord bot that can connect your Twitch chat to a Discord channel in real time, make your friends laugh by playing the meme "Issou!" on command in a voice channel and even give you some statistics about your Osu! account and last ranked games.
@@ -181,7 +181,7 @@
</div>
<div id="riverwood" class="article-content">
<img src="assets/imgs/Riverwood.gif">
<img loading="lazy" src="assets/imgs/Riverwood.gif">
<h3>Riverwood</h3>
<p>
Work of students of DUT info 1 (IUT of Marne-la-Vallée). The students had to create a sound production inspired by the short film "Calls" by Timothée Hochet.
@@ -193,7 +193,7 @@
</div>
<div id="thesesFr" class="article-content">
<img src="assets/imgs/ThesesFr.gif">
<img loading="lazy" src="assets/imgs/ThesesFr.gif">
<h3>thèses.fr</h3>
<p>
The goal was to retrieve the dataset provided by theses.fr, to normalize it, and to create a site allowing to consult these data, first in the form of a simple but visually pleasant list, then in a second time to summarize the research in the form of graphics (and a map).
+4 -4
View File
@@ -19,7 +19,7 @@ body {
margin: 0;
color: #fff;
font-family: Manrope;
font-family: Manrope, 'sans-serif';
font-variation-settings: 'wght' 500;
background-color: #121212;
@@ -54,7 +54,7 @@ nav a:first-letter {
nav a {
position: relative;
font-family: Manrope;
font-family: Manrope, 'sans-serif';
opacity: 0;
@@ -221,7 +221,7 @@ a {
text-align: center;
font-family: Manrope;
font-family: Manrope, 'sans-serif';
font-variation-settings: 'wght' 500;
font-size: 2em;
letter-spacing: 0.1em;
@@ -312,7 +312,7 @@ a {
top: 25px;
left: -35px;
font-family: Overpass;
font-family: Overpass, 'sans-serif';
font-size: 52px;
line-height: 0;
}