chore: minor refactor into some components and updated favicon

src/components/Card.astro

@@ -0,0 +1,15 @@
+---
+import type { AstroBuiltinProps } from 'astro'
+import type { AstroComponentFactory } from 'astro/runtime/server/index.js'
+
+type Props = {
+    large?: boolean
+    style?: string
+}
+
+const { large, ...props } = Astro.props
+---
+
+<div class:list={['card', large && 'large']} {...props}>
+    <slot />
+</div>

src/components/HomepageZigZag.astro

@@ -0,0 +1,26 @@
+---
+type Props = {
+    color: string
+}
+
+const { color } = Astro.props
+
+const patternId = 'zig-zag-' + color.slice(1)
+---
+
+<div class="zig-zag">
+    <svg
+        width="100%"
+        height="2rem"
+        viewBox="0 0 1 1"
+        xmlns="http://www.w3.org/2000/svg"
+        preserveAspectRatio="xMinYMid meet"
+    >
+        <defs>
+            <pattern id={patternId} x="0" y="0" width="2" height="1" patternUnits="userSpaceOnUse">
+                <path fill={color} d="M 0,1 L 1,0 L 2,1 L 0,1"></path>
+            </pattern>
+        </defs>
+        <rect fill={`url(#${patternId})`} x="0" y="0" width="1000" height="1"></rect>
+    </svg>
+</div>

src/components/ProjectCard.astro

@@ -0,0 +1,24 @@
+---
+// Card.astro
+export interface Props {
+    title: string
+    href: string
+
+    imgSrc?: string
+    style?: string
+}
+
+const { href, imgSrc, style, title } = Astro.props
+---
+
+<a target="_blank" href={href} style={style}>
+    <div class="project">
+        <div class="image">
+            {imgSrc ? <img src={imgSrc} alt={'logo for ' + title.toLowerCase()} /> : <div class="box" />}
+        </div>
+        <div class="title">{title}</div>
+        <div class="description">
+            <slot />
+        </div>
+    </div>
+</a>