saucedo.facundo/ejercicio-forks-ramas-pr
1
0
Fork 0
forked from marquez.juan/ejercicio-forks-ramas-pr
Code Pull Requests Activity

feat(ui): redesign personal page with semantic structure, interactive navigation, and refined visual style

Browse Source
This commit is contained in:
Facundo Saucedo
2026-04-23 23:20:07 -03:00
parent 088b8a3b51
commit aa268f2380
3 changed files with 538 additions and 59 deletions
Download Patch File Download Diff File Expand all files Collapse all files

102
index.html
View File

@@ -3,41 +3,85 @@
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mis Preferencias</title>
<meta name="description" content="Perfil personal de Facundo: trabajo, hobbies y deporte.">
<title>Un poco de mi</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700&family=Sora:wght@500;600;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="estilo.css">
</head>
<body>
<header>
<h1>Mis preferencias personales</h1>
<a class="skip-link" href="#contenido">Saltar al contenido</a>
<header class="site-header">
<div class="topbar">
<p class="brand">Un poco de mi</p>
<button class="menu-toggle" type="button" aria-expanded="false" aria-controls="menu">
Menú
</button>
<nav>
<ul id="menu" class="nav-links" data-open="false">
<li><a href="#trabajo">Trabajo</a></li>
<li><a href="#hobbies">Hobbies</a></li>
<li><a href="#deporte">Deporte</a></li>
</ul>
</nav>
</div>
<section class="hero reveal">
<p class="eyebrow">Actualizado en 2026</p>
<h1>Un poco de mi, a mi manera.</h1>
<p class="intro">
Soy Facundo, tengo 24 años, y acá resumo tres áreas que me definen hoy:
trabajo, hobbies y deporte.
</p>
</section>
</header>
<div class="container">
<div class="card">
<h2>Deportes favoritos</h2>
<ul>
<li>Fútbol</li>
<li>Básquet</li>
<li>Natación</li>
</ul>
</div>
<main id="contenido" class="container">
<section class="editorial-grid" aria-label="Preferencias personales">
<article id="trabajo" class="panel panel-large reveal">
<div class="panel-inner">
<h2>Trabajo</h2>
<p class="meta">Desarrollo de software, consultoría y construcción de producto.</p>
<ul>
<li>Soy desarrollador semi senior en X Team, una consultora australiana.</li>
<li>Este año empecé mi propio estudio de software junto a un amigo y socio, bajo la marca de Whitebyte.</li>
<li>Nuestro proyecto más grande hasta la fecha es un SaaS para el Terciario Urquiza.</li>
</ul>
</div>
</article>
<div class="card">
<h2>Comidas favoritas</h2>
<ul>
<li>Pizza</li>
<li>Asado</li>
<li>Empanadas</li>
</ul>
</div>
<article id="hobbies" class="panel reveal">
<div class="panel-inner">
<h2>Hobbies</h2>
<p class="meta">Aprender, experimentar y mantenerme creativo fuera del trabajo diario.</p>
<ul>
<li>Me encanta programar, experimentar con nuevas tecnologías y prototipar MVPs propios.</li>
<li>Disfruto leer sobre finanzas y cultura; hace poco terminé Clean Code y en breve arranco Clean Architecture.</li>
<li>También me gusta jugar, sobre todo juegos indie.</li>
</ul>
</div>
</article>
<div class="card">
<h2>Pasatiempos favoritos</h2>
<ul>
<li>Leer</li>
<li>Programar</li>
<li>Escuchar música</li>
</ul>
</div>
</div>
<article id="deporte" class="panel panel-wide reveal">
<div class="panel-inner">
<h2>Deporte</h2>
<p class="meta">Mi base para tener energía, foco y constancia durante la semana.</p>
<ul>
<li>Me gusta salir a correr por la mañana; lo disfruto y me ayuda a ser más productivo.</li>
<li>También ando en bici y combino gimnasio con entrenamiento en casa.</li>
<li>Tengo mancuernas y equipo básico, así que entreno de lunes a viernes y corro todos los días al despertar.</li>
</ul>
</div>
</article>
</section>
</main>
<footer class="site-footer reveal">
<p>&copy; <span id="currentYear"></span> Desarrollado por <a class="footer-link" href="https://whitebyte.dev" target="_blank" rel="noopener noreferrer">Whitebyte</a></p>
</footer>
<script src="script.js"></script>
</body>
</html>