Very first version of pantosite-astro

2026-04-26 17:34:39 +00:00 · 2024-12-27 22:05:12 +01:00
parent f82a00b1da
commit f83c6af99b
62 changed files with 1237 additions and 654 deletions
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -1,8 +1,15 @@
 ---
-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 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>
@@ -13,38 +20,95 @@ import { SITE_TITLE, SITE_DESCRIPTION } from '../consts';
 	<body>
 		<Header />
 		<main>
-			<h1>🧑‍🚀 Hello, Astronaut!</h1>
-			<p>
-				Welcome to the official <a href="https://astro.build/">Astro</a> blog starter template. This
-				template serves as a lightweight, minimally-styled starting point for anyone looking to build
-				a personal website, blog, or portfolio with Astro.
-			</p>
-			<p>
-				This template comes with a few integrations already configured in your
-				<code>astro.config.mjs</code> file. You can customize your setup with
-				<a href="https://astro.build/integrations">Astro Integrations</a> to add tools like Tailwind,
-				React, or Vue to your project.
-			</p>
-			<p>Here are a few ideas on how to get started with the template:</p>
-			<ul>
-				<li>Edit this page in <code>src/pages/index.astro</code></li>
-				<li>Edit the site header items in <code>src/components/Header.astro</code></li>
-				<li>Add your name to the footer in <code>src/components/Footer.astro</code></li>
-				<li>Check out the included blog posts in <code>src/content/blog/</code></li>
-				<li>Customize the blog post page layout in <code>src/layouts/BlogPost.astro</code></li>
-			</ul>
-			<p>
-				Have fun! If you get stuck, remember to <a href="https://docs.astro.build/"
-					>read the docs
-				</a> or <a href="https://astro.build/chat">join us on Discord</a> to ask questions.
-			</p>
-			<p>
-				Looking for a blog template with a bit more personality? Check out <a
-					href="https://github.com/Charca/astro-blog-template"
-					>astro-blog-template
-				</a> by <a href="https://twitter.com/Charca">Maxi Ferreira</a>.
-			</p>
+			<section id="welcome">
+				<h1>Hi &#128075;, 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>
+	</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>