Curate projects listing

playwright.config.ts

@@ -75,6 +75,9 @@ export default defineConfig({
   /* Run your local dev server before starting the tests */
   webServer: {
     command: "pnpm run dev --host 127.0.0.1",
+    env: {
+      ASTRO_DEV_BACKGROUND: "1",
+    },
     url: "http://localhost:4321",
     reuseExistingServer: !process.env.CI,
   },

src/components/Header/Navigation.astro

@@ -3,7 +3,7 @@
     <li><a href="/">Return home</a></li>
     <li><a href="/now">What I'm doing now</a></li>
     <li><a href="/about">#whoami</a></li>
-    <li><a href="/projects">Things I build</a></li>
+    <li><a href="/projects">What I want to exist</a></li>
     <li><a href="/blog">My writing</a></li>
     <li><a href="/contact">Get in touch</a></li>
   </ul>

src/components/Projects/ProjectCard.astro

@@ -7,9 +7,10 @@ interface Props {
   stars: number;
   imageUrl: string;
   featured?: boolean;
+  linkLabel?: string;
 }
 
-const { name, description, url, language, stars, imageUrl, featured } =
+const { name, description, url, language, stars, imageUrl, featured, linkLabel } =
   Astro.props;
 ---
 
@@ -46,7 +47,7 @@ const { name, description, url, language, stars, imageUrl, featured } =
       </span>
     </footer>
     <a href={url} class="project-card-link">
-      View on GitHub <span aria-hidden="true">&rarr;</span>
+      {linkLabel ?? "View on GitHub"} <span aria-hidden="true">&rarr;</span>
     </a>
   </div>
 </article>

src/components/Projects/ProjectList.astro

@@ -0,0 +1,56 @@
+---
+import type { CollectionEntry } from "astro:content";
+
+import ProjectCard from "./ProjectCard.astro";
+
+interface Props {
+  heading: string;
+  headingId: string;
+  intro?: string;
+  minColumnWidth?: number;
+  projects: CollectionEntry<"projects">[];
+}
+
+const { heading, headingId, intro, minColumnWidth = 280, projects } =
+  Astro.props;
+---
+
+<section aria-labelledby={headingId}>
+  <h2 id={headingId} class="gradient-text">{heading}</h2>
+  {intro && <p>{intro}</p>}
+  <masonry-grid-lanes min-column-width={minColumnWidth} gap="24">
+    {
+      projects.map((project) => (
+        <ProjectCard
+          name={project.data.title}
+          description={project.data.description}
+          url={`/projects/${project.id}`}
+          language={project.data.language ?? null}
+          stars={project.data.stars ?? 0}
+          imageUrl={project.data.imageUrl ?? ""}
+          featured={project.data.category === "main"}
+          linkLabel="View project"
+        />
+      ))
+    }
+  </masonry-grid-lanes>
+</section>
+
+<style>
+  section {
+    margin-block-start: var(--spacing-section-large);
+  }
+
+  masonry-grid-lanes {
+    display: block;
+    inline-size: 100%;
+    margin-block-start: var(--size-24);
+    position: relative;
+  }
+
+  masonry-grid-lanes:not(:defined) {
+    display: grid;
+    gap: 1rem;
+    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
+  }
+</style>

src/content.config.ts

@@ -17,6 +17,26 @@ const postsCollection = defineCollection({
   }),
 });
 
+const projectsCollection = defineCollection({
+  loader: glob({
+    pattern: "**/*.md",
+    base: "./src/content/projects",
+  }),
+  schema: z.object({
+    category: z.enum(["main", "demo"]),
+    description: z.string(),
+    imageUrl: z.string().optional(),
+    language: z.string().optional(),
+    liveUrl: z.string().url().optional(),
+    order: z.number().int().positive(),
+    repoUrl: z.string().url(),
+    stars: z.number().int().nonnegative().optional(),
+    technologies: z.array(z.string()).optional(),
+    title: z.string(),
+  }),
+});
+
 export const collections = {
   posts: postsCollection,
+  projects: projectsCollection,
 };

