First test commit

2026-03-11 18:35:53 +01:00
commit 3e0cdf8cc4
46 changed files with 8902 additions and 0 deletions
--- a/frontend/.dockerignore
+++ b/frontend/.dockerignore
@@ -0,0 +1,7 @@
+node_modules
+.git
+.gitignore
+Dockerfile
+.dockerignore
+npm-debug.log
+.env
--- a/frontend/.gitignore
+++ b/frontend/.gitignore
@@ -0,0 +1,24 @@
+# Nuxt dev/build outputs
+.output
+.data
+.nuxt
+.nitro
+.cache
+dist
+
+# Node dependencies
+node_modules
+
+# Logs
+logs
+*.log
+
+# Misc
+.DS_Store
+.fleet
+.idea
+
+# Local env files
+.env
+.env.*
+!.env.example
--- a/frontend/Dockerfile
+++ b/frontend/Dockerfile
@@ -0,0 +1,31 @@
+# ---------- Build Stage ----------
+FROM node:20-alpine AS builder
+
+WORKDIR /app
+
+# Copy package files
+COPY package*.json ./
+
+# Install dependencies
+RUN npm install
+
+# Copy project files
+COPY . .
+
+# Build the Nuxt app
+RUN npm run build
+
+
+# ---------- Production Stage ----------
+FROM node:20-alpine
+
+WORKDIR /app
+
+# Copy built output
+COPY --from=builder /app/.output ./.output
+
+# Expose Nuxt port
+EXPOSE 3000
+
+# Start Nuxt production server
+CMD ["node", ".output/server/index.mjs"]
--- a/frontend/README.md
+++ b/frontend/README.md
@@ -0,0 +1,75 @@
+# Nuxt Minimal Starter
+
+Look at the [Nuxt documentation](https://nuxt.com/docs/getting-started/introduction) to learn more.
+
+## Setup
+
+Make sure to install dependencies:
+
+```bash
+# npm
+npm install
+
+# pnpm
+pnpm install
+
+# yarn
+yarn install
+
+# bun
+bun install
+```
+
+## Development Server
+
+Start the development server on `http://localhost:3000`:
+
+```bash
+# npm
+npm run dev
+
+# pnpm
+pnpm dev
+
+# yarn
+yarn dev
+
+# bun
+bun run dev
+```
+
+## Production
+
+Build the application for production:
+
+```bash
+# npm
+npm run build
+
+# pnpm
+pnpm build
+
+# yarn
+yarn build
+
+# bun
+bun run build
+```
+
+Locally preview production build:
+
+```bash
+# npm
+npm run preview
+
+# pnpm
+pnpm preview
+
+# yarn
+yarn preview
+
+# bun
+bun run preview
+```
+
+Check out the [deployment documentation](https://nuxt.com/docs/getting-started/deployment) for more information.
--- a/frontend/app/app.vue
+++ b/frontend/app/app.vue
@@ -0,0 +1,37 @@
+<template>
+  <head>
+    <title>Aran Central</title>
+  </head>
+  <div>
+    <NuxtRouteAnnouncer />
+    <div class="container">
+      <NuxtPage></NuxtPage>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { onMounted } from 'vue';
+onMounted(() => {
+  const isDarkMode = window.matchMedia('(prefers-color-scheme: dark)').matches;
+
+  if (isDarkMode) {
+    document.documentElement.setAttribute("data-theme", "dark");
+  } else {
+    document.documentElement.setAttribute("data-theme", "light");
+  }
+});
+
+</script>
+
+<style lang="scss" scoped>
+.container {
+  margin-top: 320px;
+  margin-bottom: 200px;
+  display: flex;
+  flex-direction: column;
+  padding-left: 20px;
+  padding-right: 20px;
+  max-width: 1100px;
+}
+</style>
--- a/frontend/app/assets/css/colors.scss
+++ b/frontend/app/assets/css/colors.scss
@@ -0,0 +1,32 @@
+$themes: (
+    dark: (
+        background: #141414,
+        background-line: #202324,
+        background-fore: #10141f,
+        border-color: #819796,
+        text: #ebede9,
+        link: #a4dddb,
+    ),
+    light: (
+        background: #ffffff,
+        background-line: #f0f0f0,
+        background-fore: #ffffff,
+        border-color: #e0e0e0,
+        text: #1e1e1e,
+        link: #ff7d74,
+    )
+);
+
+@mixin theme-vars($theme-map) {
+  @each $name, $value in $theme-map {
+    --color-#{$name}: #{$value};
+  }
+}
+
+:root {
+  @include theme-vars(map-get($themes, dark));
+}
+
+[data-theme="light"] {
+  @include theme-vars(map-get($themes, light));
+}
--- a/frontend/app/assets/css/fonts.scss
+++ b/frontend/app/assets/css/fonts.scss
@@ -0,0 +1,6 @@
+@font-face {
+  font-family: 'Hurmit';
+  src: url('@/assets/fonts/HurmitNerdFontMono-Regular.otf') format('opentype');
+  font-weight: normal;
+  font-style: normal;
+}
--- a/frontend/app/assets/css/main.scss
+++ b/frontend/app/assets/css/main.scss
@@ -0,0 +1,49 @@
+body {
+  background-size: 28px 28px;
+  background-image:
+    linear-gradient(to right, var(--color-background-line) 1px, transparent 1px),
+    linear-gradient(to bottom, var(--color-background-line) 1px, var(--color-background) 1px);
+
+  margin: 0;
+  padding: 0;
+  min-height: 100vh;
+  justify-content: center;
+  align-items: center;
+  display: flex;
+}
+
+
+
+* {
+  color: var(--color-text);
+  font-family: 'Hurmit';
+}
+
+.pixelated {
+  image-rendering: pixelated; /* good for pixel art or low-res images */
+  /* OR for standard crisp images */
+  image-rendering: crisp-edges;
+  pointer-events: none;
+}
+
+ul {
+  list-style: none; /* Remove default bullets */
+  margin: 8px 0;
+}
+ul > li {padding: 0px 25px} /* Stretching li elements a little so it looks prettier */
+li {
+  position: relative;
+}
+li::before {
+    content: "";
+    width: 8px;
+    height: 8px;
+    background-color: var(--color-text);
+    position: absolute;
+    top: 6px;
+    left: 4px;
+}
+
+a {
+  color: var(--color-link);
+}
--- a/frontend/app/assets/fonts/HurmitNerdFontMono-Bold.otf
+++ b/frontend/app/assets/fonts/HurmitNerdFontMono-Bold.otf
--- a/frontend/app/assets/fonts/HurmitNerdFontMono-BoldItalic.otf
+++ b/frontend/app/assets/fonts/HurmitNerdFontMono-BoldItalic.otf
--- a/frontend/app/assets/fonts/HurmitNerdFontMono-Italic.otf
+++ b/frontend/app/assets/fonts/HurmitNerdFontMono-Italic.otf
--- a/frontend/app/assets/fonts/HurmitNerdFontMono-Light.otf
+++ b/frontend/app/assets/fonts/HurmitNerdFontMono-Light.otf
--- a/frontend/app/assets/fonts/HurmitNerdFontMono-LightItalic.otf
+++ b/frontend/app/assets/fonts/HurmitNerdFontMono-LightItalic.otf
--- a/frontend/app/assets/fonts/HurmitNerdFontMono-Regular.otf
+++ b/frontend/app/assets/fonts/HurmitNerdFontMono-Regular.otf
--- a/frontend/app/assets/fonts/LICENSE
+++ b/frontend/app/assets/fonts/LICENSE
@@ -0,0 +1,94 @@
+Copyright (c) 2013, Pablo Caro <me AT pcaro DOT es> - http://pcaro.es/
+with Reserved Font Name Hermit.
+
+This Font Software is licensed under the SIL Open Font License, Version 1.1.
+This license is copied below, and is also available with a FAQ at:
+http://scripts.sil.org/OFL
+
+
+-----------------------------------------------------------
+SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
+-----------------------------------------------------------
+
+PREAMBLE
+The goals of the Open Font License (OFL) are to stimulate worldwide
+development of collaborative font projects, to support the font creation
+efforts of academic and linguistic communities, and to provide a free and
+open framework in which fonts may be shared and improved in partnership
+with others.
+
+The OFL allows the licensed fonts to be used, studied, modified and
+redistributed freely as long as they are not sold by themselves. The
+fonts, including any derivative works, can be bundled, embedded, 
+redistributed and/or sold with any software provided that any reserved
+names are not used by derivative works. The fonts and derivatives,
+however, cannot be released under any other type of license. The
+requirement for fonts to remain under this license does not apply
+to any document created using the fonts or their derivatives.
+
+DEFINITIONS
+"Font Software" refers to the set of files released by the Copyright
+Holder(s) under this license and clearly marked as such. This may
+include source files, build scripts and documentation.
+
+"Reserved Font Name" refers to any names specified as such after the
+copyright statement(s).
+
+"Original Version" refers to the collection of Font Software components as
+distributed by the Copyright Holder(s).
+
+"Modified Version" refers to any derivative made by adding to, deleting,
+or substituting -- in part or in whole -- any of the components of the
+Original Version, by changing formats or by porting the Font Software to a
+new environment.
+
+"Author" refers to any designer, engineer, programmer, technical
+writer or other person who contributed to the Font Software.
+
+PERMISSION & CONDITIONS
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of the Font Software, to use, study, copy, merge, embed, modify,
+redistribute, and sell modified and unmodified copies of the Font
+Software, subject to the following conditions:
+
+1) Neither the Font Software nor any of its individual components,
+in Original or Modified Versions, may be sold by itself.
+
+2) Original or Modified Versions of the Font Software may be bundled,
+redistributed and/or sold with any software, provided that each copy
+contains the above copyright notice and this license. These can be
+included either as stand-alone text files, human-readable headers or
+in the appropriate machine-readable metadata fields within text or
+binary files as long as those fields can be easily viewed by the user.
+
+3) No Modified Version of the Font Software may use the Reserved Font
+Name(s) unless explicit written permission is granted by the corresponding
+Copyright Holder. This restriction only applies to the primary font name as
+presented to the users.
+
+4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
+Software shall not be used to promote, endorse or advertise any
+Modified Version, except to acknowledge the contribution(s) of the
+Copyright Holder(s) and the Author(s) or with their explicit written
+permission.
+
+5) The Font Software, modified or unmodified, in part or in whole,
+must be distributed entirely under this license, and must not be
+distributed under any other license. The requirement for fonts to
+remain under this license does not apply to any document created
+using the Font Software.
+
+TERMINATION
+This license becomes null and void if any of the above conditions are
+not met.
+
+DISCLAIMER
+THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
+OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
+COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
+INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
+DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
+OTHER DEALINGS IN THE FONT SOFTWARE.
--- a/frontend/app/assets/fonts/README.md
+++ b/frontend/app/assets/fonts/README.md
@@ -0,0 +1,64 @@
+# Nerd Fonts
+
+This is an archived font from the Nerd Fonts release v3.4.0.
+
+For more information see:
+* https://github.com/ryanoasis/nerd-fonts/
+* https://github.com/ryanoasis/nerd-fonts/releases/latest/
+
+# Hermit
+
+**Hermit** is a monospace font designed to be clear, pragmatic and very readable.
+
+https://pcaro.es/p/hermit
+
+For more information have a look at the upstream website: https://github.com/pcaro90/hermit
+
+Version: 2.0
+
+## Why `Hurmit` and not `Hermit`?
+
+What's in a name? The reason for the name change is to comply with the SIL Open Font License (OFL), in particular the [Reserved Font Name mechanism][SIL-RFN]
+
+Some fonts have parts of their name "reserved" per the [Reserved Font Name mechanism][SIL-RFN]:
+> No Modified Version of the Font Software may use the Reserved Font
+> Name(s) unless explicit written permission is granted by the corresponding
+> Copyright Holder. This restriction only applies to the primary font name as
+> presented to the users.
+
+- The main goals seem to be to: `Avoid collisions`, `Protect authors`, `Minimize support`, and `Encourage derivatives`
+
+See the [Reserved Font Name section][SIL-RFN] for additional information
+
+## Which font?
+
+### TL;DR
+
+* Pick your font family:
+  * If you are limited to monospaced fonts (because of your terminal, etc) then pick a font with `Nerd Font Mono` (or `NFM`).
+  * If you want to have bigger icons (usually around 1.5 normal letters wide) pick a font without `Mono` i.e. `Nerd Font` (or `NF`). Most terminals support this, but ymmv.
+  * If you work in a proportional context (GUI elements or edit a presentation etc) pick a font with `Nerd Font Propo` (or `NFP`).
+
+### Ligatures
+
+Ligatures are generally preserved in the patched fonts.
+Nerd Fonts `v2.0.0` had no ligatures in the `Nerd Font Mono` fonts, this has been dropped with `v2.1.0`.
+If you have a ligature-aware terminal and don't want ligatures you can (usually) disable them in the terminal settings.
+
+### Explanation
+
+Once you narrow down your font choice of family (`Droid Sans`, `Inconsolata`, etc) and style (`bold`, `italic`, etc) you have 2 main choices:
+
+#### `Option 1: Download already patched font`
+
+ * For a stable version download a font package from the [release page](https://github.com/ryanoasis/nerd-fonts/releases)
+ * Or download the development version from the folders here
+
+#### `Option 2: Patch your own font`
+
+ * Patch your own variations with the various options provided by the font patcher (i.e. not include all symbols for smaller font size)
+
+For more information see: [The FAQ](https://github.com/ryanoasis/nerd-fonts/wiki/FAQ-and-Troubleshooting#which-font)
+
+[SIL-RFN]:http://scripts.sil.org/cms/scripts/page.php?item_id=OFL_web_fonts_and_RFNs#14cbfd4a
+
--- a/frontend/app/components/Container.vue
+++ b/frontend/app/components/Container.vue
@@ -0,0 +1,63 @@
+<template>
+  <div class="card">
+
+  <span class="corner tl"></span>
+  <span class="corner tr"></span>
+  <span class="corner bl"></span>
+  <span class="corner br"></span>
+
+    <slot />
+  </div>
+</template>
+
+<style lang="scss" scoped>
+$separation: 2px;
+
+.card{
+  position: relative;
+  margin: 15px;
+  background: var(--color-background-fore);
+  padding: 8px 24px;
+  color: white;
+  border: 1px solid var(--color-border-color);
+}
+
+.corner{
+  position: absolute;
+  width: 22px;
+  height: 22px;
+  border-color: #cfcfcf;
+}
+
+/* Top Left */
+.tl{
+  top: -$separation;
+  left: -$separation;
+  border-top:2px solid;
+  border-left:2px solid;
+}
+
+/* Top Right */
+.tr{
+  top: -$separation;
+  right: -$separation;
+  border-top:2px solid;
+  border-right:2px solid;
+}
+
+/* Bottom Left */
+.bl{
+  bottom: -$separation;
+  left: -$separation;
+  border-bottom:2px solid;
+  border-left:2px solid;
+}
+
+/* Bottom Right */
+.br{
+  bottom: -$separation;
+  right: -$separation;
+  border-bottom:2px solid;
+  border-right:2px solid;
+}
+</style>
--- a/frontend/app/components/Sprite.vue
+++ b/frontend/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>
--- a/frontend/app/pages/index.vue
+++ b/frontend/app/pages/index.vue
@@ -0,0 +1,58 @@
+<template>
+    <h1>ARANROIG.COM</h1>
+    
+    <Container>
+        <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>
+      
+        <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>
+<!--
+    <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>
+
+<style lang="scss" scoped>
+.two-columns {
+    display: flex;
+    width: 100%;
+}
+</style>
--- a/frontend/i18n/locales/ca.json
+++ b/frontend/i18n/locales/ca.json
--- a/frontend/i18n/locales/en.json
+++ b/frontend/i18n/locales/en.json
--- a/frontend/i18n/locales/es.json
+++ b/frontend/i18n/locales/es.json
--- a/frontend/nuxt.config.ts
+++ b/frontend/nuxt.config.ts
@@ -0,0 +1,22 @@
+// https://nuxt.com/docs/api/configuration/nuxt-config
+export default defineNuxtConfig({
+  compatibilityDate: '2025-07-15',
+  devtools: { enabled: true },
+  css: [
+    '~/assets/css/colors.scss',
+    '~/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/'
+  },
+  */
+})
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -0,0 +1,18 @@
+{
+  "name": "aranroig",
+  "type": "module",
+  "private": true,
+  "scripts": {
+    "build": "nuxt build",
+    "dev": "nuxt dev",
+    "generate": "nuxt generate",
+    "preview": "nuxt preview",
+    "postinstall": "nuxt prepare"
+  },
+  "dependencies": {
+    "nuxt": "^4.3.1",
+    "sass": "^1.98.0",
+    "vue": "^3.5.30",
+    "vue-router": "^4.6.4"
+  }
+}
--- a/frontend/pnpm-lock.yaml
+++ b/frontend/pnpm-lock.yaml
--- a/frontend/public/favicon.ico
+++ b/frontend/public/favicon.ico
--- a/frontend/public/robots.txt
+++ b/frontend/public/robots.txt
@@ -0,0 +1,2 @@
+User-Agent: *
+Disallow:
--- a/frontend/public/sprites/alfadir/frame1.png
+++ b/frontend/public/sprites/alfadir/frame1.png
--- a/frontend/public/sprites/dragon/frame1.png
+++ b/frontend/public/sprites/dragon/frame1.png
--- a/frontend/public/sprites/dragon/frame2.png
+++ b/frontend/public/sprites/dragon/frame2.png
--- a/frontend/public/sprites/dragon/frame3.png
+++ b/frontend/public/sprites/dragon/frame3.png
--- a/frontend/public/sprites/dragon/frame4.png
+++ b/frontend/public/sprites/dragon/frame4.png
--- a/frontend/public/sprites/dragon/frame5.png
+++ b/frontend/public/sprites/dragon/frame5.png
--- a/frontend/tsconfig.json
+++ b/frontend/tsconfig.json
@@ -0,0 +1,18 @@
+{
+  // https://nuxt.com/docs/guide/concepts/typescript
+  "files": [],
+  "references": [
+    {
+      "path": "./.nuxt/tsconfig.app.json"
+    },
+    {
+      "path": "./.nuxt/tsconfig.server.json"
+    },
+    {
+      "path": "./.nuxt/tsconfig.shared.json"
+    },
+    {
+      "path": "./.nuxt/tsconfig.node.json"
+    }
+  ]
+}