added basic project page

src/components/Footer.astro

@@ -4,8 +4,6 @@ import "../styles/footer.scss";
 ---
 
 <footer>
-  &copy vaporvee 2021-{year} 🞄 <a
+  &copy vaporvee 2021-{year} |
-    href="https://github.com/vaporvee/web"
+  <a href="https://github.com/vaporvee/web" target="_blank">Sourcecode</a>
-    target="_blank">Sourcecode</a
-  >
 </footer>

src/components/Navbar.astro

@@ -1,7 +1,7 @@
 ---
 const routes = {
   Home: "/",
-  //Projects: "/projects",
+  Projects: "/projects",
   //Skills: "/skills",
   Blog: "/blog",
 };

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>

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>
+      <ProjectCard name="voicenext" href="https://voicenext.app"
-      <div class="content"><h2>SmartCustomerAI</h2></div>
+        >My team and I are currently working on voicenext, a voice messaging app
-      <div class="content"><h2>DiscordRPC Godot Plugin</h2></div>
+        designed to keep communication simple and intuitive. With voicenext, you
-      <div class="content"><h2>acecore</h2></div>
+        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>

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;