systems-obscure/src/pages/about.tsx

import MainTemplate from "@/templates/MainTemplate"
import portrait from "../images/portrait-compressed.jpg"

const AboutPage = () => {
  return (
    <MainTemplate>
      <div className="mb-5 ">
        <h2 className="scroll-m-20 text-2xl font-bold lg:text-2xl border-b pb-3">
          About
        </h2>
      </div>

      <figure className="w-full flex flex-col items-center mb-6">
        <img
          alt="A portrait of the blog author"
          src={portrait}
          className="w-0 flex"
        />
        <figcaption className="text-sm text-muted-foreground mt-3 text-center">
          Pictured with the WITCH computer at the{" "}
          <a
            href="https://www.tnmoc.org/"
            target="_blank"
            className="text-primary hover:text-primary/80"
          >
            National Museum of Computing
          </a>
          , Bletchley Park.
        </figcaption>
      </figure>
      <p className="leading-[1.5] [&:not(:first-child)]:mt-6">
        I am a Londoner living on the south coast of the UK. I am a self-taught
        software engineer and this blog is my technical scrapbook. I document
        the details of my technical life so I can have a record of progress when
        I look back.{" "}
      </p>

      <p className="leading-[1.5] [&:not(:first-child)]:mt-6">
        I completed a degree in Philosophy at the University of Warwick and hold
        a Postgraduate Certificate of Education.
      </p>
      <p className="leading-[1.5] [&:not(:first-child)]:mt-6">
        Currently I work for{" "}
        <a
          href="https://en.wikipedia.org/wiki/ITV_(TV_network)"
          target="_blank"
          className="underline decoration-1 hover:text-primary/80 underline-offset-2"
        >
          ITV
        </a>{" "}
        {""}
        as a backend software engineer. Before that, I worked as a full-stack
        engineer at the{" "}
        <a
          href="https://en.wikipedia.org/wiki/BBC"
          target="_blank"
          className="underline decoration-1 hover:text-primary/80 underline-offset-2"
        >
          BBC
        </a>{" "}
        and as a frontend engineer at{" "}
        <a
          href="https://www.arria.com/"
          target="_blank"
          className="underline decoration-1 hover:text-primary/80 underline-offset-2"
        >
          Arria NLG
        </a>{" "}
        and in several web developer roles. Before software I was a
        teacher.{" "}
      </p>

      <p className="leading-[1.5] [&:not(:first-child)]:mt-6">
        Some things I like:
        <ul className="pt-2">
          <li className="mb-1">🐶 Staffies and bull-breeds</li>
          <li className="mb-1">🎼 Classical music (Haydn, Mozart, JSB)</li>
          <li className="mb-1">🛸 Science fiction </li>
        </ul>
      </p>

      <p className="leading-[1.5] [&:not(:first-child)]:mt-6">
        Some things I'm interested in:
        <ul className="pt-2">
          <li className="mb-1">🧑‍💻 Self-hosting and digital resiliance</li>
          <li className="mb-1">🖳 The history of computing and networks</li>
          <li className="mb-1">🇮🇪 Irish history and culture</li>
          <li className="mb-1">☸️ Buddhism</li>
          {/*

					<li className="mb-1">📡 Civil communications infrastructure</li>
					*/}
        </ul>
      </p>

      <p className="leading-[1.5] [&:not(:first-child)]:mt-6">
        I self-host my own Git forge at{" "}
        <a
          href="https://forgejo.systemsobscure.net/thomasabishop"
          className="underline decoration-1 hover:text-primary/80 underline-offset-2"
        >
          forgejo.systemsobscure.net
        </a>{" "}
        rather than use Microsoft GitHub. You can view my personal projects
        there.
      </p>
    </MainTemplate>
  )
}

export { AboutPage }