From d33022ac09a472181fcb1c08cd346035ceae49be Mon Sep 17 00:00:00 2001
From: Tabby <41929769+tabby-cat-nya@users.noreply.github.com>
Date: Wed, 23 Apr 2025 21:32:06 +1000
Subject: [PATCH] new project cards with modals!

---
 components/ProjectCardContent.vue |  56 ++++++++++++
 components/ProjectCardV2.vue      | 139 ++++++++++++++++++++++++++++++
 components/SmallButton.vue        |  41 +++++++++
 pages/TestPage.vue                |  27 ++++++
 pages/index.vue                   |  51 ++++++++---
 pages/projects.vue                |  13 +++
 public/img/close.png              | Bin 0 -> 615 bytes
 7 files changed, 316 insertions(+), 11 deletions(-)
 create mode 100644 components/ProjectCardContent.vue
 create mode 100644 components/ProjectCardV2.vue
 create mode 100644 components/SmallButton.vue
 create mode 100644 pages/TestPage.vue
 create mode 100644 pages/projects.vue
 create mode 100644 public/img/close.png

diff --git a/components/ProjectCardContent.vue b/components/ProjectCardContent.vue
new file mode 100644
index 0000000..9c27d68
--- /dev/null
+++ b/components/ProjectCardContent.vue
@@ -0,0 +1,56 @@
+<template>
+  <div>
+    <!-- <button @click="$emit('close')"> Close </button> -->
+    <img src="public\img\close.png" class="close-button" @click="$emit('close')">    
+    <h2>{{title}}</h2>
+    <p>{{description}}</p>
+    
+    <br>
+    <!-- <ClientOnly> -->
+      <div class="buttons">
+          <SmallButton v-for="(data, i) of buttons" :key="i" class="button" :text="data.text"
+              :href="data.link" />
+      </div>
+    <!-- </ClientOnly> -->
+    <br>
+    <p class="multiline-css-fix">{{longDescription}}</p>
+        
+  </div>
+</template>
+
+<script lang="ts" setup>
+import {defineProps, defineEmits} from 'vue'
+
+export interface ButtonData {
+    text: string,
+    link: string,
+}
+
+const props = defineProps<{
+    title: string,
+    description: string,
+    longDescription?: string,
+    buttons?: Array<ButtonData>,
+}>();
+
+defineEmits("close")
+</script>
+
+<style scoped>
+
+.close-button{
+  float:right;
+  /* display: block; */
+  /* margin-left: auto; */
+  width: 32px;
+
+  &:hover{
+    filter: invert();
+  }
+}
+
+.multiline-css-fix{
+  white-space: pre-wrap;
+}
+
+</style>
\ No newline at end of file
diff --git a/components/ProjectCardV2.vue b/components/ProjectCardV2.vue
new file mode 100644
index 0000000..499bb9e
--- /dev/null
+++ b/components/ProjectCardV2.vue
@@ -0,0 +1,139 @@
+<template>
+  <div class="top-level">
+    <!-- <button @click="isOpen=true">Open</button> -->
+    <!-- Project Card -->
+    <div @click="isOpen=true" class="card">
+      <img class="project-image" :src="props.src">
+      <div class="content">
+          <h2>{{props.title}}</h2>
+          <p>{{props.description}}</p>
+      </div>
+    </div>
+    
+    <!-- Popup Modal -->
+    <Teleport to="body">
+      <div class="modal" v-if="isOpen">
+        <div>
+          <ProjectCardContent
+            @close="isOpen = false"
+            :title=props.title
+            :description=props.description
+            :long-description=props.longDescription
+            :buttons=props.buttons
+          />
+        </div>
+      </div>
+    </Teleport> 
+  </div>
+</template>
+
+<script lang="ts" setup>
+
+import {ref, defineProps} from 'vue'
+import ProjectCardContent from './ProjectCardContent.vue';
+const isOpen = ref(false)
+
+export interface ButtonData {
+    text: string,
+    link: string,
+}
+
+const props = defineProps<{
+    title: string,
+    description: string,
+    longDescription?: string,
+    src: string,
+    buttons?: Array<ButtonData>,
+}>();
+
+
+</script>
+
+<style scoped>
+.root{
+  position:relative
+}
+
+.top-level{
+  margin-right: 10px;
+}
+
+.card{
+  position: relative;
+  text-align: center;
+  overflow: hidden;
+  border-color: var(--accent);
+  border-width: 3px;
+  border-style: solid;
+  width: 100%;
+  /* overflow: auto; */
+  height: max-content;
+
+  &:hover{
+    border-color: white;
+    cursor: pointer;
+    
+  }
+}
+
+.project-image{
+  width: 100%;
+}
+
+.content{
+  position: absolute;
+  bottom: 8px;
+  left: 16px;
+  text-align: left ;
+  visibility:hidden;
+
+  /* &:hover{
+    visibility: visible;
+  } */
+
+}
+
+
+.card>img:hover{
+  /* filter: brightness(40%) blur(2px); */
+
+  
+}
+
+.card:hover, .content:hover{
+
+  border-color: white;
+  cursor: pointer;
+  
+  .content{
+    visibility: visible;
+  }
+
+  .project-image{
+    filter: brightness(40%) blur(2px);
+  }
+}
+
+
+.modal {
+  position: fixed;
+  top: 0;
+  left: 0;
+  z-index: 100;
+  background-color: rgba(0,0,0,0.1);
+  width: 100%;
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.modal > div{
+  background-color: rgb(53, 53, 53);
+  padding: 50px;
+  border-radius: 10px;
+  margin: 10%;
+  max-height: calc(100vh - 210px);
+  overflow-y: auto;
+}
+</style>
\ No newline at end of file
diff --git a/components/SmallButton.vue b/components/SmallButton.vue
new file mode 100644
index 0000000..91a1416
--- /dev/null
+++ b/components/SmallButton.vue
@@ -0,0 +1,41 @@
+<script setup lang="ts">
+const props = defineProps({
+  href: String,
+  text: String
+});
+</script>
+
+<template>
+    <a class="button" :href="props.href">
+        <p>{{ props.text }}</p>
+    </a>
+
+   
+    
+</template>
+
+<style scoped>
+    .button {
+        background-color: #8904aa; 
+        border: none;
+        color: white;
+        padding: 5px;
+        border-radius: 5px;
+        text-align: center;
+        text-decoration: none;
+        display: inline-block;
+        font-size: 16px;
+        overflow: hidden;
+        margin-right: 5px;
+    }
+
+    .button:hover{
+        background-color: var(--accent); 
+        color: black;
+    }
+
+    p{
+        font-weight: 100;
+        margin: 0;
+    }
+</style>
\ No newline at end of file
diff --git a/pages/TestPage.vue b/pages/TestPage.vue
new file mode 100644
index 0000000..249ea1c
--- /dev/null
+++ b/pages/TestPage.vue
@@ -0,0 +1,27 @@
+<template>
+  <div>
+    <ProjectCardV2
+      title="Arcane Raiders but really really long"
+      description="Cool game"
+      :buttons='[
+          { link: "https://tabbycat.dev", text: "tabbycat.dev" },
+          { link: "https://www.linkedin.com/in/tom--howarth/", text: "Linkedin" },
+          { link: "https://bsky.app/profile/tabbycat.dev", text: "Bluesky" },
+          { link: "https://tabby-cat-nya.itch.io/", text: "Itch.io" }
+      ]'
+    />
+
+    <!-- <BoldButton
+      text="test"
+      href="hello"
+    /> -->
+  </div>
+</template>
+
+<script lang="ts" setup>
+
+</script>
+
+<style>
+
+</style>
\ No newline at end of file
diff --git a/pages/index.vue b/pages/index.vue
index 0414e88..d8cfc93 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -96,28 +96,56 @@ var { data } = await useAsyncData('home', () => queryContent('blog').where({hidd
     <!-- featured projects, link to all? -->
     <h1>Featured Projects</h1>
     <div class="featured-container">
-      <ProjectCard 
-        src="https://img.itch.zone/aW1nLzE2Mjg0ODg2LnBuZw==/315x250%23c/6FRKz0.png" 
-        href="https://teamstingray.dev/arcane-raiders"
-        heading="Arcane Raiders"
-        description="Fight to the top of the tower with up to 4 players and an arsenal of powerful spells! We'll be showcasing it at SXSW Sydeny and its already avilable to wishlist on Steam!"
+      <ProjectCardV2
+        src="https://img.itch.zone/aW1nLzE2Mjg0ODg2LnBuZw==/315x250%23c/6FRKz0.png"
+        title="Arcane Raiders"
+        description="Fight to the top of the tower with up to 4 players and an arsenal of powerful spells! Now available to play on Steam!"
+        long-description=
+"Initially, This project was a part of Game Design Studio 1 at UTS where we worked in teams of 5 people to create a game through the semester. 
+
+During the assignment, my main contributions were general programming and game logic as well as some of the back-end code for the local and online multiplayer systems and UI.
+
+After the completion of the subject, our group continued to work on the project in our own time to further improve it and showcase it at future events such as the UTS Tech Fest where we received the Best Student Game award, and also South By South West where we were nominated for Best Student Game.
+
+In these later stages of development my focus shifted more to project management in addition building the Steam page and finalizing the integration of services such as achievements, cloud saves and discord rich presence into the game.
+
+On the 19th of February the game was released and since then we have had over 4200 unique players!"
+        :buttons='[
+          { link: "https://store.steampowered.com/app/2899410/Arcane_Raiders/", text: "Play on Steam" },
+          { link: "https://discord.com/invite/3BPYMHqNve", text: "Join Discord" },
+          { link: "https://cookiespl.itch.io/arcane-raiders", text: "View Itch.io page (Outdated)" }
+        ]'
       />
 
-      <ProjectCard 
+      <ProjectCardV2 
         src="https://img.itch.zone/aW1nLzE2NTkxMzEyLnBuZw==/315x250%23c/0Y7BUi.png" 
         href="https://clevertop.itch.io/kitten-calamity"
-        heading="Kitten Calamity"
+        title="Kitten Calamity"
         description="Cute little game made in about 29 hours for the UTS Tech Fest game jam! Grab a friend and find out who can be the most destructive little kitten in one minute :3"
+        long-description=
+"This little project was made with a team of 3 for the UTS Tech Fest Game Jam. Using Godot, my main focus was on the player controls, the overall game logic and the user interface. 
+
+At the end of the game jam our game received the Most Intuitive Game award."
+        :buttons='[
+          { link: "https://clevertop.itch.io/kitten-calamity", text: "Play on Itch.io" }
+        ]'
       />
 
-      <ProjectCard 
-        src="https://img.itch.zone/aW1nLzU3NzU5NTEucG5n/315x250%23c/eQja%2FA.png" 
-        href="https://clevertop.itch.io/temple-of-the-silver-dragon"
-        heading="Temple of the Silver Dragon"
+      <ProjectCardV2 
+        src="https://img.itch.zone/aW1nLzU3NzU5NTEucG5n/315x250%23c/eQja%2FA.png"
+        title="Temple of the Silver Dragon"
         description="You have five minutes on the clock. How much treasure can you collect and escape with before time runs out? While this project is an older one, its also one of my favourites :)"
+        long-description=
+"Temple of the Silver Dragon is one of my older projects which was made in the Unity game engine before I switched over to Godot.
+
+It's one of my most extensive works as it entirely a solo project, In addition to the main game play components such as: First person camera and movement, level design, enemy logic, game logic, testing and balancing. I also implemented some special features including a 'Ghost' replay system and an online leaderboard using Airtable. Through this leaderboard I've been able to calculate that a total of over 110 hours have been played!"
+        :buttons='[
+          { link: "https://clevertop.itch.io/temple-of-the-silver-dragon", text: "Play on Itch.io" }
+        ]'
       />
       
     </div>
