aboutsummaryrefslogtreecommitdiff
path: root/src
diff options
context:
space:
mode:
Diffstat (limited to 'src')
-rw-r--r--src/layouts/HomePageLayout.astro43
-rw-r--r--src/layouts/Layout.astro43
-rw-r--r--src/partials/Footer.astro2
-rw-r--r--src/partials/Header.astro203
4 files changed, 247 insertions, 44 deletions
diff --git a/src/layouts/HomePageLayout.astro b/src/layouts/HomePageLayout.astro
index e243c6e..fd7c5eb 100644
--- a/src/layouts/HomePageLayout.astro
+++ b/src/layouts/HomePageLayout.astro
@@ -30,22 +30,49 @@ const schema = {
</p>
<h2>¿Quién soy?</h2>
+
+ <p>
+ Soy un desarrollador de software con varios años de experiencia en el sector,
+ especializado en el desarrollo de aplicaciones web y la administración de
+ sistemas Cloud. Me apasiona la tecnología y disfruto creando soluciones
+ prácticas y eficientes para resolver problemas reales, simplificando la vida
+ y el trabajo de las personas.
+ </p>
+
<p>
- Soy un desarrollador web que le gusta aprender cosas nuevas y compartir su
- conocimiento. Me gusta la programación, el diseño web y la creatividad. Me
- encanta crear cosas nuevas y aprender de los demás.
+ En mi tiempo libre, fuera de mi trabajo, me interesan temas como la filosofía,
+ la economía y las finanzas, así como el derecho y la política. Me gusta
+ aprender sobre cómo funcionan las cosas y cómo se relacionan entre sí, y
+ reflexionar sobre el impacto que tienen en nuestra sociedad y en nuestras
+ vidas cotidianas.
</p>
- <a href="/trajectory">Más información sobre mí</a>
<h2>¿Qué hago?</h2>
+
<p>
Actualmente trabajo como desarrollador de software y administrador Cloud en
- una empresa de tecnología. Me encargo de desarrollar aplicaciones web en PHP
- y desplegarlas en la nube de forma segura y eficiente.
+ Estelaria Solutions, una empresa de tecnología en Vigo (España). Me encargo
+ de desarrollar aplicaciones web en PHP y desplegarlas en la nube de forma
+ segura y eficiente.
</p>
- <a href="/portfolio">Mi portfolio</a>
- <h2>Últimas entradas del blog</h2>
+ <a href="/trajectory">Conoce más sobre mi trayectoria profesional</a>
+
+ <p>
+ También realizo ocasinalmente proyectos personales y freelance para clientes
+ que necesitan soluciones a medida o apoyo técnico en sus proyectos. Me
+ gusta trabajar con tecnologías modernas y aprender nuevas habilidades para
+ mejorar mi trabajo y ofrecer un mejor servicio a mis clientes.
+ </p>
+ <a href="/portfolio">Echa un vistazo a mi portfolio</a>
+
+ <h2>Mis reflexiones</h2>
+ <p>
+ En mi blog comparto mis reflexiones, aprendizajes y experiencias sobre
+ los temas que me interesan, además de hablar ocasionalmente sobre tecnología
+ y desarrollo. Disfruto escribiendo sobre lo que aprendo y reflexiono, pudiendo
+ plasmar mis ideas de forma clara y ordenada, y compartiéndolas con el mundo.
+ </p>
<ul>
{
blogCollection.slice(0, 5).map((p) => {
diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro
index 0df9191..b546904 100644
--- a/src/layouts/Layout.astro
+++ b/src/layouts/Layout.astro
@@ -47,8 +47,9 @@ const { title, description, empty } = Astro.props;
<slot name="head-jsonld" />
</head>
<body>
+ <a href="#main" class="skip-to-content">Skip to content</a>
{empty ? null : <Header />}
- <main>
+ <main id="main">
<slot />
</main>
{empty ? null : <Footer />}
@@ -60,6 +61,39 @@ const { title, description, empty } = Astro.props;
@use "../../styles/shared";
@use "sass:color";
+ .skip-to-content {
+ position: absolute;
+ overflow: hidden;
+ width: 1px;
+ height: 1px;
+ margin: -1px;
+ padding: 0;
+ border: 0;
+ clip: rect(0 0 0 0);
+ clip-path: inset(50%);
+ white-space: nowrap;
+ z-index: 100;
+ background-color: $accent;
+ color: white;
+ font-weight: bold;
+ text-decoration: none;
+
+ &:focus {
+ position: fixed;
+ top: 0;
+ left: 0;
+ width: auto;
+ height: auto;
+ margin: 0;
+ padding: 8px 15px;
+ clip: auto;
+ clip-path: none;
+ white-space: normal;
+ outline: 2px solid $secondary;
+ box-shadow: none;
+ }
+ }
+
html,
body {
margin: 0;
@@ -78,8 +112,9 @@ const { title, description, empty } = Astro.props;
background: linear-gradient(
to bottom,
#ffffff 0%,
- $background 3rem,
- $background 100%
+ color.adjust($background, $lightness: -5%) 3rem,
+ color.adjust($background, $lightness: -5%) 88%,
+ color.adjust($backgroundDarker, $lightness: -5%) 100%
);
color: $dark;
}
@@ -110,7 +145,7 @@ const { title, description, empty } = Astro.props;
align-self: center;
- max-width: min(1000px, 90vw);
+ max-width: min(69ch, 90vw);
font-size: 1.2rem;
padding-block-end: 3rem;
diff --git a/src/partials/Footer.astro b/src/partials/Footer.astro
index 213aaa8..577a42d 100644
--- a/src/partials/Footer.astro
+++ b/src/partials/Footer.astro
@@ -30,6 +30,8 @@ import t from "../i18n/es.json";
footer {
background-color: $dark;
color: $light;
+
+ vertical-align: middle;
text-align: center;
padding: 0.5rem 1rem;
diff --git a/src/partials/Header.astro b/src/partials/Header.astro
index 500fadd..e8db9d5 100644
--- a/src/partials/Header.astro
+++ b/src/partials/Header.astro
@@ -3,60 +3,199 @@ import t from "../i18n/es.json";
---
<header>
- <a href="/">{t.header.home}</a>
- <a href="/trajectory/">{t.header.trajectory}</a>
- <a href="/portfolio/">{t.header.portfolio}</a>
- <a href="/blog/">{t.header.blog}</a>
- <a href="/contact/">{t.header.contact}</a>
+ <div class="header-container">
+ <div class="brand">
+ <!-- Brand placeholder - you can replace this with a logo or name -->
+ <a href="/" class="brand-link" aria-label="Ariel Costas Home">Ariel&ZeroWidthSpace;<span class="brand-accent">Costas</span></a>
+ </div>
+
+ <div class="mobile-toggle" id="mobile-toggle" aria-expanded="false" aria-controls="nav-links" aria-label="Toggle menu">
+ <span class="bar"></span>
+ <span class="bar"></span>
+ <span class="bar"></span>
+ </div>
+
+ <nav class="nav-links" id="nav-links" aria-label="Main navigation">
+ <a href="/">{t.header.home}</a>
+ <a href="/trajectory/">{t.header.trajectory}</a>
+ <a href="/portfolio/">{t.header.portfolio}</a>
+ <a href="/blog/">{t.header.blog}</a>
+ <a href="/contact/">{t.header.contact}</a>
+ </nav>
+ </div>
</header>
+<script>
+ // Wait for the DOM to be fully loaded
+ document.addEventListener('DOMContentLoaded', () => {
+ const mobileToggle = document.getElementById('mobile-toggle');
+ const navLinks = document.getElementById('nav-links');
+
+ // Toggle mobile menu
+ mobileToggle?.addEventListener('click', () => {
+ const isExpanded = mobileToggle.getAttribute('aria-expanded') === 'true';
+ mobileToggle.setAttribute('aria-expanded', !isExpanded ? 'true' : 'false');
+ mobileToggle.classList.toggle('active');
+ navLinks?.classList.toggle('active');
+ });
+
+ // Handle Escape key to close menu
+ document.addEventListener('keydown', (e) => {
+ if (e.key === 'Escape' && navLinks?.classList.contains('active')) {
+ mobileToggle?.classList.remove('active');
+ navLinks.classList.remove('active');
+ mobileToggle?.setAttribute('aria-expanded', 'false');
+ mobileToggle?.focus();
+ }
+ });
+
+ // Add active class to current page link
+ const currentPath = window.location.pathname;
+ const navItems = document.querySelectorAll('.nav-links a');
+ navItems.forEach(item => {
+ const href = item.getAttribute('href') ?? '';
+ if (href === currentPath || (href !== '/' && currentPath.startsWith(href))) {
+ item.classList.add('active');
+ item.setAttribute('aria-current', 'page');
+ }
+ });
+ });
+</script>
+
<style lang="scss">
@use "../../styles/variables" as *;
header {
color: $accent;
+ padding: 1rem 2rem;
+
+ .header-container {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ max-width: 1200px;
+ margin: 0 auto;
+ width: 100%;
+ }
+
+ .brand {
+ margin-right: auto;
+
+ .brand-link {
+ font-size: 1.8rem;
+ font-weight: 800;
+ text-decoration: none;
+ color: $accent;
+
+ .brand-accent {
+ color: $accentDark;
+ }
+ }
+ }
+
+ .nav-links {
+ display: flex;
+ gap: 2rem;
+ align-items: center;
+
+ a {
+ text-decoration: none;
+ font-weight: 700;
+ font-size: 1.2rem;
+ text-transform: uppercase;
+ transition:
+ color 0.2s ease-in-out,
+ border-bottom-color 0.2s ease-in-out;
+ color: $accent;
+ line-height: 1;
+ border-bottom: 2px solid transparent;
- display: flex;
- flex-direction: row;
- align-items: center;
- justify-content: center;
- gap: 2rem;
+ &:hover {
+ color: $accentDark;
+ border-bottom-color: currentColor;
+ }
- padding: 2rem;
+ &.active {
+ color: $accentDark;
+ }
+ }
+ }
- a {
- text-decoration: none;
- font-weight: 700;
- font-size: 1.2rem;
- text-transform: uppercase;
- transition:
- color 0.2s ease-in-out,
- border-bottom-color 0.2s ease-in-out;
- color: $accent;
- line-height: 1;
- border-bottom: 2px solid transparent;
+ .mobile-toggle {
+ display: none;
+ flex-direction: column;
+ justify-content: space-between;
+ width: 2rem;
+ height: 1.25rem;
+ cursor: pointer;
+ z-index: 10;
- &:hover {
- color: $accentDark;
- border-bottom-color: currentColor;
+ .bar {
+ height: 3px;
+ width: 100%;
+ background-color: $accent;
+ border-radius: 3px;
+ transition: all 0.2s ease;
}
&.active {
- color: $accentDark;
+ .bar:nth-child(1) {
+ transform: translateY(0.5rem) rotate(45deg);
+ }
+
+ .bar:nth-child(2) {
+ opacity: 0;
+ }
+
+ .bar:nth-child(3) {
+ transform: translateY(-0.5rem) rotate(-45deg);
+ }
}
}
}
- @media (max-width: $breakpointTablet) {
+ @media (max-width: $breakpointDesktop) {
header {
- flex-direction: column;
- align-items: center;
- gap: 1rem;
+ .nav-links {
+ gap: 1.5rem;
- a {
- font-size: 1.5rem;
+ a {
+ font-size: 1rem;
+ }
}
}
}
+ @media (max-width: $breakpointTablet) {
+ header {
+ .mobile-toggle {
+ display: flex;
+ }
+
+ .nav-links {
+ position: fixed;
+ top: 0;
+ right: -100%;
+ width: 80%;
+ max-width: 300px;
+ height: 100vh;
+ background-color: $lightAlt;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ gap: 2rem;
+ transition: right 0.3s ease;
+ box-shadow: $shadow;
+ z-index: 5;
+
+ a {
+ font-size: 1.5rem;
+ }
+
+ &.active {
+ right: 0;
+ }
+ }
+ }
+ }
</style>
generated by cgit v1.3 (git 2.53.0) at 2026-04-12 07:29:27 +0000