everything ✶
i.want.to.be.foreveryou.ng
base - almost done ?
+306
-13
+6
bun.lock
+6
bun.lock
···
4
4
"": {
5
5
"name": "iwanttobeforeveryoung",
6
6
"dependencies": {
7
+
"@fontsource/special-gothic": "^5.2.2",
7
8
"astro": "^5.7.13",
9
+
"minireset.css": "^0.0.7",
8
10
},
9
11
},
10
12
},
···
80
82
"@esbuild/win32-ia32": ["@esbuild/win32-ia32@0.25.4", "", { "os": "win32", "cpu": "ia32" }, "sha512-i1sW+1i+oWvQzSgfRcxxG2k4I9n3O9NRqy8U+uugaT2Dy7kLO9Y7wI72haOahxceMX8hZAzgGou1FhndRldxRg=="],
81
83
82
84
"@esbuild/win32-x64": ["@esbuild/win32-x64@0.25.4", "", { "os": "win32", "cpu": "x64" }, "sha512-nOT2vZNw6hJ+z43oP1SPea/G/6AbN6X+bGNhNuq8NtRHy4wsMhw765IKLNmnjek7GvjWBYQ8Q5VBoYTFg9y1UQ=="],
85
+
86
+
"@fontsource/special-gothic": ["@fontsource/special-gothic@5.2.2", "", {}, "sha512-dvN6o7q54TZi2RQA88GRVKUF3QbRxm53WvtWcHuWUMb5OzdPVpyNeqKnRo9QhM2lqdhwi1QJlkwsSNbJiitl6w=="],
83
87
84
88
"@img/sharp-darwin-arm64": ["@img/sharp-darwin-arm64@0.33.5", "", { "optionalDependencies": { "@img/sharp-libvips-darwin-arm64": "1.0.4" }, "os": "darwin", "cpu": "arm64" }, "sha512-UT4p+iz/2H4twwAoLCqfA9UH5pI6DggwKEGuaPy7nCVQ8ZsiY5PIcrRvD1DzuY3qYL07NtIQcWnBSY/heikIFQ=="],
85
89
···
478
482
"micromark-util-symbol": ["micromark-util-symbol@2.0.1", "", {}, "sha512-vs5t8Apaud9N28kgCrRUdEed4UJ+wWNvicHLPxCa9ENlYuAY31M0ETy5y1vA33YoNPDFTghEbnh6efaE8h4x0Q=="],
479
483
480
484
"micromark-util-types": ["micromark-util-types@2.0.2", "", {}, "sha512-Yw0ECSpJoViF1qTU4DC6NwtC4aWGt1EkzaQB8KPPyCRR8z9TWeV0HbEFGTO+ZY1wB22zmxnJqhPyTpOVCpeHTA=="],
485
+
486
+
"minireset.css": ["minireset.css@0.0.7", "", {}, "sha512-raWKK2aHP/MI4Yu72dU6hade1YFuoyDQtSUi/FiIZfeRHjgL81uN/nFvG2aoAr+mseRc3jpg47jQqx1/+6w+kQ=="],
481
487
482
488
"mrmime": ["mrmime@2.0.1", "", {}, "sha512-Y3wQdFg2Va6etvQ5I82yUhGdsKrcYox6p7FfL1LbK2J4V01F9TGlepTIhnK24t7koZibmg82KGglhA1XK5IsLQ=="],
483
489
+3
-1
package.json
+3
-1
package.json
+11
src/components/head.astro
+11
src/components/head.astro
···
1
+
---
2
+
const title = "everything";
3
+
---
4
+
5
+
<head>
6
+
<meta charset="utf-8" />
7
+
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
8
+
<meta name="viewport" content="width=device-width" />
9
+
<meta name="generator" content={Astro.generator} />
10
+
<title>{title}</title>
11
+
</head>
+121
src/components/list.astro
+121
src/components/list.astro
···
1
+
---
2
+
import externalItems from "@/resources/items.json";
3
+
const items = externalItems || Astro.props.items || [];
4
+
---
5
+
6
+
<div class="list">
7
+
<div id="hover-image" class="hover-image"></div>
8
+
{
9
+
[...new Set(items.map((item) => item.year))]
10
+
.sort((a, b) => b - a)
11
+
.map((year) => (
12
+
<div class="list-group">
13
+
<h3 class="list-group-title">{year}</h3>
14
+
<div class="list-group-items">
15
+
{items
16
+
.filter((item) => item.year === year)
17
+
.map((item, index) => (
18
+
<span class="list-group-item">
19
+
<a
20
+
class="list-group-item-link"
21
+
href={item.url || "#"}
22
+
key={index}
23
+
data-image={item.img}
24
+
>
25
+
{item.name}
26
+
</a>
27
+
<span class="list-group-item-type">
28
+
{item.type}
29
+
</span>
30
+
</span>
31
+
))}
32
+
</div>
33
+
</div>
34
+
))
35
+
}
36
+
</div>
37
+
38
+
<style>
39
+
.list {
40
+
display: flex;
41
+
flex-direction: column;
42
+
gap: 12px;
43
+
padding: 8px 6px;
44
+
border: 1px solid #ccc;
45
+
position: relative;
46
+
47
+
.hover-image {
48
+
opacity: 0;
49
+
position: absolute;
50
+
width: 200px;
51
+
height: 200px;
52
+
z-index: 10;
53
+
pointer-events: none;
54
+
background-size: cover;
55
+
background-position: center;
56
+
}
57
+
58
+
.list-group {
59
+
display: flex;
60
+
flex-direction: column;
61
+
gap: 4px;
62
+
63
+
&:not(:last-child) {
64
+
padding-bottom: 12px;
65
+
border-bottom: 1px solid #ccc;
66
+
}
67
+
68
+
.list-group-items {
69
+
display: flex;
70
+
flex-direction: column;
71
+
gap: 4px;
72
+
73
+
.list-group-item {
74
+
display: flex;
75
+
flex-direction: row;
76
+
align-items: center;
77
+
gap: 8px;
78
+
79
+
.list-group-item-type {
80
+
font-size: 0.8rem;
81
+
color: #444;
82
+
border-radius: 4px;
83
+
background-color: #f0f0f0;
84
+
padding: 2px 4px 3px 4px;
85
+
}
86
+
}
87
+
}
88
+
}
89
+
}
90
+
</style>
91
+
92
+
<script>
93
+
const hoverImage = document.getElementById("hover-image");
94
+
const links = document.querySelectorAll(".list-group-item-link");
95
+
96
+
links.forEach((link) => {
97
+
const imageUrl = link.getAttribute("data-image");
98
+
if (!imageUrl) return;
99
+
100
+
link.addEventListener("mouseenter", () => {
101
+
if (hoverImage) {
102
+
hoverImage.style.backgroundImage = `url(${imageUrl})`;
103
+
hoverImage.style.opacity = "1";
104
+
}
105
+
});
106
+
107
+
link.addEventListener("mouseleave", () => {
108
+
if (hoverImage) {
109
+
hoverImage.style.opacity = "0";
110
+
}
111
+
});
112
+
113
+
link.addEventListener("mousemove", (e) => {
114
+
if (hoverImage) {
115
+
const x = e.clientX;
116
+
const y = e.clientY;
117
+
hoverImage.style.transform = `translate(${x + 0}px, ${y - 48}px)`;
118
+
}
119
+
});
120
+
});
121
+
</script>
+79
-11
src/pages/index.astro
+79
-11
src/pages/index.astro
···
1
1
---
2
-
2
+
import Head from "@/components/head.astro";
3
+
import List from "@/components/list.astro";
4
+
import Socials from "@/components/socials.astro";
5
+
import "minireset.css";
6
+
import "@fontsource/special-gothic";
3
7
---
4
8
5
9
<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>
10
+
<Head />
11
+
<body>
12
+
<h1 class="title">everything (so far)</h1>
13
+
<List />
14
+
<div class="bottom">
15
+
<Socials />
16
+
<span class="footer">
17
+
<span class="footer-author">eti / sds</span>
18
+
<span class="footer-timestamp"
19
+
>generated on {new Date().toLocaleDateString("en-FR")} at
20
+
{new Date().toLocaleTimeString("en-FR")}
21
+
</span>
22
+
</span>
23
+
</div>
24
+
</body>
16
25
</html>
26
+
27
+
<style is:global>
28
+
html {
29
+
font-family: "Special Gothic", sans-serif;
30
+
display: flex;
31
+
padding: 12px;
32
+
min-height: 100vh;
33
+
}
34
+
35
+
body {
36
+
display: flex;
37
+
flex-direction: column;
38
+
width: 500px;
39
+
gap: 12px;
40
+
}
41
+
42
+
a {
43
+
color: blue;
44
+
45
+
&:visited {
46
+
color: darkblue;
47
+
}
48
+
49
+
&:hover {
50
+
font-style: italic;
51
+
}
52
+
}
53
+
54
+
.bottom {
55
+
display: flex;
56
+
flex-direction: column;
57
+
align-items: end;
58
+
justify-content: end;
59
+
height: 100%;
60
+
}
61
+
62
+
.footer {
63
+
display: flex;
64
+
flex-direction: row;
65
+
justify-content: space-between;
66
+
width: 100%;
67
+
}
68
+
69
+
@media screen and (min-width: 700px) {
70
+
.bottom {
71
+
height: inherit;
72
+
}
73
+
74
+
body {
75
+
width: 600px;
76
+
}
77
+
}
78
+
79
+
@media screen and (min-width: 1000px) {
80
+
body {
81
+
width: 700px;
82
+
}
83
+
}
84
+
</style>
+44
src/resources/items.json
+44
src/resources/items.json
···
1
+
[
2
+
{
3
+
"name": "23/24 🪁",
4
+
"year": 2024,
5
+
"type": "snippets",
6
+
"url": "https://soundcloud.com/95ac0/23-24e",
7
+
"img": "https://i1.sndcdn.com/artworks-5kRdDzYVctzAbomY-IcE2Tw-t500x500.jpg"
8
+
},
9
+
{
10
+
"name": "le rêve de morphée",
11
+
"year": 2023,
12
+
"type": "ep",
13
+
"url": "https://imumcoeli.bandcamp.com/album/le-r-ve-de-morph-e",
14
+
"img": "https://f4.bcbits.com/img/a0691794289_10.jpg"
15
+
},
16
+
{
17
+
"name": "lost ambient works (2)",
18
+
"year": 2023,
19
+
"type": "archive",
20
+
"url": "https://sdsssss.bandcamp.com/album/lost-ambient-works-2",
21
+
"img": "https://f4.bcbits.com/img/a1928912776_10.jpg"
22
+
},
23
+
{
24
+
"name": "live @spin_offf '23",
25
+
"year": 2023,
26
+
"type": "live",
27
+
"url": "https://soundcloud.com/sdssssssssssssssss/live-spin_offf-23",
28
+
"img": "https://i1.sndcdn.com/artworks-jwEgln8d169fqa6Z-6sbMnA-t500x500.jpg"
29
+
},
30
+
{
31
+
"name": "la maison du soleil",
32
+
"year": 2022,
33
+
"type": "ep",
34
+
"url": "https://olgaproductions.bandcamp.com/album/la-maison-du-soleil",
35
+
"img": "https://f4.bcbits.com/img/a2529116335_10.jpg"
36
+
},
37
+
{
38
+
"name": "lost ambient works (1)",
39
+
"year": 2022,
40
+
"type": "archive",
41
+
"url": "https://sdsssss.bandcamp.com/album/lost-ambient-works-1",
42
+
"img": "https://f4.bcbits.com/img/a3848085035_10.jpg"
43
+
}
44
+
]