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

Compare commits

base: Resume:816ec679550739dce5433b8912b3d6cd4cd1c10b
Branches Tags
Resume:main
..
compare: Resume:1f7c6289c4c25647b70af7627674cc422b103761
Branches Tags
Resume:main

No commits in common. "816ec679550739dce5433b8912b3d6cd4cd1c10b" and "1f7c6289c4c25647b70af7627674cc422b103761" have entirely different histories.
816ec67955 ... 1f7c6289c4

2 changed files with 91 additions and 147 deletions
Show Stats Expand all files Collapse all files

59
css/styles.css
View File

@ -46,6 +46,8 @@
--hl-low: #f4ede8; --hl-low: #f4ede8;
--hl-med: #dfdad9; --hl-med: #dfdad9;
--hl-high: #cecacd; --hl-high: #cecacd;
} }
--shadow-color: rgba(0, 0, 0, 0.6); --shadow-color: rgba(0, 0, 0, 0.6);
@ -54,7 +56,6 @@
body { body {
background-image: linear-gradient(to bottom right, var(--overlay), var(--base)); background-image: linear-gradient(to bottom right, var(--overlay), var(--base));
} }
h1, h1,
@ -67,69 +68,40 @@ h4 {
} }
h1 { h1 {
font-size: 3em; font-size: 8rem;
text-shadow: var(--text-shadow); text-shadow: var(--text-shadow);
} }
h2 { h2 {
font-size: 2em; font-size: 6rem;
text-shadow: var(--text-shadow); text-shadow: var(--text-shadow);
} }
h3 { h3 {
font-size: 2em; font-size: 4rem;
color: var(--iris); color: var(--iris);
} }
main { main {
font-family: Jura, serif; font-family: Jura, serif;
font-size: 1.6rem; font-size: 2rem;
width: 100%; width: 60%;
max-width: 1200px;
margin: auto; margin: auto;
font-weight: 600; font-weight: 600;
color: var(--text); color: var(--text);
display: flex;
flex-direction: column;
@media screen and (min-width:601px) {
font-size: 1.2rem;
}
@media screen and (max-width:600px) {
font-size: 1rem;
}
}
header {
text-align: center;
font-size: 1rem;
} }
section { section {
margin-bottom: 3em; margin-bottom: 8rem;
display: inline-flex;
justify-content: center;
@media screen and (min-width:601px) {
flex-direction: row;
}
@media screen and (max-width:600px) {
flex-direction: column;
}
} }
.container { .container {
margin: 1em;
background-color: var(--surface); background-color: var(--surface);
background-image: radial-gradient(circle at top left, var(--overlay), var(--surface)); border-radius: 10rem;
border-radius: 6em; padding: 5rem;
padding: 3em; box-shadow: 1rem 1rem var(--shadow-color);
box-shadow: 1em 1em var(--shadow-color);
} }
figcaption { figcaption {
@ -172,7 +144,8 @@ ul {
li { li {
list-style-type: '✓ '; list-style-type: '✓ ';
padding: 0.6em; margin-bottom: 2rem;
padding: 1rem;
} }
li::marker { li::marker {
@ -186,7 +159,3 @@ li::marker {
.link-list>li:hover::marker { .link-list>li:hover::marker {
color: var(--foam); color: var(--foam);
} }
#project-list>li {
list-style-type: none;
}

65
index.html
View File

@ -15,21 +15,17 @@
<h1>Andrzej Stepien : Coder for Hire</h1> <h1>Andrzej Stepien : Coder for Hire</h1>
</header> </header>
<main> <main>
<h2>Hello.</h2>
<section> <p class="container">
<div class="container"> My name is Andrzej, and until the pandemic I was an English teacher. If you're reading this, you
<h3>Hello.</h3>
My name is Andrzej, and until the pandemic I was an English teacher. If you're reading
this, you
most most
likely followed a link here from my CV. I thought this page would be the best way to likely followed a link here from my CV. I thought this page would be the best way to demonstrate
demonstrate
what what
I'm capable of. I'm capable of.
</div> </p>
<div class="container"> <section>
<h2>The website you are currently reading...</h2> <h1>The website you are currently reading...</h1>
<ul> <ul class="container">
<li><b>… is hosted on bespoke hardware.</b> A mini-pc in my living room, to <li><b>… is hosted on bespoke hardware.</b> A mini-pc in my living room, to
be precise!</li> be precise!</li>
<li><b>… has correctly managed security certificates, scoring an 'A' grade on <a <li><b>… has correctly managed security certificates, scoring an 'A' grade on <a
@ -38,37 +34,28 @@
<li><b>… is fully compliant with <a <li><b>… is fully compliant with <a
href="https://www.w3.org/WAI/standards-guidelines/wcag/">Web href="https://www.w3.org/WAI/standards-guidelines/wcag/">Web
Content Content
Accessibility Guidelines</a></b> because accessibility Accessibility Guidelines</a></b> because accessibility isn't an
isn't an
optional optional
extra!</li> extra!</li>
<li><b>… is styled with careful consideration for Responsive Web Design <li><b>… is styled with careful consideration for Responsive Web Design principles</b>
principles</b>
(because (because
I have no I have no
idea what device you're reading this on!)</li> idea what device you're reading this on!)</li>
<li><b>… hosts a collection of projects demonstrating my proficiency in both <li><b>… hosts a collection of projects demonstrating my proficiency in both frontend
frontend
and and
backend development</b> including projects written in CSS, Html, backend development</b> including projects written in CSS, Html,
Javascript, Javascript,
React, Nodejs, Sql, Jq, Lua, Groovy, and Bash.</li> React, Nodejs, Sql, Jq, Lua and Bash.</li>
<li><b>… is deployed via a self-hosted CI/CD system.</b></li>
<li><b>… is fully source-available</b> on <a
href="https://projects.ajstepien.xyz/Resume">my self-hosted git
server.</a></li>
<li><b>… was lovingly hand-coded by myself.</b> Naturally.</li> <li><b>… was lovingly hand-coded by myself.</b> Naturally.</li>
</ul> </ul>
</div>
</section> </section>
<h1>Certifications</h1>
<section> <section>
<div class="container"> <h1>Certifications</h1>
<figure> <figure>
<figcaption> <figcaption>
Freecodecamp certificates Freecodecamp certificates
</figcaption> </figcaption>
<ul class="link-list"> <ul class="link-list container">
<li> <li>
<a <a
href="https://www.freecodecamp.org/certification/fcc60e22726-0a94-4738-8702-3e216d14fdb2/front-end-development-libraries">Front href="https://www.freecodecamp.org/certification/fcc60e22726-0a94-4738-8702-3e216d14fdb2/front-end-development-libraries">Front
@ -86,13 +73,11 @@
</li> </li>
</ul> </ul>
</figure> </figure>
</div>
<div class="container">
<figure> <figure>
<figcaption> <figcaption>
IBM certificates IBM certificates
</figcaption> </figcaption>
<ul class="link-list"> <ul class="link-list container">
<li> <li>
<a <a
href="https://courses.edx.org/certificates/0ac958dec5424747b59860843844bd22">Introduction href="https://courses.edx.org/certificates/0ac958dec5424747b59860843844bd22">Introduction
@ -105,13 +90,14 @@
</li> </li>
</ul> </ul>
</figure> </figure>
</div>
</section> </section>
<h1>Projects</h1>
<section> <section>
<figure> <figure>
<ul id="project-list"> <figcaption>
<h1>Projects</h1>
</figcaption>
<ul class="link-list">
<li class="container"> <li class="container">
<h3>Subman</h3> <h3>Subman</h3>
<p>A self-hosted literary submission management system comprising a <p>A self-hosted literary submission management system comprising a
@ -130,17 +116,6 @@
<a>demo</a> <a>demo</a>
<a>source</a> <a>source</a>
</li> </li>
<li class="container">
<h3>Movie-Explorer</h3>
<p>
An app for when you don't know what movie to watch, written in
Typescript/React.
</p>
<a href="https://demos.ajstepien.xyz/movie-explorer">demo</a>
<a
href="https://projects.ajstepien.xyz/Resume/movie-explorer">source</a>
</li>
<li class="container"> <li class="container">
<h3>Calculator</h3> <h3>Calculator</h3>
@ -148,7 +123,7 @@
A simple calculator app written in React. A simple calculator app written in React.
</p> </p>
<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">source</a> <a href="https://projects.ajstepien.xyz/andrzej/calculator">source</a>
</li> </li>
</ul> </ul>
</figure> </figure>