Syndria98/aranroig.com
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Yes
All checks were successful
Build and Deploy Nuxt / build (push) Successful in 1m36s
Details

Browse Source
This commit is contained in:
BinarySandia04
2026-03-17 00:22:54 +01:00
parent 44663ec051
commit 687a3c922c
18 changed files with 1573 additions and 43 deletions
Download Patch File Download Diff File Expand all files Collapse all files

73
aranroig/app/pages/index.vue
View File

@@ -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>