Resolucion de conflictos
This commit is contained in:
Tatiana Villa
commit
d08fb38074
|
|
@ -185,3 +185,10 @@ footer {
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
transition: 0.3s;
|
transition: 0.3s;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.timeline {
|
||||||
|
background-color: var(--color-tarjeta);
|
||||||
|
border-left: 1px solid var(--color-primario);
|
||||||
|
margin-bottom: 1.5rem;
|
||||||
|
transition: 0.3s;
|
||||||
|
}
|
||||||
|
|
@ -13,7 +13,6 @@
|
||||||
<meta name="author" content="Tatiana Villa">
|
<meta name="author" content="Tatiana Villa">
|
||||||
|
|
||||||
<link rel="stylesheet" href="css/style.css">
|
<link rel="stylesheet" href="css/style.css">
|
||||||
<link rel="stylesheet" href="css/timeline.css">
|
|
||||||
<script type="text/javascript" src="codigo.js"></script>
|
<script type="text/javascript" src="codigo.js"></script>
|
||||||
</head>
|
</head>
|
||||||
<body class="bg-black text-light">
|
<body class="bg-black text-light">
|
||||||
|
|
@ -23,7 +22,7 @@
|
||||||
|
|
||||||
<!-- Logo -->
|
<!-- Logo -->
|
||||||
<a class="navbar-brand font-weight-bold" href="index.html" style="font-family: 'Consolas', monospace;">
|
<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>
|
</a>
|
||||||
|
|
||||||
<!-- Botón móvil -->
|
<!-- Botón móvil -->
|
||||||
|
|
@ -49,6 +48,7 @@
|
||||||
<a class="nav-link" href="habilidades.html">Habilidades</a>
|
<a class="nav-link" href="habilidades.html">Habilidades</a>
|
||||||
</li>
|
</li>
|
||||||
|
|
||||||
|
<<<<<<< HEAD
|
||||||
<li class="nav-item">
|
<li class="nav-item">
|
||||||
<a class="nav-link" href="formacion.html">Formación</a>
|
<a class="nav-link" href="formacion.html">Formación</a>
|
||||||
</li>
|
</li>
|
||||||
|
|
@ -58,6 +58,13 @@
|
||||||
<a class="nav-link" href="formacion.html">Formación</a>
|
<a class="nav-link" href="formacion.html">Formación</a>
|
||||||
</li>
|
</li>
|
||||||
|
|
||||||
|
=======
|
||||||
|
|
||||||
|
<li class="nav-item">
|
||||||
|
<a class="nav-link" href="formacion.html">Formación</a>
|
||||||
|
</li>
|
||||||
|
<!--
|
||||||
|
>>>>>>> 5c4ff660dd49607da1d9843160ff7f2bcf7de4b7
|
||||||
|
|
||||||
<li class="nav-item">
|
<li class="nav-item">
|
||||||
<a class="nav-link" href="experiencia.html">Experiencia</a>
|
<a class="nav-link" href="experiencia.html">Experiencia</a>
|
||||||
|
|
@ -70,6 +77,7 @@
|
||||||
</nav>
|
</nav>
|
||||||
</header>
|
</header>
|
||||||
<main class="container main-content py-5">
|
<main class="container main-content py-5">
|
||||||
|
<<<<<<< HEAD
|
||||||
|
|
||||||
<section class="timeline">
|
<section class="timeline">
|
||||||
<h2>Formación</h2>
|
<h2>Formación</h2>
|
||||||
|
|
@ -114,6 +122,77 @@
|
||||||
<div class="footer">
|
<div class="footer">
|
||||||
<div class="footer">
|
<div class="footer">
|
||||||
<div>Página realizada íntegramente con código: PHP, JavaScript, HTML y CSS</div>
|
<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">
|
||||||
|
<programación>
|
||||||
|
</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">
|
||||||
|
<Sistemas>
|
||||||
|
</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">
|
||||||
|
<Otros>
|
||||||
|
</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 id="copyright">copyright</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
|
|
@ -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;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
@ -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;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
@ -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>
|
||||||
|
|
@ -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);
|
||||||
|
|
@ -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);
|
||||||
|
|
@ -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>
|
||||||
|
|
@ -22,7 +22,7 @@
|
||||||
|
|
||||||
<!-- Logo -->
|
<!-- Logo -->
|
||||||
<a class="navbar-brand font-weight-bold" href="index.html" style="font-family: 'Consolas', monospace;">
|
<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>
|
</a>
|
||||||
|
|
||||||
<!-- Botón móvil -->
|
<!-- Botón móvil -->
|
||||||
|
|
@ -52,8 +52,13 @@
|
||||||
<li class="nav-item">
|
<li class="nav-item">
|
||||||
<a class="nav-link" href="formacion.html">Formación</a>
|
<a class="nav-link" href="formacion.html">Formación</a>
|
||||||
</li>
|
</li>
|
||||||
|
<<<<<<< HEAD
|
||||||
<!--
|
<!--
|
||||||
|
|
||||||
|
=======
|
||||||
|
|
||||||
|
<!--
|
||||||
|
>>>>>>> 5c4ff660dd49607da1d9843160ff7f2bcf7de4b7
|
||||||
<li class="nav-item">
|
<li class="nav-item">
|
||||||
<a class="nav-link" href="experiencia.html">Experiencia</a>
|
<a class="nav-link" href="experiencia.html">Experiencia</a>
|
||||||
</li>
|
</li>
|
||||||
|
|
|
||||||
167
index.html
167
index.html
|
|
@ -1,103 +1,132 @@
|
||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html lang="es">
|
<html lang="es">
|
||||||
<head>
|
<head>
|
||||||
<meta charset="UTF-8">
|
<meta charset="utf-8" />
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
<title>Aplicaciones de Vanguardia</title>
|
<title>Tatiana Villa</title>
|
||||||
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
|
<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 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="stylesheet" href="css/style.css">
|
||||||
<link rel="icon" href="favicon.ico" type="image/x-icon">
|
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
<body class="bg-black text-light">
|
<body class="bg-black text-light">
|
||||||
|
|
||||||
<!-- Header -->
|
<!-- Header -->
|
||||||
<header>
|
<header>
|
||||||
<nav class="navbar navbar-expand-sm navbar-dark bg-dark shadow-sm border-bottom border-secondary">
|
<nav class="navbar navbar-expand-sm navbar-dark bg-dark shadow-sm border-bottom border-secondary">
|
||||||
<div class="container-fluid">
|
<div class="container-fluid">
|
||||||
|
|
||||||
<!-- Logo -->
|
<!-- Logo -->
|
||||||
<a class="navbar-brand font-weight-bold" href="index.html" style="font-family: 'Consolas', monospace;">
|
<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>
|
</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>
|
</div>
|
||||||
</nav>
|
</nav>
|
||||||
</header>
|
</header>
|
||||||
|
|
||||||
<section id="proyectos" class="py-5">
|
<!-- Main Content -->
|
||||||
<div class="container py-5">
|
|
||||||
<h2 class="section-title mb-5">Proyectos en desarrollo</h2>
|
|
||||||
|
|
||||||
<div class="row g-4">
|
<main class="container main-content py-5">
|
||||||
<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">
|
<p class="text-success h5 font-monospace">
|
||||||
<div class="card project-card h-100">
|
/** <br>
|
||||||
|
* Hola, soy Tatiana Villa Ema <!--(<span id="edad"></span> años)--> <br>
|
||||||
|
* Full Stack Developer<br>
|
||||||
|
*/
|
||||||
|
</p>
|
||||||
|
|
||||||
<div class="card-body">
|
<div class="row mt-4">
|
||||||
<h5 class="card-title fw-bold">El Tiempo</h5>
|
<div class="col-md-8">
|
||||||
<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>
|
<h3 class="text-primary"><sobre-mi></h3>
|
||||||
<p class="card-text text-muted card-tecnologia">PHP, MySQL, HTML, CSS, JavaScript.</p>
|
<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>
|
||||||
<a href="eltiempo/index.html" class="btn-link">Saber más →</a>
|
<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>
|
||||||
</div>
|
<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>
|
||||||
</div>
|
<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>
|
||||||
</div>
|
<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="col-md-6 col-lg-4">
|
<h3 class="text-primary"></sobre-mi></h3>
|
||||||
<div class="card project-card h-100">
|
</div>
|
||||||
|
|
||||||
<div class="card-body">
|
<div class="col-md-4">
|
||||||
<h5 class="card-title fw-bold">Oposiciones</h5>
|
<div class="card bg-dark border-secondary p-3 shadow">
|
||||||
<p class="card-text text-muted">Temario y cuestionarios para TAI AGE</p>
|
<h5 class="text-info">// Conocimientos</h5>
|
||||||
<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">
|
<ul class="list-unstyled mb-0">
|
||||||
<div class="card project-card h-100">
|
<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">
|
</ul>
|
||||||
<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>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
|
||||||
|
|
||||||
<footer class="py-5 text-center">
|
<div class="col-md-4">
|
||||||
<div class="container">
|
<div class="card bg-dark border-secondary p-3 shadow">
|
||||||
<p class="mb-0">© 2026 - Tatiana Villa</p>
|
<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>
|
</div>
|
||||||
</footer>
|
</div>
|
||||||
|
|
||||||
|
</main>
|
||||||
|
|
||||||
|
<footer class="py-5 text-center">
|
||||||
|
<div class="container">
|
||||||
|
<p class="mb-0">© <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>
|
</body>
|
||||||
</html>
|
</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">© 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>
|
||||||
Loading…
Reference in New Issue