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

add and style screenshots
Gitea/resume/pipeline/head This commit looks good Details

This commit is contained in:
andrzej 2024-11-12 19:38:43 +01:00
parent 8af9a3f43f
commit e9b4689865
6 changed files with 244 additions and 253 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
css/styles.css
View File

@ -252,7 +252,7 @@ li::marker {
list-style-type: none; list-style-type: none;
@media screen and (min-width:601px) { @media screen and (min-width:601px) {
width: 60%; width: 61%;
} }
@media screen and (max-width:600px) { @media screen and (max-width:600px) {
@ -278,6 +278,23 @@ img {
margin-bottom: 2rem; margin-bottom: 2rem;
} }
.desktop-screen {
max-width: 400px;
}
.mobile-screen {
max-height: 240px;
}
.gallery {
display: flex;
flex-wrap: wrap;
justify-content: space-evenly;
align-items: center;
width: 100%;
}
#intro { #intro {
height: 100%; height: 100%;
padding: 1rem; padding: 1rem;

BIN
images/calculator.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 99 KiB

BIN
images/movie-explorer-mobile.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 284 KiB

BIN
images/movie-explorer.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.7 MiB

BIN
images/subman-mobile.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 63 KiB

116
index.html
View File

@ -1,5 +1,6 @@
<!doctype html> <!doctype html>
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
@ -17,11 +18,7 @@
<section> <section>
<div class="container"> <div class="container">
<h3>Allow me to introduce myself...</h3> <h3>Allow me to introduce myself...</h3>
<img <img src="images/cv.png" class="image" alt="A photo of myself, smiling to camera." />
src="images/cv.png"
class="image"
alt="A photo of myself, smiling to camera."
/>
<div id="intro"> <div id="intro">
<p> <p>
@ -46,35 +43,22 @@
<b>… is served by a custom-coded http server written in Java.</b> <b>… is served by a custom-coded http server written in Java.</b>
</li> </li>
<li> <li>
<b <b>… has self-managed security certificates, scoring an 'A' grade
>… has self-managed security certificates, scoring an 'A' grade
on on
<a <a href="https://www.ssllabs.com/ssltest/analyze.html?d=sonarrr.ajstepien.xyz">sslabs.com</a>.</b>
href="https://www.ssllabs.com/ssltest/analyze.html?d=sonarrr.ajstepien.xyz"
>sslabs.com</a
>.</b
>
</li> </li>
<li> <li>
<b <b>… is fully compliant with
>… is fully compliant with <a href="https://www.w3.org/WAI/standards-guidelines/wcag/">Web Content Accessibility Guidelines</a>.</b>
<a href="https://www.w3.org/WAI/standards-guidelines/wcag/"
>Web Content Accessibility Guidelines</a
>.</b
>
</li> </li>
<li> <li>
<b <b>… is styled with careful consideration for Responsive Web
>… is styled with careful consideration for Responsive Web Design principles.</b>
Design principles.</b
>
</li> </li>
<li><b>… follows system light/dark theming.</b></li> <li><b>… follows system light/dark theming.</b></li>
<li> <li>
<b <b>… hosts a collection of projects demonstrating my proficiency
>… hosts a collection of projects demonstrating my proficiency in both frontend and backend development</b>
in both frontend and backend development</b
>
including projects written in CSS, Html, Javascript, React, including projects written in CSS, Html, Javascript, React,
Nextjs, Nodejs, Sql, Lua, Golang, Java and Bash. Nextjs, Nodejs, Sql, Lua, Golang, Java and Bash.
</li> </li>
@ -83,9 +67,7 @@
</li> </li>
<li> <li>
<b>… is fully source-available</b> on <b>… is fully source-available</b> on
<a href="https://projects.ajstepien.xyz/Resume" <a href="https://projects.ajstepien.xyz/Resume">my self-hosted git server.</a>
>my self-hosted git server.</a
>
</li> </li>
<li><b>… was lovingly hand-coded by myself.</b></li> <li><b>… was lovingly hand-coded by myself.</b></li>
</ul> </ul>
@ -124,21 +106,18 @@
<ul class="link-list"> <ul class="link-list">
<li> <li>
<a <a
href="https://www.freecodecamp.org/certification/fcc60e22726-0a94-4738-8702-3e216d14fdb2/front-end-development-libraries" href="https://www.freecodecamp.org/certification/fcc60e22726-0a94-4738-8702-3e216d14fdb2/front-end-development-libraries">Front
>Front End Development Libraries</a End Development Libraries</a>
>
</li> </li>
<li> <li>
<a <a
href="https://www.freecodecamp.org/certification/fcc60e22726-0a94-4738-8702-3e216d14fdb2/responsive-web-design" href="https://www.freecodecamp.org/certification/fcc60e22726-0a94-4738-8702-3e216d14fdb2/responsive-web-design">Responsive
>Responsive Web Design</a Web Design</a>
>
</li> </li>
<li> <li>
<a <a
href="https://www.freecodecamp.org/certification/fcc60e22726-0a94-4738-8702-3e216d14fdb2/javascript-algorithms-and-data-structures" href="https://www.freecodecamp.org/certification/fcc60e22726-0a94-4738-8702-3e216d14fdb2/javascript-algorithms-and-data-structures">Javascript
>Javascript Algorithms and Data Structures</a Algorithms and Data Structures</a>
>
</li> </li>
</ul> </ul>
</figure> </figure>
@ -148,17 +127,13 @@
<figcaption>IBM certificates</figcaption> <figcaption>IBM certificates</figcaption>
<ul class="link-list"> <ul class="link-list">
<li> <li>
<a <a href="https://courses.edx.org/certificates/0ac958dec5424747b59860843844bd22">Introduction to Cloud
href="https://courses.edx.org/certificates/0ac958dec5424747b59860843844bd22" Computing</a>
>Introduction to Cloud Computing</a
>
</li> </li>
<li> <li>
<a <a href="https://courses.edx.org/certificates/f7a2d211241a432785f298df38336098">Introduction to Cloud
href="https://courses.edx.org/certificates/f7a2d211241a432785f298df38336098" Development with HTML, CSS, and
>Introduction to Cloud Development with HTML, CSS, and JavaScript</a>
JavaScript</a
>
</li> </li>
</ul> </ul>
</figure> </figure>
@ -174,10 +149,11 @@
<a href="https://subman.ajstepien.xyz"> <a href="https://subman.ajstepien.xyz">
<h3>Subman</h3> <h3>Subman</h3>
</a> </a>
<img <div class="gallery">
src="images/subman.png" <a href="images/subman.png"><img src="images/subman.png" alt="A screenshot of subman in action."
alt="A screenshot of subman in action." class="desktop-screen" /></a>
/> <a href="images/subman-mobile.png"><img src="images/subman-mobile.png" class="mobile-screen"></a>
</div>
<p> <p>
A self-hosted literary submission management system comprising a A self-hosted literary submission management system comprising a
Nextjs web-app with Sqlite back-end. CRUD app styled with Nextjs web-app with Sqlite back-end. CRUD app styled with
@ -185,9 +161,7 @@
</p> </p>
<div class="links-container"> <div class="links-container">
<a href="https://subman.ajstepien.xyz">demo</a> <a href="https://subman.ajstepien.xyz">demo</a>
<a href="https://projects.ajstepien.xyz/Resume/subman-nextjs" <a href="https://projects.ajstepien.xyz/Resume/subman-nextjs">source</a>
>source</a
>
</div> </div>
</li> </li>
<!-- <li class="container"> --> <!-- <li class="container"> -->
@ -204,30 +178,30 @@
<a href="https://demos.ajstepien.xyz/movie-explorer"> <a href="https://demos.ajstepien.xyz/movie-explorer">
<h3>Movie-Explorer</h3> <h3>Movie-Explorer</h3>
</a> </a>
<div class="gallery">
<a href="images/movie-explorer.png"><img src="images/movie-explorer.png"
alt="A screenshot of Movie-Explorer in action." class="desktop-screen"></a>
<a href="images/movie-explorer-mobile.png"><img src="images/movie-explorer-mobile.png"
alt="A screenshot of Movie-Explorer in action on a mobile device." class="mobile-screen"></a>
</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
Typescript/React and vanilla CSS. Typescript/React and vanilla CSS.
</p> </p>
<div class="links-container"> <div class="links-container">
<a href="https://demos.ajstepien.xyz/movie-explorer">demo</a> <a href="https://demos.ajstepien.xyz/movie-explorer">demo</a>
<a href="https://projects.ajstepien.xyz/Resume/movie-explorer" <a href="https://projects.ajstepien.xyz/Resume/movie-explorer">source</a>
>source</a
>
</div> </div>
</li> </li>
<li class="container"> <li class="container">
<a href="https://projects.ajstepien.xyz/andrzej/gopaper"> <a href="https://projects.ajstepien.xyz/andrzej/gopaper">
<h3>GoPaper</h3> <h3>GoPaper</h3>
</a> </a>
<img <a href="images/gopaper.png"><img src="images/gopaper.png" alt="A screenshot of GoPaper in action."
src="images/gopaper.png" class="desktop-screen" /></a>
alt="A screenshot of GoPaper in action."
/>
<p>A wallpaper slideshow daemon for Hyprland, written in Go.</p> <p>A wallpaper slideshow daemon for Hyprland, written in Go.</p>
<div class="links-container"> <div class="links-container">
<a href="https://projects.ajstepien.xyz/andrzej/gopaper" <a href="https://projects.ajstepien.xyz/andrzej/gopaper">source</a>
>source</a
>
</div> </div>
</li> </li>
<li class="container"> <li class="container">
@ -239,21 +213,20 @@
Node.js with an SQLite backend. Node.js with an SQLite backend.
</p> </p>
<div class="links-container"> <div class="links-container">
<a href="https://projects.ajstepien.xyz/andrzej/micro365" <a href="https://projects.ajstepien.xyz/andrzej/micro365">source</a>
>source</a
>
</div> </div>
</li> </li>
<li class="container"> <li class="container">
<a href="https://demos.ajstepien.xyz/calculator"> <a href="https://demos.ajstepien.xyz/calculator">
<h3>Calculator</h3> <h3>Calculator</h3>
</a> </a>
<p>A simple calculator app written in React and vanilla CSS.</p> <a href="images/calculator.png"><img src="images/calculator.png"
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
screen.</p>
<div class="links-container"> <div class="links-container">
<a href="https://demos.ajstepien.xyz/calculator/">demo</a> <a href="https://demos.ajstepien.xyz/calculator/">demo</a>
<a href="https://projects.ajstepien.xyz/Resume/calculator" <a href="https://projects.ajstepien.xyz/Resume/calculator">source</a>
>source</a
>
</div> </div>
</li> </li>
</ul> </ul>
@ -261,4 +234,5 @@
</section> </section>
</main> </main>
</body> </body>
</html> </html>