+    <BigButton text="View Entire Portfolio >>>" href="/projects"/>
     
     <!-- seperator -->
     <hr/>
@@ -174,6 +202,7 @@ h1{
   display: flex;
   width: 100%;
   justify-content: center;
+  margin-bottom: 5px;
   
   /* margin-left: auto;
   margin-right: auto; */
diff --git a/pages/projects.vue b/pages/projects.vue
new file mode 100644
index 0000000..b9b4da4
--- /dev/null
+++ b/pages/projects.vue
@@ -0,0 +1,13 @@
+<template>
+  <div>
+    
+  </div>
+</template>
+
+<script lang="ts" setup>
+
+</script>
+
+<style>
+
+</style>
\ No newline at end of file
diff --git a/public/img/close.png b/public/img/close.png
new file mode 100644
index 0000000000000000000000000000000000000000..cbf19686df370df73f6660be09bb71e2ec3b8bf5
GIT binary patch
literal 615
zcmV-t0+{`YP)<h;3K|Lk000e1NJLTq002M$002M;1^@s6s%dfF00004b3#c}2nYxW
zd<bNS00009a7bBm0005l0005l0s35~asU7T8FWQhbW?9;ba!ELWdL_~cP?peYja~^
zaAhuUa%Y?FJQ@H10pv+UK~#90?VDRp0x=Xok1ofJ7(YN05R8xIvI1Rz5QB+J5EA?t
zZ&a9p&P;E6Z=I9)qv^Eg4B^ot3=9km{N(~z058BO^IBps0oK49a1}CO0qnkiHo#16
zY5F_>TYh|2A%mWO4e%UcUw#KHLk5nhq&-Kt=TLqFj6*Ll1wQvKu%)VMof(HWa7z`X
z6&@o*lNUTih%PU9h@d7fSdO4BFH9RI${8V<ykIFplf3#`EJVmAFXW7nU0%o$!Hm3+
zGJ-jIAw`7S1atI4GlF?}K_h}2c_C&5ck)70gvS=wa4RqLiQryd=n|nAd7({&;^c*p
z2*t_^$08IjFU+amZLa&>JkuK0se2?8f9LmUijYPAJoSXYS;xN>LERHxpLdL|X!9g^
zmuZb^9DAvY@!7#NA+PhrMriXUr??1R_6CZH&}U=BeS{dhLT)3(+!AvaL1R<YO$5zt
zaq|&U9E_Nakn(8ET!b8lqh=!HJRWbF`zgWPM;DOtE@X>fLH^WQ)FN1tKeeXl5iH6J
z>Jco<3u+NO$O}zh=Ik87le`cuf=79wcZ6&F@6<MZqihl~cv&;hle|zD;Ui?=EB@t$
z{Rr;_oIYJrJqlL9jpphSF{Tn<6Zmg)0|Nv9hcD*%Oa9&Qz+(Ua002ovPDHLkV1o0j
B{i^@~

literal 0
HcmV?d00001