Add Gridfinity Center project and image variants

src/content.config.ts

@@ -44,8 +44,11 @@ const projectsCollection = defineCollection({
     description: z.string().optional(),
     date: z.date().optional(),
     image: z.string().optional(),
+    thumbnail_image: z.string().optional(),
+    thumbnail_dark_image: z.string().optional(),
     dark_image: z.string().optional(),
     show_image: z.boolean().default(true),
+    wide_image: z.boolean().default(false),
     categories: z.array(z.string()).default(["others"]),
     tags: z.array(z.string()).default(["others"]),
     featured: z.boolean().optional(),

src/content/projects/dimensional-variable.md

@@ -7,7 +7,7 @@ image: "/images/projects/dv_light.png"
 dark_image: "/images/projects/dv_dark.png"
 categories: ["Software", "Personal Projects"]
 tags: ["Dimensional Variable", "Developer Tools", "Rust", "Python"]
-featured: true
+featured: false
 draft: false
 ---
 

src/content/projects/gridfinity-center.md

@@ -0,0 +1,32 @@
+---
+title: "Gridfinity Center"
+meta_title: "Gridfinity Center - Alex Tacescu"
+description: "An open-source workspace for designing custom Gridfinity bins, baseplates, and labels, previewing them in 3D, and exporting print-ready models"
+date: 2026-07-19
+image: "/images/projects/gridfinity-center.png"
+dark_image: "/images/projects/gridfinity-center-dark.png"
+thumbnail_image: "/images/projects/gridfinity-center-thumbnail.png"
+thumbnail_dark_image: "/images/projects/gridfinity-center-thumbnail-dark.png"
+wide_image: true
+categories: ["Software", "3D Printing", "Personal Projects"]
+tags: ["Gridfinity", "3D Printing", "OpenSCAD", "Open Source"]
+featured: true
+draft: false
+---
+
+Gridfinity Center is an open-source, browser-based workspace for designing practical Gridfinity parts without setting up OpenSCAD locally. It brings configuration, 3D previewing, model generation, and STL downloads into one focused interface, making it easy to experiment with a design before committing it to a print.
+
+## What you can make
+
+- **Custom bins** with adjustable dimensions, compartments, scoops, label tabs, magnet holes, and other common options.
+- **Baseplates** in custom sizes and layouts, including controls for fitting them to a printer's build plate.
+- **Printable labels** for bins, drawers, and small-parts organizers through the label generator, currently in alpha.
+
+The generators use bundled [Gridfinity Extended](https://github.com/ostat/gridfinity_extended_openscad) OpenSCAD models. Gridfinity Center can render them through a native service for speed, with an in-browser WebAssembly fallback that keeps the workflow accessible and portable.
+
+Try it at [gridfinity.alextac.com](https://gridfinity.alextac.com), or [explore the source and contribute on GitHub](https://github.com/alextac98/gridfinity-viewer).
+
+## Links
+
+- [Open Gridfinity Center](https://gridfinity.alextac.com)
+- [GitHub](https://github.com/alextac98/gridfinity-viewer)

src/layouts/components/ProjectCard.astro

@@ -10,6 +10,8 @@ interface Props {
     data: {
       title: string;
       image?: string;
+      thumbnail_image?: string;
+      thumbnail_dark_image?: string;
       dark_image?: string;
       date?: Date;
       categories?: string[];
@@ -22,9 +24,21 @@ interface Props {
 }
 
 const { data, basePath } = Astro.props;
-const { title, image, dark_image, date, categories, description, featured } =
-  data.data;
+const {
+  title,
+  image,
+  thumbnail_image,
+  thumbnail_dark_image,
+  dark_image,
+  date,
+  categories,
+  description,
+  featured,
+} = data.data;
 const href = `/${basePath}/${data.id}`;
+const cardImage = thumbnail_image ?? image;
+const cardDarkImage =
+  thumbnail_dark_image ?? (thumbnail_image ? undefined : dark_image);
 ---
 
 <article
@@ -34,12 +48,12 @@ const href = `/${basePath}/${data.id}`;
   ></a>
   <div class="relative z-20 pointer-events-none">
     {
-      image && (
+      cardImage && (
         <div class="mb-6 aspect-square overflow-hidden rounded">
           <ImageMod
             class="h-full w-full object-cover"
-            src={image}
-            darkSrc={dark_image}
+            src={cardImage}
+            darkSrc={cardDarkImage}
             alt={title}
             width={445}
             height={445}

src/pages/projects/[single].astro

@@ -32,9 +32,12 @@ const {
   categories,
   tags,
   show_image,
+  wide_image,
 } = project.data;
 
-const imageWrapperClass = "mx-auto mb-10 w-full md:w-1/2";
+const imageWrapperClass = wide_image
+  ? "mx-auto mb-10 w-full"
+  : "mx-auto mb-10 w-full md:w-1/2";
 ---
 
 <Base