Something

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%;