projects page and unicord post

app/components/Carousel.vue

@@ -0,0 +1,79 @@
+<script setup lang="ts">
+const props = withDefaults(
+    defineProps<{
+        images?: Array<{ src: string; alt?: string }> | null;
+        decorative?: boolean;
+    }>(),
+    {
+        decorative: false,
+    },
+);
+
+const frames = computed(() => props.images ?? []);
+</script>
+
+<template>
+    <div v-if="frames.length" class="carousel">
+        <figure
+            v-for="image in frames"
+            :key="image.src"
+            class="carousel__frame"
+        >
+            <img :src="image.src" :alt="decorative ? '' : (image.alt ?? '')" />
+        </figure>
+    </div>
+</template>
+
+<style scoped>
+.carousel {
+    --dot-color: #666;
+
+    display: grid;
+    grid-auto-flow: column;
+    grid-auto-columns: max-content;
+    gap: var(--gap);
+    overflow-x: auto;
+    overflow-y: hidden;
+    margin: 0.85rem 0 0;
+    padding-bottom: 0.35rem;
+    scroll-snap-type: x mandatory;
+}
+
+.carousel__frame {
+    --dot-size: 6%;
+
+    margin: 0;
+    padding: var(--gap);
+    flex-shrink: 0;
+    border-radius: var(--radius);
+    background-color: var(--bg-secondary);
+    background-image: radial-gradient(
+        circle at 4px 4px,
+        var(--dot-color) var(--dot-size),
+        transparent calc(var(--dot-size) + 1%)
+    );
+    background-position: 4px 4px;
+    background-size: 12px 12px;
+    background-repeat: repeat;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    scroll-snap-align: start;
+}
+
+.carousel__frame img {
+    max-width: none;
+    width: auto;
+    height: auto;
+    max-height: 350px;
+    object-fit: cover;
+    border-radius: var(--radius);
+    background: none;
+}
+
+@media screen and (max-width: 750px) {
+    .carousel__frame img {
+        max-height: 300px;
+    }
+}
+</style>

app/components/ProjectList.vue

@@ -0,0 +1,168 @@
+<script setup lang="ts">
+import { isExternalHref, projectEntryHref } from '~/utils/projects';
+
+const props = defineProps<{
+    pages: Array<{
+        path: string;
+        title: string;
+        description: string;
+        href?: string | null;
+        image?: string | null;
+    }>;
+}>();
+
+const entries = computed(() =>
+    props.pages.map((page) => {
+        const to = projectEntryHref(page);
+        const external = isExternalHref(to);
+        return { page, to, external };
+    }),
+);
+
+onMounted(() => {
+    for (const { image } of props.pages) {
+        if (!image) continue;
+        new Image().src = image;
+    }
+});
+
+const preview = ref<string | null>(null);
+const cursor = ref({ x: 0, y: 0 });
+const previewEl = ref<HTMLElement | null>(null);
+
+const previewStyle = computed(() => {
+    const pad = 16;
+    const ox = 20;
+    const oy = 20;
+    const el = previewEl.value;
+    const w = el?.offsetWidth ?? 320;
+    const h = el?.offsetHeight ?? 200;
+    let x = cursor.value.x + ox;
+    let y = cursor.value.y + oy;
+    if (import.meta.client) {
+        if (x + w > window.innerWidth - pad) x = cursor.value.x - w - ox;
+        if (y + h > window.innerHeight - pad) y = cursor.value.y - h - oy;
+    }
+    x = Math.max(pad, x);
+    y = Math.max(pad, y);
+    return {
+        transform: `translate3d(${x}px, ${y}px, 0)`,
+    };
+});
+
+function onMove(event: MouseEvent, image: string) {
+    if (!image) return;
+    preview.value = image;
+    cursor.value = { x: event.clientX, y: event.clientY };
+}
+
+function onLeave() {
+    preview.value = null;
+}
+</script>
+
+<template>
+    <template v-if="entries.length">
+        <NuxtLink
+            v-for="{ page, to, external } in entries"
+            :key="page.path"
+            :to="to"
+            :external="external"
+            :target="external ? '_blank' : undefined"
+            :rel="external ? 'noopener' : undefined"
+            class="project"
+            @mousemove="page.image ? onMove($event, page.image) : undefined"
+            @mouseleave="page.image ? onLeave() : undefined"
+        >
+            <span class="project__title">
+                {{ page.title }}
+                <span v-if="external" class="project__ext" aria-hidden="true"
+                    >↗</span
+                >
+            </span>
+            <span class="project__desc">{{ page.description }}</span>
+        </NuxtLink>
+        <Teleport to="body">
+            <div
+                v-show="preview"
+                ref="previewEl"
+                class="project-preview"
+                aria-hidden="true"
+                :style="previewStyle"
+            >
+                <img v-if="preview" :src="preview" alt="" />
+            </div>
+        </Teleport>
+    </template>
+    <p v-else class="empty-state">Nothing here yet.</p>
+</template>
+
+<style scoped>
+.project {
+    display: block;
+    margin: 0 0 1.15rem;
+    text-decoration: none;
+    color: inherit;
+}
+
+.project:hover {
+    text-decoration: none;
+}
+
+.project:hover .project__title {
+    text-decoration: underline;
+    text-underline-offset: 3px;
+}
+
+.project__title {
+    display: block;
+    color: var(--text);
+    font-size: 1.15rem;
+    line-height: 1.3;
+}
+
+.project__ext {
+    font-size: 0.75em;
+    color: var(--muted);
+}
+
+.project__desc {
+    display: block;
+    margin: 0.35rem 0 0;
+    color: var(--muted);
+}
+
+.empty-state {
+    color: var(--muted);
+    font-style: italic;
+}
+
+.project-preview {
+    position: fixed;
+    top: 0;
+    left: 0;
+    z-index: 40;
+    pointer-events: none;
+    will-change: transform;
+}
+
+.project-preview img {
+    display: block;
+    width: auto;
+    height: auto;
+    max-width: min(25rem, 80vw);
+    max-height: min(20rem, 50vh);
+    object-fit: cover;
+    border: 1px solid color-mix(in srgb, var(--text) 40%, transparent);
+    border-radius: var(--radius);
+    box-shadow:
+        0 2px 6px rgba(0, 0, 0, 0.28),
+        0 18px 40px rgba(0, 0, 0, 0.42);
+}
+
+@media (hover: none) {
+    .project-preview {
+        display: none;
+    }
+}
+</style>