From 6c7730e852854839a05f8380196a312d07ffa01d Mon Sep 17 00:00:00 2001
From: Andrew Lee <andrew@alee14.me>
Date: Thu, 18 Sep 2025 18:13:56 -0400
Subject: CSS tweaks; ThreeJS stuff; Moved feat. projects

---
 src/components/3DModels.jsx    |  19 ++++++++----------
 src/data/models.json           |  16 +++++++++++++--
 src/images/snug_cup.png        | Bin 2177091 -> 0 bytes
 src/pages/index.astro          |  33 -------------------------------
 src/pages/projects/3d.astro    |  43 +++++++++++++++--------------------------
 src/pages/projects/index.astro |  30 ++++++++++++++++++++++++++++
 src/styles/index.css           |   2 +-
 7 files changed, 69 insertions(+), 74 deletions(-)
 delete mode 100755 src/images/snug_cup.png

(limited to 'src')

diff --git a/src/components/3DModels.jsx b/src/components/3DModels.jsx
index 4d8507e..113cc11 100644
--- a/src/components/3DModels.jsx
+++ b/src/components/3DModels.jsx
@@ -1,5 +1,5 @@
 import { Canvas, useLoader } from "@react-three/fiber";
-import { OrbitControls } from "@react-three/drei";
+import { OrbitControls, PerspectiveCamera } from "@react-three/drei";
 import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader";
 
 const Model = ({ model, scale }) => {
@@ -12,14 +12,11 @@ const Model = ({ model, scale }) => {
 };
 
 export default function ThreeJSModels({ modelName, scale = 2 }) {
-    return (
-        <div>
-            <Canvas style={{ width: '70%', height: '70%', borderRadius: '10px', paddingBottom: '.5em' }}>
-                <Model model={modelName} scale={scale} />
-                <ambientLight intensity={1.5} />
-                <directionalLight color="white" position={[0, 2, 0]} />
-                <OrbitControls />
-            </Canvas>
-        </div>
-    )
+    return <Canvas style={{ width: '70%', height: '70%', borderRadius: '10px', paddingBottom: '.5em' }} fallback={<div>WebGL not supported...</div>}>
+        <Model model={modelName} scale={scale} />
+        <ambientLight intensity={1.5} />
+        <directionalLight color="white" position={[0, 2, 0]} />
+        <PerspectiveCamera makeDefault position={[0, 2, 5]} rotation={[0, Math.PI / 4, 0]} />
+        <OrbitControls />
+    </Canvas>
 }
diff --git a/src/data/models.json b/src/data/models.json
index 8d71642..27bfde6 100644
--- a/src/data/models.json
+++ b/src/data/models.json
@@ -2,7 +2,19 @@
   {
     "name": "Snug Cup",
     "description": "A cup for a project at school.",
-    "model": "/models/snug_cup_model.glb",
-    "fallback": "/images/snug_cup.png"
+    "model": "https://files.alee14.me/Models/snug_cup_model.glb",
+    "scale": 2,
+    "fallback": "/images/snug_cup.png",
+    "license": "CC BY-NC-SA",
+    "download": "https://files.alee14.me/Models/snug_cup_model.glb"
+  },
+  {
+    "name": "Alee Logo",
+    "description": "My 2020 logo but in 3D.",
+    "model": "https://files.alee14.me/Models/alee_logo.glb",
+    "scale": 15,
+    "fallback": "/images/snug_cup.png",
+    "license": "CC BY-NC-SA",
+    "download": "https://files.alee14.me/Models/snug_cup_model.glb"
   }
 ]
diff --git a/src/images/snug_cup.png b/src/images/snug_cup.png
deleted file mode 100755
index cd6f7ae..0000000
Binary files a/src/images/snug_cup.png and /dev/null differ
diff --git a/src/pages/index.astro b/src/pages/index.astro
index d109080..daabea8 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -3,7 +3,6 @@ import Layout from '../layouts/Default.astro';
 import { Icon } from 'astro-icon/components'
 import { Image } from 'astro:assets';
 import { getCollection } from "astro:content";
-import projects from "../data/projects.json";
 
 import Profile from '../images/Alee.png';
 import '../styles/index.css';
@@ -11,7 +10,6 @@ import '../styles/Page.css';
 import "../styles/cards.css";
 import { formatDate } from "../util";
 const allBlogPosts = (await getCollection('blog')).sort((a, b) => b.data.pubDate.valueOf() - a.data.pubDate.valueOf()).slice(0, 10);
-const featuredProjects = projects.filter(project => project.featured);
 
 ---
 
@@ -109,36 +107,5 @@ const featuredProjects = projects.filter(project => project.featured);
 				))}
 			</div>
 		</div>
-		<div class="container">
-			<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>
-		</div>
 	</main>
 </Layout>
-<style>
-	.row {
-		display: flex;
-		flex-direction: row;
-		gap: 1em;
-	}
-</style>
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>
 
diff --git a/src/styles/index.css b/src/styles/index.css
index f4e5191..21d681b 100644
--- a/src/styles/index.css
+++ b/src/styles/index.css
@@ -60,7 +60,7 @@
 
 .latest-posts {
     grid-column: 2;
-    grid-row: 1 / span 3;
+    grid-row: 1 / span 2;
 }
 
 .blog-title {
-- 
cgit v1.2.3