feat: hide phone number

assets/lang.json

@@ -26,7 +26,8 @@
     "experience_3": "<p class=\"card-text text-justify mb-2\" >2021, Mar. – 2021, Sept. <b>Tías Town Hall</b> <span><a href=\"https://www.ayuntamientodetias.es/\" target=\"_blank\">(https://www.ayuntamientodetias.es/)</a></span><br> <br> <i>Computer Technisian.</i> <p> On-site employment. <ul> <li> Offering support to the employers (configuration, repair, formatting, data recovery, configuring scanners and printers, setting-up of Microsoft 365 and Windows 10, mail migration from POP to IMAP...). </li> <li> Support the cadastrial office doing automation scripts with Python and Selenium in order to integrate them in the QGIS program. </li> </ul> </p> </p>",
     "experience_2": "<p class=\"card-text text-justify mb-2\" > 2018, Febr. – 2019, Jul. <b> University of Las Palmas de Gran Canaria</b><span><a href=\"https://accedacris.ulpgc.es/handle/10553/75782\" target=\"_blank\"> (View project)</a></span> <br> <br> <i> Final degree project.</i> <ul> <li> Design and development in Matlab environment of a meteorological system that detects and locates singular sound events. </li><li>Combine Machine Learning and DOA (Direction of Arrival) techniques in order to detect and classify sound events like rain or ambient sound and when it comes to thunder, locate its direction of arrival.    </li>  </ul>   Used Technologies: Matlab · Machine Learning · DOA (Direction of Arrival) · Audacity</p>",
     "experience_1": "<p class=\"card-text text-justify mb-2\" >Oct. 2017 – May. 2018. <b>University of Las Palmas de Gran Canaria (vicerrectorado de Cultura y Sociedad)</b><br> <br> <i>Sound Technician. Internship.</i><ul><li>In-situ events recording.</li><li>Audio postproduction at the recording studio of the Escuela de Ingeniería de Telecomunicación y Electrónica (EITE).</li></ul>Used technologies: Protools · Audacity</p>",
-    "personal_1": "<span id=\"emoji\">🎂</span> 04/08/1994 (<span id=\"current-age\">28</span> years old)",
+    "personal_0": "📞<a id=\"phone-number\" href=\"javascript:void(0)\" onclick=\"displayPhoneNumber(event)\">Click to reveal phone number</a>",
+    "personal_1": "🎂 04/08/1994 (<span id=\"current-age\">28</span> years old)",
     "personal_2": "📍 Teguise, Lanzarote, Spain",
     "add_training_text": "2021, SEPT - DIC. FULLSTACK WEB DEVELOPMENT, <b>INDUSTRIAL ORGANIZATION SCHOOL (EOI)</b>. 334 SCHOOL HOURS <p> Used technologies: HTML · CSS · JavaScript · MySQL · MongoDB · Docker · CI/CD · Git · Terminal · GNU/Linux </p>"
   },
@@ -57,7 +58,8 @@
     "experience_3": "<p class=\"card-text text-justify mb-2\" >Mar. 2021 – Sept. 2021. <b>Ayuntamiento de Tías</b> <span><a href=\"https://www.ayuntamientodetias.es/\" target=\"_blank\">(https://www.ayuntamientodetias.es/)</a></span><br> <br> <i>Técnico Informático.</i> <p> Empleo presencial. <ul> <li> Ofrecer soporte a los empleados (configuración de equipos, reparación de PCS, formateo, recuperación de datos, configurar las impresoras y escáneres, puesta a punto de Microsoft 365 y Windows 10, migración de correos de POP a IMAP...). </li> <li> Apoyar al catastro automatizando descargas con Python y Selenium para integrarlos en el programa QGIS. </li> </ul> </p> </p>",
     "experience_2": "<p class=\"card-text text-justify mb-2\" > Febr. 2018 – Jul. 2019. <b> Universidad de Las Palmas de Gran Canaria</b><span><a href=\"https://accedacris.ulpgc.es/handle/10553/75782\" target=\"_blank\"> (Ver proyecto)</a></span> <br> <br> <i> Trabajo de Fin de Grado</i> <ul> <li> Diseñar y desarrollar en entorno Matlab un sistema metorológico que detecta y localiza eventos sonoros atmosféricos singulares. </li><li>Combinar técnicas de Machine Learning y DOA (Localización de la Dirección de Procedencia) para detectar y clasificar eventos sonoros como lluvia o sonido ambiente y cuando se trata de truenos,localizar su dirección de procedencia.    </li>  </ul>   Tecnologías utilizadas: Matlab · Machine Learning · DOA (Direction of Arrival) · Audacity</p>",
     "experience_1": "<p class=\"card-text text-justify mb-2\" >Oct. 2017 – May. 2018. <b>Universidad de Las Palmas de Gran Canaria (vicerrectorado de Cultura y Sociedad)</b><br> <br> <i>Técnico de Sonido. Prácticas de empresa</i><ul><li>Grabación de eventos in-situ.</li><li>Postproducción de audio en el estudio de grabación de la Escuela de Ingeniería de Telecomunicación y Electrónica (EITE).</li></ul> Tecnologías utilizadas: Protools · Audacity</p>",