src/content/drafts/throwing-confetti-with-css-random.mdx

@@ -0,0 +1,7 @@
+---
+title: "Throwing Confetti with CSS Random"
+pubDate: 2026-07-07
+description: ""
+author: "Schalk Neethling"
+tags: ["css", "frontend-engineering-explained"]
+---

src/content/projects/common-components.md

@@ -0,0 +1,10 @@
+---
+title: "common-components"
+description: "A collection of commonly used components as either HTML or Web Components."
+category: "main"
+order: 10
+repoUrl: "https://github.com/schalkneethling/common-components"
+language: "HTML"
+stars: 3
+technologies: ["HTML", "Web Components", "CSS"]
+---

src/content/projects/create-project-calavera.md

@@ -0,0 +1,10 @@
+---
+title: "create-project-calavera"
+description: "A simple starting skeleton of linters and formatters for common web projects."
+category: "main"
+order: 7
+repoUrl: "https://github.com/schalkneethling/create-project-calavera"
+language: "JavaScript"
+stars: 7
+technologies: ["JavaScript", "CLI", "Project Scaffolding"]
+---

src/content/projects/css-benchpress.md

@@ -0,0 +1,10 @@
+---
+title: "css-benchpress"
+description: "Grow realistic web-platform CSS test cases until measurable performance regressions appear."
+category: "main"
+order: 8
+repoUrl: "https://github.com/schalkneethling/css-benchpress"
+language: "TypeScript"
+stars: 9
+technologies: ["TypeScript", "CSS", "Performance"]
+---

src/content/projects/css-community-reset.md

@@ -0,0 +1,10 @@
+---
+title: "css-community-reset"
+description: "A CSS reset inspired by the community."
+category: "main"
+order: 1
+repoUrl: "https://github.com/schalkneethling/css-community-reset"
+language: "CSS"
+stars: 16
+technologies: ["CSS"]
+---

src/content/projects/css-custom-property-inspector.md

@@ -0,0 +1,10 @@
+---
+title: "css-custom-property-inspector"
+description: "A VS Code extension that shows CSS custom property values, definitions, and resolved references on hover."
+category: "main"
+order: 9
+repoUrl: "https://github.com/schalkneethling/css-custom-property-inspector"
+language: "TypeScript"
+stars: 0
+technologies: ["TypeScript", "VS Code", "CSS"]
+---

src/content/projects/css-expect.md

@@ -0,0 +1,10 @@
+---
+title: "css-expect"
+description: "Write browser-native expectations for CSS custom functions and mixins."
+category: "main"
+order: 5
+repoUrl: "https://github.com/schalkneethling/css-expect"
+language: "TypeScript"
+stars: 4
+technologies: ["TypeScript", "CSS", "Testing"]
+---

src/content/projects/css-media-pseudo-polyfill.md

@@ -0,0 +1,10 @@
+---
+title: "css-media-pseudo-polyfill"
+description: "A CSS polyfill for media pseudo-classes such as :playing, :paused, :seeking, and :muted."
+category: "main"
+order: 11
+repoUrl: "https://github.com/schalkneethling/css-media-pseudo-polyfill"
+language: "TypeScript"
+stars: 3
+technologies: ["TypeScript", "CSS", "Polyfill"]
+---

src/content/projects/css-property-type-validator.md

@@ -0,0 +1,10 @@
+---
+title: "css-property-type-validator"
+description: "Standalone tooling for validating CSS custom property registrations declared with @property."
+category: "main"
+order: 6
+repoUrl: "https://github.com/schalkneethling/css-property-type-validator"
+language: "TypeScript"
+stars: 10
+technologies: ["TypeScript", "CSS", "Tooling"]
+---

src/content/projects/css-tree-ast-viewer.md

@@ -0,0 +1,10 @@
+---
+title: "css-tree-ast-viewer"
+description: "A focused CSS AST explorer for writing CSS in one pane and viewing the CSS Tree AST in another."
+category: "demo"
+order: 2
+repoUrl: "https://github.com/schalkneethling/css-tree-ast-viewer"
+language: "TypeScript"
+stars: 1
+technologies: ["TypeScript", "CSS", "AST"]
+---

