85 lines
2.4 KiB
Plaintext
85 lines
2.4 KiB
Plaintext
---
|
|
import { getCollection } from 'astro:content';
|
|
import { Icon } from "astro-icon/components";
|
|
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" style="view-transition-name:main-glass;">
|
|
<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" style={`view-transition-name: project-header-${project.id};`}>
|
|
<h2 style={`view-transition-name: project-headline-${project.id};`}>{project.data.title}</h2>
|
|
<p>{project.data.summary}</p>
|
|
{(project.data.tags || project.data.repository) &&
|
|
(<div class="additional-meta">
|
|
<div class="meta-tags">
|
|
{project.data.tags && (
|
|
<div class="tags">
|
|
{project.data.tags?.map(tech => <span class="tag">{tech}</span>)}
|
|
</div>
|
|
)}
|
|
</div>
|
|
<div class="meta-repository">
|
|
{ project.data.repository && (
|
|
<Icon name="simple-icons:git" style={`view-transition-name: project-git-${project.id};`} />
|
|
)}
|
|
</div>
|
|
</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;
|
|
}
|
|
.additional-meta {
|
|
display: flex;
|
|
flex-direction: row;
|
|
flex-wrap: nowrap;
|
|
gap: 0.5rem;
|
|
width: 100%;
|
|
justify-content: space-between;
|
|
margin-top: 1rem;
|
|
align-items: center;
|
|
}
|
|
.tags {
|
|
display: flex;
|
|
gap: 0.5rem;
|
|
flex-wrap: wrap;
|
|
flex-grow: 1;
|
|
align-items: center;
|
|
}
|
|
.tag {
|
|
font-size: 0.8rem;
|
|
background: rgba(var(--accent-base), 0.2);
|
|
padding: 0.25rem 0.5rem;
|
|
border-radius: 0.25rem;
|
|
}
|
|
.meta-repository {
|
|
flex-shrink: 1;
|
|
font-size: 1.2rem;
|
|
display: flex;
|
|
align-items: center;
|
|
color: rgb(var(--accent-base));
|
|
}
|
|
</style>
|