First draft

2026-02-20 07:31:50 +01:00
parent 75a2514b05
commit fd1cf2e72c
55 changed files with 6202 additions and 5102 deletions
--- a/src/components/bits/ProjectCard.astro
+++ b/src/components/bits/ProjectCard.astro
@@ -0,0 +1,98 @@
+---
+import type { CollectionEntry } from 'astro:content';
+
+interface Props {
+  project: CollectionEntry<"projects">;
+}
+
+const { project } = Astro.props;
+---
+
+<a href=`/projects/${project.id}` id="card-link">
+    <section class="glass">
+        <h2>{project.data.title}</h2>
+        <hr />
+        <p>{project.data.description}</p>
+        { project.data.tags ? 
+            <div id="tag-area">Tags: <ul>{project.data.tags.map(tag => <li>{ tag }</li>)}</ul></div>
+            : null 
+        }
+    </section>
+</a>
+
+<style lang="scss">
+    #card-link {
+        display: inline-block;
+        width: min-content;
+        min-width: 250px;
+        max-width: 350px;
+        text-decoration: none;
+        color: var(--text-color);
+        scroll-snap-align: start;
+    }
+
+    section {
+        --border-width: 1px;
+        padding: 1rem;
+        z-index: 1;
+
+        h2 {
+            margin: 0;
+            color: var(--accent-color);
+        }
+
+        &::after {
+            content: "";
+            position: absolute;
+            inset: -4px;
+            z-index: -9999;
+            pointer-events: none;
+            border-radius: inherit;
+            background: transparent;
+            border: 5px solid var(--glass-color);
+            filter: blur(4px);
+            opacity: 0;
+            transition: opacity .3s, filter 1s;
+        }
+
+        &:hover::after {
+            opacity: 1;
+            animation: glow 3s infinite cubic-bezier(.45,.05,.55,.95);
+
+            @keyframes glow {
+                0%, 100% {
+                    filter: blur(4px);
+                }
+                50% {
+                    filter: blur(9px);
+                }
+            }
+        }
+    }
+
+    #tag-area {
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        gap: .5em;
+
+        ul {
+            list-style: "#";
+            list-style-position: inside;
+            display: flex;
+            flex-direction: row;
+            flex-wrap: wrap;
+            justify-content: start;
+            margin: 0;
+            padding: 0;
+            gap: .3em;
+
+            li {
+                font-size: 80%;
+                border: 1px solid #888;
+                border-radius: .8rem;
+                padding: .3em .5em;
+            }
+        }
+    }
+</style>