diff --git a/css/style.css b/css/style.css
index ca9517b..95a0239 100644
--- a/css/style.css
+++ b/css/style.css
@@ -184,4 +184,11 @@ footer {
     text-decoration: none;
     font-weight: bold;
     transition: 0.3s;
+}
+
+.timeline {
+    background-color: var(--color-tarjeta);
+    border-left: 1px solid var(--color-primario);
+    margin-bottom: 1.5rem;
+    transition: 0.3s;
 }
\ No newline at end of file
diff --git a/eltiempo/servidor/api-weather-reverse.php b/eltiempo/servidor/api-weather-reverse.php
old mode 100755
new mode 100644
diff --git a/eltiempo/servidor/api-weather.php b/eltiempo/servidor/api-weather.php
old mode 100755
new mode 100644
diff --git a/formacion.html b/formacion.html
index a848aa3..ef56947 100644
--- a/formacion.html
+++ b/formacion.html
@@ -13,7 +13,6 @@
     <meta name="author" content="Tatiana Villa">
 
     <link rel="stylesheet" href="css/style.css">
-    <link rel="stylesheet" href="css/timeline.css">
     <script type="text/javascript" src="codigo.js"></script>
 </head>
 <body class="bg-black text-light">
@@ -23,7 +22,7 @@
 
             <!-- 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
+                <span class="text-primary">{</span>Tatiana Villa <span class="text-primary">}</span> Formación
             </a>
 
             <!-- Botón móvil -->
@@ -49,6 +48,7 @@
                         <a class="nav-link" href="habilidades.html">Habilidades</a>
                     </li>
 
+<<<<<<< HEAD
                     <li class="nav-item">
                         <a class="nav-link" href="formacion.html">Formación</a>
                     </li>
@@ -58,6 +58,13 @@
                         <a class="nav-link" href="formacion.html">Formación</a>
                     </li>
 
+=======
+
+                    <li class="nav-item">
+                        <a class="nav-link" href="formacion.html">Formación</a>
+                    </li>
+<!--
+>>>>>>> 5c4ff660dd49607da1d9843160ff7f2bcf7de4b7
 
                     <li class="nav-item">
                         <a class="nav-link" href="experiencia.html">Experiencia</a>
@@ -70,6 +77,7 @@
     </nav>
 </header>
 <main class="container main-content py-5">
+<<<<<<< HEAD
 
    <section class="timeline">
     <h2>Formación</h2>
@@ -114,6 +122,77 @@
     <div class="footer">
         <div class="footer">
             <div>Página realizada íntegramente con código: PHP, JavaScript, HTML y CSS</div>
+=======
+    
+        <div class="accordion mt-4 timeline" 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;programación&gt;
+                        </button>
+                    </h5>
+                </div>
+
+                <div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordionExample">
+                    <div class="card-body">
+                        <ul>
+                            <li>(IFCD0034) Programación con .NET</li>
+                            <li>(IFCT052PO) Gestión de sistemas con VmWare: Virtualización de aplicaciones</li>
+                            <li>(FPGS DAM) Desarrollo de Aplicaciones Multiplataforma</li>
+                            <li>(IFCD0210) Desarrollo de aplicaciones con tecnologías web</li>
+                            
+                        </ul>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+         <div class="accordion mt-4 timeline" 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, ... )</li>
+                            <li>(IFCT0410) Administración y diseño de redes departamentales</li>
+                        </ul>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        <div class="accordion mt-4 timeline" 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>(ENAE0508) Organización y proyectos de instalaciones solares fotovoltaicas</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>
+>>>>>>> 5c4ff660dd49607da1d9843160ff7f2bcf7de4b7
                 <div id="copyright">copyright</div>
             </div>
         </div>
