Mirror of my GitHub Pages site
www.spenser.black/
Add intro
Spenser Black
(Jun 26, 2026, 7:50 PM EDT)
b627dafd
c5128445
+80
-1
+23
src/components/LinkList.astro
+23
src/components/LinkList.astro
···
1
+
---
2
+
import ExternalLink from "./ExternalLink.astro";
3
+
4
+
type Item = {
5
+
link: string;
6
+
name: string;
7
+
external?: boolean;
8
+
};
9
+
type Props = {
10
+
items: Item[];
11
+
};
12
+
13
+
const { items } = Astro.props;
14
+
---
15
+
<ul>
16
+
{
17
+
items.map(({ link, name, external }) => <li>{
18
+
external
19
+
? <ExternalLink link={link}>{name}</ExternalLink>
20
+
: <a href={link}>{name}</a>
21
+
}</li>)
22
+
}
23
+
</ul>
+57
-1
src/pages/index.astro
+57
-1
src/pages/index.astro
···
1
1
---
2
2
import BaseLayout from "../layouts/BaseLayout.astro";
3
+
import ExternalLink from "../components/ExternalLink.astro";
4
+
import LinkList from "../components/LinkList.astro";
3
5
const title = "Homepage";
6
+
7
+
const mapToExternalLinks = (items: Record<string, string>) => Object.entries(items)
8
+
.map(([name, link]) => ({ name, link, external: true }));
9
+
10
+
const languages = mapToExternalLinks({
11
+
Go: "https://go.dev/",
12
+
Python: "https://www.python.org/",
13
+
Ruby: "https://www.ruby-lang.org/",
14
+
Rust: "https://rust-lang.org/",
15
+
TypeScript: "https://www.typescriptlang.org/",
16
+
});
17
+
18
+
const books = mapToExternalLinks({
19
+
Frankenstein: "https://en.wikipedia.org/wiki/Frankenstein",
20
+
"Water Margin": "https://en.wikipedia.org/wiki/Water_Margin",
21
+
});
22
+
const animeAndManga = mapToExternalLinks({
23
+
Baki: "https://youtu.be/vazrSoijLmA",
24
+
Drifters: "https://en.wikipedia.org/wiki/Drifters_(manga)",
25
+
"Getter Robo Armageddon": "https://en.wikipedia.org/wiki/Getter_Robo_Armageddon",
26
+
});
27
+
const games = mapToExternalLinks({
28
+
"Resident Evil": "https://en.wikipedia.org/wiki/Resident_Evil",
29
+
Signalis: "https://en.wikipedia.org/wiki/Signalis",
30
+
Ys: "https://en.wikipedia.org/wiki/Ys_(series)",
31
+
});
4
32
---
5
33
6
34
<BaseLayout title={title}>
7
-
<p>Hello, world!</p>
35
+
<h2>Introduction</h2>
36
+
<p>👋 This is my personal site. I'm a developer, both for work and as a hobby, and I enjoy using the following languages:</p>
37
+
<LinkList items={languages} />
38
+
<p>
39
+
As you can probably tell from this site's styling, I am not much of
40
+
a <ExternalLink link="https://en.wikipedia.org/wiki/Front_end_and_back_end">front-end</ExternalLink> developer,
41
+
and tend to keep my websites simple. When I <em>do</em> write frontend stuff, I typically use
42
+
either <ExternalLink link="https://svelte.dev/">Svelte</ExternalLink> or <ExternalLink link="https://vuejs.org/">Vue</ExternalLink>.
43
+
This site has been written with <strong><ExternalLink link="https://astro.build/">Astro</ExternalLink></strong>, both as a means
44
+
of teaching myself Astro and also because it seemed like a good tool to build this site.
45
+
</p>
46
+
47
+
<p>
48
+
Besides coding stuff, I like reading, video games, movies, anime and manga, and sometimes working out. I especially like:
49
+
</p>
50
+
<ul>
51
+
<li>
52
+
Books:
53
+
<LinkList items={books} />
54
+
</li>
55
+
<li>
56
+
Video Games:
57
+
<LinkList items={games} />
58
+
</li>
59
+
<li>
60
+
Anime/Manga
61
+
<LinkList items={animeAndManga} />
62
+
</li>
63
+
</ul>
8
64
</BaseLayout>