Reorganizando

css/sobremi.css

@@ -95,7 +95,7 @@ html, body {
 
 .section-title {
     width: 100%;
-    background-color: #333333;
+    background-color: var(--bg-nav);
     color: var(--keyword);
     padding: 1rem;
     border: none;
@@ -145,3 +145,19 @@ footer {
     border-top: 1px solid var(--border-editor);
     padding: 1.5rem 0;
 }
+
+/* --- Ajuste para dispositivos pequeños --- */
+@media (max-width: 600px) {
+    header h1 {
+        font-size: 1.6rem;
+    }
+
+    nav ul {
+        flex-direction: column;
+        align-items: center;
+    }
+
+    .container {
+        gap: 1.2rem;
+    }
+}

css/style.css

@@ -18,10 +18,21 @@
     --blanco-puro: #FFFFFF;
     --sombra: rgba(47, 58, 86, 0.15);
     --color-tarjeta: #1A1A1A;
-    --color-acento: #5FAEDB;
+    --color-acento: #a4d7f4;
-     --gray: #acb3bf;
+    --gray: #acb3bf;
     --color-borde: rgba(95, 174, 219, 0.3);
     --color-cabecera: rgba(0,0,0,0.80);
+
+    --bg-vs: #1e1e1e; /* Fondo principal */
+    --bg-nav: #252526; /* Fondo de barra de navegación */
+    --bg-card: #2d2d2d; /* Fondo de tarjetas/secciones */
+    --keyword: #aaffff; /* Azul grisaceo  */
+    --string: #ce9178; /* Naranja/Salmón (textos) */
+    --comment: #6a9955; /* Verde (comentarios) */
+    --var-name: #9cdcfe; /* Azul claro (variables) */
+    --text: #d4d4d4; /* Gris claro (texto normal) */
+    --border-editor: #3e3e42; /* Color de bordes y líneas */
+
 }
 
 body {
@@ -87,7 +98,7 @@ body {
 
 /* Cards de Proyectos */
 .section-title {
-    border-left: 5px solid var(--color-acento);
+    border-left: 5px solid var(--bg-nav);
     padding-left: 15px;
 }
 
@@ -113,10 +124,11 @@ body {
 
 .card-title {
     color: var(--color-acento);
-    background-color: rgba(26, 54, 104, 0.5);
+    background-color: var(--bg-nav);
     width: 100%;
     padding: 5px 10px;
     text-align: center;
+    border-radius: 10px;
 }
 
 .card-text {
@@ -149,4 +161,27 @@ body {
 footer {
     border-top: 1px solid var(--color-borde);
     color: var(--color-acento);
+}
+
+/* --- Ajuste para dispositivos pequeños --- */
+@media (max-width: 600px) {
+    header h1 {
+        font-size: 1.6rem;
+    }
+
+    nav ul {
+        flex-direction: column;
+        align-items: center;
+    }
+
+    .container {
+        gap: 1.2rem;
+    }
+}
+
+.contact-links a {
+    color: var(--color-acento);
+    text-decoration: none;
+    font-weight: bold;
+    transition: 0.3s;
 }

eltiempo/estadisticas.html

@@ -31,8 +31,12 @@
         <p>Viento: <strong id="last-wind">--</strong></p>
         <p>Amanecer: <strong id="last-sunrise">--</strong></p>
         <p>Anochecer: <strong id="last-sunset">--</strong></p>
+        <h2>Luna</h2>
+        <p>Fase lunar actual: <strong id="moon-phase">Calculando...</strong></p>
+        <p id="moon-icon">🌑</p>
     </article>
 
+
     <!-- RESUMEN MES ACTUAL -->
     <article class="tarjeta">
         <h2>Resumen del mes actual</h2>

eltiempo/index.html

@@ -19,39 +19,7 @@
 
 <main class="container">
 
-    <article class="tarjeta" id="bullet-summary">
+   
-
-        <h2>Bullet Journal</h2>
-
-        <div class="bj-resumen">
-
-            <div class="bj-item">
-                <span>ROSARIO</span>
-                <strong id="bj-rosario">0</strong>
-            </div>
-
-            <div class="bj-item">
-                <span>CAMINAR</span>
-                <strong id="bj-caminar">0</strong>
-            </div>
-
-            <div class="bj-item">
-                <span>VITAMINAS</span>
-                <strong id="bj-vitaminas">0</strong>
-            </div>
-
-            <div class="bj-item">
-                <span>AGUA</span>
-                <strong id="bj-agua">0</strong>
-            </div>
-
-        </div>
-
-        <a class="btn" href="bullet-journal.html">Abrir Bullet Journal</a>
-
-    </article>
-
-
     <article class="tarjeta" id="sun-card">
         <h2 id="sun-title">Amanecer y Anochecer</h2>
         <p>Amanecer: <strong id="sunrise">--:--</strong></p>
@@ -59,14 +27,17 @@
         <p>Duración del día: <strong id="day-length">--:--</strong></p>
         <p id="countdown">Tiempo hasta anochecer: --:--:--</p>
         <p id="sun-icon">☀️</p>
+        <hr>
+        <p>Fase lunar actual: <strong id="moon-phase">Calculando...</strong></p>
+    <p id="moon-icon">🌑</p>
     </article>
 
-
+<!--
 <article class="tarjeta" id="moon-card">
     <h2>Calendario lunar vs tiempo</h2>
     <p>Fase lunar actual: <strong id="moon-phase">Calculando...</strong></p>
     <p id="moon-icon">🌑</p>
-<!--
+
     <h3>Calendario lunar del mes</h3>
 
     <div id="moon-weekdays">
@@ -80,8 +51,9 @@
     </div>
 
     <div id="moon-mini-calendar"></div>
-    -->
+    
 </article>
+-->
 
 
 <article class="tarjeta" id="weather-card">
@@ -117,6 +89,39 @@
   <a class="btn" href="estadisticas.html">Ver estadísticas</a>
 </article>
 
+ <!--
+    <article class="tarjeta" id="bullet-summary">
+
+        <h2>Bullet Journal</h2>
+
+        <div class="bj-resumen">
+
+            <div class="bj-item">
+                <span>ROSARIO</span>
+                <strong id="bj-rosario">0</strong>
+            </div>
+
+            <div class="bj-item">
+                <span>CAMINAR</span>
+                <strong id="bj-caminar">0</strong>
+            </div>
+
+            <div class="bj-item">
+                <span>VITAMINAS</span>
+                <strong id="bj-vitaminas">0</strong>
+            </div>
+
+            <div class="bj-item">
+                <span>AGUA</span>
+                <strong id="bj-agua">0</strong>
+            </div>
+
+        </div>
+
+        <a class="btn" href="bullet-journal.html">Abrir Bullet Journal</a>
+
+    </article>
+-->
 
 </main>
 

eltiempo/js/estadisticas.js

@@ -69,6 +69,59 @@ function renderLastData(data) {
     $("last-sunset").textContent = last.anochecer;
 } 
 
+/* ==============================================
+   FASES LUNARES
+============================================== */
+function getMoonPhase() {
+    const now = new Date();
+    const year = now.getFullYear();
+    const month = now.getMonth() + 1;
+    const day = now.getDate();
+
+    const c = Math.floor(365.25 * year);
+    const e = Math.floor(30.6 * (month + 1));
+    const jd = c + e + day - 694039.09; 
+    const phase = (jd / 29.53) % 1; 
+    const age = phase * 29.53;
+
+    let phaseName = "", icon = "";
+
+    if (age < 1.84566) { phaseName = "Luna Nueva"; icon = "🌑"; }
+    else if (age < 5.53699) { phaseName = "Creciente Iluminante"; icon = "🌒"; }
+    else if (age < 9.22831) { phaseName = "Cuarto Creciente"; icon = "🌓"; }
+    else if (age < 12.91963) { phaseName = "Gibosa Creciente"; icon = "🌔"; }
+    else if (age < 16.61096) { phaseName = "Luna Llena"; icon = "🌕"; }
+    else if (age < 20.30228) { phaseName = "Gibosa Menguante"; icon = "🌖"; }
+    else if (age < 23.99361) { phaseName = "Cuarto Menguante"; icon = "🌗"; }
+    else if (age < 27.68493) { phaseName = "Creciente Menguante"; icon = "🌘"; }
+    else { phaseName = "Luna Nueva"; icon = "🌑"; }
+
+    document.getElementById("moon-phase").textContent = phaseName;
+    document.getElementById("moon-icon").textContent = icon;
+
+    document.getElementById("stats-location").textContent = `Hoy es ${day} de ${monthNames[month-1]} de ${year}`;
+
+}
+
+function moonPhaseForDate(year, month, day) {
+    const c = Math.floor(365.25 * year);
+    const e = Math.floor(30.6 * (month + 1));
+    const jd = c + e + day - 694039.09;
+    const phase = (jd / 29.53) % 1;
+    const age = phase * 29.53;
+
+    if (age < 1.84566) return "🌑";
+    if (age < 5.53699) return "🌒";
+    if (age < 9.22831) return "🌓";
+    if (age < 12.91963) return "🌔";
+    if (age < 16.61096) return "🌕";
+    if (age < 20.30228) return "🌖";
+    if (age < 23.99361) return "🌗";
+    if (age < 27.68493) return "🌘";
+    return "🌑";
+}
+
+
 // ====================
 // Estadísticas del mes seleccionado
 // ====================

habilidades.html

@@ -0,0 +1,176 @@
+<!DOCTYPE html>
+<html lang="es">
+<head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Tatiana Villa</title>
+    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
+    <link rel="icon" href="favicon.ico" type="image/x-icon">
+    <meta name="description" content="Curriculum Vitae de Tatiana Villa, desarrolladora y diseñadora web.">
+    <meta name="keywords" content="Tatiana Villa, curriculum, desarrolladora web, diseñadora web, tecnología, DAM">
+    <meta name="author" content="Tatiana Villa">
+
+    <link rel="stylesheet" href="css/style.css">
+    <script type="text/javascript" src="codigo.js"></script>
+</head>
+<body class="bg-black text-light">
+    <header>
+    <nav class="navbar navbar-expand-sm navbar-dark bg-dark shadow-sm border-bottom border-secondary">
+        <div class="container-fluid">
+
+            <!-- Logo -->
+            <a class="navbar-brand font-weight-bold" href="index.html" style="font-family: 'Consolas', monospace;">
+                <span class="text-primary">{</span>Tatiana Villa <span class="text-primary">}</span> Proyectos
+            </a>
+
+            <!-- Botón móvil -->
+            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#menuNav"
+                    aria-controls="menuNav" aria-expanded="false" aria-label="Toggle navigation">
+                <span class="navbar-toggler-icon"></span>
+            </button>
+
+            <!-- Menú -->
+            <div class="collapse navbar-collapse justify-content-end" id="menuNav">
+                <ul class="navbar-nav">
+
+                    <li class="nav-item">
+                        <a class="nav-link" href="index.html">Inicio</a>
+                    </li>
+
+                    <li class="nav-item">
+                        <a class="nav-link" href="proyectos.html">Proyectos</a>
+                        </a>
+                    </li>
+
+                    <li class="nav-item">
+                        <a class="nav-link" href="habilidades.html">Habilidades</a>
+                    </li>
+
+<!--
+                    <li class="nav-item">
+                        <a class="nav-link" href="formacion.html">Formación</a>
+                    </li>
+
+
+                    <li class="nav-item">
+                        <a class="nav-link" href="experiencia.html">Experiencia</a>
+                    </li>
+-->
+                </ul>
+            </div>
+
+        </div>
+    </nav>
+</header>
+<main class="container main-content py-5">
+
+        <div class="accordion mt-4" id="accordionExample">
+                <div class="card-header" id="headingOne">
+                    <h5 class="mb-0">
+                        <button class="btn btn-link" type="button" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
+                            &lt;desarrollo&gt;
+                        </button>
+                    </h5>
+                </div>
+
+                <div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordionExample">
+                    <div class="card-body">
+                        <ul>
+                            <li>Diseño y desarrollo de paginas WEB FrontEnd y BackEnd (PHP, HTML, CSS, JavaScript, XML, JSON)</li>
+                            <li>Programación Orientada a objetos con Java</li>
+                            <li>JavaDoc, UML, Desarrollo de interfaces con Java Swing</li>
+                            <li>Bases de datos: Diseño y normalización de Bases de datos, sentencias SQL</li>
+                            <li>DevOps</li>
+                            <li>Robótica con arduino</li>
+                            <li>Organización y proyectos de de energia solar fotovoltaica</li>
+                            <li>Puedes encontrar mis proyectos en la pestaña repositorios de <a href="https://github.com/tatvil?tab=repositories">Github</a></li>
+                            <li>Desarrollo de Aplicaciones Multiplataforma (DAM)</li>
+                            <li>Programacion de Servicios y procesos(comunicacion de procesos cliente servidor, REST)</li>
+                            <li>Acceso a datos desde Java (Bases de datos, archivos xml, json,... )</li>
+                            <li>Desarrollo de aplicaciones para moviles con Android Studio</li>
+                        </ul>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+         <div class="accordion mt-4" id="accordionExample">
+                <div class="card-header" id="headingTwo">
+                    <h5 class="mb-0">
+                        <button class="btn btn-link" type="button" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="true" aria-controls="collapseTwo">
+                            &lt;Sistemas&gt;
+                        </button>
+                    </h5>
+                </div>
+
+                <div id="collapseTwo" class="collapse show" aria-labelledby="headingTwo" data-parent="#accordionExample">
+                    <div class="card-body">
+                        <ul>
+                            <li>Administrador de Sistemas Unix (HPUX, Linux, Debian, Ubuntu, ... ), utilizo mucho la Shell Script para automatización de tareas.</li>
+                            <li>Administración y diseño de redes departamentales</li>
+                        </ul>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+
+        <div class="accordion mt-4" id="accordionExample">
+                <div class="card-header" id="headingThree">
+                    <h5 class="mb-0">
+                        <button class="btn btn-link" type="button" data-toggle="collapse" data-target="#collapseThree" aria-expanded="true" aria-controls="collapseThree">
+                            &lt;Aplicaciones&gt;
+                        </button>
+                    </h5>
+                </div>
+
+                <div id="collapseThree" class="collapse show" aria-labelledby="headingThree" data-parent="#accordionExample">
+                    <div class="card-body">
+                        <ul>
+                            <li>Sistemas de Gestion Empresarial - ERPs y CRMs</li>
+                            <li>Empresa e iniciativa emprendedora</li>
+                            <li>Wordpress, Photoshop, Canva, Power BI</li>
+                            <li>Unity</li>
+                        </ul>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+                <div class="accordion mt-4" id="accordionExample">
+                <div class="card-header" id="headingFour">
+                    <h5 class="mb-0">
+                        <button class="btn btn-link" type="button" data-toggle="collapse" data-target="#collapseFour" aria-expanded="true" aria-controls="collapseFour">
+                            &lt;Otros&gt;
+                        </button>
+                    </h5>
+                </div>
+
+                <div id="collapseFour" class="collapse show" aria-labelledby="headingFour" data-parent="#accordionExample">
+                    <div class="card-body">
+                        <ul>
+                            <li>Organización y proyectos de de energia solar fotovoltaica</li>
+                            <li>Robótica con arduino</li>
+                        </ul>
+                    </div>
+                </div>
+            </div>
+        </div>
+    
+    </main>
+    <footer>
+        <div class="footer">
+            <div class="footer">
+                <div>Página realizada íntegramente con código: PHP, JavaScript, HTML y CSS</div>
+                <div id="copyright">copyright</div>
+            </div>
+        </div>
+    </footer>
+
+    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.6/dist/umd/popper.min.js"></script>
+    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
+</body>
+</html>

index.html

@@ -24,7 +24,7 @@
                 <span class="text-primary">{</span>Tatiana Villa <span class="text-primary">}</span>
             </a>
 
-            <!-- Botón móvil -->
+             <!-- Botón móvil -->
             <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#menuNav"
                     aria-controls="menuNav" aria-expanded="false" aria-label="Toggle navigation">
                 <span class="navbar-toggler-icon"></span>
@@ -41,14 +41,14 @@
                     <li class="nav-item">
                         <a class="nav-link" href="proyectos.html">Proyectos</a>
                     </li>
-<!--
-                    <li class="nav-item">
-                        <a class="nav-link" href="formacion.html">Formación</a>
-                    </li>
 
                     <li class="nav-item">
                         <a class="nav-link" href="habilidades.html">Habilidades</a>
                     </li>
+<!--
+                    <li class="nav-item">
+                        <a class="nav-link" href="formacion.html">Formación</a>
+                    </li>
 
                     <li class="nav-item">
                         <a class="nav-link" href="experiencia.html">Experiencia</a>
@@ -68,7 +68,7 @@
     <p class="text-success h5 font-monospace">
         /** <br>
         * Hola, soy Tatiana Villa Ema <!--(<span id="edad"></span> años)--> <br>
-        * Full Stack Developer en construcción constante <br>
+        * Full Stack Developer<br>
         */
     </p>
 
@@ -76,8 +76,8 @@
         <div class="col-md-8">
             <h3 class="text-primary">&lt;sobre-mi&gt;</h3>
             <p>Mi camino en tecnología empezó muy pronto. Desde joven me formé en informática y comencé mi carrera profesional en entornos de alto nivel, trabajando como programadora y administradora de sistemas Unix/Linux para empresas como Hewlett-Packard, Telefónica, Caja Duero, Oracle o Realia. Durante más de una década gestioné infraestructuras críticas, impartí formación técnica y resolví problemas complejos en sistemas Linux y HP-UX, siempre con un enfoque práctico, metódico y orientado a la estabilidad.</p>
-            <p>En 2001 nació mi hija mayor de (<span id="edad-andrea"></span> años) y en 2004 llegaron mis hijos pequeños (<span id="edad-gemelos"></span> años), gemelos. En ese momento decidí priorizar mi familia y hacer una pausa en mi carrera profesional. Fue una etapa importante y necesaria, pero nunca dejé de sentir que la tecnología seguía siendo mi lugar.</p>
+            <p>Cuando nacieron mis hijos decidí priorizar mi familia y hacer una pausa en mi carrera profesional. Fue una etapa importante y necesaria, pero nunca dejé de sentir que la tecnología seguía siendo mi lugar. Ahora mismo mi hija mayor tiene <span id="edad-andrea"></span> años y mis hijos mellizos tienen <span id="edad-gemelos"></span> años.</p>
-            <p>Poco antes de la pandemia intenté reincorporarme al sector, pero por ser persona de riesgo tuve que aislarme. Ese parón inesperado se convirtió en una oportunidad: retomé mi formación desde cero, actualicé mis conocimientos y me abrí a nuevas áreas. Estudié redes, desarrollo web, Java, tecnologías multiplataforma, robótica, diseño 3D y, finalmente, completé el título de Desarrollo de Aplicaciones Multiplataforma (DAM).</p>
+            <p>Poco antes de la pandemia (hace ya <span id="edad-pandemia"></span> años) intenté reincorporarme al sector, pero por ser persona de riesgo tuve que aislarme. Ese parón inesperado se convirtió en una oportunidad: retomé mi formación desde cero, actualicé mis conocimientos y me abrí a nuevas áreas. Estudié redes, desarrollo web, Java, tecnologías multiplataforma, robótica, diseño 3D y, finalmente, completé el título de Desarrollo de Aplicaciones Multiplataforma (DAM).</p>
             <p>Desde entonces he seguido creciendo como desarrolladora Full Stack, reforzando mi base en Java, PHP, JavaScript, HTML y CSS, y ampliando mi camino hacia el ecosistema .NET, DevOps y Cloud.</p>
             <p>Hoy combino mi experiencia en sistemas con mi formación en desarrollo para crear soluciones completas, estables y bien pensadas. Mi trayectoria no es lineal, y precisamente por eso es valiosa: sé cómo funcionan las cosas por dentro, sé cómo construirlas por fuera y sé adaptarme, aprender y reinventarme cuando la vida lo exige.</p>
             
@@ -106,7 +106,7 @@
                 <h5 class="text-info">// Habilidades</h5>
                 
                 <ul class="list-unstyled mb-0">
-                    <li class="mb-2 card-text">Metodologías ágiles, trabajo en equipo, resolución de conflictos</li>
+                    <li class="mb-2 card-text">Trabajo en equipo, resolución de conflictos</li>
                 </ul>
             </div>
         </div>

js/codigo.js

@@ -18,6 +18,9 @@ const fechaNacimientoGemelos = "2004-11-24";
 const edadGemelos = calcularEdad(fechaNacimientoGemelos);
 document.getElementById("edad-gemelos").textContent = edadGemelos;
 
+const fechaPandemia = "2020-03-11";
+const edadPandemia = calcularEdad(fechaPandemia);
+document.getElementById("edad-pandemia").textContent = edadPandemia;
 
 // añade el año actual al pie de página
 document.getElementById("anio").textContent = new Date().getFullYear();

proyectos.html

@@ -39,14 +39,15 @@
                         </a>
                     </li>
 
+                    <li class="nav-item">
+                        <a class="nav-link" href="habilidades.html">Habilidades</a>
+                    </li>
+
 <!--
                     <li class="nav-item">
                         <a class="nav-link" href="formacion.html">Formación</a>
                     </li>
 
-                    <li class="nav-item">
-                        <a class="nav-link" href="habilidades.html">Habilidades</a>
-                    </li>
 
                     <li class="nav-item">
                         <a class="nav-link" href="experiencia.html">Experiencia</a>
@@ -75,18 +76,6 @@
                     </div>
                 </div>
 
-                <div class="col-md-6 col-lg-4">
-                    <div class="card project-card h-100">
-
-                        <div class="card-body">
-                            <h5 class="card-title fw-bold">Portfolio</h5>
-                            <p class="card-text text-muted">Mi portfolio personal donde muestro mis proyectos y habilidades.</p>
-                            <p class="card-text text-muted card-tecnologia">.NET, C#, HTML, CSS, Bootstrap, JavaScript.</p>
-                            <a href="/portfolio/" class="btn-link">Saber más →</a>
-                        </div>
-                    </div>
-                </div>
-
                 <div class="col-md-6 col-lg-4">
                     <div class="card project-card h-100">