add subman, tweak wording and styles

css/styles.css

@@ -64,21 +64,28 @@ h4 {
 	font-family: League, Verdana, Geneva, Tahoma, sans-serif;
 	color: var(--gold);
 	margin: 0px;
+	background: var(--hl-med);
+	padding: 3rem;
+	border-radius: 3rem 3rem 3rem 3rem;
 }
 
 h1 {
+	font-size: 5em;
+	text-shadow: var(--text-shadow);
+	background: var(--hl-med);
+	padding: 1rem;
+	border-radius: 0 0 3rem 3rem;
+}
+
+h2 {
 	font-size: 3em;
 	text-shadow: var(--text-shadow);
 }
 
-h2 {
-	font-size: 2em;
-	text-shadow: var(--text-shadow);
-}
-
 h3 {
-	font-size: 2em;
+	font-size: 3em;
 	color: var(--iris);
+	margin: 1rem;
 }
 
 main {
@@ -139,6 +146,17 @@ section {
 	box-shadow: 1em 1em var(--shadow-color);
 }
 
+.ghost-container {
+
+	@media screen and (min-width:601px) {
+		max-width: 60%;
+	}
+
+	@media screen and (max-width:600px) {
+		flex-direction: column;
+	}
+}
+
 figcaption {
 	margin-bottom: 0;
 	font-size: 2em;
@@ -160,6 +178,7 @@ a {
 	text-decoration-color: var(--pine);
 	color: var(--foam);
 	font-weight: bold;
+	display: inline;
 }
 
 a:visited {
@@ -194,6 +213,21 @@ li::marker {
 	color: var(--foam);
 }
 
+#project-list {
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+}
+
+
 #project-list>li {
 	list-style-type: none;
+
+	@media screen and (min-width:601px) {
+		width: 60%;
+	}
+
+	@media screen and (max-width:600px) {
+		width: 90%;
+	}
 }

index.html

@@ -18,14 +18,8 @@
 
 		<section>
 			<div class="container">
-				<h3>Hello.</h3>
+				<h3>Allow me to introduce myself.</h3>
-				My name is Andrzej, and until the pandemic I was an English teacher. If you're reading
+				My name is Andrzej. Until the pandemic I was an English teacher, but I have spent the last two years dedicated to learning web development to as high a level as possible. If you are 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.
-				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>
@@ -47,13 +41,9 @@
 						(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
+						<li><b>… follows system light/dark theming.</b></li>
-							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, Groovy, and Bash.</li>
-							and
+					<li><b>… is deployed via a self-hosted Jenkins CI/CD system.</b></li>
-							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>
@@ -108,28 +98,35 @@
 			</div>
 		</section>
 		<h1>Projects</h1>
+
+
 		<section>
 
 			<figure>
 				<ul id="project-list">
+				<li class="ghost-container">
+<p>
+I host these projects on <a href="https://projects.ajstepien.xyz">my own git server</a>, because I wanted to learn how to do that myself. There are more projects than those listed here, and even more hidden from public view, but this selection gives a good overall impression.
+</p>
+				</li>
 					<li class="container">
 						<h3>Subman</h3>
 						<p>A self-hosted literary submission management system comprising a
 							Nodejs back-end server and React front end.
 						</p>
-						<a>demo</a>
+						<a href="https://subman.ajstepien.xyz">demo</a>
-						<a>source</a>
+						<a href="https://projects.ajstepien.xyz/Resume/subman-nextjs">source</a>
-					</li>
-					<li class="container">
-
-						<h3>Micro365</h3>
-						<p>
-							A bot written in nodejs that delivers single-word writing
-							prompts from a database.
-						</p>
-						<a>demo</a>
-						<a>source</a>
 					</li>
+					<!-- <li class="container"> -->
+					<!---->
+					<!-- 	<h3>Micro365</h3> -->
+					<!-- 	<p> -->
+					<!-- 		A bot written in nodejs that delivers single-word writing -->
+					<!-- 		prompts from a database. -->
+					<!-- 	</p> -->
+					<!-- 	<a>demo</a> -->
+					<!-- 	<a>source</a> -->
+					<!-- </li> -->
 					<li class="container">
 
 						<h3>Movie-Explorer</h3>