Something

frontend/app/app.vue

@@ -26,12 +26,24 @@ onMounted(() => {
 
 <style lang="scss" scoped>
 .container {
-  margin-top: 320px;
-  margin-bottom: 200px;
+  align-items: stretch;   /* make items grow horizontally to fill container */
+  margin-top: 350px;
+  margin-bottom: 30px;
   display: flex;
   flex-direction: column;
   padding-left: 20px;
   padding-right: 20px;
-  max-width: 1100px;
+}
+
+@media screen and (min-width: 1200px){
+  .container {
+    width: 1100px;
+  }
+}
+
+@media screen and (max-width: 1200px){
+  .container {
+    max-width: 1100px;
+  }
 }
 </style>

frontend/app/assets/css/main.scss

@@ -24,6 +24,7 @@ body {
   /* OR for standard crisp images */
   image-rendering: crisp-edges;
   pointer-events: none;
+  user-select: none;
 }
 
 ul {

frontend/app/components/Container.vue

@@ -20,6 +20,7 @@ $separation: 2px;
   padding: 8px 24px;
   color: white;
   border: 1px solid var(--color-border-color);
+  box-shadow: 8px -8px 0px 0px #151d28;
 }
 
 .corner{

frontend/app/components/Footer.vue

@@ -0,0 +1,19 @@
+<template>
+    <div class="footer">
+        <span>(C) 2026 Aran Roig. All rights whatever.</span>
+    </div>
+</template>
+
+<style scoped>
+.footer {
+    width: 100%;
+    display: flex;
+    justify-content: center;
+    margin-top: 60px;
+}
+
+span {
+    opacity: 0.4;
+    text-align: center;
+}
+</style>

frontend/app/components/Sprite.vue

@@ -64,6 +64,5 @@ onMounted(() => {
 <style lang="scss" scoped>
 .sprite {
     position: absolute;
-    z-index: -10;
 }
 </style>

frontend/app/pages/index.vue

@@ -14,21 +14,39 @@ onMounted(async () => {
 </script>
 
 <template>
-    <h1>ARANROIG.COM</h1>
-    
-    <Container>
-        <Sprite path="/sprites/alfadir/" frames="13" fps="6" top="-416px" right="-180px" width="900"></Sprite> 
-    <p>Hi, I'm Aran!
-        <br>Welcome to my website! It is still under intense development, so I recommend to come back later!
+    <div class="undertable">
+        <h1>ARANROIG.COM</h1>
+        <div class="menus">
+            <a href="/">About</a>
+            <a class="disabled">Blogs</a>
+            <a class="disabled">Illustration</a>
+        </div>
+    </div>
+
+    <Container style="width: max-width;">
+        <Sprite path="/sprites/alfadir/" frames="13" fps="6" top="-418px" left="-5px" width="1300"></Sprite> 
+    <h2>About</h2>
+        <p>
+            I'm Aran. Welcome to my website! It will always remain under development.
       </p>
-      
+      <p>
+        I am a Mathematician and Software Engineer from Barcelona. I'm currently working as a full-stack dev at <a href="https://codelearn.cat">Codelearn</a> while
+        also studying on the master's degree in <i>Machine Learning and Cybersecurity for Internet-Connected Systems</i> at <a href="https://upc.edu">UPC</a>
+      </p>
+      <p>
+      Besides all of that, I also like drawing, board games and self-hosting
+  </p> 
+      <p>You can download my resume <a href="https://cv.aranroig.com">here</a></p>
+    <h2>Contact</h2>
         <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>
+            <li>Mail: <a href="mailto:aranseraroig@gmail.com">aranseraroig@gmail.com</a> (Still pending to host my email)</li>
+            <li>GitHub: <a href="https://github.com/BinarySandia04">BinarySandia04</a></li>
+            <li>LinkedIn: <a href="https://www.linkedin.com/in/aran-roig/">aran-roig</a></li>
         </ul>
-        <br>
     </Container>
-<!--
+    <Footer></Footer>
+
+    <!--
     <div class="two-columns">
         <Container style="flex-basis: 70%">
             Test Lorem ipsum dolor sit amet idk doctor professor idk djdaksjdkasj dmsakjdkj blablabla
@@ -66,6 +84,28 @@ onMounted(async () => {
 </template>
 
 <style lang="scss" scoped>
+.undertable {
+    margin-left: 80px;
+    margin-bottom: 25px;
+    user-select: none;
+
+    .menus > a {
+        margin-right: 20px;
+    }
+
+    .disabled {
+        color: #aaaaaa77;
+    }
+}
+
+h2 {
+    margin-left: 20px;
+}
+
+p {
+    margin-left: 30px;
+}
+
 .two-columns {
     display: flex;
     width: 100%;