my website
feat: add portfolio
+209
-6
public/images/projects/decibels.png
public/images/projects/decibels.png
This is a binary file and will not be displayed.
public/images/projects/memories.png
public/images/projects/memories.png
This is a binary file and will not be displayed.
public/images/projects/muzika.png
public/images/projects/muzika.png
This is a binary file and will not be displayed.
public/images/projects/sticky.png
public/images/projects/sticky.png
This is a binary file and will not be displayed.
+109
src/components/ProjectsIndex.astro
+109
src/components/ProjectsIndex.astro
···
1
+
---
2
+
import { getCollection } from "astro:content";
3
+
import type { CollectionEntry } from "astro:content";
4
+
5
+
interface Props {
6
+
limit?: number;
7
+
}
8
+
9
+
const { limit = Infinity } = Astro.props;
10
+
11
+
const projects = (await getCollection("portfolio")).slice(0, limit);
12
+
13
+
type Project = CollectionEntry<"portfolio">;
14
+
---
15
+
16
+
<div class="projects">
17
+
{
18
+
projects.map(
19
+
({
20
+
id,
21
+
data: {
22
+
title,
23
+
description,
24
+
hero_image,
25
+
bg_color,
26
+
link
27
+
},
28
+
}) => (
29
+
<a
30
+
class="project"
31
+
href={link}
32
+
style={bg_color ? { "background-color": bg_color } : null}
33
+
target="_blank"
34
+
>
35
+
{hero_image ? (
36
+
<img class="project-image" src={hero_image} alt={title} />
37
+
) : null}
38
+
<h3 class="project-title">
39
+
<span>{title}</span> <span class="project-arrow">→</span>
40
+
</h3>
41
+
<span>{description}</span>
42
+
<br />
43
+
</a>
44
+
),
45
+
)
46
+
}
47
+
</div>
48
+
49
+
<style>
50
+
.project {
51
+
--padding: 12px;
52
+
--link: var(--fg);
53
+
--link-bg: #abd5ff;
54
+
--link-bg-hover: #7ebfff;
55
+
56
+
background-color: var(--link-bg);
57
+
border-radius: 12px;
58
+
padding: var(--padding);
59
+
margin-inline: calc(-1 * var(--padding));
60
+
margin-bottom: 2em;
61
+
border-bottom: none;
62
+
transition: 0.3s background-color;
63
+
text-align: center;
64
+
min-height: 200px;
65
+
display: flex;
66
+
flex-direction: column;
67
+
justify-content: center;
68
+
gap: 1rem;
69
+
}
70
+
71
+
@media screen and (prefers-color-scheme: dark) {
72
+
.project {
73
+
--link-bg: #153e68;
74
+
--link-bg-hover: #2c6fb8;
75
+
--fg: white;
76
+
}
77
+
}
78
+
79
+
.project:hover {
80
+
background-color: var(--link-bg-hover);
81
+
}
82
+
83
+
.project-arrow {
84
+
display: inline-block;
85
+
transition: 0.3s translate;
86
+
}
87
+
88
+
.project:hover .project-arrow,
89
+
.project:focus .project-arrow {
90
+
translate: 10px;
91
+
}
92
+
93
+
.project .project-title {
94
+
font-size: 1.25em;
95
+
font-weight: 900;
96
+
border-bottom-width: 2px;
97
+
margin: 0;
98
+
color: inherit;
99
+
}
100
+
101
+
.project a.project-image {
102
+
border-bottom: none;
103
+
}
104
+
105
+
.project .project-image {
106
+
width: 100%;
107
+
border-radius: 6px;
108
+
}
109
+
</style>
+15
-1
src/content.config.ts
+15
-1
src/content.config.ts
···
17
17
}),
18
18
});
19
19
20
-
export const collections = { blog };
20
+
const portfolio = defineCollection({
21
+
// Load Markdown and MDX files in the `src/content/blog/` directory.
22
+
loader: glob({ base: "./src/content/portfolio", pattern: "**/*.{md,mdx}" }),
23
+
// Type-check frontmatter using a schema
24
+
schema: z.object({
25
+
title: z.coerce.string(),
26
+
description: z.string(),
27
+
hero_image: z.string().optional(),
28
+
invert: z.boolean().default(false),
29
+
bg_color: z.string().optional(),
30
+
link: z.string(),
31
+
}),
32
+
});
33
+
34
+
export const collections = { blog, portfolio };
+7
src/content/portfolio/decibels.md
+7
src/content/portfolio/decibels.md
+7
src/content/portfolio/memories.md
+7
src/content/portfolio/memories.md
+7
src/content/portfolio/muzika.md
+7
src/content/portfolio/muzika.md
+5
src/content/portfolio/rabbet.md
+5
src/content/portfolio/rabbet.md
+7
src/content/portfolio/sticky.md
+7
src/content/portfolio/sticky.md
+14
-5
src/pages/index.astro
+14
-5
src/pages/index.astro
···
5
5
import Welcome from "../components/Welcome.astro";
6
6
import PostsIndex from "../components/PostsIndex.astro";
7
7
import ContactLinks from "../components/ContactLinks.astro";
8
+
import ProjectsIndex from "../components/ProjectsIndex.astro";
8
9
---
9
10
10
11
<!doctype html>
···
21
22
writings.
22
23
</Welcome>
23
24
<div class="heading">
25
+
<h2>Projects</h2>
26
+
<a href="/portfolio">Portfolio →</a>
27
+
</div>
28
+
<ProjectsIndex limit={3} />
29
+
<p>
30
+
<a href="/portfolio">More Projects →</a>
31
+
</p>
32
+
<div class="heading">
24
33
<h2>Posts</h2>
25
34
<a href="/blog">All Posts →</a>
26
35
</div>
···
39
48
</html>
40
49
41
50
<style>
42
-
.heading {
43
-
display: flex;
44
-
justify-content: space-between;
45
-
align-items: center;
46
-
}
51
+
.heading {
52
+
display: flex;
53
+
justify-content: space-between;
54
+
align-items: center;
55
+
}
47
56
</style>
+38
src/pages/portfolio.astro
+38
src/pages/portfolio.astro
···
1
+
---
2
+
import BaseHead from "../components/BaseHead.astro";
3
+
import { SITE_TITLE, SITE_DESCRIPTION, AUTHOR, PUBLISH_YEAR } from "../consts";
4
+
import Intro from "../components/Intro.astro";
5
+
import Welcome from "../components/Welcome.astro";
6
+
import Header from "../components/Header.astro";
7
+
import ProjectsIndex from "../components/ProjectsIndex.astro";
8
+
---
9
+
10
+
<!doctype html>
11
+
<html lang="en">
12
+
<head>
13
+
<BaseHead title={`vixalien´s portfolio`} description={SITE_DESCRIPTION} />
14
+
</head>
15
+
<body>
16
+
<main class="container">
17
+
<Header title={SITE_TITLE} />
18
+
<Intro title={`vixalien´s portfolio`} />
19
+
<Welcome> Work I've worked on in the past. </Welcome>
20
+
<h2>Projects</h2>
21
+
<ProjectsIndex />
22
+
23
+
<footer>
24
+
<a class="top" href="#top">↑ Scroll to Top</a>
25
+
{
26
+
(
27
+
<div>
28
+
<br />
29
+
<span>
30
+
© {AUTHOR} {PUBLISH_YEAR}
31
+
</span>
32
+
</div>
33
+
)
34
+
}
35
+
</footer>
36
+
</main>
37
+
</body>
38
+
</html>