Merge branch 'main' of https://github.com/joeacarstairs/personal-website
This commit is contained in:
Joe Carstairs
@@ -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);
|
||||
|
||||
92
website/public/css/cv.css
Normal file
92
website/public/css/cv.css
Normal file
@@ -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);
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -12,5 +12,8 @@
|
||||
<li>
|
||||
<a href="/links">Links</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/cv">CV</a>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
|
||||
148
website/src/pages/cv.astro
Normal file
148
website/src/pages/cv.astro
Normal file
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user