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'm a self-taught software engineer based on the south coast of England.
				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 (2009)
				and hold a Postgraduate Certificate of Education (2011).
			</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 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.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 }