Update current status, improve layout and add extra information.

css/cv.css

@@ -114,14 +114,16 @@ ul {
 .mu {
   height: 5em;
   width: auto;
-  float: inline-end;
+  padding: 0.5em;
+  max-width: 100%;
 }
 
 .imgLi {
   float: left;
   list-style-position: inside;
   width: fit-content;
   clear: left;
+  list-style-type: none;
 }
 
 .imgLi::marker {
@@ -174,6 +176,18 @@ ul {
   margin-bottom: 0.5em!important;
   border-left: 2px solid white!important;
   padding: 0.5em!important;
+  display: flex;
+  flex-direction: column;
+}
+
+.my-header-texts {
+  align-self: center;
+}
+
+.my-header-logos {
+  align-self: center;
+  margin-left: auto;
+  background-color: rgba(0, 0, 0, 0)!important;
 }
 
 .my-section {
@@ -232,6 +246,13 @@ ul {
   box-shadow: 0px 0px 5px 1px var(--streamYellow);
 }
 
+/* Show the skills in two columns */
+.my-skills {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  grid-gap: 0.5em;
+}
+
 .my-color-black {
   color: black;
 }
@@ -245,10 +266,28 @@ ul {
     grid-template-rows: min-content 1fr;
   }
 
+  .mu {
+    float: inline-end;
+  }
+
+  /* Show the skills in tree columns */
+  .my-skills {
+    grid-template-columns: repeat(3, 1fr);
+  }
+
+  .my-header {
+    flex-direction: row;
+  }
+
   .my-nav {
     grid-area: top;
     flex-direction: row;
   }
+
+  .imgLi {
+    list-style-type: disc;
+  }
+
 
   .langOption {
     display: flex;

html/cv.html

@@ -39,9 +39,15 @@
 
   <div class="my-main">
     <header class="my-header">
-      <img class="mu" src="../img/Logo ENG_Horizontala_Txuria.png" alt="MU logo">
-      <h1 data-text="name"></h1>
-      <h2 data-text="degree"></h2>
+      <div class="my-header-texts">
+        <h1 data-text="name"></h1>
+        <h2 data-text="degree"></h2>
+        <h3 data-text="master"></h2>
+      </div>
+      <div class="my-header-logos">
+        <img class="mu" src="../img/Logo ENG_Horizontala_Txuria.png" alt="MU logo">
+        <img class="mu" src="../img/Logo-uoc-white.png" alt="MU logo">
+      </div>
     </header>
 
     <div class="my-grid">
@@ -142,61 +148,61 @@ <h5 data-text="experience_1_title">Application Developer</h5>
         <button class="my-button langOption undecoratedLink" onclick="openSkills()">
           <h3 data-text="skills" class="my-color-black">Skills</h3>
         </button>
-        <div class="row">
-          <ul class="col">
-            <li class="imgLi">
-              <div class="imgDiv">
-                <img class="my-logo" src="../img/logoC.svg" alt="C logo">
-                <p>C</p>
-              </div>
-            </li>
-            <li class="imgLi">
-              <div class="imgDiv">
-                <img class="my-logo" src="../img/logoJava.svg" alt="Java logo">
-                <p>Java</p>
-              </div>
-            </li>
-            <li class="imgLi">
-              <div class="imgDiv">
-                <img class="my-logo" src="../img/logoMySQL.svg" alt="SQL logo">
-                <p>SQL</p>
-              </div>
-            </li class="imgLi">
-          </ul>
-          <ul class="col">
-            <li class="imgLi">
-              <div class="imgDiv">
-                <img class="my-logo" src="../img/logoJS.svg" alt="JavaScript logo">
-                <p>JavaScript</p>
-              </div>
-            </li class="imgLi">
-            <li class="imgLi">
-              <div class="imgDiv">
-                <img class="my-logo" src="../img/logoHTML.svg" alt="HTML5 logo">
-                <p>HTML5</p>
-              </div>
-            </li>
-            <li class="imgLi">
-              <div class="imgDiv">
-                <img class="my-logo" src="../img/logoCSS.svg" alt="CSS logo">
-                <p>CSS</p>
-              </div>
-            </li>
-          </ul>
-          <ul class="col">
-            <li class="imgLi">
-              <div class="imgDiv">
-                <img class="my-logo" src="../img/logoAndroid.svg" alt="Android logo">
-                <p>Android</p>
-              </div>
-            </li>
-            <li class="imgLi">
-              <div class="imgDiv">
-                <img class="my-logo" src="../img/logoAssembly.png" alt="Assembly logo">
-                <p>Assembly</p>
-              </div>
-            </li>
-          </ul>
+        <div class="my-skills">
+          <li class="imgLi">
+            <div class="imgDiv">
+              <img class="my-logo" src="../img/logoC.svg" alt="C logo">
+              <p>C</p>
+            </div>
+          </li>
+          <li class="imgLi">
+            <div class="imgDiv">
+              <img class="my-logo" src="../img/logoCsharp.svg" alt="Csharp logo">
+              <p>C#</p>
+            </div>
+          </li>
+          <li class="imgLi">
+            <div class="imgDiv">
+              <img class="my-logo" src="../img/logoJava.svg" alt="Java logo">
+              <p>Java</p>
+            </div>
+          </li>
+          <li class="imgLi">
+            <div class="imgDiv">
+              <img class="my-logo" src="../img/logoVBNET.png" alt="VBNET logo">
+              <p>VB.NET</p>
+            </div>
+          </li>
+          <li class="imgLi">
+            <div class="imgDiv">
+              <img class="my-logo" src="../img/logoMySQL.svg" alt="SQL logo">
+              <p>SQL</p>
+            </div>
+          </li class="imgLi">
+          <li class="imgLi">
+            <div class="imgDiv">
+              <img class="my-logo" src="../img/logoTypescript.svg" alt="Typescript logo">
+              <p>Typescript</p>
+            </div>
+          </li>
+          <li class="imgLi">
+            <div class="imgDiv">
+              <img class="my-logo" src="../img/logoJS.svg" alt="JavaScript logo">
+              <p>JavaScript</p>
+            </div>
+          </li class="imgLi">
+          <li class="imgLi">
+            <div class="imgDiv">
+              <img class="my-logo" src="../img/logoHTML.svg" alt="HTML5 logo">
+              <p>HTML5</p>
+            </div>
+          </li>
+          <li class="imgLi">
+            <div class="imgDiv">
+              <img class="my-logo" src="../img/logoCSS.svg" alt="CSS logo">
+              <p>CSS</p>
+            </div>
+          </li>
         </div>
 
       </div>
@@ -214,6 +220,7 @@ <h3 data-text="additional_t"></h3>
           </a>
           <p data-text="additional_b2"></p>
         </div>
+        <p data-text="additional_b3"></p>
       </div>
     </div>
   </div>

html/skills.html

@@ -43,10 +43,16 @@
 
     <div class="my-main">
         <header class="my-header">
-            <img class="mu" src="../img/Logo ENG_Horizontala_Txuria.png" alt="MU logo">
-            <h1 data-text="name"></h1>
-            <h2 data-text="degree"></h2>
-        </header>
+            <div class="my-header-texts">
+              <h1 data-text="name"></h1>
+              <h2 data-text="degree"></h2>
+              <h3 data-text="master"></h2>
+            </div>
+            <div class="my-header-logos">
+              <img class="mu" src="../img/Logo ENG_Horizontala_Txuria.png" alt="MU logo">
+              <img class="mu" src="../img/Logo-uoc-white.png" alt="MU logo">
+            </div>
+          </header>
 
         <div id="skills-programming" class="my-section">
             <h3 data-text="section-programming">Programming Languages</h3>

js/lang.js

@@ -2,7 +2,7 @@ function updateText(language) {
     // Update the selected language in localStorage
     localStorage.setItem('language', language);
 
-    var url = 'https://aitorastorga.github.io/cv/lang/' + language + '.json';
+    var url = '../lang/' + language + '.json';
 
     // Load the text for the selected language
     fetch(url)
@@ -25,7 +25,9 @@ function updateText(language) {
 
 // Call the updateText function when the page loads
 $(document).ready(function () {
-    updateText('en');
+    // Get the language from localStorage, or fall back to English
+    var language = localStorage.getItem('language') || 'en';
+    updateText(language);
 });
 
 function updateSelectedLanguageButton(language) {

js/misc.js

@@ -1,7 +1,7 @@
-function openMain() {
-    window.location.href = 'https://aitorastorga.github.io/cv/html/cv.html';
+function openMain(language) {
+    window.location.href = '../html/cv.html';
 }
 
-function openSkills() {
-    window.location.href = 'https://aitorastorga.github.io/cv/html/skills.html';
+function openSkills(language) {
+    window.location.href = '../html/skills.html';
 }

js/skills.js

@@ -25,7 +25,7 @@ window.addEventListener("load", () => {
     const containers = document.querySelectorAll(".component-container");
 
     // Load the text for the selected language
-    fetch("https://aitorastorga.github.io/cv/skills-data.json")
+    fetch("../skills-data.json")
         .then((response) => response.json())
         .then((data) => {
             // Loop over all the sections

lang/en.json

@@ -7,15 +7,16 @@
 
     "name": "Aitor Astorga Saez de Vicuña",
     "degree": "Graduate in Computer Engineering",
+    "master": "Master's Student in Cybersecurity and Privacy",
 
     "goals_t": "Goals",
-    "goals_b": "Work in a IT oriented environment to further improve my knowledge and grow personally. Find an enthusiastic development team ready to work in a joint project. I wish to position myself in a place that helps me keep track of the ever-changing technologies of this world.",
+    "goals_b": "Seeking a role in an IT-oriented environment where I can apply and expand my software development skills. I am looking to collaborate in a team that values innovation, contributing to challenging projects that require continuous adaptation and learning. My goal is to develop efficient technological solutions, staying abreast of emerging trends and evolving professionally. I have a special appreciation for open-source development and value the collaboration and knowledge sharing that characterizes this community.",
 
     "languages_t": "Languages",
 
     "contact_t": "Contact Information",
-    "address_t": "Address",
-    "address_b": "Reyes Católicos 10, 5ºD, Vitoria-Gasteiz 01002",
+    "address_t": "Location",
+    "address_b": "Vitoria-Gasteiz / Bilbao",
     "number_t": "Number",
     "mail_t": "Mail",
 
@@ -29,6 +30,7 @@
     "additional_t": "Additional Information",
     "additional_b1": "I practise fencing since 2010, and from 2017 to 2019 was a coach in the club CEGA. I currently hold a position as Secretary.",
     "additional_b2": "Since october 2020 I have the responsibility of presiding over the Alava Fencing Federation.",
+    "additional_b3": "My current OS is Garuda Linux, and I have used FreeBSD, Manjaro, Ubuntu, Debian and Windows XP to Windows 10.",
 
     "c_b": "Extensive knowledge",
     "csharp_b": "Extensive knowledge",
@@ -38,6 +40,7 @@
     "assembly_b": "Basic Knowledge",
     "javascript_b": "Intermediate Knowledge",
     "typescript_b": "Intermediate Knowledge",
+    "rust_b": "Basic Knowledge",
 
     "angular_b": "",
     "bootstrap_b": "",