Dennis/dennispotter-cv
1
0
Fork 0
Code Issues 4 Pull Requests Releases Activity

Converted images to WebP and added fallback for browsers that don't support WebP

Browse Source
This commit is contained in:
Dennis Potter 2020-08-12 23:42:47 +02:00
parent 87d881e6d0
commit 6c10fbf689
Signed by: Dennis
GPG Key ID: 186A8AD440942BAF
14 changed files with 51 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
css/layout.css
View File

@ -59,22 +59,30 @@ header {
height: 800px; height: 800px;
min-height: 500px; min-height: 500px;
width: 100%; width: 100%;
background: #161415 url(../images/header-background_1920.jpg) no-repeat top center; background: #161415 url(../images/header-background_1920.webp) no-repeat top center;
background-size: cover !important; background-size: cover !important;
-webkit-background-size: cover !important; -webkit-background-size: cover !important;
text-align: center; text-align: center;
overflow: hidden; overflow: hidden;
} }
.no-webp header {
background: #161415 url(../images/header-background_1920.jpg) no-repeat top center;
}
@media @media
((-webkit-min-device-pixel-ratio: 1.5) or ((-webkit-min-device-pixel-ratio: 1.5) or
(min-resolution: 144dpi)) and (min-resolution: 144dpi)) and
(min-width: 1000px) { (min-width: 1000px) {
header { header {
background: #161415 url(../images/header-background.jpg) no-repeat top center; background: #161415 url(../images/header-background.webp) no-repeat top center;
} }
.no-webp header {
background: #161415 url(../images/header-background.jpg) no-repeat top center;
}
} }
/* vertically center banner section */ /* vertically center banner section */
header:before { header:before {
content: ''; content: '';

BIN
favicon.gif Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 6.0 KiB

BIN
favicon.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 11 KiB

BIN
images/avatar_thumb.jpg
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 58 KiB

After

Width:  |  Height:  |  Size: 40 KiB

BIN
images/avatar_thumb.webp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 19 KiB

BIN
images/header-background.webp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 281 KiB

BIN
images/header-background_1920.webp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 96 KiB

BIN
images/volunteering/alcuinus.gif
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 25 KiB

After

Width:  |  Height:  |  Size: 24 KiB

BIN
images/volunteering/alcuinus.webp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 24 KiB

BIN
images/volunteering/beautycorner.jpg
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 32 KiB

After

Width:  |  Height:  |  Size: 22 KiB

BIN
images/volunteering/beautycorner.webp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 13 KiB

BIN
images/volunteering/nws_logo.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 45 KiB

BIN
images/volunteering/nws_logo.webp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 25 KiB

52
index.html
View File

@ -31,10 +31,9 @@
================================================== --> ================================================== -->
<script src="js/modernizr.js"></script> <script src="js/modernizr.js"></script>
<!-- Favicons <!-- Favicons
================================================== --> ================================================== -->
<link rel="shortcut icon" href="favicon.png" > <link rel="shortcut icon" href="favicon.gif" >
<!-- Preloads <!-- Preloads
================================================== --> ================================================== -->
@ -42,9 +41,9 @@
</head> </head>
<body> <body>
<!-- Header <!-- Header
================================================== --> ================================================== -->
<header id="home"> <header id="home">
@ -59,7 +58,6 @@
<li><a class="smoothscroll" href="#about">About</a></li> <li><a class="smoothscroll" href="#about">About</a></li>
<li><a class="smoothscroll" href="#resume">Resume</a></li> <li><a class="smoothscroll" href="#resume">Resume</a></li>
<li><a class="smoothscroll" href="#volunteering">Volunteering</a></li> <li><a class="smoothscroll" href="#volunteering">Volunteering</a></li>
<!--<li><a class="smoothscroll" href="#testimonials">Testimonials</a></li>-->
<li><a class="smoothscroll" href="#contact">Contact</a></li> <li><a class="smoothscroll" href="#contact">Contact</a></li>
</ul> <!-- end #nav --> </ul> <!-- end #nav -->
@ -111,14 +109,14 @@
<h2>Who am I?</h2> <h2>Who am I?</h2>
<p> <p>
Currently I am a senior engineer at Marvell Semiconductor. I am always curious about technological innovations and therefore graduated in electrical engineering & computer science. Strives for a complete understanding of computers, from the lowest level—i.e., the bare integrated circuits—to the highest—i.e., user space—, and is therefore always eager to learn something new. Enjoys writing small programs in his free time, either to automate everyday problems, or simply for the sake of fun, and gets excited by the seemingly endless possibilities of Linux. Loves a good read, also on non-tech subjects like economics, anthropology, or (geo)politics. Currently I am a senior engineer at Marvell Semiconductor. I have always been curious about technological innovations and therefore graduated in electrical engineering & computer science. I still strive for a complete understanding of computers, from the lowest level—i.e., the bare integrated circuits—to the highest—i.e., user space—, and am therefore always eager to learn something new. I enjoy writing small programs in my free time, either to automate everyday problems, or simply for the sake of fun, and get excited by the seemingly endless possibilities of Linux. Furthermore, there is always time for a good read, also on non-tech subjects like economics, anthropology, or (geo)politics.
</p> </p>
<h2>Contact Details</h2> <h2>Contact Details</h2>
<p>Do you want to get in touch? <a class="smoothscroll" href="#contact">Click here to get to the contact section of this page.</a> There I provided my phone number, email address, PGP Key ID, Matrix ID and several other ways to reach me!</p> <p>Do you want to get in touch? <a class="smoothscroll" href="#contact">Click here to get to the contact section of this page.</a> There I provided my phone number, email address, PGP Key ID, Matrix ID and several other ways to reach me!</p>
<a href="cv/resume.pdf" class="button">Download my resume</a> <!-- Not a secret, but I need to update this: <a href="cv/resume.pdf" class="button">Download my resume</a> -->
</div> </div>
</div> </div>
@ -321,7 +319,11 @@
<div class="columns volunteering-item"> <div class="columns volunteering-item">
<div class="item-wrap"> <div class="item-wrap">
<a href="#modal-01" title=""> <a href="#modal-01" title="">
<img alt="" src="images/volunteering/alcuinus.gif"> <picture>
<source srcset="images/volunteering/alcuinus.webp" type="image/webp">
<source srcset="images/volunteering/alcuinus.gif" type="image/gif">
<img src="images/volunteering/alcuinus.gif" alt="">
</picture>
<div class="overlay"> <div class="overlay">
<div class="volunteering-item-meta"> <div class="volunteering-item-meta">
<h5>Board member of K.A.V. Alcuinus</h5> <h5>Board member of K.A.V. Alcuinus</h5>
@ -337,7 +339,11 @@
<div class="columns volunteering-item"> <div class="columns volunteering-item">
<div class="item-wrap"> <div class="item-wrap">
<a href="#modal-02" title=""> <a href="#modal-02" title="">
<img alt="" src="images/volunteering/nws_logo.png"> <picture>
<source srcset="images/volunteering/nws_logo.webp" type="image/webp">
<source srcset="images/volunteering/nws_logo.jpg" type="image/jpeg">
<img src="images/volunteering/nws_logo.jpg" alt="">
</picture>
<div class="overlay"> <div class="overlay">
<div class="volunteering-item-meta"> <div class="volunteering-item-meta">
<h5>Board member of NWS</h6> <h5>Board member of NWS</h6>
@ -354,7 +360,11 @@
<div class="columns volunteering-item"> <div class="columns volunteering-item">
<div class="item-wrap"> <div class="item-wrap">
<a href="#modal-03" title=""> <a href="#modal-03" title="">
<img alt="" src="images/volunteering/beautycorner.jpg"> <picture>
<source srcset="images/volunteering/beautycorner.webp" type="image/webp">
<source srcset="images/volunteering/beautycorner.jpg" type="image/jpeg">
<img src="images/volunteering/beautycorner.jpg" alt="">
</picture>
<div class="overlay"> <div class="overlay">
<div class="volunteering-item-meta"> <div class="volunteering-item-meta">
<h5>Website Beauty Corner Vaals</h5> <h5>Website Beauty Corner Vaals</h5>
@ -373,7 +383,11 @@
<!-- Alcuinus Popup --> <!-- Alcuinus Popup -->
<div id="modal-01" class="popup-modal mfp-hide"> <div id="modal-01" class="popup-modal mfp-hide">
<img class="scale-with-grid" src="images/volunteering/alcuinus.gif" alt="" /> <picture>
<source srcset="images/volunteering/alcuinus.webp" type="image/webp">
<source srcset="images/volunteering/alcuinus.gif" type="image/gif">
<img class="scale-with-grid" src="images/volunteering/alcuinus.gif" alt="">
</picture>
<div class="description-box"> <div class="description-box">
<h4>Board member of K.A.V. Alcuinus</h4> <h4>Board member of K.A.V. Alcuinus</h4>
@ -392,7 +406,11 @@
<!-- NWS Popup --> <!-- NWS Popup -->
<div id="modal-02" class="popup-modal mfp-hide"> <div id="modal-02" class="popup-modal mfp-hide">
<img class="scale-with-grid" src="images/volunteering/nws_logo.png" alt="" /> <picture>
<source srcset="images/volunteering/nws_logo.webp" type="image/webp">
<source srcset="images/volunteering/nws_logo.jpg" type="image/jpeg">
<img class="scale-with-grid" src="images/volunteering/nws_logo.jpg" alt="">
</picture>
<div class="description-box"> <div class="description-box">
<h4>Board member of NWS</h4> <h4>Board member of NWS</h4>
@ -418,7 +436,11 @@
<!-- Beautycorner Vaals Popup --> <!-- Beautycorner Vaals Popup -->
<div id="modal-03" class="popup-modal mfp-hide"> <div id="modal-03" class="popup-modal mfp-hide">
<img class="scale-with-grid" src="images/volunteering/beautycorner.jpg" alt="" /> <picture>
<source srcset="images/volunteering/beautycorner.webp" type="image/webp">
<source srcset="images/volunteering/beautycorner.jpg" type="image/jpeg">
<img class="scale-with-grid" src="images/volunteering/beautycorner.jpg" alt="">
</picture>
<div class="description-box"> <div class="description-box">
<h4>Beauty Corner Vaals</h4> <h4>Beauty Corner Vaals</h4>
@ -457,7 +479,11 @@
<div class="five columns contact-left businesscard"> <div class="five columns contact-left businesscard">
<div class="profile-pic-wrapper"> <div class="profile-pic-wrapper">
<a href="images/avatar.jpg" target="_BLANK"> <a href="images/avatar.jpg" target="_BLANK">
<img class="profile-pic" src="images/avatar_thumb.jpg" alt="" /> <picture>
<source srcset="images/avatar_thumb.webp" type="image/webp">
<source srcset="images/avatar_thumb.jpg" type="image/jpeg">
<img class="profile-pic" src="images/avatar_thumb.jpg" alt="">
</picture>
</a> </a>
</div> </div>