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 @@
  • Links
    • +
  • + CV +
    • 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'; +--- + + + + +
    + +
    + +
    +

    Joe Carstairs’ CV

    +

    me@joeac.net

    +

    joeac.net

    +
    + +
    +

    Soft skills

    + + +
    + +
    +

    Technical skills

    + +
    +

    Front end

    +
      +
    • HTML
      • +
    • CSS
      • +
    • JavaScript/TS
      • +
    • Astro
      • +
    • React
      • +
    +
    + +
    +

    Back end

    +
      +
    • NodeJS
      • +
    • Java/Spring
      • +
    • Python
      • +
    • C
      • +
    +
    + +
    +

    Infrastructure

    +
      +
    • Terraform
      • +
    • Docker
      • +
    • AWS
      • +
    • DigitalOcean
      • +
    +
    + +
    +

    Miscellaneous

    +
      +
    • Git
      • +
    • Bash
      • +
    • Langchain
      • +
    +
    +
    + +
    +

    My engineering priorities

    + +
    + +
    +

    What makes me tick

    + +
    + +
    +

    Experience

    +
      +
    1. + 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. +
      2. +
    2. + 2023, Scott Logic. Investigated the accessibility of the + Scott Logic blog both manually + and using automated tools, including pa11y and Lighthouse. Made several + recommendations for improvements. +
      3. +
    3. + 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. +
      4. +
    4. + 2021, FreeAgent. Analysed how front-end developers were consuming the + FreeAgent design system for the Design System Team as a summer + internship. +
      5. +
    +
    + +
    +

    Education

    +

    Philosophy and Mathematics, MA Hons, Edin, 2022.

    +

    Full transcript available upon request.

    +
    + +
    +

    Passions

    + +
    +     + 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'; --- -
    +

    Got lost?

    If you’re on this page, something’s probably gone wrong. Try going to my homepage instead.

    -
    +