diff --git a/css/sobremi.css b/css/sobremi.css
new file mode 100644
index 0000000..47ddf19
--- /dev/null
+++ b/css/sobremi.css
@@ -0,0 +1,147 @@
+/* 1. CONFIGURACIÓN DEL TEMA OSCURO (VS CODE) */
+:root {
+    --bg-vs: #1e1e1e; /* Fondo principal */
+    --bg-nav: #252526; /* Fondo de barra de navegación */
+    --bg-card: #2d2d2d; /* Fondo de tarjetas/secciones */
+    --keyword: #569cd6; /* Azul C# (clases/palabras clave) */
+    --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 */
+}
+
+/* Forzar fondo oscuro en toda la web */
+html, body {
+    background-color: var(--bg-vs) !important;
+    color: var(--text);
+    font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
+    margin: 0;
+    padding: 0;
+    height: 100%;
+}
+
+/* 2. AJUSTES DE BOOTSTRAP PARA MODO OSCURO */
+.navbar, .bg-dark, .footer {
+    background-color: var(--bg-nav) !important;
+}
+
+.container {
+    background-color: transparent !important;
+}
+
+/* 3. CABECERA Y FOTO */
+.header-presentacion {
+    display: flex;
+    align-items: center;
+    gap: 2rem;
+}
+
+.perfil-foto {
+    width: 140px;
+    height: 140px;
+    border-radius: 20%; /* Estilo 'squircle' moderno */
+    object-fit: cover;
+    border: 2px solid var(--border-editor);
+    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
+}
+
+/* 4. ESTILOS DE CÓDIGO (COLORES) */
+.text-primary {
+    color: var(--keyword) !important;
+}
+
+.text-info {
+    color: var(--var-name) !important;
+}
+
+.text-warning {
+    color: var(--string) !important;
+}
+
+.text-success {
+    color: var(--comment) !important;
+}
+
+.text-secondary {
+    color: #808080 !important;
+}
+/* Para las llaves { } */
+
+/* 5. SECCIÓN DE CONTACTO */
+.contacto-code-style a {
+    transition: all 0.2s;
+}
+
+.contacto-code-style a:hover {
+    color: var(--keyword) !important;
+    text-decoration: underline !important;
+}
+
+/* 6. LÍNEA LATERAL DEL EDITOR (RenderBody) */
+.border-start.border-primary {
+    border-color: var(--keyword) !important;
+    border-width: 4px !important;
+}
+
+/* 7. ACORDEÓN / SECCIONES DE HABILIDADES */
+.section-cv {
+    background-color: var(--bg-card);
+    border: 1px solid var(--border-editor);
+    border-radius: 4px;
+    margin-bottom: 1rem;
+    overflow: hidden;
+}
+
+.section-title {
+    width: 100%;
+    background-color: #333333;
+    color: var(--keyword);
+    padding: 1rem;
+    border: none;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    cursor: pointer;
+    font-family: inherit;
+    font-size: 1rem;
+}
+
+.section-title:hover {
+    background-color: #3c3c3c;
+}
+
+.section-content {
+    padding: 0 1rem;
+    max-height: 0;
+    overflow: hidden;
+    transition: all 0.3s ease-out;
+    background-color: var(--bg-vs);
+}
+
+/* Clase que añade el JS para abrir el acordeón */
+.section-content.is-visible {
+    padding: 1.5rem;
+    max-height: 1000px;
+}
+
+/* 8. BARRAS DE PROGRESO (Skills) */
+.progress-bar-container {
+    height: 10px;
+    background-color: #3e3e42;
+    border-radius: 5px;
+    margin: 10px 0;
+}
+
+.progress-bar-fill {
+    height: 100%;
+    background-color: var(--keyword);
+    box-shadow: 0 0 10px rgba(86, 156, 214, 0.3);
+    transition: width 1s ease-in-out;
+}
+
+/* 9. FOOTER */
+footer {
+    border-top: 1px solid var(--border-editor);
+    padding: 1.5rem 0;
+}
diff --git a/css/style.css b/css/style.css
index 258e1ef..b0dcb80 100644
--- a/css/style.css
+++ b/css/style.css
@@ -1,13 +1,13 @@
 /* Variables de tus colores */
 :root {
-    --primary-blue: #0054a4;
+/*    --primary-blue: #0054a4;
     --medium-blue: #286291;
     --dark-blue: #1a3668;
     --light-blue: #a4d7f4;
     --accent-orange: #ff9900;
     --light-gold: #ffc24a;
-    --bg-dark: #0f172a; /* Fondo muy oscuro para contraste */
-    --gray: #acb3bf;
+    --bg-dark: #0f172a; 
+    */
 
     /* Paleta de el tiempo */
     --color-primario: #F5F5F5;   
@@ -19,12 +19,13 @@
     --sombra: rgba(47, 58, 86, 0.15);
     --color-tarjeta: #1A1A1A;
     --color-acento: #5FAEDB;
+     --gray: #acb3bf;
     --color-borde: rgba(95, 174, 219, 0.3);
     --color-cabecera: rgba(0,0,0,0.80);
 }
 
 body {
-    font-family: Roboto, 'Inter', sans-serif;
+    font-family: Consolas, 'Roboto', 'Inter', sans-serif;
     background-color: var(--color-fondo);
     color: var(--color-texto);
 }
