improve responsiveness

css/styles.css

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

index.html

@@ -15,17 +15,21 @@
 		<h1>Andrzej Stepien : Coder for Hire</h1>
 	</header>
 	<main>
-		<h2>Hello.</h2>
+
-		<p class="container">
+		<section>
-			My name is Andrzej, and until the pandemic I was an English teacher. If you're reading this, you
+			<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
+				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>
+			</div>
-		<section>
+			<div class="container">
-			<h1>The website you are currently reading...</h1>
+				<h2>The website you are currently reading...</h2>
-			<ul class="container">
+				<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
@@ -34,28 +38,37 @@
 					<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
+								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>
+					<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
+					<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>
+						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>
 		</section>
-		<section>
 		<h1>Certifications</h1>
+		<section>
+			<div class="container">
 				<figure>
 					<figcaption>
 						Freecodecamp certificates
 					</figcaption>
-				<ul class="link-list container">
+					<ul class="link-list">
 						<li>
 							<a
 								href="https://www.freecodecamp.org/certification/fcc60e22726-0a94-4738-8702-3e216d14fdb2/front-end-development-libraries">Front
@@ -73,11 +86,13 @@
 						</li>
 					</ul>
 				</figure>
+			</div>
+			<div class="container">
 				<figure>
 					<figcaption>
 						IBM certificates
 					</figcaption>
-				<ul class="link-list container">
+					<ul class="link-list">
 						<li>
 							<a
 								href="https://courses.edx.org/certificates/0ac958dec5424747b59860843844bd22">Introduction
@@ -90,14 +105,13 @@
 						</li>
 					</ul>
 				</figure>
+			</div>
 		</section>
+		<h1>Projects</h1>
 		<section>
 
 			<figure>
-				<figcaption>
+				<ul id="project-list">
-					<h1>Projects</h1>
-				</figcaption>
-				<ul class="link-list">
 					<li class="container">
 						<h3>Subman</h3>
 						<p>A self-hosted literary submission management system comprising a
@@ -116,6 +130,17 @@
 						<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>
@@ -123,7 +148,7 @@
 							A simple calculator app written in React.
 						</p>
 						<a href="https://demos.ajstepien.xyz/calculator/">demo</a>
-						<a href="https://projects.ajstepien.xyz/andrzej/calculator">source</a>
+						<a href="https://projects.ajstepien.xyz/Resume/calculator">source</a>
 					</li>
 				</ul>
 			</figure>