src/pages/cv.astro 2.1 K raw
1
---
2
import PageLayout from "@/layouts/Base.astro";
3
4
const meta = {
5
	title: "/cv",
6
	description: "History of work",
7
};
8
9
const experience = [
10
	{
11
		company: "Stablecore",
12
		roles: [
13
			{ title: "Senior Solutions Engineer", period: "Jan 2026 – Present" },
14
		],
15
	},
16
	{
17
		company: "Orbiter",
18
		roles: [{ title: "Co-Founder", period: "Jan 2025 – Jan 2026" }],
19
	},
20
	{
21
		company: "OpenZeppelin",
22
		roles: [{ title: "Developer Relations", period: "Jun 2025 – Dec 2025" }],
23
	},
24
	{
25
		company: "Pinata",
26
		roles: [
27
			{ title: "Head of Developer Relations", period: "Aug 2023 – Jun 2025" },
28
			{ title: "Head of Community", period: "Aug 2022 – Aug 2023" },
29
			{ title: "Community Manager", period: "Jan 2022 – Aug 2022" },
30
		],
31
	},
32
	{
33
		company: "Old Point National Bank",
34
		roles: [
35
			{ title: "Customer Inquiry Specialist", period: "Dec 2017 – Jan 2022" },
36
		],
37
	},
38
	{
39
		company: "Bass Pro Shops",
40
		roles: [
41
			{
42
				title: "Hunting & Archery Dept. Team Lead",
43
				period: "Jul 2014 – Dec 2017",
44
			},
45
		],
46
	},
47
];
48
---
49
50
<PageLayout meta={meta}>
51
	<div class="space-y-6">
52
    <h1 class="title">/cv</h1>
53
		<div class="relative space-y-10">
54
			<span class="absolute left-[4px] top-3 bottom-0 w-px bg-gradient-to-b from-accent to-transparent" aria-hidden="true"></span>
55
			{experience.map((job, i) => (
56
				<div
57
					class="cv-item relative pl-7"
58
					style={`--item-opacity: ${i === 0 ? 1 : 1 - (i / (experience.length - 1)) * 0.6}`}
59
				>
60
					<span
61
						class:list={["cv-item-child absolute left-0 top-1.5 h-2.5 w-2.5 rounded-full",
62
							i === 0 ? "border border-accent bg-accent" : "border border-accent/50 bg-[#121113]",
63
						]}
64
					/>
65
					<div class="cv-item-child">
66
						<h3 class="text-base font-semibold">{job.company}</h3>
67
						<ul class="mt-1 space-y-2">
68
							{job.roles.map((role) => (
69
								<li>
70
									<p class="text-sm">{role.title}</p>
71
									<p class="text-xs text-zinc-500">{role.period}</p>
72
								</li>
73
							))}
74
						</ul>
75
					</div>
76
				</div>
77
			))}
78
		</div>
79
	</div>
80
</PageLayout>
81
82
<style>
83
	.cv-item-child {
84
		opacity: var(--item-opacity);
85
		transition: opacity 300ms ease;
86
	}
87
	.cv-item:hover .cv-item-child {
88
		opacity: 1;
89
	}
90
</style>