diff --git a/img/email.svg b/img/email.svg
new file mode 100644
index 0000000..9e5e672
--- /dev/null
+++ b/img/email.svg
@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+  <path d="M4 4h16v16H4z"></path>
+  <polyline points="22,6 12,13 2,6"></polyline>
+</svg>
diff --git a/img/foto-perfil copy.png b/img/foto-perfil copy.png
new file mode 100644
index 0000000..87ff949
Binary files /dev/null and b/img/foto-perfil copy.png differ
diff --git a/img/foto-perfil.png b/img/foto-perfil.png
new file mode 100644
index 0000000..87ff949
Binary files /dev/null and b/img/foto-perfil.png differ
diff --git a/img/github.svg b/img/github.svg
new file mode 100644
index 0000000..8c78f40
--- /dev/null
+++ b/img/github.svg
@@ -0,0 +1,21 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white">
+  <path d="M12 .5C5.73.5.5 5.73.5 12c0 5.1 3.29 9.42 7.86 10.95.57.1.78-.25.78-.56
+  0-.28-.01-1.02-.02-2-3.2.7-3.88-1.54-3.88-1.54-.53-1.34-1.3-1.7-1.3-1.7
+  -1.06-.72.08-.71.08-.71 1.17.08 1.78 1.2 1.78 1.2
+  1.04 1.78 2.73 1.27 3.4.97.1-.75.4-1.27.72-1.56
+  -2.55-.29-5.23-1.27-5.23-5.67
+  0-1.25.45-2.27 1.2-3.07
+  -.12-.29-.52-1.45.12-3.03
+  0 0 .97-.31 3.18 1.17
+  .92-.26 1.9-.39 2.88-.39
+  .98 0 1.96.13 2.88.39
+  2.2-1.48 3.18-1.17 3.18-1.17
+  .64 1.58.24 2.74.12 3.03
+  .75.8 1.2 1.82 1.2 3.07
+  0 4.41-2.69 5.38-5.25 5.66
+  .42.36.79 1.08.79 2.18
+  0 1.57-.02 2.83-.02 3.22
+  0 .31.2.67.79.56
+  4.57-1.53 7.86-5.85 7.86-10.95
+  C23.5 5.73 18.27.5 12 .5z"></path>
+</svg>
diff --git a/img/linkedin.svg b/img/linkedin.svg
new file mode 100644
index 0000000..44e8309
--- /dev/null
+++ b/img/linkedin.svg
@@ -0,0 +1,12 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white">
+  <path d="M4.98 3.5C4.98 5 3.77 6.2 2.25 6.2
+  .73 6.2-.48 5-.48 3.5
+  -.48 2 0.73.8 2.25.8
+  3.77.8 4.98 2 4.98 3.5z"></path>
+  <path d="M.5 8.5h3.5V23H.5z"></path>
+  <path d="M8.5 8.5h3.4v2h.05
+  c.47-.9 1.6-2 3.3-2
+  3.53 0 4.18 2.32 4.18 5.34V23h-3.5v-6.6
+  c0-1.57-.03-3.6-2.2-3.6
+  -2.2 0-2.54 1.72-2.54 3.5V23h-3.5z"></path>
+</svg>
diff --git a/img/logo.png b/img/logo.png
new file mode 100644
index 0000000..7549823
Binary files /dev/null and b/img/logo.png differ
diff --git a/index.html b/index.html
index 904e05b..ff32353 100644
--- a/index.html
+++ b/index.html
@@ -1,110 +1,129 @@
 <!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 - Sobre mí</title>
