From bef7bfad876fb37f6e337a699174c499c43abf33 Mon Sep 17 00:00:00 2001
From: Andrew Lee <andrew@alee14.me>
Date: Thu, 18 Sep 2025 01:41:42 -0400
Subject: Revamped project page; Switch to React; Updated pkgs

---
 src/components/3DModels.jsx         | 25 +++++++++++++++++++++++++
 src/components/BlogCommentsForm.jsx |  1 -
 src/components/FetchMessages.jsx    |  2 +-
 src/components/FormHandling.jsx     |  2 +-
 src/components/GuestbookForm.jsx    |  1 -
 src/components/Navbar.svelte        |  2 +-
 6 files changed, 28 insertions(+), 5 deletions(-)
 create mode 100644 src/components/3DModels.jsx

(limited to 'src/components')

diff --git a/src/components/3DModels.jsx b/src/components/3DModels.jsx
new file mode 100644
index 0000000..4d8507e
--- /dev/null
+++ b/src/components/3DModels.jsx
@@ -0,0 +1,25 @@
+import { Canvas, useLoader } from "@react-three/fiber";
+import { OrbitControls } from "@react-three/drei";
+import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader";
+
+const Model = ({ model, scale }) => {
+    const gltf = useLoader(GLTFLoader, model);
+    return (
+        <>
+            <primitive object={gltf.scene} scale={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>
+    )
+}
diff --git a/src/components/BlogCommentsForm.jsx b/src/components/BlogCommentsForm.jsx
index d0c585c..20e4748 100644
--- a/src/components/BlogCommentsForm.jsx
+++ b/src/components/BlogCommentsForm.jsx
@@ -1,4 +1,3 @@
-import { h } from 'preact';
 import withFormHandling from './FormHandling';
 import '../styles/Form.css';
 
diff --git a/src/components/FetchMessages.jsx b/src/components/FetchMessages.jsx
index aa6f261..0a7eea3 100644
--- a/src/components/FetchMessages.jsx
+++ b/src/components/FetchMessages.jsx
@@ -1,4 +1,4 @@
-import { Component } from 'preact';
+import { Component } from 'react';
 
 const withMessages = (WrappedComponent, apiEndpoint, FormComponent) => {
     return class extends Component {
diff --git a/src/components/FormHandling.jsx b/src/components/FormHandling.jsx
index 8f7f688..5210bdf 100644
--- a/src/components/FormHandling.jsx
+++ b/src/components/FormHandling.jsx
@@ -1,4 +1,4 @@
-import { Component } from 'preact';
+import { Component } from 'react';
 import { marked } from 'marked';
 import DOMPurify from 'dompurify';
 
diff --git a/src/components/GuestbookForm.jsx b/src/components/GuestbookForm.jsx
index 4e06a27..7e47b5e 100644
--- a/src/components/GuestbookForm.jsx
+++ b/src/components/GuestbookForm.jsx
@@ -1,4 +1,3 @@
-import { h } from 'preact';
 import withFormHandling from './FormHandling';
 import '../styles/Form.css';
 
diff --git a/src/components/Navbar.svelte b/src/components/Navbar.svelte
index 3211799..b90a90e 100644
--- a/src/components/Navbar.svelte
+++ b/src/components/Navbar.svelte
@@ -107,10 +107,10 @@
     <ul class={active ? 'nav-list show' : 'nav-list'}>
         <li><a href="/" class="nav-link" on:click={toggleNav}>Home</a></li>
         <li><a href="/projects" class="nav-link" on:click={toggleNav}>Projects</a></li>
+        <li><a href="https://files.alee14.me" class="nav-link" on:click={toggleNav}>Files</a></li>
         <li><a href="/blog" class="nav-link" on:click={toggleNav}>Blog</a></li>
         <li><a href="/guestbook" class="nav-link" on:click={toggleNav}>Guestbook</a></li>
         <li><a href="/videos" class="nav-link" on:click={toggleNav}>Videos</a></li>
-<!--        <li><a href="https://archive.alee14.me" class="nav-link" on:click={toggleNav}>Archive</a></li>-->
         <li><a href="/contacts" class="nav-link" on:click={toggleNav}>Contacts</a></li>
     </ul>
 </nav>
-- 
cgit v1.2.3