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

Compare commits

base: Resume:92c2be6c5b33f6294365ded2428f86dc2777f833
Branches Tags
Resume:main
..
compare: Resume:f8f098eaa394b5456b7db7c919372c44254cd62c
Branches Tags
Resume:main

3 Commits
92c2be6c5b ... f8f098eaa3

Author SHA1 Message Date
andrzej f8f098eaa3 style profile image
Gitea/resume/pipeline/head This commit looks good Details
2024-11-14 15:48:44 +01:00
andrzej ed887b36ed add transparency 2024-11-14 15:48:34 +01:00
andrzej 1da15a5402 fix image sizes 
this way we prevent layout shifts
 2024-11-14 15:48:26 +01:00
3 changed files with 18 additions and 15 deletions
Show Stats Expand all files Collapse all files

4
css/styles.css
View File

@ -278,6 +278,10 @@ img {
margin-bottom: 2rem; margin-bottom: 2rem;
} }
img.profile {
border-radius: 100%;
}
.desktop-screen { .desktop-screen {
max-width: 100%; max-width: 100%;
} }

BIN
images/calculator.webp
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 15 KiB

After

Width:  |  Height:  |  Size: 24 KiB

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">