zeu.dev
personal website
add view transitions, init resume page
+42
-3
+7
-3
src/components/SiteLayout.astro
+7
-3
src/components/SiteLayout.astro
···
1
1
---
2
+
import { ViewTransitions } from "astro:transitions";
2
3
const { title } = Astro.props;
3
4
---
4
5
···
9
10
<meta name="viewport" content="width=device-width" />
10
11
<meta name="generator" content={Astro.generator} />
11
12
<title>{ title }</title>
13
+
<ViewTransitions />
12
14
</head>
13
15
<body class="relative font-syne bg-neutral-900 text-yellow-500 grid grid-cols-1 md:grid-cols-5 w-full h-full min-w-screen min-h-screen">
14
16
<aside class="sticky top-0 max-h-screen flex items-center border-yellow-500 justify-between md:border-r-2 w-full md:w-fit md:justify-start md:items-start h-fit md:h-full md:flex-col gap-4 font-medium p-4">
···
23
25
Menu
24
26
</button>
25
27
26
-
<nav id="navigation" class="hidden md:flex flex-col gap-4 w-full md:col-span-1">
28
+
<nav id="navigation" class="hidden md:flex flex-col gap-4 w-full md:col-span-1" transition:persist>
27
29
<hr class="border-yellow-500 " />
28
30
29
31
<section class="flex flex-col gap-2 text-white">
···
44
46
<hr class="border-yellow-500 " />
45
47
46
48
<section class="flex flex-col gap-2 text-white">
47
-
<h3 class="text-yellow-500">some works</h3>
49
+
<h3 class="text-yellow-500">
50
+
<a href="/resume" class="after:content-['_->']">resume</a>
51
+
</h3>
48
52
<a href="https://app.opensauced.pizza" target="_blank" class="after:content-['_↗']">OpenSauced</a>
49
53
<a href="https://easytodo.link" target="_blank" class="after:content-['_↗']">easytodo.link</a>
50
54
</section>
51
55
</nav>
52
56
</aside>
53
57
54
-
<div class="md:col-span-4 w-full h-full">
58
+
<div class="md:col-span-4 w-full h-full" transition:animate="slide">
55
59
<slot />
56
60
</div>
57
61
</body>
+35
src/pages/resume.astro
+35
src/pages/resume.astro
···
1
+
---
2
+
import SiteLayout from "../components/SiteLayout.astro";
3
+
---
4
+
5
+
<SiteLayout title="zeu.dev">
6
+
<main class="flex flex-col gap-4 px-4 py-8 text-white text-lg">
7
+
<h1 class="text-5xl text-yellow-500 font-bold">Resume</h1>
8
+
<p class="text-yellow-500">
9
+
Notable works, professional and otherwise.
10
+
</p>
11
+
12
+
<h3 class="text-3xl font-semibold text-yellow-500">OpenSauced</h3>
13
+
<section>
14
+
<h4 class="text-xl font-semibold">
15
+
<span class="text-yellow-500">App</span> Open Source Repository Data Analytics Platform
16
+
</h4>
17
+
</section>
18
+
<section>
19
+
<h4 class="text-xl font-semibold">
20
+
<span class="text-yellow-500">Landing Page</span> Marketing, Blogs, and Changelogs
21
+
</h4>
22
+
23
+
</section>
24
+
<section>
25
+
<h4 class="text-xl font-semibold">
26
+
<span class="text-yellow-500">Pizza CLI</span> Open Source Team Orchestration Tool
27
+
</h4>
28
+
</section>
29
+
30
+
<h3 class="text-3xl font-semibold text-yellow-500"></h3>
31
+
<section>
32
+
33
+
</section>
34
+
</main>
35
+
</SiteLayout>