diff --git a/formula1/css/estilos.css b/formula1/css/estilos.css
new file mode 100644
index 0000000..3fe582a
--- /dev/null
+++ b/formula1/css/estilos.css
@@ -0,0 +1,74 @@
+:root {
+            --f1-red: #a00000;
+            --dark-bg: #15151e;
+            --card-bg: #1f1f27;
+            --text: #ffffff;
+            --border-color: #38383f;
+            --titulo-color: #ff4c4c;
+        }
+
+        body {
+            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+            background-color: var(--dark-bg);
+            color: var(--text);
+            margin: 0;
+            padding: 20px;
+        }
+
+        header {
+            padding-bottom: 10px;
+            margin-bottom: 30px;
+            text-align: center;
+            color: var(--titulo-color);
+        }
+
+        .dashboard {
+            display: grid;
+            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+            gap: 20px;
+        }
+
+        .stat-card {
+            background-color: var(--card-bg);
+            padding: 20px;
+            border-radius: 10px;
+            border-left: 4px solid var(--f1-red);
+        }
+
+        table {
+            width: 100%;
+            border-collapse: collapse;
+            margin-top: 10px;
+        }
+
+        th, td {
+            text-align: left;
+            padding: 8px;
+            border-bottom: 1px solid var(--border-color);
+        }
+
+        th { 
+            color: var(--titulo-color); 
+            font-size: 0.8rem; 
+            text-transform: uppercase; 
+        }
+
+        .pos { 
+            font-weight: bold; 
+            color: var(--f1-red); 
+        }
+
+        .cuenta-atras { 
+            margin-bottom: 15px; 
+            text-align: center; 
+            border-bottom: 4px solid var(--f1-red);
+        }
+
+        #countdown { 
+            font-size: 2rem; 
+            font-weight: bold; 
+            letter-spacing: 2px; 
+        }
+
+
+        
\ No newline at end of file
diff --git a/formula1/css/f1.css b/formula1/css/f1.css
new file mode 100644
index 0000000..3fe582a
--- /dev/null
+++ b/formula1/css/f1.css
@@ -0,0 +1,74 @@
+:root {
+            --f1-red: #a00000;
+            --dark-bg: #15151e;
+            --card-bg: #1f1f27;
+            --text: #ffffff;
+            --border-color: #38383f;
+            --titulo-color: #ff4c4c;
+        }
+
+        body {
+            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+            background-color: var(--dark-bg);
+            color: var(--text);
+            margin: 0;
+            padding: 20px;
+        }
+
+        header {
+            padding-bottom: 10px;
+            margin-bottom: 30px;
+            text-align: center;
+            color: var(--titulo-color);
+        }
+
+        .dashboard {
+            display: grid;
+            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+            gap: 20px;
+        }
+
+        .stat-card {
+            background-color: var(--card-bg);
+            padding: 20px;
+            border-radius: 10px;
+            border-left: 4px solid var(--f1-red);
+        }
+
+        table {
+            width: 100%;
+            border-collapse: collapse;
+            margin-top: 10px;
+        }
+
+        th, td {
+            text-align: left;
+            padding: 8px;
+            border-bottom: 1px solid var(--border-color);
+        }
+
+        th { 
+            color: var(--titulo-color); 
+            font-size: 0.8rem; 
+            text-transform: uppercase; 
+        }
+
+        .pos { 
+            font-weight: bold; 
+            color: var(--f1-red); 
+        }
+
+        .cuenta-atras { 
+            margin-bottom: 15px; 
+            text-align: center; 
+            border-bottom: 4px solid var(--f1-red);
+        }
+
+        #countdown { 
+            font-size: 2rem; 
+            font-weight: bold; 
+            letter-spacing: 2px; 
+        }
+
+
+        
\ No newline at end of file
diff --git a/formula1/index.html b/formula1/index.html
new file mode 100644
index 0000000..3acacc6
--- /dev/null
+++ b/formula1/index.html
@@ -0,0 +1,90 @@
+<!DOCTYPE html>
+<html lang="es">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+<<<<<<< HEAD
+    <title>Estadísticas F1</title>
+    <link rel="stylesheet" href="css/estilos.css">
+=======
+    <title>F1 Stats Pro - Panel de Control</title>
+    <link rel="stylesheet" href="css/f1.css">
+>>>>>>> 658e2fe3b0adeb6a1d7dc50826d2f2693462a09c
+</head>
+<body>
+
+    <header>
+        <h1>Estadísticas F1</h1>
+<<<<<<< HEAD
+        <h2  style="color: #bbbb00; border: 1px solid #bbbb00; padding: 10px; border-radius: 5px; width: fit-content; text-align: center;">PÁGINA EN CONSTRUCCIÓN</h2>
+    </header>
+
+    <section class="stat-card cuenta-atras">
+    <h3> Cuenta atrás para el GP de Australia 2026</h3>
+=======
+    </header>
+
+    <section class="stat-card cuenta-atras">
+    <h3 > Cuenta atrás para el GP de Australia 2026</h3>
+>>>>>>> 658e2fe3b0adeb6a1d7dc50826d2f2693462a09c
+    <div id="countdown">
+        00d 00h 00m 00s
+    </div>
+</section>
+
+    <main class="dashboard">
+        <section class="stat-card">
+            <h3 id="session-info">Pilotos</h3>
+            <table id="pilotos-table">
+                    <thead>
+                        <tr>
+                            <th>#</th>
+<<<<<<< HEAD
+                            <th>Código</th>
+                            <th>Nombre</th>
+                            <th>Apellido</th>
+                            <th>Escuderia</th>
+                            <th>Nacionalidad</th>
+                            
+=======
+                            <th>Nombre</th>
+                            <th>Apellido</th>
+                            <th>Equipo</th>
+                            <th>Nacionalidad</th>
+                            <th>Código</th>
+>>>>>>> 658e2fe3b0adeb6a1d7dc50826d2f2693462a09c
+                        </tr>
+                    </thead>
+                    <tbody>
+                        <!-- Aquí se llenarán los pilotos -->
+                    </tbody>
+                </table>
+        </section>
+<<<<<<< HEAD
+            
+    </main>
+
+    <script src="js/codigo.js"></script>
+=======
+            <section class="stat-card">
+                <h3 id="session-info">Equipos</h3>
+                <table id="equipos-table">
+                        <thead>
+                            <tr>
+                                <th>#</th>
+                                <th>Nombre</th>
+                                <th>País</th>
+                                <th>Fundación</th>
+                            </tr>
+                        </thead>
+                        <tbody>
+                            <!-- Aquí se llenarán los equipos -->
+                        </tbody>
+                    </table>
+        </section>
+    </main>
+
+    <script src="js/f1.js"></script>
+>>>>>>> 658e2fe3b0adeb6a1d7dc50826d2f2693462a09c
+</body>
+</html>
\ No newline at end of file
diff --git a/formula1/js/codigo.js b/formula1/js/codigo.js
new file mode 100644
index 0000000..8390e0e
--- /dev/null
+++ b/formula1/js/codigo.js
@@ -0,0 +1,126 @@
+// ===============================
+// FUNCIONES DE CONSULTA API
+// ===============================
+
+// Obtener calendario completo de la temporada actual
+async function obtenerCalendario() {
+    try {
+        const response = await fetch("https://api.jolpi.ca/ergast/f1/current.json");
+        const data = await response.json();
+        const carreras = data.MRData.RaceTable.Races;
+        return carreras;
+    } catch (error) {
+        console.error("Error al obtener calendario:", error);
+        return [];
+    }
+}
+
+// Encontrar la siguiente carrera
+function encontrarSiguienteCarrera(carreras) {
+    const ahora = new Date();
+    for (let carrera of carreras) {
+        const fecha = new Date(`${carrera.date}T${carrera.time || '00:00:00Z'}`);
+        if (fecha > ahora) {
+            return { ...carrera, fecha };
+        }
+    }
+    return null;
+}
+
+// ===============================
+// CUENTA ATRÁS DINÁMICA
+// ===============================
+function iniciarCuentaAtras(fechaCarrera) {
+    const countdown = document.getElementById("countdown");
+
+    function actualizar() {
+        const ahora = new Date();
+        const diff = fechaCarrera - ahora;
+
+        if (diff <= 0) {
+            countdown.textContent = "🏁 ¡La carrera empezó!";
+            return;
+        }
+
+        const dias = Math.floor(diff / (1000 * 60 * 60 * 24));
+        const horas = Math.floor((diff / (1000 * 60 * 60)) % 24);
+        const minutos = Math.floor((diff / (1000 * 60)) % 60);
+        const segundos = Math.floor((diff / 1000) % 60);
+
+        countdown.textContent = `${dias}d ${horas}h ${minutos}m ${segundos}s`;
+    }
+
+    actualizar();
+    setInterval(actualizar, 1000);
+}
+
+// ===============================
+// PILOTOS
+// ===============================
+async function cargarPilotos() {
+    try {
+        const response = await fetch('/f1/api/pilotos');
+        const pilotos = await response.json();
+        const tbody = document.querySelector('#pilotos-table tbody');
+
+        tbody.innerHTML = ''; // Limpiamos antes de rellenar
+
+        pilotos.forEach(p => {
+            const fila = document.createElement('tr');
+            fila.innerHTML = `
+                <td>${p.numero}</td>
+                <td>${p.codigo}</td>
+                <td>${p.nombre}</td>
+                <td>${p.apellido}</td>
+                <td>${p.escuderia || '-'}</td>
+                <td>${p.nacionalidad}</td>
+            `;
+            tbody.appendChild(fila);
+        });
+    } catch (error) {
+        console.error('Error cargando pilotos:', error);
+        const tbody = document.querySelector('#pilotos-table tbody');
+        tbody.innerHTML = `<tr><td colspan="6">No se pudieron cargar los pilotos</td></tr>`;
+    }
+}
+
+// ===============================
+// INIT PRINCIPAL
+// ===============================
+async function init() {
+    // 1) Obtener calendario
+    const carreras = await obtenerCalendario();
+
+    // 2) Calcular siguiente evento
+    const proxima = encontrarSiguienteCarrera(carreras);
+
+    if (!proxima) {
+        document.getElementById("countdown").textContent =
+            "No hay próximos Grandes Premios este año";
+        return;
+    }
+
+    // 3) Mostrar nombre de la próxima carrera
+    document.querySelector(".cuenta-atras h3").textContent =
+        `Cuenta atrás para el GP de ${proxima.raceName}`;
+
+    // 4) Iniciar cuenta atrás
+    iniciarCuentaAtras(proxima.fecha);
+
+    // 5) Indicar modo carrera o pronóstico
+    const ahora = new Date();
+    if (ahora >= proxima.fecha) {
+        document.getElementById("session-info").textContent =
+            "Modo carrera — datos en vivo o resultados";
+    } else {
+        document.getElementById("session-info").textContent =
+            `Próxima sesión de ${proxima.raceName}`;
+    }
+
+// Cargar pilotos al inicio y cada minuto
+cargarPilotos();
+setInterval(() => { cargarPilotos(); }, 60000);
+}
+
+// Arrancar todo al cargar la página
+document.addEventListener("DOMContentLoaded", init);
\ No newline at end of file
diff --git a/formula1/js/f1.js b/formula1/js/f1.js
new file mode 100644
index 0000000..3800599
--- /dev/null
+++ b/formula1/js/f1.js
@@ -0,0 +1,155 @@
+// ===============================
+// FUNCIONES DE CONSULTA API
+// ===============================
+
+// Obtener calendario completo de la temporada actual
+async function obtenerCalendario() {
+    try {
+        const response = await fetch("https://api.jolpi.ca/ergast/f1/current.json");
+        const data = await response.json();
+        const carreras = data.MRData.RaceTable.Races;
+        return carreras;
+    } catch (error) {
+        console.error("Error al obtener calendario:", error);
+        return [];
+    }
+}
+
+// Encontrar la siguiente carrera
+function encontrarSiguienteCarrera(carreras) {
+    const ahora = new Date();
+    for (let carrera of carreras) {
+        const fecha = new Date(`${carrera.date}T${carrera.time || '00:00:00Z'}`);
+        if (fecha > ahora) {
+            return { ...carrera, fecha };
+        }
+    }
+    return null;
+}
+
+// ===============================
+// CUENTA ATRÁS DINÁMICA
+// ===============================
+function iniciarCuentaAtras(fechaCarrera) {
+    const countdown = document.getElementById("countdown");
+
+    function actualizar() {
+        const ahora = new Date();
+        const diff = fechaCarrera - ahora;
+
+        if (diff <= 0) {
+            countdown.textContent = "🏁 ¡La carrera empezó!";
+            return;
+        }
+
+        const dias = Math.floor(diff / (1000 * 60 * 60 * 24));
+        const horas = Math.floor((diff / (1000 * 60 * 60)) % 24);
+        const minutos = Math.floor((diff / (1000 * 60)) % 60);
+        const segundos = Math.floor((diff / 1000) % 60);
+
+        countdown.textContent = `${dias}d ${horas}h ${minutos}m ${segundos}s`;
+    }
+
+    actualizar();
+    setInterval(actualizar, 1000);
+}
+
+// ===============================
+// PILOTOS
+// ===============================
+async function cargarPilotos() {
+    try {
+        const response = await fetch('/f1/api/pilotos');
+        const pilotos = await response.json();
+        const tbody = document.querySelector('#pilotos-table tbody');
+
+        tbody.innerHTML = ''; // Limpiamos antes de rellenar
+
+        pilotos.forEach(p => {
+            const fila = document.createElement('tr');
+            fila.innerHTML = `
+                <td>${p.numero}</td>
+                <td>${p.nombre}</td>
+                <td>${p.apellido}</td>
+                <td>${p.equipo || '-'}</td>
+                <td>${p.nacionalidad}</td>
+                <td>${p.codigo}</td>
+            `;
+            tbody.appendChild(fila);
+        });
+    } catch (error) {
+        console.error('Error cargando pilotos:', error);
+        const tbody = document.querySelector('#pilotos-table tbody');
+        tbody.innerHTML = `<tr><td colspan="6">No se pudieron cargar los pilotos</td></tr>`;
+    }
+}
+
+// ===============================
+// ESCUDERÍAS
+// ===============================
+async function cargarEscuderias() {
+    try {
+        const response = await fetch('/f1/api/escuderias');
+        const escuderias = await response.json();
+        const tbody = document.querySelector('#escuderias-table tbody');
+
+        tbody.innerHTML = ''; // Limpiamos tabla
+
+        escuderias.forEach(e => {
+            const fila = document.createElement('tr');
+            fila.innerHTML = `
+                <td>${e.nombre}</td>
+                <td>${e.pais}</td>
+                <td>${e.motor}</td>
+            `;
+            tbody.appendChild(fila);
+        });
+    } catch (error) {
+        console.error('Error cargando escuderías:', error);
+        const tbody = document.querySelector('#escuderias-table tbody');
+        tbody.innerHTML = `<tr><td colspan="4">No se pudieron cargar las escuderías</td></tr>`;
+    }
+}
+
+
+// ===============================
+// INIT PRINCIPAL
+// ===============================
+async function init() {
+    // 1) Obtener calendario
+    const carreras = await obtenerCalendario();
+
+    // 2) Calcular siguiente evento
+    const proxima = encontrarSiguienteCarrera(carreras);
+
+    if (!proxima) {
+        document.getElementById("countdown").textContent =
+            "No hay próximos Grandes Premios este año";
+        return;
+    }
+
+    // 3) Mostrar nombre de la próxima carrera
+    document.querySelector(".cuenta-atras h3").textContent =
+        `Cuenta atrás para el GP de ${proxima.raceName}`;
+
+    // 4) Iniciar cuenta atrás
+    iniciarCuentaAtras(proxima.fecha);
+
+    // 5) Indicar modo carrera o pronóstico
+    const ahora = new Date();
+    if (ahora >= proxima.fecha) {
+        document.getElementById("session-info").textContent =
+            "Modo carrera — datos en vivo o resultados";
+    } else {
+        document.getElementById("session-info").textContent =
+            `Próxima sesión de ${proxima.raceName}`;
+    }
+
+// Cargar pilotos y escuderías al inicio y cada minuto
+cargarPilotos();
+cargarEscuderias();
+setInterval(() => { cargarPilotos(); cargarEscuderias(); }, 60000);
+}
+
+// Arrancar todo al cargar la página
+document.addEventListener("DOMContentLoaded", init);
\ No newline at end of file
diff --git a/formula1/pilotos.html b/formula1/pilotos.html
new file mode 100644
index 0000000..dec6c90
--- /dev/null
+++ b/formula1/pilotos.html
@@ -0,0 +1,47 @@
+<!DOCTYPE html>
+<html lang="es">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Pilotos de F1</title>
+    <style>
+        body {
+            font-family: Arial, sans-serif;
+            background-color: #f7f7f7;
+            padding: 20px;
+        }
+        h1 {
+            text-align: center;
+            color: #333;
+        }
+        table {
+            margin: 0 auto;
+            border-collapse: collapse;
+            width: 90%;
+            max-width: 800px;
+            background-color: white;
+            box-shadow: 0 2px 5px rgba(0,0,0,0.1);
+        }
+        th, td {
+            padding: 10px 15px;
+            border: 1px solid #ddd;
+            text-align: center;
+        }
+        th {
+            background-color: #004080;
+            color: white;
+        }
+        tr:nth-child(even) {
+            background-color: #f2f2f2;
+        }
+        tr:hover {
+            background-color: #cce0ff;
+        }
+    </style>
+</head>
+<body>
+    <h1>Pilotos de F1</h1>
+   
+
+</body>
+</html>
\ No newline at end of file
diff --git a/habilidades.html b/habilidades.html
index 9031c83..0d8fb4e 100644
--- a/habilidades.html
+++ b/habilidades.html
@@ -22,7 +22,7 @@
 
             <!-- 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
