tatiana
/
tatvilweb
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

reorganizacion

This commit is contained in:
Tatiana Villa Ema 2026-02-15 19:25:42 +01:00
parent c81939b510
commit 9111c2a318
12 changed files with 464 additions and 93 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

147
css/sobremi.css Normal file
View File

@ -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;
}

9
css/style.css
View File

@ -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);
}

4
img/email.svg Normal file
View File

@ -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>
Side by Side

After

Width:  |  Height:  |  Size: 241 B

BIN
img/foto-perfil copy.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 163 KiB

BIN
img/foto-perfil.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 163 KiB

21
img/github.svg Normal file
View File

@ -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>
Side by Side

After

Width:  |  Height:  |  Size: 755 B

12
img/linkedin.svg Normal file
View File

@ -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>
Side by Side

After

Width:  |  Height:  |  Size: 414 B

BIN
img/logo.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 17 KiB

189
index.html
View File

@ -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 -->
<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">
<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>
<h3 class="text-primary">&lt;/sobre-mi&gt;</h3>
</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 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>
<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>
</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>
</div>
</section>
</main>
<footer class="py-5 text-center">
<div class="container">
<p class="mb-0">&copy; 2026 - Tatiana Villa</p>
<p class="mb-0">&copy; <span id="anio"></span> - Tatiana Villa</p>
</div>
</footer>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
<script>
document.getElementById("anio").textContent = new Date().getFullYear();
</script>
<script src="js/codigo.js"></script>
</body>
</html>

24
js/codigo.js Normal file
View File

@ -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();

6
piedra-papel-tijera.html
View File

@ -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>

137
proyectos.html Normal file
View File

@ -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>