2 files changed, 46 insertions, 27 deletions
diff --git a/src/pages/projects/3d.astro b/src/pages/projects/3d.astro
index 8f9a06d..3715a3d 100644
--- a/src/pages/projects/3d.astro
+++ b/src/pages/projects/3d.astro
@@ -1,38 +1,27 @@
 ---
 import Page from "../../layouts/Page.astro";
+import Models from "../../data/models.json";
 import "../../styles/cards.css";
 import ThreeJSModels from "../../components/3DModels.jsx";
 ---
 <Page title="3D Models" description="Things that I made using Blender">
     <main>
         <div class="grid">
-            <div class="card">
-                <h1>Test</h1>
-                <p>Description</p>
-                <ThreeJSModels modelName="/models/snug_cup_model.glb" client:load />
-                <div class="column">
-                    <a href="#">Download</a>
-                    <small>Licensed with (license)</small>
-                </div>
-            </div>
-            <div class="card">
-                <h1>Test</h1>
-                <p>Description</p>
-                <ThreeJSModels modelName="/models/alee_logo.glb" client:load />
-                <div class="column">
-                    <a href="#">Download</a>
-                    <small>Licensed with (license)</small>
-                </div>
-            </div>
-            <div class="card">
-                <h1>Test</h1>
-                <p>Description</p>
-                <!--<ThreeJSModels modelName="/models/snug_cup_model.glb" client:load />-->
-                <div class="column">
-                    <a href="#">Download</a>
-                    <small>Licensed with (license)</small>
-                </div>
-            </div>
+            {
+                Models.map((model) => {
+                    return (
+                            <div class="card">
+                                <h1>{model.name}</h1>
+                                <p>{model.description}</p>
+                                <ThreeJSModels modelName={model.model} scale={model.scale} client:visible />
+                                <div class="column">
+                                    <a href={model.download}>Download</a>
+                                    <small>Licensed under {model.license}</small>
+                                </div>
+                            </div>
+                    )
+                })
+            }
         </div>
     </main>
 </Page>
diff --git a/src/pages/projects/index.astro b/src/pages/projects/index.astro
index 9a2dbc7..4d997c5 100644
--- a/src/pages/projects/index.astro
+++ b/src/pages/projects/index.astro
@@ -1,6 +1,8 @@
 ---
 import Page from "../../layouts/Page.astro";
 import "../../styles/cards.css";
+import projects from "../../data/projects.json";
+const featuredProjects = projects.filter(project => project.featured);
 ---
 <Page title="Projects" description="Things that I have been working on in the past, and present">
     <main>
@@ -18,6 +20,28 @@ import "../../styles/cards.css";
                 <p>Websites I created</p>
             </div>
         </div>
+        <div class="featured-projects">
+            <h1>Featured Projects</h1>
+            <div class="grid">
+                {
+                    featuredProjects.map((project) => {
+                        return (
+                                <article class="card">
+                                    <h1>{project.name}</h1>
+                                    <p>{project.description}</p>
+                                    <div class="row">
+                                        {project.links.map((link) => {
+                                            return (
+                                                    <a href={link.url} target={link.external ? "_blank" : "_self"}>{link.name}</a>
+                                            )
+                                        })}
+                                    </div>
+                                </article>
+                        )
+                    })
+                }
+            </div>
+        </div>
     </main>
 </Page>
 <style>
@@ -26,5 +50,11 @@ import "../../styles/cards.css";
         flex-direction: column;
         gap: 0.1em;
     }
+
+    .row {
+        display: flex;
+        flex-direction: row;
+        gap: 1em;
+    }
 </style>