🎨 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"> <div class="to-fade" id="about">
<h2>About</h2> <h2>About</h2>
<div class="block"> <div class="block">
<img class="to-grow" src="assets/imgs/FlorianSylvain.jpg"> <img loading="lazy" class="to-grow" src="assets/imgs/FlorianSylvain.jpg">
<p> <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. 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> </p>
@@ -142,7 +142,7 @@
<!-- ---------- Articles contents ---------- --> <!-- ---------- Articles contents ---------- -->
<div id="pong2D" class="article-content "> <div id="pong2D" class="article-content ">
<img src="assets/imgs/Pong2D.gif"> <img loading="lazy" src="assets/imgs/Pong2D.gif">
<h3>Pong2D</h3> <h3>Pong2D</h3>
<p> <p>
My first project in Python (with Pygame). It's a simple pong, with a main menu, a pause menu and a game over. 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>
<div id="pong3D" class="article-content"> <div id="pong3D" class="article-content">
<img src="assets/imgs/Pong3D.gif"> <img loading="lazy" src="assets/imgs/Pong3D.gif">
<h3>Pong3D</h3> <h3>Pong3D</h3>
<p> <p>
My very first project on Unity. It's a simple pong with some effects and a rather calm atmosphere. 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>
<div id="risitasBot" class="article-content"> <div id="risitasBot" class="article-content">
<img src="assets/imgs/RisitasBot.gif"> <img loading="lazy" src="assets/imgs/RisitasBot.gif">
<h3>Risitas Bot</h3> <h3>Risitas Bot</h3>
<p> <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. 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>
<div id="riverwood" class="article-content"> <div id="riverwood" class="article-content">
<img src="assets/imgs/Riverwood.gif"> <img loading="lazy" src="assets/imgs/Riverwood.gif">
<h3>Riverwood</h3> <h3>Riverwood</h3>
<p> <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. 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>
<div id="thesesFr" class="article-content"> <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> <h3>thèses.fr</h3>
<p> <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). 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; margin: 0;
color: #fff; color: #fff;
font-family: Manrope; font-family: Manrope, 'sans-serif';
font-variation-settings: 'wght' 500; font-variation-settings: 'wght' 500;
background-color: #121212; background-color: #121212;
@@ -54,7 +54,7 @@ nav a:first-letter {
nav a { nav a {
position: relative; position: relative;
font-family: Manrope; font-family: Manrope, 'sans-serif';
opacity: 0; opacity: 0;
@@ -221,7 +221,7 @@ a {
text-align: center; text-align: center;
font-family: Manrope; font-family: Manrope, 'sans-serif';
font-variation-settings: 'wght' 500; font-variation-settings: 'wght' 500;
font-size: 2em; font-size: 2em;
letter-spacing: 0.1em; letter-spacing: 0.1em;
@@ -312,7 +312,7 @@ a {
top: 25px; top: 25px;
left: -35px; left: -35px;
font-family: Overpass; font-family: Overpass, 'sans-serif';
font-size: 52px; font-size: 52px;
line-height: 0; line-height: 0;
} }