CSS tweaks; ThreeJS stuff; Moved feat. projects

9 files changed, 72 insertions, 76 deletions

diff --git a/.gitignore b/.gitignore
index 5d97d85..7cd801f 100644
--- a/.gitignore
+++ b/.gitignore
@@ -3,6 +3,7 @@ dist/
 
 # generated types
 .astro/
+.vercel/output/
 
 # dependencies
 node_modules/
@@ -20,4 +21,4 @@ pnpm-debug.log*
 # macOS-specific files
 .DS_Store
 
-.idea/
\ No newline at end of file
+.idea/
diff --git a/astro.config.mjs b/astro.config.mjs
index 04536c5..491ac54 100644
--- a/astro.config.mjs
+++ b/astro.config.mjs
@@ -7,7 +7,7 @@ import svelte from "@astrojs/svelte";
 // https://astro.build/config
 export default defineConfig({
   site: 'https://alee14.me',
-  integrations: [icon(), svelte(), react()],
+  integrations: [icon(), react(), svelte()],
   output: "server",
   adapter: vercel({
     webAnalytics: {
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
--- a/src/images/snug_cup.png
+++ /dev/null
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 {