Yes

README.md

@@ -1,3 +1,5 @@
 # aranroig.com
 
-Text
+Code for the website!
+
+There is also code for the backend

aranroig/app/app.vue

@@ -25,13 +25,13 @@ onMounted(() => {
 </script>
 
 <style lang="scss" scoped>
-
 .container {
-  margin: auto auto;
+  margin-top: 320px;
-  margin-top: -30px;
+  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: #141414,
-        background-line: #2e2e2e,
+        background-line: #202324,
-        background-fore: #0f0f10,
+        background-fore: #10141f,
-        border-color: #5a5a5a,
+        border-color: #819796,
-        text: #ffffff,
+        text: #ebede9,
-        link: #ff7d74,
+        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,8 +1,8 @@
 <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">
+        <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 {
+.two-columns {
-    position: absolute;
+    display: flex;
-    top: -105px;
+    width: 100%;
-    right: 20px;
 }
 </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/'
+  },
+  */
 })

backend/.env.example

@@ -0,0 +1,3 @@
+PORT=5000
+DB_URI=mongodb://localhost:27017/
+NODE_ENV=development

backend/.gitignore

@@ -0,0 +1,16 @@
+# Node dependencies
+node_modules
+
+# Logs
+logs
+*.log
+
+# Misc
+.DS_Store
+.fleet
+.idea
+
+# Local env files
+.env
+.env.*
+!.env.example

backend/package.json

@@ -0,0 +1,18 @@
+{
+  "name": "backend",
+  "version": "1.0.0",
+  "description": "",
+  "license": "ISC",
+  "author": "",
+  "type": "commonjs",
+  "main": "src/index.js",
+  "scripts": {
+    "dev": "nodemon src/index.js"
+  },
+  "dependencies": {
+    "dotenv": "^17.3.1",
+    "express": "^5.2.1",
+    "mongoose": "^9.3.0",
+    "nodemon": "^3.1.14"
+  }
+}

backend/src/db.js

@@ -0,0 +1,14 @@
+const mongoose = require("mongoose");
+
+const connectDB = async () => {
+  try {
+    await mongoose.connect(process.env.DB_URI);
+
+    console.log("MongoDB connected");
+  } catch (error) {
+    console.error("MongoDB connection error:", error);
+    process.exit(1);
+  }
+};
+
+module.exports = connectDB;

backend/src/index.js

@@ -0,0 +1,16 @@
+const express = require("express");
+
+require('dotenv').config();
+const app = express();
+const connectDB = require("./db");
+
+// connect database
+connectDB();
+
+app.get("/", (req, res) => {
+  res.send("Hello from Proxmox container!");
+});
+
+app.listen(5000, () => {
+  console.log("Server running on port 5000");
+});

ecosystem.config.js

@@ -0,0 +1,22 @@
+module.exports = {
+  apps: [
+    {
+      name: "backend",
+      cwd: "./backend",
+      script: "npm",
+      args: "start",
+      env: {
+        NODE_ENV: "production"
+      }
+    },
+    {
+      name: "frontend",
+      cwd: "./aranroig",
+      script: "npm",
+      args: "start",
+      env: {
+        NODE_ENV: "production"
+      }
+    }
+  ]
+};