Compare commits
4 Commits
dbfe9ee415
...
3d6497dfdb
Author | SHA1 | Date |
---|---|---|
|
3d6497dfdb | |
|
4eff7aeed3 | |
|
fcc96bbf0a | |
|
f6418028de |
|
@ -0,0 +1,62 @@
|
||||||
|
*,
|
||||||
|
*::before,
|
||||||
|
*::after {
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
img {
|
||||||
|
display: block;
|
||||||
|
max-width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
menu:not(article menu),
|
||||||
|
ol:not(article ol),
|
||||||
|
ul:not(article ul) {
|
||||||
|
list-style: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
menu,
|
||||||
|
ol,
|
||||||
|
ul {
|
||||||
|
padding-left: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
article ol,
|
||||||
|
article ul {
|
||||||
|
list-style-position: inside;
|
||||||
|
}
|
||||||
|
|
||||||
|
a {
|
||||||
|
/* Places underlines below the descenders */
|
||||||
|
text-underline-position: under;
|
||||||
|
|
||||||
|
|
||||||
|
/* Sets the thickness as a percentage of the font size */
|
||||||
|
text-decoration-thickness: 8;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* <html> = the root */
|
||||||
|
html {
|
||||||
|
font-size: 62.5%;
|
||||||
|
/* (62.5/100) * 16px = 10px */
|
||||||
|
-webkit-text-size-adjust: none;
|
||||||
|
/* for iOS Safari */
|
||||||
|
text-size-adjust: none;
|
||||||
|
/* for other mobile browsers */
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (prefers-reduced-motion: no-preference) {
|
||||||
|
html {
|
||||||
|
scroll-behavior: smooth;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
label,
|
||||||
|
button,
|
||||||
|
select,
|
||||||
|
summary,
|
||||||
|
[type=radio],
|
||||||
|
[type=submit],
|
||||||
|
[type=checkbox] {
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
34
index.html
34
index.html
|
@ -6,7 +6,8 @@
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
<meta http-equiv="X-UA-Compatible" content="ie=edge">
|
<meta http-equiv="X-UA-Compatible" content="ie=edge">
|
||||||
<title>Andrzej Stepien : Coder for Hire</title>
|
<title>Andrzej Stepien : Coder for Hire</title>
|
||||||
<link rel="stylesheet" href="style.css">
|
<link rel="stylesheet" href="defaults.css" />
|
||||||
|
<link rel="stylesheet" href="styles.css" />
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
<body>
|
<body>
|
||||||
|
@ -15,27 +16,32 @@
|
||||||
</header>
|
</header>
|
||||||
<main>
|
<main>
|
||||||
<h1>Hello.</h1>
|
<h1>Hello.</h1>
|
||||||
My name is Andrzej, and until the pandemic I was an English teacher. If you're reading this, you most
|
<p>
|
||||||
likely followed a link here from my CV. I thought this page would be the best way to demonstrate what
|
My name is Andrzej, and until the pandemic I was an English teacher. If you're reading this, you
|
||||||
I'm capable of.
|
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>
|
||||||
<h2>The website you are currently reading...</h2>
|
<h2>The website you are currently reading...</h2>
|
||||||
<ul>
|
<ul>
|
||||||
<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
|
||||||
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><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 isn't an optional
|
Accessibility Guidelines</a></b> because accessibility isn't an optional
|
||||||
extra!</li>
|
extra!</li>
|
||||||
<li><b>... is styled with careful consideration for Responsive Web Design principles</b> because
|
<li><b>… is styled with careful consideration for Responsive Web Design principles</b> (because
|
||||||
I have no
|
I have no
|
||||||
idea what device you're using!</li>
|
idea what device you're reading this on!)</li>
|
||||||
<li><b>... hosts a collection of projects demonstrating my proficiency in both frontend and
|
<li><b>… hosts a collection of projects demonstrating my proficiency in both frontend and
|
||||||
backend development</b> including projects written in CSS, Html, Javascript,
|
backend development</b> including projects written in CSS, Html,
|
||||||
React, Nodejs, Sql, Jq, Lua and Bash.</li>
|
Javascript,
|
||||||
<li><b>... was hand-coded by myself.</b> Naturally.</li>
|
React, Nodejs, Sql, Jq, Lua and Bash.</li>
|
||||||
|
<li><b>… was lovingly hand-coded by myself.</b> Naturally.</li>
|
||||||
</ul>
|
</ul>
|
||||||
<h2>Certifications</h2>
|
<h2>Certifications</h2>
|
||||||
<ul>
|
<ul>
|
||||||
|
|
|
@ -0,0 +1,73 @@
|
||||||
|
@font-face {
|
||||||
|
font-family: GoMono;
|
||||||
|
src: url(fonts/GoMonoNerdFont-Regular.ttf);
|
||||||
|
font-weight: 400;
|
||||||
|
font-style: normal;
|
||||||
|
}
|
||||||
|
|
||||||
|
:root {
|
||||||
|
--text: #e0def4;
|
||||||
|
--love: #eb6f92;
|
||||||
|
--gold: #f6c177;
|
||||||
|
--rose: #ebbcba;
|
||||||
|
--pine: #31748f;
|
||||||
|
--foam: #9ccfd8;
|
||||||
|
--iris: #c4a7e7;
|
||||||
|
|
||||||
|
--base: #191724;
|
||||||
|
--surface: #1f1d2e;
|
||||||
|
--overlay: #26233a;
|
||||||
|
|
||||||
|
--hl-med: #403d52;
|
||||||
|
--hl-high: #524f67;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
background-color: var(--base);
|
||||||
|
}
|
||||||
|
|
||||||
|
h1,
|
||||||
|
h2,
|
||||||
|
h3,
|
||||||
|
h4 {
|
||||||
|
font-family: Verdana, Geneva, Tahoma, sans-serif;
|
||||||
|
color: var(--love);
|
||||||
|
}
|
||||||
|
|
||||||
|
main {
|
||||||
|
font-family: GoMono, serif;
|
||||||
|
font-size: 2rem;
|
||||||
|
width: 60%;
|
||||||
|
margin: auto;
|
||||||
|
color: var(--text);
|
||||||
|
}
|
||||||
|
|
||||||
|
p {
|
||||||
|
background-color: var(--surface);
|
||||||
|
border-radius: 10rem;
|
||||||
|
padding: 2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
b {
|
||||||
|
color: var(--gold);
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
a {
|
||||||
|
text-decoration: none;
|
||||||
|
color: var(--foam);
|
||||||
|
}
|
||||||
|
|
||||||
|
a:visited {
|
||||||
|
color: var(--pine);
|
||||||
|
}
|
||||||
|
|
||||||
|
a:hover {
|
||||||
|
background-color: pink;
|
||||||
|
}
|
||||||
|
|
||||||
|
li {
|
||||||
|
list-style-type: ' ';
|
||||||
|
margin-bottom: 2rem;
|
||||||
|
|
||||||
|
}
|
Loading…
Reference in New Issue