+                <span class="text-primary">{</span>Tatiana Villa <span class="text-primary">}</span> Habilidades
             </a>
 
             <!-- Botón móvil -->
@@ -52,8 +52,13 @@
                     <li class="nav-item">
                         <a class="nav-link" href="formacion.html">Formación</a>
                     </li>
+<<<<<<< HEAD
 <!--
 
+=======
+
+<!--
+>>>>>>> 5c4ff660dd49607da1d9843160ff7f2bcf7de4b7
                     <li class="nav-item">
                         <a class="nav-link" href="experiencia.html">Experiencia</a>
                     </li>
diff --git a/index.html b/index.html
index 9f4730b..a9a27cb 100644
--- a/index.html
+++ b/index.html
@@ -1,103 +1,132 @@
 <!DOCTYPE html>
 <html lang="es">
 <head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Aplicaciones de Vanguardia</title>
-    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Tatiana Villa</title>
+    <link rel="icon" href="img/tatianalogo.png" type="image/x-icon">
+    <!-- Estilos -->
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
     <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;700&display=swap" rel="stylesheet">
+    <link rel="stylesheet" href="css/sobremi.css">
     <link rel="stylesheet" href="css/style.css">
-    <link rel="icon" href="favicon.ico" type="image/x-icon">
 </head>
