Yes

aranroig/app/app.vue

@@ -25,13 +25,13 @@ onMounted(() => {
 </script>
 
 <style lang="scss" scoped>
-
 .container {
-  margin: auto auto;
-  margin-top: -30px;
+  margin-top: 320px;
+  margin-bottom: 200px;
+  display: flex;
+  flex-direction: column;
   padding-left: 20px;
   padding-right: 20px;
   max-width: 1100px;
-
 }
 </style>

aranroig/app/assets/css/colors.scss

@@ -1,11 +1,11 @@
 $themes: (
     dark: (
-        background: #1e1e1e,
-        background-line: #2e2e2e,
-        background-fore: #0f0f10,
-        border-color: #5a5a5a,
-        text: #ffffff,
-        link: #ff7d74,
+        background: #141414,
+        background-line: #202324,
+        background-fore: #10141f,
+        border-color: #819796,
+        text: #ebede9,
+        link: #a4dddb,
     ),
     light: (
         background: #ffffff,

aranroig/app/components/Container.vue

@@ -15,6 +15,7 @@ $separation: 2px;
 
 .card{
   position: relative;
+  margin: 15px;
   background: var(--color-background-fore);
   padding: 8px 24px;
   color: white;

aranroig/app/components/Sprite.vue

@@ -0,0 +1,49 @@
+<template>
+<img ref="sprite" 
+    class="sprite pixelated"
+    :src="frame_paths[0]" 
+    :width="props.width">
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted } from 'vue';
+
+const props = defineProps<{
+  path: string,
+  frames: string,
+  top?: string,
+  right?: string,
+  left?: string,
+  bottom?: string,
+  width: string,
+  fps?: string
+}>();
+
+const sprite = ref(null);
+
+let frame_paths = [];
+for(let i = 1; i <= parseInt(props.frames); i++){
+    frame_paths.push(props.path + "frame" + i + ".png");
+}
+
+let current = 0;
+const fps = props.fps ? parseInt(props.fps) : 4;
+
+onMounted(() => {
+    sprite.value.style.top = props.top;
+    sprite.value.style.left = props.left;
+    sprite.value.style.bottom = props.bottom;
+    sprite.value.style.right = props.right;
+    setInterval(() => {
+        current = (current + 1) % frame_paths.length;
+        sprite.value.src = frame_paths[current];
+    }, 1000 / fps);
+});
+</script>
+
+<style lang="scss" scoped>
+.sprite {
+    position: absolute;
+    z-index: -10;
+}
+</style>

aranroig/app/pages/index.vue

@@ -1,9 +1,9 @@
 <template>
-    <!-- <h1>ARANROIG.COM</h1>-->
+    <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!
+        <Sprite path="/sprites/alfadir/" frames="1" fps="1" top="-369px" right="-80px" width="800"></Sprite> 
+    <p>Hi, I'm Aran!
         <br>Welcome to my website! It is still under intense development, so I recommend to come back later!
       </p>
       
@@ -13,37 +13,46 @@
         </ul>
         <br>
     </Container>
+<!--
+    <div class="two-columns">
+        <Container style="flex-basis: 70%">
+            Test Lorem ipsum dolor sit amet idk doctor professor idk djdaksjdkasj dmsakjdkj blablabla
+            Test Lorem ipsum dolor sit amet idk doctor professor idk djdaksjdkasj dmsakjdkj blablabla
+            Test Lorem ipsum dolor sit amet idk doctor professor idk djdaksjdkasj dmsakjdkj blablabla
+            Test Lorem ipsum dolor sit amet idk doctor professor idk djdaksjdkasj dmsakjdkj blablabla
+        </Container>
+        <Container style="flex-basis: 30%">
+            Test Lorem ipsum
+        </Container>
+    </div>
+    <div class="two-columns">
+        <Container style="flex-basis: 70%">
+            Test Lorem ipsum dolor sit amet idk doctor professor idk djdaksjdkasj dmsakjdkj blablabla
+            Test Lorem ipsum dolor sit amet idk doctor professor idk djdaksjdkasj dmsakjdkj blablabla
+            Test Lorem ipsum dolor sit amet idk doctor professor idk djdaksjdkasj dmsakjdkj blablabla
+            Test Lorem ipsum dolor sit amet idk doctor professor idk djdaksjdkasj dmsakjdkj blablabla
+        </Container>
+        <Container style="flex-basis: 30%">
+            Test Lorem ipsum
+        </Container>
+    </div>
+    <div class="two-columns">
+        <Container style="flex-basis: 70%">
+            Test Lorem ipsum dolor sit amet idk doctor professor idk djdaksjdkasj dmsakjdkj blablabla
+            Test Lorem ipsum dolor sit amet idk doctor professor idk djdaksjdkasj dmsakjdkj blablabla
+            Test Lorem ipsum dolor sit amet idk doctor professor idk djdaksjdkasj dmsakjdkj blablabla
+            Test Lorem ipsum dolor sit amet idk doctor professor idk djdaksjdkasj dmsakjdkj blablabla
+        </Container>
+        <Container style="flex-basis: 30%">
+            Test Lorem ipsum
+        </Container>
+    </div>
+    -->
 </template>
 
-<script setup>
-import { ref, onMounted } 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;
+.two-columns {
+    display: flex;
+    width: 100%;
 }
 </style>

aranroig/nuxt.config.ts

@@ -7,4 +7,16 @@ export default defineNuxtConfig({
     '~/assets/css/fonts.scss',
     '~/assets/css/main.scss'
   ],
+
+/*
+  i18n: {
+    locales: [
+      { code: 'en', iso: 'en-US', name: 'English', file: 'en.json' },
+      { code: 'es', iso: 'es-ES', name: 'Spanish', file: 'es.json' },
+      { code: 'ca', iso: 'ca-ES', nane: 'Catalan', file: 'ca.json' }
+    ],
+    defaultLocale: 'en',
+    langDir: 'locales/'
+  },
+  */
 })