mirror of
https://github.com/Pantonius/pantosite-astro.git
synced 2026-04-26 09:24:38 +00:00
115 lines
2.3 KiB
Plaintext
115 lines
2.3 KiB
Plaintext
---
|
|
import BaseHead from "../components/BaseHead.astro";
|
|
import Header from "../components/Header.astro";
|
|
import Footer from "../components/Footer.astro";
|
|
import { SITE_TITLE, SITE_DESCRIPTION } from "../consts";
|
|
import Showcase from "../components/Showcase.astro";
|
|
import { getCollection } from "astro:content";
|
|
import { convertPost, type Post } from "../models/Post";
|
|
|
|
const posts: Post[] = (await getCollection("projects"))
|
|
.map(convertPost)
|
|
.sort((a, b) => b.pubDate.valueOf() - a.pubDate.valueOf());
|
|
---
|
|
|
|
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<BaseHead title={SITE_TITLE} description={SITE_DESCRIPTION} />
|
|
</head>
|
|
<body>
|
|
<Header />
|
|
<main>
|
|
<section id="welcome">
|
|
<h1>Hi 👋, my name is <a href="/about">Anton</a></h1>
|
|
<h2 class="typeout">
|
|
and I am passionate about a whole bunch of things
|
|
</h2>
|
|
|
|
<h3 class="buttons">
|
|
<a href="/blog">Blog</a>
|
|
<a href="/projects">Projects</a>
|
|
<a href="/about">About</a>
|
|
</h3>
|
|
</section>
|
|
|
|
<section id="projects">
|
|
<Showcase color="black" collection="projects" posts={posts} />
|
|
</section>
|
|
</main>
|
|
<Footer />
|
|
</body><script>
|
|
const typeout = document.querySelectorAll(".typeout");
|
|
|
|
typeout.forEach((el) => {
|
|
const text = el.textContent || "";
|
|
el.textContent = "";
|
|
|
|
let i = 0;
|
|
const interval = setInterval(() => {
|
|
el.textContent += text[i];
|
|
i++;
|
|
|
|
if (i >= text.length) {
|
|
clearInterval(interval);
|
|
}
|
|
}, 50);
|
|
});
|
|
</script>
|
|
|
|
<style>
|
|
main {
|
|
width: 100%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
}
|
|
|
|
section {
|
|
padding: 2rem;
|
|
border-radius: .75em;
|
|
|
|
flex-grow: 1;
|
|
|
|
width: 720px;
|
|
max-width: calc(100% - 2rem);
|
|
|
|
}
|
|
|
|
#welcome h1,
|
|
#welcome h2 {
|
|
text-align: center;
|
|
}
|
|
|
|
#projects {
|
|
background-color: var(--primary);
|
|
color: var(--background);
|
|
}
|
|
|
|
#projects .title {
|
|
color: var(--background);
|
|
}
|
|
|
|
.buttons {
|
|
display: flex;
|
|
flex-direction: row;
|
|
width: 100%;
|
|
justify-content: center;
|
|
margin-top: 2rem;
|
|
}
|
|
|
|
.buttons a {
|
|
margin: 0 0.5rem;
|
|
padding: 0.5rem 1rem;
|
|
background-color: var(--primary);
|
|
color: var(--background);
|
|
border-radius: 0.25rem;
|
|
}
|
|
|
|
.buttons a:hover {
|
|
background-color: var(--accent);
|
|
transition: background-color 0.2s;
|
|
}
|
|
</style>
|
|
</html>
|