-    "personal_1": "<span id=\"emoji\">🎂</span> 04/08/1994 (<span id=\"current-age\">28</span> años)",
+    "personal_0": "📞<a id=\"phone-number\" href=\"javascript:void(0)\" onclick=\"displayPhoneNumber(event)\">Click para ver el número de teléfono</a>",
+    "personal_1": "🎂 04/08/1994 (<span id=\"current-age\">28</span> años)",
     "personal_2": "📍 Teguise, Lanzarote, España",
     "add_training_text": "SEPT - DIC 2021 PROGRAMACIÓN WEB FULLSTACK, <b>ESCUELA DE ORGANIZACIÓN INDUSTRIAL (EOI)</b>. 334 HORAS LECTIVAS <p> Tecnologías utilizadas: HTML · CSS · JavaScript · MySQL · MongoDB · Docker · CI/CD · Git · Terminal · GNU/Linux </p>"
   }

index.html

@@ -81,30 +81,27 @@ <h4 class="text-center mt-1" id="header"></h4>
         <div class="row" id="personal_data">
           <div class="container">
             <div class="row ">
-              <div class="col-xl-3 col-sm-6 col-xs-12">
-                <span id="emoji">📞</span>+34-683593896
+              <div class="col-xl-3 col-sm-6 col-xs-12" id="personal_0">
               </div>
               <div class="col-xl-3 col-sm-6 col-xs-12">
-                <span id="emoji">📧</span>[email protected]
+                📧 [email protected]
               </div>
               <div class="col-xl-3 col-sm-6 col-xs-12">
-                <a href="https://www.linkedin.com/in/jfmozaga" target="_blank"><span
-                    id="emoji">💼</span>linkedin.com/in/jfmozaga</a>
+                <a href="https://www.linkedin.com/in/jfmozaga" target="_blank">💼linkedin.com/in/jfmozaga</a>
               </div>
               <div class="col-xl-3 col-sm-6 col-xs-12 ">
-                <a href="https://www.github.com/juanfrilla" target="_blank"><span id="emoji">
-                    👨‍💻</span>github.com/juanfrilla </a>
+                <a href="https://www.github.com/juanfrilla" target="_blank">👨‍💻github.com/juanfrilla </a>
               </div>
 
               <div class="col-xl-3 col-sm-6 col-xs-12" id="personal_1">
-                <span id="emoji">🎂</span> 04/08/1994 (<span id="current-age"></span>)
+                🎂 04/08/1994 (<span id="current-age"></span>)
               </div>
               <div class="col-xl-3 col-xs-12 d-sm-none d-xl-block">
               </div>
               <div class="col-xl-3 col-xs-12 d-sm-none d-xl-block">
               </div>
               <div class="col-xl-3 col-sm-6 col-xs-12" id="personal_2">
-                <span id="emoji">📍</span>
+                📍
               </div>
             </div>
           </div>

index.js

@@ -1,3 +1,14 @@
+function displayPhoneNumber(event) {
+  event.preventDefault();
+  const phoneLink = document.getElementById('phone-number');
+  const phoneNumber = '+34-683593896';
+
+  const phoneSpan = document.createElement('span');
+  phoneSpan.innerText = phoneNumber;
+  phoneLink.parentNode.replaceChild(phoneSpan, phoneLink);
+}
+window.displayPhoneNumber = displayPhoneNumber;
+
 const currentAge = () => {
   var today = new Date();
   var birthDate = new Date("1994-08-04");