BinarySandia04
44663ec051
All checks were successful
Build and Deploy Nuxt / build (push) Successful in 1m4s
49 lines
1.1 KiB
Vue
49 lines
1.1 KiB
Vue
<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!
|
|
<br>Welcome to my website! It is still under intense development, so I recommend to come back later!
|
|
</p>
|
|
|
|
<ul>
|
|
<li>You can check my resume <a href="https://cv.aranroig.com">here</a></li>
|
|
<li>Or check out my projects on <a href="https://github.com/BinarySandia04">GitHub</a></li>
|
|
</ul>
|
|
<br>
|
|
</Container>
|
|
</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;
|
|
}
|
|
</style> |