+
+    <!-- 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">
 </head>
-<body>
 
-    <nav class="navbar navbar-expand-lg sticky-top">
-        <div class="container">
-            <a class="navbar-brand" href="#">Aplicaciones de Vanguardia</a>
-            <div class="ms-auto">
-                <a href="#proyectos" class="nav-link d-inline-block me-3">Proyectos</a>
-                <a href="#sobre-mi" class="nav-link d-inline-block">Sobre mí</a>
+<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>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="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>
+                    </li>
+                -->
+                </ul>
             </div>
+
         </div>
     </nav>
+</header>
 
-    <section id="proyectos" class="py-5">
-        <div class="container py-5">
-            <h2 class="section-title mb-5">Proyectos</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 en construcción constante <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 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>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>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>
             
-            <div class="row g-4">
-                <div class="col-md-6 col-lg-4">
-                    <div class="card project-card h-100">
-                        <div class="card-img-placeholder d-flex align-items-center justify-center">
-                            <img src="img/recursos-catolicos.jpg" alt="Recursos Católicos" class="img-fluid">
-                        </div>
-                        <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="card-img-placeholder d-flex align-items-center justify-center">
-                            <img src="img/piedra-papel-tijera.jpg" alt="Piedra, Papel o Tijera" class="img-fluid">
-                        </div>
-                        <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-img-placeholder d-flex align-items-center justify-center">
-                            <img src="img/portfolio.jpg" alt="Portfolio" class="img-fluid">
-                        </div>
-                        <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">
-                        <div class="card-img-placeholder d-flex align-items-center justify-center">
-                            <img src="img/eltiempo.jpg" alt="El Tiempo" class="img-fluid">
-                        </div>
-                        <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-img-placeholder d-flex align-items-center justify-center">
-                            <img src="img/oposiciones.jpg" alt="Oposiciones" class="img-fluid">
-                        </div>
-                        <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-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>
 
+                </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">Metodologías ágiles, trabajo en equipo, resolución de conflictos</li>
+                </ul>
+            </div>
         </div>
-    </footer>
+    </div>
 
-    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
+</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>
 </body>
 </html>
diff --git a/js/codigo.js b/js/codigo.js
new file mode 100644
index 0000000..c7132b7
--- /dev/null
+++ b/js/codigo.js
@@ -0,0 +1,24 @@
+// edad
+function calcularEdad(fechaNacimiento) {
+    const hoy = new Date();
+    const nacimiento = new Date(fechaNacimiento);
+    let edad = hoy.getFullYear() - nacimiento.getFullYear();
+    const mes = hoy.getMonth() - nacimiento.getMonth();
+    if (mes < 0 || (mes === 0 && hoy.getDate() < nacimiento.getDate())) {
+        edad--;
+    }
+    return edad;
+}
+
+const fechaNacimientoAndrea = "2001-01-14"; 
+const edadAndrea = calcularEdad(fechaNacimientoAndrea);
+document.getElementById("edad-andrea").textContent = edadAndrea;
+
+const fechaNacimientoGemelos = "2004-11-24"; 
+const edadGemelos = calcularEdad(fechaNacimientoGemelos);
+document.getElementById("edad-gemelos").textContent = edadGemelos;
+
+
+// añade el año actual al pie de página
+document.getElementById("anio").textContent = new Date().getFullYear();
+
diff --git a/piedra-papel-tijera.html b/piedra-papel-tijera.html
index 28d2497..e4b40fd 100644
--- a/piedra-papel-tijera.html
+++ b/piedra-papel-tijera.html
@@ -70,5 +70,11 @@
 
     </main>
 
+     <footer class="py-5 text-center">
+        <div class="container">
+            <p class="mb-0">&copy; 2026 - Tatiana Villa</p>
+        </div>
+    </footer>
+    
 </body>
 </html>
diff --git a/proyectos.html b/proyectos.html
new file mode 100644
index 0000000..fe59dae
--- /dev/null
+++ b/proyectos.html
@@ -0,0 +1,137 @@
+<!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">
+</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>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="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>
+                    </li>
+-->
+                </ul>
+            </div>
+
+        </div>
+    </nav>
+</header>
+
+    <section id="proyectos" class="py-5">
+        <div class="container py-5">
+            <h2 class="section-title mb-5">Proyectos</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">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">
+
+                        <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>
+        </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>