92 lines
No EOL
2.6 KiB
Vue
92 lines
No EOL
2.6 KiB
Vue
<script setup lang="ts">
|
|
|
|
useSeoMeta({
|
|
title: "hi from SXSW!",
|
|
ogTitle: "hi from SXSW!",
|
|
description: "Landing page for visitors who scanned my business card",
|
|
ogDescription: "Landing page for visitors who scanned my business card",
|
|
});
|
|
|
|
</script>
|
|
|
|
<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;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
padding: 2rem;
|
|
margin-top: 3.5rem;
|
|
gap: 2rem;
|
|
}
|
|
|
|
.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;
|
|
}
|
|
|
|
|
|
hr {
|
|
width: 100%;
|
|
border: 1px dashed var(--accent-dark);
|
|
max-width: var(--max-width);
|
|
}
|
|
|
|
</style> |