Merge branch 'main' of https://github.com/joeacarstairs/personal-website

5 files changed, 253 insertions, 3 deletions

diff --git a/website/public/css/base.css b/website/public/css/base.css
index db6c1dc..b38c934 100644
--- a/website/public/css/base.css
+++ b/website/public/css/base.css
@@ -24,6 +24,7 @@
   --colour-hyperlink-95: #e0f1ff;
 
   --colour-primary-fg: var(--colour-primary-90);
+  --colour-primary-fg-accent: var(--colour-primary-80);
   --colour-primary-bg: var(--colour-primary-10);
   --colour-hyperlink: var(--colour-hyperlink-80);
 
@@ -47,6 +48,7 @@
 @media (prefers-color-scheme: light) {
   :root {
     --colour-primary-fg: var(--colour-primary-20);
+    --colour-primary-fg-accent: var(--colour-primary-40);
     --colour-primary-bg: var(--colour-primary-95);
     --colour-hyperlink: var(--colour-hyperlink-40);
   }
@@ -91,7 +93,12 @@ body {
 @media (min-width: 36rem) {
   body {
     display: grid;
-    grid-template-columns: [media-start] 6rem [content-start] 1fr [content-end];
+    grid-template-columns:
+      [media-start]
+      6rem
+      [content-start]
+      minmax(calc(36rem - var(--spacing-block-lg) - 6rem - var(--spacing-block-sm) - 6rem), auto)
+      [content-end];
     margin-inline-end: 6rem;
 		column-gap: var(--spacing-block-sm);
     max-width: calc(6rem + var(--spacing-block-sm) + 30rem);
diff --git a/website/public/css/cv.css b/website/public/css/cv.css
new file mode 100644
index 0000000..cdee5b1
--- /dev/null
+++ b/website/public/css/cv.css
@@ -0,0 +1,92 @@
+div:has(img) {
+	width: 6rem;
+	height: 6rem;
+	margin-inline: auto;
+
+	img {
+		width: 6rem;
+		height: 6rem;
+		border-radius: 1rem;
+		filter: contrast(1.25);
+	}
+
+	&::after {
+		/* Colour overlay */
+		background-color: var(--colour-primary-80);
+		opacity: 0.3;
+
+		/* Same size and shape as the img */
+		border-radius: 1rem;
+		width: 6rem;
+		height: 6rem;
+
+		/* Positioned on top of the img */
+		display: block;
+		position: relative;
+		top: -6rem;
+
+		/* A content value is needed to get the ::after to render */
+		content: '';
+	}
+}
+
+header {
+	display: grid;
+	grid-template-columns: 1fr 1fr;
+	text-align: center;
+
+	h1 {
+		grid-column: 1 / 3;
+		text-align: center;
+	}
+
+	border-block-end: 1px solid var(--colour-primary-fg);
+}
+
+.technical-skills {
+	h3 {
+		text-align: start;
+	}
+
+	ul {
+		color: var(--colour-primary-fg-accent);
+		margin-inline-start: var(--spacing-inline-md);
+	}
+
+	@media (min-width: 46rem) {
+		section {
+			display: flex;
+			gap: var(--spacing-inline-sm);
+			align-items: baseline;
+
+			h3 {
+				&::after {
+					content: '/';
+					margin-inline: var(--spacing-inline-sm);
+				}
+			}
+
+			ul {
+				display: flex;
+				gap: var(--spacing-inline-sm);
+				list-style: none;
+				margin-inline-start: 0;
+
+				li + li::before {
+					content: '•';
+					margin-inline-end: var(--spacing-inline-sm);
+				}
+			}
+		}
+	}
+}
+
+:is(.experience, .passions) {
+	:is(ol, ul) {
+		list-style: none;
+
+		li {
+			margin-block-start: var(--spacing-block-sm);
+		}
+	}
+}
diff --git a/website/src/components/Navbar.astro b/website/src/components/Navbar.astro
index 479f8b5..eeb67f2 100644
--- a/website/src/components/Navbar.astro
+++ b/website/src/components/Navbar.astro
@@ -12,5 +12,8 @@
 		<li>
 			<a href="/links">Links</a>
 		</li>
+		<li>
+			<a href="/cv">CV</a>
+		</li>
 	</ul>
 </nav>
diff --git a/website/src/pages/cv.astro b/website/src/pages/cv.astro
new file mode 100644
index 0000000..6786fd9
--- /dev/null
+++ b/website/src/pages/cv.astro
@@ -0,0 +1,148 @@
+---
+import { SITE_DESCRIPTION } from '../consts';
+import Page from '../layouts/Page.astro';
+---
+
+<Page title={'Joe Carstairs’ CV'} description={SITE_DESCRIPTION}>
+  <link rel="stylesheet" href="/css/cv.css">
+
+  <div>
+    <img src="/images/headshot.webp" height="96" width="96" />
+  </div>
+
+  <header>
+    <h1>Joe Carstairs’ CV</h1>
+    <p><a href="mailto:me@joeac.net">me@joeac.net</a></p>
+    <p><a href="https://joeac.net">joeac.net</a></p>
+  </header>
+
+  <section>
+    <h2>Soft skills</h2>
+
+    <ul>
+      <li>Thinks critically with precision</li>
+      <li>Communicates clearly, especially in prepared presentations</li>
+      <li>Listens, reflects and then acts</li>
+    </ul>
+  </section>
+
+  <section class="technical-skills">
+    <h2>Technical skills</h2>
+
+    <section>
+      <h3>Front end</h3>
+      <ul>
+        <li>HTML</li>
+        <li>CSS</li>
+        <li>JavaScript/TS</li>
+        <li>Astro</li>
+        <li>React</li>
+      </ul>
+    </section>
+
+    <section>
+      <h3>Back end</h3>
+      <ul>
+        <li>NodeJS</li>
+        <li>Java/Spring</li>
+        <li>Python</li>
+        <li>C</li>
+      </ul>
+    </section>
+
+    <section>
+      <h3>Infrastructure</h3>
+      <ul>
+        <li>Terraform</li>
+        <li>Docker</li>
+        <li>AWS</li>
+        <li>DigitalOcean</li>
+      </ul>
+    </section>
+
+    <section>
+      <h3>Miscellaneous</h3>
+      <ul>
+        <li>Git</li>
+        <li>Bash</li>
+        <li>Langchain</li>
+      </ul>
+    </section>
+  </section>
+
+  <section class="my-engineering-priorities">
+    <h2>My engineering priorities</h2>
+    <ul>
+      <li>I put the process before the product</li>
+      <li>I put user needs before technical solutions</li>
+      <li>I put resilience before features</li>
+    </ul>
+  </section>
+
+  <section class="what-makes-me-tick">
+    <h2>What makes me tick</h2>
+    <ul>
+      <li>I like straightening out chaos</li>
+      <li>I like communities which share wisdom</li>
+      <li>I value finding things out over making the perfect product</li>
+    </ul>
+  </section>
+
+  <section class="experience">
+    <h2>Experience</h2>
+    <ol>
+      <li>
+        2024, Scott Logic. Researched the potential of applying LLMs to
+        automated accessibility testing of websites, using Langchain Python
+        library, elementary prompt engineering techniques, and various scripting
+        languages to knit all our data together.
+      </li>
+      <li>
+        2023, Scott Logic. Investigated the accessibility of the
+        <a href="https://blog.scottlogic.com">Scott Logic blog</a> both manually
+        and using automated tools, including pa11y and Lighthouse. Made several
+        recommendations for improvements.
+      </li>
+      <li>
+        2023, Scott Logic. Built a social app with a React/Redux frontend and a
+        Spring Boot backend, deployed via Azure Pipelines onto an AWS EC2
+        instance, as part of the Scott Logic Graduate Programme.
+      </li>
+      <li>
+        2021, FreeAgent. Analysed how front-end developers were consuming the
+        FreeAgent design system for the Design System Team as a summer
+        internship.
+      </li>
+    </ol>
+  </section>
+
+  <section class="education">
+    <h2>Education</h2>
+    <p>Philosophy and Mathematics, MA Hons, Edin, 2022.</p>
+    <p>Full transcript available upon request.</p>
+  </section>
+
+  <section class="passions">
+    <h2>Passions</h2>
+    <ul>
+      <li>
+        I would love to see ordinary people empowered to engage with Web
+        technology as sovereign citizens, owning their own data, with the
+        ability to choose freely between competing digital services. I haven't
+        yet been shaken out of my naïve hope for the IndieWeb, though I
+        recognise it has a long way to go before it is ready for mass adoption.
+      </li>
+      <li>
+        I love Jesus Christ as the Redeemer of the world. Lots of people believe
+        that there is some higher power behind the things we can see, and Jesus
+        has revealed who God is by being made flesh, dying on the cross and by
+        being raised to a new Resurrection life, in which we are all invited to
+        participate. And I think that's pretty gnarly.
+      </li>
+      <li>
+        I love hillwalking. A day in the hills is the best kind of rest I know.
+      </li>
+    </ul>
+  </section>
+</Page>
+
diff --git a/website/src/pages/error.astro b/website/src/pages/error.astro
index fc84122..dd7188a 100644
--- a/website/src/pages/error.astro
+++ b/website/src/pages/error.astro
@@ -3,12 +3,12 @@ import Page from '../layouts/Page.astro';
 ---
 
 <Page title="Got lost?" description="Error page for Joe's personal website">
-  <main>
+  <section>
     <h1>Got lost?</h1>
 
     <p>
       If you’re on this page, something’s probably gone wrong. Try going to
       my <a href="/">homepage</a> instead.
     </p>
-  </main>
+  </section>
 </Page>