done.

Author: fezcode

public/data/shownProjects.json

@@ -0,0 +1,18 @@
+[
+  {
+    "title": "project-one",
+    "size": 2
+  },
+  {
+    "title": "project-two",
+    "size": 1
+  },
+  {
+    "title": "project-three",
+    "size": 1
+  },
+  {
+    "title": "project-four",
+    "size": 2
+  }
+]

public/projects/project-four.md

@@ -0,0 +1,13 @@
+---
+title: Project 4
+link: https://example.com/project-three
+pinned: false
+isActive: true
+technologies: [JavaScript, HTML, CSS]
+---
+
+This is a short description of Project Three. A simple frontend experiment with animations.
+
+---
+
+This is the full content of Project 4. It explores various CSS and JavaScript animation techniques.

src/components/ProjectCard.js

@@ -1,9 +1,11 @@
 import React from 'react';
 import { Link } from 'react-router-dom';
 
-const ProjectCard = ({ project }) => {
+const ProjectCard = ({ project, size = 1 }) => {
+  const colSpanClass = size === 2 ? 'col-span-2' : 'col-span-1';
+
   return (
-    <Link to={`/projects/${project.slug}`} className="block bg-gray-800/50 p-6 rounded-lg shadow-lg hover:bg-gray-800/80 transition-colors border border-gray-700/50 cursor-pointer flex flex-col">
+    <Link to={`/projects/${project.slug}`} className={`block bg-gray-800/50 p-6 rounded-lg shadow-lg hover:bg-gray-800/80 transition-colors border border-gray-700/50 cursor-pointer flex flex-col ${colSpanClass}`}>
       <h3 className="text-xl font-semibold text-white">{project.title}</h3>
       <p className="mt-2 text-gray-400 flex-grow">{project.description}</p>
       <span className="mt-4 inline-block text-primary-400 hover:text-primary-500 transition-colors mt-auto">

src/pages/ProjectsPage.js

@@ -32,9 +32,9 @@ const ProjectsPage = () => {
             <span className="ml-2 px-3 py-1 text-base font-medium text-gray-200 bg-gray-800 rounded-full">Total: {projects.length}</span>
           </div>
         </div>
-        <div className="mt-16 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
+        <div className="mt-16 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 grid-flow-row-dense">
                       {projects.map(project => (
-                        <ProjectCard key={project.slug} project={{ ...project, description: project.shortDescription }} />
+                        <ProjectCard key={project.slug} project={{ ...project, description: project.shortDescription }} size={project.size} />
                       ))}        </div>
       </div>
     </div>

src/utils/projectParser.js

@@ -12,10 +12,15 @@ export const useProjects = () => {
         // Fetch the list of project markdown files
         // In a real app, you might have an API endpoint that lists these files
         // For now, we'll assume a fixed list or glob for them if possible
-        const projectSlugs = ['project-one', 'project-two', 'project-three']; // Manually list for now
+        const response = await fetch('/data/shownProjects.json');
+        if (!response.ok) {
+          throw new Error(`HTTP error! status: ${response.status} for shownProjects.json`);
+        }
+        const projectDataList = await response.json();
 
         const fetchedProjects = await Promise.all(
-          projectSlugs.map(async (slug) => {
+          projectDataList.map(async (projectData) => {
+            const slug = projectData.title; // Use title as slug
             const response = await fetch(`/projects/${slug}.md`);
             if (!response.ok) {
               throw new Error(`HTTP error! status: ${response.status} for ${slug}.md`);
@@ -29,9 +34,11 @@ export const useProjects = () => {
 
             return {
               slug,
+              title: projectData.title, // Include title
               ...content.attributes,
               shortDescription,
               fullContent,
+              size: projectData.size, // Include size
             };
           })
         );