zeu.dev
personal website
init
+120
-15
+6
-1
astro.config.mjs
+6
-1
astro.config.mjs
···
1
1
import { defineConfig } from 'astro/config';
2
2
3
+
import tailwind from "@astrojs/tailwind";
4
+
import svelte from "@astrojs/svelte";
5
+
3
6
// https://astro.build/config
4
-
export default defineConfig({});
7
+
export default defineConfig({
8
+
integrations: [tailwind(), svelte()]
9
+
});
bun.lockb
bun.lockb
This is a binary file and will not be displayed.
+5
-1
package.json
+5
-1
package.json
···
10
10
"astro": "astro"
11
11
},
12
12
"dependencies": {
13
-
"astro": "^4.14.6",
14
13
"@astrojs/check": "^0.9.3",
14
+
"@astrojs/svelte": "^5.7.0",
15
+
"@astrojs/tailwind": "^5.1.0",
16
+
"astro": "^4.14.6",
17
+
"svelte": "^5.0.0-next.241",
18
+
"tailwindcss": "^3.4.10",
15
19
"typescript": "^5.5.4"
16
20
}
17
21
}
public/SyneMono-Regular.ttf
public/SyneMono-Regular.ttf
This is a binary file and will not be displayed.
+72
src/components/SiteLayout.astro
+72
src/components/SiteLayout.astro
···
1
+
---
2
+
const { title } = Astro.props;
3
+
---
4
+
5
+
<html lang="en">
6
+
<head>
7
+
<meta charset="utf-8" />
8
+
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
9
+
<meta name="viewport" content="width=device-width" />
10
+
<meta name="generator" content={Astro.generator} />
11
+
<title>{ title }</title>
12
+
</head>
13
+
<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
+
<aside class="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">
15
+
<div class="flex flex-col gap-2 text-xl">
16
+
<h1>zeu.dev</h1>
17
+
<h2 class="hidden md:flex">all things me!</h2>
18
+
</div>
19
+
20
+
<button id="menu_button" class="px-2 py-1 border border-yellow-500 self-end w-fit h-fit md:hidden">
21
+
Menu
22
+
</button>
23
+
24
+
<nav id="navigation" class="hidden md:flex flex-col gap-4 w-full md:col-span-1">
25
+
<hr class="border-yellow-500 " />
26
+
27
+
<section class="flex flex-col gap-2 text-white">
28
+
<h3 class="text-yellow-500">socials</h3>
29
+
<a href="https://twitter.com/zeu_dev">twitter</a>
30
+
<a href="https://github.com/zeucapua">github</a>
31
+
<a href="https://twitch.tv/zeu_dev">twitch</a>
32
+
</section>
33
+
34
+
<hr class="border-yellow-500 " />
35
+
36
+
<section class="flex flex-col gap-2 text-white">
37
+
<h3 class="text-yellow-500">blog</h3>
38
+
<p>skogz: diy svelte 5 ssr router</p>
39
+
<a href="/blog">more {"->"}</a>
40
+
</section>
41
+
42
+
<hr class="border-yellow-500 " />
43
+
44
+
<section class="flex flex-col gap-2 text-white">
45
+
<h3 class="text-yellow-500">related</h3>
46
+
<a href="https://easytodo.link">easytodo.link</a>
47
+
<a href="https://app.opensauced.pizza">OpenSauced</a>
48
+
</section>
49
+
</nav>
50
+
</aside>
51
+
52
+
<div class="md:col-span-4 w-full h-full">
53
+
<slot />
54
+
</div>
55
+
</body>
56
+
</html>
57
+
58
+
<script>
59
+
const menuButton = document.querySelector("#menu_button");
60
+
const navSection = document.querySelector("#navigation");
61
+
</script>
62
+
63
+
<style is:global>
64
+
@font-face {
65
+
font-family: "SyneMono";
66
+
src: url("/SyneMono-Regular.ttf");
67
+
}
68
+
69
+
a {
70
+
text-decoration-line: underline;
71
+
}
72
+
</style>
+20
-13
src/pages/index.astro
+20
-13
src/pages/index.astro
···
1
+
---
2
+
import SiteLayout from "../components/SiteLayout.astro";
1
3
---
2
4
3
-
---
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 font-bold text-yellow-500">hey hi hello!</h1>
8
+
<h2>welcome to my site!</h2>
9
+
10
+
<p>
11
+
I have plenty of ideas and projects I want to talk to you guys about
12
+
and so I made this site to showcase all I've been doing.
13
+
</p>
14
+
15
+
<p>
16
+
updates and showcases will be hosted here, alongside my own thoughts
17
+
with papers and micro-blogs.
18
+
</p>
19
+
4
20
5
-
<html lang="en">
6
-
<head>
7
-
<meta charset="utf-8" />
8
-
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
9
-
<meta name="viewport" content="width=device-width" />
10
-
<meta name="generator" content={Astro.generator} />
11
-
<title>Astro</title>
12
-
</head>
13
-
<body>
14
-
<h1>Astro</h1>
15
-
</body>
16
-
</html>
21
+
<p class="text-yellow-500">- @zeu_dev</p>
22
+
</main>
23
+
</SiteLayout>
+5
svelte.config.js
+5
svelte.config.js