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-semibold 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">
				Another software engineer with a blog!{" "}
			</p>

			<p className="leading-[1.5] [&:not(:first-child)]:mt-6">
				I am a self-taught engineer from London. This blog is a technical
				scrapbook. I document the details of my technical life so I can have a
				record of progress when I look back. Doing this publicly motivates me to
				take care with my writing and to be as clear as possible.{" "}
			</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.{" "}
			</p>

			<h3 className="mt-5 mb-0 scroll-m-20 text-xl font-semibold tracking-tight">
				Code
			</h3>

			<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 }