Revamped project page; Switch to React; Updated pkgs

3 files changed, 118 insertions, 0 deletions

diff --git a/src/pages/projects/3d.astro b/src/pages/projects/3d.astro
new file mode 100644
index 0000000..8f9a06d
--- /dev/null
+++ b/src/pages/projects/3d.astro
@@ -0,0 +1,46 @@
+---
+import Page from "../../layouts/Page.astro";
+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>
+        </div>
+    </main>
+</Page>
+<style>
+    .column {
+        display: flex;
+        flex-direction: column;
+        gap: 0.1em;
+    }
+</style>
+
diff --git a/src/pages/projects/index.astro b/src/pages/projects/index.astro
new file mode 100644
index 0000000..9a2dbc7
--- /dev/null
+++ b/src/pages/projects/index.astro
@@ -0,0 +1,30 @@
+---
+import Page from "../../layouts/Page.astro";
+import "../../styles/cards.css";
+---
+<Page title="Projects" description="Things that I have been working on in the past, and present">
+    <main>
+        <div class="column">
+            <div class="card">
+                <h1><a href="/projects/3d">3D Models</a></h1>
+                <p>Things I made on Blender</p>
+            </div>
+            <div class="card">
+                <h1><a href="/projects/programming">Programming</a></h1>
+                <p>Things I programmed</p>
+            </div>
+            <div class="card">
+                <h1><a href="/projects/website">Website Archive</a></h1>
+                <p>Websites I created</p>
+            </div>
+        </div>
+    </main>
+</Page>
+<style>
+    .column {
+        display: flex;
+        flex-direction: column;
+        gap: 0.1em;
+    }
+</style>
+
diff --git a/src/pages/projects/programming.astro b/src/pages/projects/programming.astro
new file mode 100644
index 0000000..2c5d073
--- /dev/null
+++ b/src/pages/projects/programming.astro
@@ -0,0 +1,42 @@
+---
+import Page from "../../layouts/Page.astro";
+import projects from "../../data/projects.json";
+import "../../styles/cards.css";
+import GitHubProjects from "../../components/GitHubProjects.svelte";
+
+---
+<Page title="Programming" description="Things that I programmed">
+    <main>
+        <div class="grid">
+            {
+                projects.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>
+        <h2><a href="https://github.com/Alee14" target="_blank">Andrew Lee GitHub Repositories</a></h2>
+        <GitHubProjects client:load username="Alee14" isOrganization={false} />
+        <h2><a href="https://github.com/alee14-projects" target="_blank">AleeCorp/Alee Productions GitHub Repositories</a></h2>
+        <GitHubProjects client:load username="alee14-projects" isOrganization={true} />
+    </main>
+</Page>
+<style>
+    .row {
+        display: flex;
+        flex-direction: row;
+        gap: 1em;
+    }
+</style>
+