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

const AboutPage = () => {
	return (
		<MainTemplate>
			<div className="container mx-auto p-4">
				<figure className="w-full flex flex-col items-center mb-6">
					<div className="scanlined inline-block">
						<img
							alt="A portrait of the blog author"
							src={portrait}
							className="w-80 flex"
						/>
					</div>
					<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 underline decoration-1 underline-offset-4"
						>
							National Museum of Computing
						</a>
						, Bletchley Park.
					</figcaption>
				</figure>

				<p className="leading-[1.6] [&:not(:first-child)]:mt-6">
					I'm a self-taught software engineer based in West Sussex, UK.{" "}
				</p>

				<p className="leading-[1.6] [&: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-4 text-primary"
					>
						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-4 text-primary"
					>
						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-4 text-primary"
					>
						Arria NLG
					</a>{" "}
					and in several web developer roles. Before software I was a
					teacher.{" "}
				</p>

				<p className="leading-[1.6] [&:not(:first-child)]:mt-6">
					Some things I like:
					<ul className="pt-2">
						<li className="mb-1">🐶 Staffies and other 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.6] [&: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">☸️ Buddhism</li>
						{/*

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

export { AboutPage }