From 7ea432ca617eb8ac936e09d7f16a708c1a851f99 Mon Sep 17 00:00:00 2001
From: Clevertop <tom@clevertop.dev>
Date: Mon, 23 Sep 2024 20:55:56 +1000
Subject: [PATCH] added hi page

---
 components/BoldButton.vue | 40 ++++++++++++++++++++++
 pages/hi.vue              | 70 +++++++++++++++++++++++++++++++++++++++
 2 files changed, 110 insertions(+)
 create mode 100644 components/BoldButton.vue
 create mode 100644 pages/hi.vue

diff --git a/components/BoldButton.vue b/components/BoldButton.vue
new file mode 100644
index 0000000..3c55bd6
--- /dev/null
+++ b/components/BoldButton.vue
@@ -0,0 +1,40 @@
+<script setup>
+const props = defineProps({
+  href: String,
+  text: String
+});
+</script>
+
+<template>
+    <a class="button" :href="props.href">
+        <p>{{ props.text }}</p>
+    </a>
+
+   
+    
+</template>
+
+<style>
+    .button {
+        background-color: #3f0064; 
+        border: none;
+        color: white;
+        padding: 8px;
+        border-radius: 5px;
+        text-align: center;
+        text-decoration: none;
+        display: inline-block;
+        font-size: 25px;
+        overflow: hidden;
+    }
+
+    .button:hover{
+        background-color: #e17ff5; 
+        color: black
+    }
+
+    p{
+        font-weight: 100;
+        margin: 0;
+    }
+</style>
\ No newline at end of file
diff --git a/pages/hi.vue b/pages/hi.vue
new file mode 100644
index 0000000..00d3677
--- /dev/null
+++ b/pages/hi.vue
@@ -0,0 +1,70 @@
+
+
+<template>
+    <main>
+        <h1>Welcome!</h1>
+        <img src="https://avatars.githubusercontent.com/u/41929769" class="pfp" />
+        
+        <hr>
+        <p>Coming here from SXSW and wanna check out the games I was showcasing? Check them out below!</p>
+
+        <div class="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!"
+            />
+
+            <ProjectCard 
+                src="https://img.itch.zone/aW1nLzE2NTkxMzEyLnBuZw==/315x250%23c/0Y7BUi.png" 
+                href="https://clevertop.itch.io/kitten-calamity"
+                heading="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"
+            />
+        </div>
+
+        <hr>
+        <p>Wanna check out the rest of my portfolio and website, press this button:</p>
+        <BoldButton 
+            href="https://tabbycat.dev"
+            text="Go to tabbycat.dev!"
+        />
+
+        <hr>
+        <h2 class="no-margin">Contact Details</h2>
+        <div class="no-margin">
+            <p>Email: <a href="mailto:tabby@tabbycat.dev">tabby@tabbycat.dev</a></p>
+            <p>Linkedin: <a href="https://www.linkedin.com/in/tom--howarth/">https://www.linkedin.com/in/tom--howarth/</a></p>
+        </div>
+        <hr>
+    </main>
+    
+</template>
+
+<style scoped>
+    main{
+        text-align: center
+    }
+
+    .pfp{
+        border-color: --accent;
+        border-radius: 10px;
+        border: 7px solid #e17ff5;
+    }
+
+    @media (max-width: 1000px){
+        .container{
+            flex-direction: column;
+        }
+    }
+
+    .container {
+        display: flex;
+    }
+
+    .no-margin{
+        margin: 0;
+    }
+
+</style>
\ No newline at end of file