Resume
/
resume
2
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix image sizes 

this way we prevent layout shifts
This commit is contained in:
andrzej 2024-11-14 15:48:26 +01:00
parent 92c2be6c5b
commit 1da15a5402
1 changed files with 14 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
index.html
View File

@ -36,7 +36,7 @@
<section> <section>
<div class="container"> <div class="container">
<h3>Allow me to introduce myself...</h3> <h3>Allow me to introduce myself...</h3>
<img src="images/cv.webp" class="image" alt="A photo of myself, smiling to camera." /> <img src="images/cv.webp" class="profile" width="320px" alt="A photo of myself, smiling to camera." />
<div id="intro"> <div id="intro">
<p> <p>
@ -169,11 +169,10 @@
<h3>Subman</h3> <h3>Subman</h3>
</a> </a>
<div class="gallery"> <div class="gallery">
<a href="images/subman.webp"><img src="images/subman.png" alt="A screenshot of subman in action." <a href="images/subman.webp"><img src="images/subman.webp" width="320px" width="240px" alt="A screenshot of subman in action." class="desktop-screen" /></a>
class="desktop-screen" /></a> <a href="images/subman-mobile.webp"><img src="images/subman-mobile.webp" width="120px"
<a href="images/subman-mobile.webp"><img src="images/subman-mobile.png"
alt="A screenshot of subman on mobile." class="mobile-screen"></a> alt="A screenshot of subman on mobile." class="mobile-screen"></a>
<a href="images/subman-mobile-2.webp"><img src="images/subman-mobile-2.png" class="mobile-screen" <a href="images/subman-mobile-2.webp"><img src="images/subman-mobile-2.webp" width="120px" class="mobile-screen"
alt="A screenshot of subman on mobile."></a> alt="A screenshot of subman on mobile."></a>
</div> </div>
<p> <p>
@ -191,12 +190,12 @@
<h3>Movie-Explorer</h3> <h3>Movie-Explorer</h3>
</a> </a>
<div class="gallery"> <div class="gallery">
<a href="images/movie-explorer.webp"><img src="images/movie-explorer.png" <a href="images/movie-explorer.webp"><img src="images/movie-explorer.webp"
alt="A screenshot of Movie-Explorer in action." class="desktop-screen"></a> alt="A screenshot of Movie-Explorer in action." class="desktop-screen" width="300px"></a>
<a href="images/movie-explorer-mobile.webp"><img src="images/movie-explorer-mobile.png" <a href="images/movie-explorer-mobile.webp"><img src="images/movie-explorer-mobile.webp"
alt="A screenshot of Movie-Explorer in action on a mobile device." class="mobile-screen"></a> width="120px" alt="A screenshot of Movie-Explorer in action on a mobile device." class="mobile-screen"></a>
<a href="images/movie-explorer-mobile-2.webp"><img src="images/movie-explorer-mobile-2.png" <a href="images/movie-explorer-mobile-2.webp"><img src="images/movie-explorer-mobile-2.webp"
alt="A screenshot of Movie-Explorer in action on a mobile device." class="mobile-screen"></a> width="120px" alt="A screenshot of Movie-Explorer in action on a mobile device." class="mobile-screen"></a>
</div> </div>
<p> <p>
An app for when you don't know what movie to watch, written in An app for when you don't know what movie to watch, written in
@ -211,7 +210,7 @@
<a href="https://projects.ajstepien.xyz/andrzej/gopaper"> <a href="https://projects.ajstepien.xyz/andrzej/gopaper">
<h3>GoPaper</h3> <h3>GoPaper</h3>
</a> </a>
<a href="images/gopaper.webp"><img src="images/gopaper.png" alt="A screenshot of GoPaper in action." <a href="images/gopaper.webp"><img src="images/gopaper.webp" width="320px" alt="A screenshot of GoPaper in action."
class="desktop-screen" /></a> class="desktop-screen" /></a>
<p>A cross-platform wallpaper demon, built to ensure color harmony, written in Go.</p> <p>A cross-platform wallpaper demon, built to ensure color harmony, written in Go.</p>
<div class="links-container"> <div class="links-container">
@ -234,8 +233,8 @@
<a href="https://demos.ajstepien.xyz/calculator"> <a href="https://demos.ajstepien.xyz/calculator">
<h3>Calculator</h3> <h3>Calculator</h3>
</a> </a>
<a href="images/calculator.webp"><img src="images/calculator.png" png <a href="images/calculator.webp"><img src="images/calculator.webp"
alt="A screenshot of the calculator app in action." class="mobile-screen"></a> width="120px" alt="A screenshot of the calculator app in action." class="mobile-screen"></a>
<p>A simple calculator app written in React and vanilla CSS. Scales responsively to look great on any <p>A simple calculator app written in React and vanilla CSS. Scales responsively to look great on any
screen.</p> screen.</p>
<div class="links-container"> <div class="links-container">