---
import PageLayout from "@/layouts/Base.astro";

const meta = {
	title: "/cv",
	description: "History of work",
};

const experience = [
	{
		company: "Stablecore",
		roles: [
			{ title: "Senior Solutions Engineer", period: "Jan 2026 – Present" },
		],
	},
	{
		company: "Orbiter",
		roles: [{ title: "Co-Founder", period: "Jan 2025 – Jan 2026" }],
	},
	{
		company: "OpenZeppelin",
		roles: [{ title: "Developer Relations", period: "Jun 2025 – Dec 2025" }],
	},
	{
		company: "Pinata",
		roles: [
			{ title: "Head of Developer Relations", period: "Aug 2023 – Jun 2025" },
			{ title: "Head of Community", period: "Aug 2022 – Aug 2023" },
			{ title: "Community Manager", period: "Jan 2022 – Aug 2022" },
		],
	},
	{
		company: "Old Point National Bank",
		roles: [
			{ title: "Customer Inquiry Specialist", period: "Dec 2017 – Jan 2022" },
		],
	},
	{
		company: "Bass Pro Shops",
		roles: [
			{
				title: "Hunting & Archery Dept. Team Lead",
				period: "Jul 2014 – Dec 2017",
			},
		],
	},
];
---

<PageLayout meta={meta}>
	<div class="space-y-6">
    <h1 class="title">/cv</h1>
		<div class="relative space-y-10">
			<span class="absolute left-[4px] top-3 bottom-0 w-px bg-gradient-to-b from-accent to-transparent" aria-hidden="true"></span>
			{experience.map((job, i) => (
				<div
					class="cv-item relative pl-7"
					style={`--item-opacity: ${i === 0 ? 1 : 1 - (i / (experience.length - 1)) * 0.6}`}
				>
					<span
						class:list={["cv-item-child absolute left-0 top-1.5 h-2.5 w-2.5 rounded-full",
							i === 0 ? "border border-accent bg-accent" : "border border-accent/50 bg-[#121113]",
						]}
					/>
					<div class="cv-item-child">
						<h3 class="text-base font-semibold">{job.company}</h3>
						<ul class="mt-1 space-y-2">
							{job.roles.map((role) => (
								<li>
									<p class="text-sm">{role.title}</p>
									<p class="text-xs text-zinc-500">{role.period}</p>
								</li>
							))}
						</ul>
					</div>
				</div>
			))}
		</div>
	</div>
</PageLayout>

<style>
	.cv-item-child {
		opacity: var(--item-opacity);
		transition: opacity 300ms ease;
	}
	.cv-item:hover .cv-item-child {
		opacity: 1;
	}
</style>