Inital commit of Astro Website

src/pages/portfolio/index.astro

@@ -0,0 +1,55 @@
+---
+import { getCollection } from 'astro:content';
+import BaseLayout from '../../layouts/BaseLayout.astro';
+
+const projects = await getCollection('portfolio');
+projects.sort((a, b) => b.data.pubDate.getTime() - a.data.pubDate.getTime());
+---
+<BaseLayout title="Portfolio" theme="portfolio" description="Eine Auswahl aktueller Projekte und Experimente von c0ntroller.de.">
+  <div class="glass-container">
+    <h1>Meine Arbeiten</h1>
+    <p>Eine Auswahl aktueller Projekte und Experimente.</p>
+  </div>
+  
+  <div class="grid">
+    {projects.map(project => (
+      <a href={`/portfolio/${project.id}`} class="glass-container link-card">
+        <h2>{project.data.title}</h2>
+        <p>{project.data.summary}</p>
+        {project.data.tags && (
+          <div class="tags">
+            {project.data.tags?.map(tech => <span class="tag">{tech}</span>)}
+          </div>
+        )}
+      </a>
+    ))}
+  </div>
+</BaseLayout>
+<style>
+  .grid { 
+    display: flex; 
+    flex-direction: column; 
+    gap: 2rem; 
+    margin-top: 2rem; 
+  }
+  .link-card { 
+    display: block; 
+    text-decoration: none;
+    transition: all 0.3s ease;
+  }
+  .link-card h2 {
+    margin-top: 0;
+  }
+  .tags {
+    display: flex;
+    gap: 0.5rem;
+    margin-top: 1rem;
+    flex-wrap: wrap;
+  }
+  .tag {
+    font-size: 0.8rem;
+    background: rgba(var(--accent-base), 0.2);
+    padding: 0.25rem 0.5rem;
+    border-radius: 0.25rem;
+  }
+</style>