+
 <body class="bg-black text-light">
 
-   <!-- Header -->
+<!-- Header -->
 <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>Aplicaciones de Vanguardia <span class="text-primary">}</span>
+                <span class="text-primary">{</span>Tatiana Villa <span class="text-primary">}</span>
             </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>
+                    </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>
 
-    <section id="proyectos" class="py-5">
-        <div class="container py-5">
-            <h2 class="section-title mb-5">Proyectos en desarrollo</h2>
+<!-- Main Content -->
+
+<main class="container main-content py-5">
+
+    <p class="text-success h5 font-monospace">
+        /** <br>
+        * Hola, soy Tatiana Villa Ema <!--(<span id="edad"></span> años)--> <br>
+        * Full Stack Developer<br>
+        */
+    </p>
+
+    <div class="row mt-4">
+        <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 <span class="habilidad">sistemas Unix/Linux</span> para empresas como <span class="empresa">Hewlett-Packard, Telefónica, Caja Duero, Oracle o Realia</span>. Durante más de una década gestioné infraestructuras críticas, impartí formación técnica y resolví problemas complejos en <span class="habilidad"> Linux y HP-UX</span>, siempre con un enfoque práctico, metódico y orientado a la estabilidad.</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 (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é <span class="curso">Administracion y diseño de redes departamentales</span>,<span class="curso"> desarrollo de aplicaciones web</span>, <span class="curso">robótica con arduino</span>, <span class="curso">diseño 3D</span> y, finalmente, completé el título de <span class="curso">FPGS Desarrollo de Aplicaciones Multiplataforma (DAM)</span>.</p>
+            <p>Desde entonces he seguido creciendo como desarrolladora Full Stack, reforzando mi base en <span class="habilidad">Java, PHP, JavaScript, HTML, CSS, Spring, Hibernate, MySQL, .NET</span>, <span class="habilidad">DevOps</span> y <span class="habilidad">Cloud</span>.</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>
             
-            <div class="row g-4">
-                <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">Recursos Católicos</h5>
-                            <p class="card-text text-muted">Web de recursos católicos gratuitos (Rosario, oraciones, etc.).</p>
-                            <p class="card-text text-muted card-tecnologia">HTML, CSS, Bootstrap, JavaScript, PHP, SQL, XML, JSON.</p>
-                            <a href="https://recursos-catolicos.es" class="btn-link">Saber más →</a>
-                        </div>
-                    </div>
-                </div>
+            <h3 class="text-primary">&lt;/sobre-mi&gt;</h3>
+        </div>
 
-                <div class="col-md-6 col-lg-4">
-                    <div class="card project-card h-100">
+        <div class="col-md-4">
+            <div class="card bg-dark border-secondary p-3 shadow">
+                <h5 class="text-info">// Conocimientos</h5>
+                
+                <ul class="list-unstyled mb-0">
+                    <li class="mb-2 card-text">Java, Spring, Hibernate</li>
+                    <li class="mb-2 card-text">PHP, JavaScript, HTML, CSS, Bootstrap</li> 
+                    <li class="mb-2 card-text">C#, .NET, SQL, Docker</li>
+                    <li class="mb-2 card-text">Linux, HP-UX, DevOps, VMware</li>
+                    <li class="mb-2 card-text">Cloud (Azure)</li>
+                    <li class="mb-2 card-text">Diseño 3D, robótica con Arduino</li>
+                    <li class="mb-2 card-text">Desarrollo de videojuegos con Unity</li>
 
-                        <div class="card-body">
-                            <h5 class="card-title fw-bold">El Tiempo</h5>
-                            <p class="card-text text-muted">Guardo los datos del tiempo de 3 ciudades españolas que me interesan (Madrid, L'Ampolla (Tarragona), L'Alfas del Pi (Alicante)) con fines estadísticos. </p>
-                            <p class="card-text text-muted card-tecnologia">PHP, MySQL, HTML, CSS, JavaScript.</p>
-                            <a href="eltiempo/index.html" 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">
-
-                        <div class="card-body">
-                            <h5 class="card-title fw-bold">Oposiciones</h5>
-                            <p class="card-text text-muted">Temario y cuestionarios para TAI AGE</p>
-                            <p class="card-text text-muted card-tecnologia">HTML, CSS</p>
-                            <a href="oposiciones/index.html" 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">
-
-                        <div class="card-body">
-                            <h5 class="card-title fw-bold">Piedra, Papel o Tijera</h5>
-                            <p class="card-text text-muted">El famoso juego Piedra, Papel o Tijera.</p>
-                            <p class="card-text text-muted card-tecnologia">HTML, CSS, JavaScript y optimizado para dispositivos móviles.</p>
-                            <a href="piedra-papel-tijera.html" 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">
-
-                        <div class="card-body">
-                            <h5 class="card-title fw-bold">F1</h5>
-                            <p class="card-text text-muted">Pronosticos, estadisticas, resultados y noticias de Fórmula 1.</p>
-                            <p class="card-text text-muted card-tecnologia">HTML, CSS, JavaScript y optimizado para dispositivos móviles.</p>
-                            <a href="f1.html" class="btn-link">Saber más →</a>
-                        </div>
-                    </div>
-                </div>
+                </ul>
             </div>
         </div>
-    </section>
 
-    <footer class="py-5 text-center">
-        <div class="container">
-            <p class="mb-0">&copy; 2026 - Tatiana Villa</p>
+        <div class="col-md-4">
+            <div class="card bg-dark border-secondary p-3 shadow">
+                <h5 class="text-info">// Habilidades</h5>
+                
+                <ul class="list-unstyled mb-0">
+                    <li class="mb-2 card-text">Trabajo en equipo, resolución de conflictos</li>
+                </ul>
+            </div>
         </div>
-    </footer>
+    </div>
+
+</main>
+
+ <footer class="py-5 text-center">
+        <div class="container">
+            <p class="mb-0">&copy; <span id="anio"></span> - Tatiana Villa</p>
+        </div>
+</footer>
+
+<!--
+<script>
+    document.getElementById("anio").textContent = new Date().getFullYear();
+</script>
+-->
+<script src="js/codigo.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
 
-    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
 </body>
 </html>
diff --git a/proyectos.html b/proyectos.html
new file mode 100644
index 0000000..7d7f790
--- /dev/null
+++ b/proyectos.html
@@ -0,0 +1,148 @@
+<!DOCTYPE html>
+<html lang="es">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Aplicaciones de Vanguardia</title>
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;700&display=swap" rel="stylesheet">
+    <link rel="stylesheet" href="css/style.css">
+    <link rel="icon" href="favicon.ico" type="image/x-icon">
+</head>
+<body class="bg-black text-light">
+
+   <!-- Header -->
+<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>Aplicaciones de Vanguardia <span class="text-primary">}</span>
+            </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>
+                    </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>
+
+    <section id="proyectos" class="py-5">
+        <div class="container py-5">
+            <h2 class="section-title mb-5">Proyectos en desarrollo</h2>
+            
+            <div class="row g-4">
+                <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">Recursos Católicos</h5>
+                            <p class="card-text text-muted">Web de recursos católicos gratuitos (Rosario, oraciones, etc.).</p>
+                            <p class="card-text text-muted card-tecnologia">HTML, CSS, Bootstrap, JavaScript, PHP, SQL, XML, JSON.</p>
+                            <a href="https://recursos-catolicos.es" 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">
+                        <div class="card-body">
+                            <h5 class="card-title fw-bold">El Tiempo</h5>
+                            <p class="card-text text-muted">Guardo los datos del tiempo de 3 ciudades españolas que me interesan (Madrid, L'Ampolla (Tarragona), L'Alfas del Pi (Alicante)) con fines estadísticos. </p>
+                            <p class="card-text text-muted card-tecnologia">PHP, MySQL, HTML, CSS, JavaScript.</p>
+                            <a href="eltiempo/index.html" 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">
+
+                        <div class="card-body">
+                            <h5 class="card-title fw-bold">Formula 1</h5>
+                            <p class="card-text text-muted">Web de estadísticas de Fórmula 1.</p>
+                            <p class="card-text text-muted card-tecnologia">Java, Spring, Hibernate, JPA, MySQL, HTML, CSS, JavaScript.</p>
+                            <a href="formula1/index.html" 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">
+
+                        <div class="card-body">
+                            <h5 class="card-title fw-bold">Oposiciones</h5>
+                            <p class="card-text text-muted">Temario y cuestionarios para TAI AGE</p>
+                            <p class="card-text text-muted card-tecnologia">HTML, CSS</p>
+                            <a href="oposiciones/index.html" 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">
+
+                        <div class="card-body">
+                            <h5 class="card-title fw-bold">Piedra, Papel o Tijera</h5>
+                            <p class="card-text text-muted">El famoso juego Piedra, Papel o Tijera.</p>
+                            <p class="card-text text-muted card-tecnologia">HTML, CSS, JavaScript y optimizado para dispositivos móviles.</p>
+                            <a href="piedra-papel-tijera.html" 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">
+
+                        <div class="card-body">
+                            <h5 class="card-title fw-bold">F1</h5>
+                            <p class="card-text text-muted">Pronosticos, estadisticas, resultados y noticias de Fórmula 1.</p>
+                            <p class="card-text text-muted card-tecnologia">HTML, CSS, JavaScript y optimizado para dispositivos móviles.</p>
+                            <a href="f1.html" class="btn-link">Saber más →</a>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </section>
+
+    <footer class="py-5 text-center">
+        <div class="container">
+            <p class="mb-0">&copy; 2026 - Tatiana Villa</p>
+        </div>
+    </footer>
+
+    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
+</body>
+</html>
