Compare commits
No commits in common. "816ec679550739dce5433b8912b3d6cd4cd1c10b" and "1f7c6289c4c25647b70af7627674cc422b103761" have entirely different histories.
816ec67955
...
1f7c6289c4
|
|
@ -46,6 +46,8 @@
|
|||
--hl-low: #f4ede8;
|
||||
--hl-med: #dfdad9;
|
||||
--hl-high: #cecacd;
|
||||
|
||||
|
||||
}
|
||||
|
||||
--shadow-color: rgba(0, 0, 0, 0.6);
|
||||
|
|
@ -54,7 +56,6 @@
|
|||
|
||||
body {
|
||||
background-image: linear-gradient(to bottom right, var(--overlay), var(--base));
|
||||
|
||||
}
|
||||
|
||||
h1,
|
||||
|
|
@ -67,69 +68,40 @@ h4 {
|
|||
}
|
||||
|
||||
h1 {
|
||||
font-size: 3em;
|
||||
font-size: 8rem;
|
||||
text-shadow: var(--text-shadow);
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 2em;
|
||||
font-size: 6rem;
|
||||
text-shadow: var(--text-shadow);
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: 2em;
|
||||
font-size: 4rem;
|
||||
color: var(--iris);
|
||||
}
|
||||
|
||||
main {
|
||||
font-family: Jura, serif;
|
||||
font-size: 1.6rem;
|
||||
width: 100%;
|
||||
max-width: 1200px;
|
||||
font-size: 2rem;
|
||||
width: 60%;
|
||||
margin: auto;
|
||||
font-weight: 600;
|
||||
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 {
|
||||
margin-bottom: 3em;
|
||||
display: inline-flex;
|
||||
justify-content: center;
|
||||
|
||||
@media screen and (min-width:601px) {
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
@media screen and (max-width:600px) {
|
||||
flex-direction: column;
|
||||
}
|
||||
margin-bottom: 8rem;
|
||||
}
|
||||
|
||||
|
||||
.container {
|
||||
margin: 1em;
|
||||
|
||||
background-color: var(--surface);
|
||||
background-image: radial-gradient(circle at top left, var(--overlay), var(--surface));
|
||||
border-radius: 6em;
|
||||
padding: 3em;
|
||||
box-shadow: 1em 1em var(--shadow-color);
|
||||
border-radius: 10rem;
|
||||
padding: 5rem;
|
||||
box-shadow: 1rem 1rem var(--shadow-color);
|
||||
}
|
||||
|
||||
figcaption {
|
||||
|
|
@ -172,7 +144,8 @@ ul {
|
|||
|
||||
li {
|
||||
list-style-type: '✓ ';
|
||||
padding: 0.6em;
|
||||
margin-bottom: 2rem;
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
li::marker {
|
||||
|
|
@ -186,7 +159,3 @@ li::marker {
|
|||
.link-list>li:hover::marker {
|
||||
color: var(--foam);
|
||||
}
|
||||
|
||||
#project-list>li {
|
||||
list-style-type: none;
|
||||
}
|
||||
|
|
|
|||
179
index.html
179
index.html
|
|
@ -15,103 +15,89 @@
|
|||
<h1>Andrzej Stepien : Coder for Hire</h1>
|
||||
</header>
|
||||
<main>
|
||||
|
||||
<h2>Hello.</h2>
|
||||
<p class="container">
|
||||
My name is Andrzej, and until the pandemic I was an English teacher. If you're reading this, you
|
||||
most
|
||||
likely followed a link here from my CV. I thought this page would be the best way to demonstrate
|
||||
what
|
||||
I'm capable of.
|
||||
</p>
|
||||
<section>
|
||||
<div class="container">
|
||||
<h3>Hello.</h3>
|
||||
My name is Andrzej, and until the pandemic I was an English teacher. If you're reading
|
||||
this, you
|
||||
most
|
||||
likely followed a link here from my CV. I thought this page would be the best way to
|
||||
demonstrate
|
||||
what
|
||||
I'm capable of.
|
||||
</div>
|
||||
<div class="container">
|
||||
<h2>The website you are currently reading...</h2>
|
||||
<ul>
|
||||
<li><b>… is hosted on bespoke hardware.</b> A mini-pc in my living room, to
|
||||
be precise!</li>
|
||||
<li><b>… has correctly managed security certificates, scoring an 'A' grade on <a
|
||||
href="https://www.ssllabs.com/ssltest/analyze.html?d=sonarrr.ajstepien.xyz">sslabs.com</a>.</b>
|
||||
<h1>The website you are currently reading...</h1>
|
||||
<ul class="container">
|
||||
<li><b>… is hosted on bespoke hardware.</b> A mini-pc in my living room, to
|
||||
be precise!</li>
|
||||
<li><b>… has correctly managed security certificates, scoring an 'A' grade on <a
|
||||
href="https://www.ssllabs.com/ssltest/analyze.html?d=sonarrr.ajstepien.xyz">sslabs.com</a>.</b>
|
||||
</li>
|
||||
<li><b>… is fully compliant with <a
|
||||
href="https://www.w3.org/WAI/standards-guidelines/wcag/">Web
|
||||
Content
|
||||
Accessibility Guidelines</a></b> because accessibility isn't an
|
||||
optional
|
||||
extra!</li>
|
||||
<li><b>… is styled with careful consideration for Responsive Web Design principles</b>
|
||||
(because
|
||||
I have no
|
||||
idea what device you're reading this on!)</li>
|
||||
<li><b>… hosts a collection of projects demonstrating my proficiency in both frontend
|
||||
and
|
||||
backend development</b> including projects written in CSS, Html,
|
||||
Javascript,
|
||||
React, Nodejs, Sql, Jq, Lua and Bash.</li>
|
||||
<li><b>… was lovingly hand-coded by myself.</b> Naturally.</li>
|
||||
</ul>
|
||||
</section>
|
||||
<section>
|
||||
<h1>Certifications</h1>
|
||||
<figure>
|
||||
<figcaption>
|
||||
Freecodecamp certificates
|
||||
</figcaption>
|
||||
<ul class="link-list container">
|
||||
<li>
|
||||
<a
|
||||
href="https://www.freecodecamp.org/certification/fcc60e22726-0a94-4738-8702-3e216d14fdb2/front-end-development-libraries">Front
|
||||
End Development Libraries</a>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
href="https://www.freecodecamp.org/certification/fcc60e22726-0a94-4738-8702-3e216d14fdb2/responsive-web-design">Responsive
|
||||
Web Design</a>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
href="https://www.freecodecamp.org/certification/fcc60e22726-0a94-4738-8702-3e216d14fdb2/javascript-algorithms-and-data-structures">Javascript
|
||||
Algorithms and Data Structures</a>
|
||||
</li>
|
||||
<li><b>… is fully compliant with <a
|
||||
href="https://www.w3.org/WAI/standards-guidelines/wcag/">Web
|
||||
Content
|
||||
Accessibility Guidelines</a></b> because accessibility
|
||||
isn't an
|
||||
optional
|
||||
extra!</li>
|
||||
<li><b>… is styled with careful consideration for Responsive Web Design
|
||||
principles</b>
|
||||
(because
|
||||
I have no
|
||||
idea what device you're reading this on!)</li>
|
||||
<li><b>… hosts a collection of projects demonstrating my proficiency in both
|
||||
frontend
|
||||
and
|
||||
backend development</b> including projects written in CSS, Html,
|
||||
Javascript,
|
||||
React, Nodejs, Sql, Jq, Lua, Groovy, 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>
|
||||
</ul>
|
||||
</div>
|
||||
</figure>
|
||||
<figure>
|
||||
<figcaption>
|
||||
IBM certificates
|
||||
</figcaption>
|
||||
<ul class="link-list container">
|
||||
<li>
|
||||
<a
|
||||
href="https://courses.edx.org/certificates/0ac958dec5424747b59860843844bd22">Introduction
|
||||
to Cloud Computing</a>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
href="https://courses.edx.org/certificates/f7a2d211241a432785f298df38336098">Introduction
|
||||
to Cloud Development with HTML, CSS, and JavaScript</a>
|
||||
</li>
|
||||
</ul>
|
||||
</figure>
|
||||
</section>
|
||||
<h1>Certifications</h1>
|
||||
<section>
|
||||
<div class="container">
|
||||
<figure>
|
||||
<figcaption>
|
||||
Freecodecamp certificates
|
||||
</figcaption>
|
||||
<ul class="link-list">
|
||||
<li>
|
||||
<a
|
||||
href="https://www.freecodecamp.org/certification/fcc60e22726-0a94-4738-8702-3e216d14fdb2/front-end-development-libraries">Front
|
||||
End Development Libraries</a>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
href="https://www.freecodecamp.org/certification/fcc60e22726-0a94-4738-8702-3e216d14fdb2/responsive-web-design">Responsive
|
||||
Web Design</a>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
href="https://www.freecodecamp.org/certification/fcc60e22726-0a94-4738-8702-3e216d14fdb2/javascript-algorithms-and-data-structures">Javascript
|
||||
Algorithms and Data Structures</a>
|
||||
</li>
|
||||
</ul>
|
||||
</figure>
|
||||
</div>
|
||||
<div class="container">
|
||||
<figure>
|
||||
<figcaption>
|
||||
IBM certificates
|
||||
</figcaption>
|
||||
<ul class="link-list">
|
||||
<li>
|
||||
<a
|
||||
href="https://courses.edx.org/certificates/0ac958dec5424747b59860843844bd22">Introduction
|
||||
to Cloud Computing</a>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
href="https://courses.edx.org/certificates/f7a2d211241a432785f298df38336098">Introduction
|
||||
to Cloud Development with HTML, CSS, and JavaScript</a>
|
||||
</li>
|
||||
</ul>
|
||||
</figure>
|
||||
</div>
|
||||
</section>
|
||||
<h1>Projects</h1>
|
||||
<section>
|
||||
|
||||
<figure>
|
||||
<ul id="project-list">
|
||||
<figcaption>
|
||||
<h1>Projects</h1>
|
||||
</figcaption>
|
||||
<ul class="link-list">
|
||||
<li class="container">
|
||||
<h3>Subman</h3>
|
||||
<p>A self-hosted literary submission management system comprising a
|
||||
|
|
@ -130,17 +116,6 @@
|
|||
<a>demo</a>
|
||||
<a>source</a>
|
||||
</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">
|
||||
|
||||
<h3>Calculator</h3>
|
||||
|
|
@ -148,7 +123,7 @@
|
|||
A simple calculator app written in React.
|
||||
</p>
|
||||
<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>
|
||||
</ul>
|
||||
</figure>
|
||||
|
|
|
|||
Loading…
Reference in New Issue