From 4cd335e1535c73a2eef2adfc94038fa79a9bab2e Mon Sep 17 00:00:00 2001
From: vaporvee <yannik@vaporvee.com>
Date: Fri, 12 Jul 2024 21:01:31 +0200
Subject: [PATCH] added basic project page

---
 src/components/Footer.astro      |  6 ++--
 src/components/Navbar.astro      |  2 +-
 src/components/ProjectCard.astro | 49 ++++++++++++++++++++++++++++++++
 src/pages/projects.astro         | 36 ++++++++++++++---------
 src/styles/home.scss             |  5 +---
 5 files changed, 75 insertions(+), 23 deletions(-)
 create mode 100644 src/components/ProjectCard.astro

diff --git a/src/components/Footer.astro b/src/components/Footer.astro
index f9dc747..42c514a 100644
--- a/src/components/Footer.astro
+++ b/src/components/Footer.astro
@@ -4,8 +4,6 @@ import "../styles/footer.scss";
 ---
 
 <footer>
-  &copy vaporvee 2021-{year} 🞄 <a
-    href="https://github.com/vaporvee/web"
-    target="_blank">Sourcecode</a
-  >
+  &copy vaporvee 2021-{year} |
+  <a href="https://github.com/vaporvee/web" target="_blank">Sourcecode</a>
 </footer>
diff --git a/src/components/Navbar.astro b/src/components/Navbar.astro
index 9ac2421..03bf9e2 100644
--- a/src/components/Navbar.astro
+++ b/src/components/Navbar.astro
@@ -1,7 +1,7 @@
 ---
 const routes = {
   Home: "/",
-  //Projects: "/projects",
+  Projects: "/projects",
   //Skills: "/skills",
   Blog: "/blog",
 };
diff --git a/src/components/ProjectCard.astro b/src/components/ProjectCard.astro
new file mode 100644
index 0000000..3a32710
--- /dev/null
+++ b/src/components/ProjectCard.astro
@@ -0,0 +1,49 @@
+---
+interface Props {
+  name: string;
+  href?: string;
+}
+
+const { name, href } = Astro.props;
+---
+
+<style lang="scss">
+  @import "../styles/_var.scss";
+
+  a {
+    color: white;
+    &.project-external {
+      text-decoration: none;
+      &::after {
+        background-color: white;
+        width: 20px;
+        position: absolute;
+        right: 20px;
+        top: 20px;
+      }
+    }
+  }
+  .content {
+    padding: 20px;
+    margin: 20px;
+    max-width: 40vw;
+    transition: border-color 0.3s;
+    h2 {
+      font-size: 20px;
+    }
+    &:hover {
+      border-color: $link;
+    }
+  }
+  .no-hover {
+    &:hover {
+      border: 1px solid lighten($highlight, 12%);
+    }
+  }
+</style>
+
+<div class={href ? "content" : "content no-hover"}>
+  <a class="project-external" target={href ? "_blank" : ""} href={href}>
+    <h2>{name}</h2><slot />
+  </a>
+</div>
diff --git a/src/pages/projects.astro b/src/pages/projects.astro
index 164f222..f8442af 100644
--- a/src/pages/projects.astro
+++ b/src/pages/projects.astro
@@ -1,18 +1,9 @@
 ---
 import Layout from "../layouts/Layout.astro";
+import ProjectCard from "../components/ProjectCard.astro";
 ---
 
 <style lang="scss">
-  @import "../styles/_var.scss";
-  .content {
-    padding: 20px;
-    margin: 20px;
-    max-width: 40vw;
-    transition: border-color 0.3s;
-    &:hover {
-      border-color: $link;
-    }
-  }
   h1 {
     margin-bottom: 40px;
   }
@@ -24,10 +15,27 @@ import Layout from "../layouts/Layout.astro";
   <main>
     <div>
       <h1 style="text-align: center;">Projects</h1>
-      <div class="content"><h2>voicenext</h2></div>
-      <div class="content"><h2>SmartCustomerAI</h2></div>
-      <div class="content"><h2>DiscordRPC Godot Plugin</h2></div>
-      <div class="content"><h2>acecore</h2></div>
+      <ProjectCard name="voicenext" href="https://voicenext.app"
+        >My team and I are currently working on voicenext, a voice messaging app
+        designed to keep communication simple and intuitive. With voicenext, you
+        just hold to speak and tap to listen. We are also working on unique
+        features that other messaging apps haven't considered because we are
+        solely focused on audio.</ProjectCard
+      >
+      <ProjectCard name="SmartCustomerAI"
+        >I am currently developing a program that can simulate customer calls.
+        For this, I am using the Web Speech Recognition API, OpenAI, and
+        Elevenlabs.</ProjectCard
+      >
+      <ProjectCard
+        name="DiscordRPC Godot Plugin"
+        href="https://github.com/vaporvee/discord-rpc-godot"
+        >The first Discord RPC plugin for the version 4 of the Godot game
+        engine.</ProjectCard
+      >
+      <ProjectCard name="acecore" href="https://github.com/vaporvee/acecore"
+        >Modular multi purpose bot powering your Discord server.</ProjectCard
+      >
     </div>
   </main>
 </Layout>
diff --git a/src/styles/home.scss b/src/styles/home.scss
index 76bd8f0..d65222c 100644
--- a/src/styles/home.scss
+++ b/src/styles/home.scss
@@ -84,7 +84,7 @@ main {
   .content {
     justify-self: flex-end;
     margin: 0;
-    margin-top: 2vh;
+    margin-top: 25px !important;
     max-width: 528px;
     &p {
       z-index: 2;
@@ -124,11 +124,9 @@ main {
   }
   .lines {
     flex-direction: column;
-
     .home-main-box {
       flex-direction: column;
       align-items: center;
-
       .home-title-box {
         margin-right: 0;
         margin-bottom: 2vh;
@@ -144,7 +142,6 @@ main {
           padding: 10px 30px;
           padding-bottom: 15px;
           font-size: 18px;
-
           &:hover{
             svg{
               transition: margin-left 0.2s;