diff options
| -rw-r--r-- | website/public/css/base.css | 9 | ||||
| -rw-r--r-- | website/public/css/cv.css | 92 | ||||
| -rw-r--r-- | website/src/components/Navbar.astro | 3 | ||||
| -rw-r--r-- | website/src/pages/cv.astro | 148 | ||||
| -rw-r--r-- | website/src/pages/error.astro | 4 |
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> |