transitions and buttons

app/pages/index.vue

@@ -1,4 +1,8 @@
 <script setup lang="ts">
+definePageMeta({
+    layout: 'graph',
+})
+
 defineOgImageComponent('Default', {
     title: 'Portfolio',
     borderColor: 'green-300',

app/pages/who-am-i.vue

@@ -0,0 +1,43 @@
+<script setup lang="ts">
+import ButtonLink from "~/components/ButtonLink.vue";
+
+const img = ref('/face.jpg')
+</script>
+
+<template>
+    <div class="flex flex-col gap-2 items-center justify-center w-full">
+        <div class="avatar">
+            <div class="mask mask-squircle">
+                <NuxtImg :src="img" width="512" height="512"/>
+            </div>
+        </div>
+
+        <h1 class="text-7xl pt-20">👋 Hi, I'm Alex</h1>
+        <div class="flex flex-row gap-2">
+            <ButtonLink to="https://github.com/Minimata" text="Github" icon="uil:github" />
+            <ButtonLink to="https://bsky.app/profile/game-dev.space" text="Bluesky" icon="ri:bluesky-fill" color="btn-secondary" />
+        </div>
+
+        <span class="pt-10 text-3xl flex flex-row items-center justify-center leading-[2] italic">
+            ⭐I code
+            <span class="text-rotate px-2">
+                <span class="justify-items-center">
+                    <span><span class="not-italic">🎮</span>Game</span>
+                    <span><span class="not-italic">🌎</span>Web</span>
+                    <span><span class="not-italic">🐍</span>Python </span>
+                    <span><span class="not-italic">⌨️</span>DevOps </span>
+                    <span><span class="not-italic">⛏️</span>Tools </span>
+                    <span><span class="not-italic">💻</span>Qt </span>
+                </span>
+            </span>
+            <span>stuff⭐</span>
+        </span>
+
+
+        <div class="divider">🎮Game stuff</div>
+    </div>
+</template>
+
+<style scoped>
+
+</style>