added hi page

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>

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>