Added CodePen experiments

src/components/blocks/Nav.astro

@@ -55,7 +55,7 @@ const links = [
             <!-- <div /> -->
             {links.map(link => (
                 <KeyboardButton href={link.href || "#"} size="sm" textAlign="left">
-                    <svg xmlns="http://www.w3.org/2000/svg" class="link-icon" width="24" height="24" viewBox="0 0 24 24">
+                    <svg class="link-icon" width="24" height="24" viewBox="0 0 24 24">
                         <Fragment set:html={link.paths} />
                     </svg>
                     <span class="link-text">{link.title}</span>

src/components/blocks/SectionHeading.astro

@@ -11,7 +11,7 @@ const { heading, id, subheading } = Astro.props
 <div>
     <h2 class="section-heading" id={id}>{ heading }</h2>
     {subheading && (
-        <p class="section-subheading">{ subheading }</p>
+        <p class="section-subheading" set:html={subheading}></p>
     )}
     <hr class="section-hr" />
 </div>

src/components/home/CodePens.astro

@@ -0,0 +1,114 @@
+---
+import { getCollection } from 'astro:content'
+import type { CollectionEntry } from 'astro:content'
+import { Image } from 'astro:assets'
+
+import KeyboardButton from '@/components/base/KeyboardButton.astro'
+import SectionHeading from '@/components/blocks/SectionHeading.astro'
+
+type ExperimentType = CollectionEntry<'experiments'>
+
+const experiments = await getCollection('experiments')
+
+const linkButtons = [
+    {
+        title: 'Info',
+        paths: '<path d="M3 12a9 9 0 1 0 18 0a9 9 0 0 0 -18 0" /><path d="M12 9h.01" /><path d="M11 12h1v4h1" />'
+    },
+    {
+        title: 'View',
+        paths: '<path d="M3 15l9 6l9 -6l-9 -6l-9 6" /><path d="M3 9l9 6l9 -6l-9 -6l-9 6" /><path d="M3 9l0 6" /><path d="M21 9l0 6" /><path d="M12 3l0 6" /><path d="M12 15l0 6" />'
+    }
+]
+---
+
+<section>
+    <SectionHeading heading="CodePens" subheading="A fun playground of one-off experiments and random code ideas." id="codepens" />
+    <ol class="experiments-list">
+        {experiments
+            // Sort projects by priority first, then date
+            .sort((a, b) => {
+                if (a.data.date > b.data.date) return -1;
+                if (a.data.date < b.data.date) return 1;
+                return 0;
+            })
+            .map((item) => (
+                <li class="experiment">
+                    <h3>
+                        {item.data.title}
+                    </h3>
+                    <a href={`/experiments/${item.slug}`}>
+                        <Image
+                            class="experiment-img"
+                            src={item.data.image.src}
+                            alt={item.data.image.alt}
+                            width="625"
+                            height="575"
+                            format="webp"
+                        />
+                    </a>
+                    <div class="experiment-buttons">
+                        {
+                            linkButtons.map((button) => (
+                                <KeyboardButton
+                                    href={button.title === 'View' ? item.data.link : `/experiments/${item.slug}`}
+                                    target={button.title === 'View' ? '_blank' : undefined}
+                                >
+                                    <svg class="line-icon" width="24" height="24" viewBox="0 0 24 24">
+                                        <Fragment set:html={button.paths} />
+                                    </svg>
+                                    {button.title}
+                                </KeyboardButton>
+                            ))
+                        }
+                    </div>
+                </li>
+            ))
+        }
+</section>
+
+<style lang="scss">
+@import '@/styles/_Variables.scss';
+
+.experiments-list {
+    display: grid;
+    gap: 2rem;
+    grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
+    list-style-type: none;
+    margin: 0 auto 8rem;
+    max-width: $breakpoint-md;
+
+    // @media (min-width: $breakpoint-md) {
+    //     & {
+    //         grid-template-columns: repeat(auto-fit, minmax(24rem, 1fr));
+    //     }
+    // }
+}
+
+.experiment {
+    background: #FFF;
+    border-radius: 0.5rem;
+    box-shadow: 0 0.0625rem 0.1875rem rgba(0, 0, 0, 0.1), 0 0.1875rem 0.5rem rgba(0, 0, 0, 0.06);
+    padding: 1rem;
+
+    & img {
+        border-radius: 0.25rem;
+    }
+
+    & h3 {
+        margin-bottom: 0.5rem;
+    }
+}
+
+.experiment-buttons {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 1rem;
+    padding: 1rem 0 0.5rem;
+
+    & .kbd-button {
+        flex: 1 0 auto;
+        gap: 0.5rem;
+    }
+}
+</style>

src/components/home/Experience.astro

@@ -1,6 +1,5 @@
 ---
 import { Image } from 'astro:assets'
-import KeyboardButton from '@/components/base/KeyboardButton.astro'
 import SectionHeading from '@/components/blocks/SectionHeading.astro'
 
 import LogoAxway from '@/assets/logos/logo-axway-icon.svg'

src/content/config.ts

@@ -31,16 +31,17 @@ const projectsCollection = defineCollection({
 
 const experimentsCollection = defineCollection({
     type: 'content',
-    schema: z.object({
+    schema: ({ image }) => z.object({
         title: z.string(),
+        date: z.date(),
         description: z.string(),
         image: z.object({
-            src: z.string(),
-            alt: z.string(),
+            src: image(),
+            alt: z.string()
         }),
-        link: z.string(),
+        link: z.string()
     })
-});
+})
 
 // 3. Export a single `collections` object to register your collection(s)
 //    This key should match your collection directory name in "src/content"

src/content/experiments/css-christmas/index.md

@@ -0,0 +1,11 @@
+---
+title: CSS Christmas Present
+date: 2023-12-25
+description: A cozy, festive, CSS-only 3D scene.
+image: { src: './css-christmas.png', alt: 'SVG filter heatmap thumbnail' }
+link: https://codepen.io/bbagg/pen/LYENxgG
+---
+
+## Description coming soon...
+
+Most of these project pages are still under construction... but fun things are coming soon! 👀

src/content/experiments/scroll-blur/index.md

@@ -0,0 +1,11 @@
+---
+title: CSS Scroll Blur Effect
+date: 2024-02-14
+description: A gradual scroll blur effect using CSS masks and filters.
+image: { src: './scroll-blur.png', alt: 'Thumbnail of a puppy showing the scroll blur in action' }
+link: 'https://codepen.io/bbagg/pen/poYBxGd'
+---
+
+## Description coming soon...
+
+Most of these project pages are still under construction... but fun things are coming soon! 👀

src/content/experiments/svg-heatmaps/index.md

@@ -0,0 +1,11 @@
+---
+title: SVG Filter Heatmaps
+date: 2024-02-15
+description: Using SVG filters to create an animatable heatmap effect.
+image: { src: './svg-heatmap.png', alt: 'SVG filter heatmap thumbnail' }
+link: https://codepen.io/bbagg/pen/yLwWXvx
+---
+
+## Description coming soon...
+
+Most of these project pages are still under construction... but fun things are coming soon! 👀

src/pages/experiments/[slug].astro

@@ -0,0 +1,153 @@
+---
+import type { GetStaticPaths } from 'astro';
+import { Image } from 'astro:assets';
+import { getCollection } from 'astro:content'
+import type { CollectionEntry } from 'astro:content'
+
+import { techIcon } from '@/utils/techIcon'
+
+// import BillyAvatar from '@/components/Base/BillyAvatar.astro'
+import Layout from '@/layouts/Layout.astro'
+import KeyboardButton from '@/components/base/KeyboardButton.astro'
+
+type Props = {
+    item: CollectionEntry<'experiments'>
+}
+
+function formattedDate(date: Date) {
+    const options: Intl.DateTimeFormatOptions = { year: 'numeric', month: 'short', day: 'numeric' }
+    return {
+        fullDate: new Intl.DateTimeFormat('en-US', options).format(date),
+        year: new Intl.DateTimeFormat('en-US', { year: 'numeric' }).format(date),
+        month: new Intl.DateTimeFormat('en-US', { month: 'short' }).format(date),
+        day: new Intl.DateTimeFormat('en-US', { day: 'numeric' }).format(date)
+    }
+}
+
+export const getStaticPaths = async () => {
+    const experimentItems = await getCollection('experiments')
+    const paths = experimentItems.map((item) => {
+        return {
+            params: {
+                slug: item.slug
+            },
+            props: {
+                item
+            }
+        }
+    });
+    return paths
+}
+
+const { item } = Astro.props as Props
+const { Content } = await item.render()
+---
+
+<Layout title={ item.data.title }>
+    <section class="content">
+        <div class="experiment-nav">
+            <KeyboardButton href="/">
+                <svg class="line-icon" width="24" height="24" viewBox="0 0 24 24">
+                    <path d="M5 12l14 0" />
+                    <path d="M5 12l4 4" />
+                    <path d="M5 12l4 -4" />
+                </svg>
+                Home
+            </KeyboardButton>
+        </div>
+        {item.data.draft && (
+            <span class="draft-notice">Draft</span>
+        )}
+        <h1 class="experiment-title">{ item.data.title }</h1>
+        <p class="experiment-date">
+            <svg class="line-icon" width="12" height="12" viewBox="0 0 24 24">
+                <path d="M4 5m0 2a2 2 0 0 1 2 -2h12a2 2 0 0 1 2 2v12a2 2 0 0 1 -2 2h-12a2 2 0 0 1 -2 -2z" />
+                <path d="M16 3l0 4" />
+                <path d="M8 3l0 4" />
+                <path d="M4 11l16 0" />
+            </svg>
+            { formattedDate(item.data.date).year }
+        </p>
+        <Image
+            class="experiment-banner-img"
+            src={item.data.image.src}
+            alt={item.data.image.alt}
+            width="768"
+            height="706"
+            format="webp"
+        />
+        <Content />
+        <div class="experiment-nav">
+            <KeyboardButton href="/">
+                <svg class="line-icon" width="24" height="24" viewBox="0 0 24 24">
+                    <path d="M5 12l14 0" />
+                    <path d="M5 12l4 4" />
+                    <path d="M5 12l4 -4" />
+                </svg>
+                Home
+            </KeyboardButton>
+        </div>
+    </section>
+</Layout>
+
+<style lang="scss">
+@import '@/styles/_Variables.scss';
+
+.experiment-nav {
+    margin: 0rem 0 1rem;
+    padding: 0.5rem 0;
+
+    @media (min-width: $breakpoint-sm) {
+        margin: 1rem 0 2rem;
+        padding: 1rem 0;
+    }
+
+    & .line-icon {
+        margin-right: 0.5rem;
+    }
+}
+
+.experiment-date {
+    align-items: center;
+    color: rgba(11, 14, 19, 0.7);
+    display: flex;
+    flex-wrap: wrap;
+    font-size: 0.875rem;
+    gap: 0.5rem;
+
+    & .line-icon {
+        height: 1rem;
+        opacity: 0.75;
+        stroke-width: 2.5;
+        width: 1rem;
+    }
+}
+
+.experiment-banner-img {
+    border-radius: 1rem;
+    box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.1);
+    margin: 1rem 0 2rem;
+}
+
+.experiment-title {
+    font-size: 2.25rem;
+    margin-bottom: 0.125rem;
+
+    @media (min-width: $breakpoint-xs) {
+        font-size: 2.5rem;
+    }
+
+    @media (min-width: $breakpoint-sm) {
+        font-size: 3rem;
+    }
+}
+
+.draft-notice {
+    background: rgba(255, 233, 135, 0.35);
+    border: 1px solid rgba(85, 69, 0, 0.2);
+    border-radius: 0.5rem;
+    color: rgb(85, 69, 0);
+    margin-bottom: 2rem;
+    padding: 1rem;
+}
+</style>

src/pages/index.astro

@@ -1,14 +1,17 @@
 ---
 import Layout from '@/layouts/Layout.astro'
+
+import CodePens from '@/components/home/CodePens.astro'
+import Experience from '@/components/home/Experience.astro'
 import HomeHero from '@/components/home/HomeHero.astro'
 import Projects from '@/components/home/Projects.astro'
-import Experience from '@/components/home/Experience.astro'
 ---
 
 <Layout title="Billy Baggerman | Frontend Developer, UX/UI + Product Designer">
     <HomeHero />
     <Projects />
     <Experience />
+    <CodePens />
 </Layout>
 
 <style lang="scss">