src/content/projects/jsconsole.md

@@ -0,0 +1,10 @@
+---
+title: "jsconsole"
+description: "A focused JavaScript REPL for quickly testing browser-style JavaScript snippets."
+category: "demo"
+order: 3
+repoUrl: "https://github.com/schalkneethling/jsconsole"
+language: "TypeScript"
+stars: 0
+technologies: ["TypeScript", "JavaScript", "REPL"]
+---

src/content/projects/little-demos.md

@@ -0,0 +1,10 @@
+---
+title: "little-demos"
+description: "A collection of little web platform feature demos."
+category: "demo"
+order: 1
+repoUrl: "https://github.com/schalkneethling/little-demos"
+language: "CSS"
+stars: 0
+technologies: ["HTML", "CSS", "JavaScript"]
+---

src/content/projects/masonry-gridlanes-wc.md

@@ -0,0 +1,10 @@
+---
+title: "masonry-gridlanes-wc"
+description: "A light-DOM custom element for CSS Grid Lanes masonry with a JavaScript fallback."
+category: "main"
+order: 4
+repoUrl: "https://github.com/schalkneethling/masonry-gridlanes-wc"
+language: "JavaScript"
+stars: 11
+technologies: ["JavaScript", "Web Components", "CSS Grid"]
+---

src/content/projects/ossreleasefeed-v2.md

@@ -0,0 +1,10 @@
+---
+title: "ossreleasefeed-v2"
+description: "Create custom RSS release feeds for GitHub topic repositories or starred projects."
+category: "main"
+order: 2
+repoUrl: "https://github.com/schalkneethling/ossreleasefeed-v2"
+language: "TypeScript"
+stars: 0
+technologies: ["TypeScript", "RSS", "GitHub"]
+---

src/content/projects/refined-plan-mode.md

@@ -0,0 +1,10 @@
+---
+title: "refined-plan-mode"
+description: "A local web app for reviewing AI coding-agent plans with anchored feedback."
+category: "main"
+order: 13
+repoUrl: "https://github.com/schalkneethling/refined-plan-mode"
+language: "TypeScript"
+stars: 3
+technologies: ["TypeScript", "AI Agents", "Review Tools"]
+---

src/content/projects/skills-autoresearch-flue.md

@@ -0,0 +1,10 @@
+---
+title: "skills-autoresearch-flue"
+description: "A Flue agent harness for autoresearching, evaluating, and improving agent skills."
+category: "main"
+order: 12
+repoUrl: "https://github.com/schalkneethling/skills-autoresearch-flue"
+language: "TypeScript"
+stars: 12
+technologies: ["TypeScript", "Agents", "Evaluation"]
+---

src/content/projects/web-platform-pulse.md

@@ -0,0 +1,10 @@
+---
+title: "web-platform-pulse"
+description: "Keep your finger on the pulse of the web platform."
+category: "main"
+order: 3
+repoUrl: "https://github.com/schalkneethling/web-platform-pulse"
+language: "TypeScript"
+stars: 0
+technologies: ["TypeScript", "Web Platform"]
+---

src/lib/projectFilters.ts

@@ -0,0 +1,25 @@
+export type ProjectCategory = "main" | "demo";
+
+type OrderedProject = {
+  data: {
+    category: ProjectCategory;
+    order: number;
+  };
+};
+
+export function sortProjectsByOrder<TProject extends OrderedProject>(
+  projects: readonly TProject[],
+) {
+  return [...projects].sort((projectA, projectB) => {
+    return projectA.data.order - projectB.data.order;
+  });
+}
+
+export function getProjectsByCategory<TProject extends OrderedProject>(
+  projects: readonly TProject[],
+  category: ProjectCategory,
+) {
+  return sortProjectsByOrder(
+    projects.filter((project) => project.data.category === category),
+  );
+}