Under construction

aranroig/app/pages/index.vue

@@ -0,0 +1,42 @@
+<template>
+    <!-- <h1>ARANROIG.COM</h1>-->
+    
+    <Container>
+    <img ref="redDragon" class="pixelated" id="red-dragon" src="/sprites/dragon/frame1.png" width="180">
+      <p>Hi, I'm Aran!</p>
+      <p>Welcome to my website! It is still under construction, so come back later!</p>
+    </Container>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+
+const redDragon = ref(null);
+
+const path = "/sprites/dragon/";
+const frames = [
+  "frame1.png",
+  "frame2.png",
+  "frame3.png",
+  "frame4.png",
+  "frame5.png"
+];
+
+let current = 0;
+const fps = 4; // 10 frames per second
+
+onMounted(() => {
+    setInterval(() => {
+        current = (current + 1) % frames.length;
+        redDragon.value.src = path + frames[current];
+    }, 1000 / fps);
+});
+</script>
+
+<style lang="scss" scoped>
+#red-dragon {
+    position: absolute;
+    top: -105px;
+    right: 20px;
+}
+</style>