add subman, tweak wording and styles

css/styles.css

@@ -64,21 +64,34 @@ 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: 3rem;
+	border-radius: 0 0 3rem 3rem;
+}
+
+h2 {
 	font-size: 3em;
 	text-shadow: var(--text-shadow);
 }
 
-h2 {
+h3 {
-	font-size: 2em;
+	font-size: 3em;
-	text-shadow: var(--text-shadow);
+	color: var(--iris);
+	margin: 1rem;
+	width: full;
+	text-align: center;
 }
 
-h3 {
+#this-website {
-	font-size: 2em;
+	background: none;
-	color: var(--iris);
 }
 
 main {
@@ -129,16 +142,35 @@ section {
 	}
 }
 
+p {
+	margin: 1rem;
+}
 
 .container {
 	margin: 1em;
 	background-color: var(--surface);
 	background-image: radial-gradient(circle at top left, var(--overlay), var(--surface));
 	border-radius: 6em;
+	border: solid 1px var(--hl-med);
 	padding: 3em;
 	box-shadow: 1em 1em var(--shadow-color);
 }
 
+figure {
+	margin: 0px;
+}
+
+.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 +192,7 @@ a {
 	text-decoration-color: var(--pine);
 	color: var(--foam);
 	font-weight: bold;
+	display: inline;
 }
 
 a:visited {
@@ -194,6 +227,29 @@ li::marker {
 	color: var(--foam);
 }
 
+#project-list {
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	margin-top: 0px;
+}
+
+
 #project-list>li {
 	list-style-type: none;
+
+	@media screen and (min-width:601px) {
+		width: 60%;
+	}
+
+	@media screen and (max-width:600px) {
+		width: 90%;
+	}
+}
+
+.links-container {
+	display: flex;
+	justify-content: center;
+	gap: 3rem;
+	width: full;
 }

index.html

@@ -18,17 +18,12 @@
 
 		<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
+				<p>My name is Andrzej. Since arriving in Spain from my native England in 2010, I have worked teaching English as a foreign language, but now it's time for a change. This is why I have spent the last two years dedicated to re-skilling as a web developer.</p> <p>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.</p>
-				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>
+				<h1 id="this-website">This website...</h1>
 				<ul>
 					<li><b>… is hosted on bespoke hardware.</b> A mini-pc in my living room, to
 						be precise!</li>
@@ -38,26 +33,17 @@
 					<li><b>… is fully compliant with <a
 								href="https://www.w3.org/WAI/standards-guidelines/wcag/">Web
 								Content
-								Accessibility Guidelines</a></b> because accessibility
+								Accessibility Guidelines</a></b> </li>
-						isn't an
-						optional
-						extra!</li>
 					<li><b>… is styled with careful consideration for Responsive Web Design
 							principles</b>
-						(because
+						</li>
-						I have no
+						<li><b>… follows system light/dark theming.</b></li>
-						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>… hosts a collection of projects demonstrating my proficiency in both
+					<li><b>… is deployed via a self-hosted Jenkins CI/CD system.</b></li>
-							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>
+					<li><b>… was lovingly hand-coded by myself.</b></li>
 				</ul>
 			</div>
 		</section>
@@ -107,48 +93,58 @@
 				</figure>
 			</div>
 		</section>
-		<h1>Projects</h1>
+		<h1>Selected projects</h1>
+
+
 		<section>
 
 			<figure>
 				<ul id="project-list">
+				<li class="ghost-container">
+				</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.
+							Nextjs web-app with Sqlite back-end. Styled with Tailwind.
 						</p>
-						<a>demo</a>
+<div class="links-container">
-						<a>source</a>
+						<a href="https://subman.ajstepien.xyz">demo</a>
-					</li>
+						<a href="https://projects.ajstepien.xyz/Resume/subman-nextjs">source</a>
-					<li class="container">
+</div>
-
-						<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>
 						<p>
 							An app for when you don't know what movie to watch, written in
-							Typescript/React.
+							Typescript/React and vanilla CSS.
 						</p>
+<div class="links-container">
 						<a href="https://demos.ajstepien.xyz/movie-explorer">demo</a>
 						<a
 							href="https://projects.ajstepien.xyz/Resume/movie-explorer">source</a>
+</div>
 					</li>
 					<li class="container">
 
 						<h3>Calculator</h3>
 						<p>
-							A simple calculator app written in React.
+							A simple calculator app written in React and vanilla CSS.
 						</p>
+<div class="links-container">
 						<a href="https://demos.ajstepien.xyz/calculator/">demo</a>
 						<a href="https://projects.ajstepien.xyz/Resume/calculator">source</a>
+</div>
 					</li>
 				</ul>
 			</figure>