From 896571d83834cacdca6eb2ae066e561bf6331cf1 Mon Sep 17 00:00:00 2001
From: Ariel Costas Guerrero
Date: Thu, 5 Jun 2025 23:03:02 +0200
Subject: Enhance homepage layout and content, improve accessibility, and
update styles
---
src/layouts/HomePageLayout.astro | 43 +++++++--
src/layouts/Layout.astro | 43 ++++++++-
src/partials/Footer.astro | 2 +
src/partials/Header.astro | 203 +++++++++++++++++++++++++++++++++------
styles/_variables.scss | 1 +
styles/shared.scss | 2 +-
6 files changed, 249 insertions(+), 45 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 = {
¿Quién soy?
+
+
+ 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.
+
+
- 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.
- Más información sobre mí
¿Qué hago?
+
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.
- Mi portfolio
- Últimas entradas del blog
+ Conoce más sobre mi trayectoria profesional
+
+
+ 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.
+
+ Echa un vistazo a mi portfolio
+
+ Mis reflexiones
+
+ 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.
+
{
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;
+ Skip to content
{empty ? null : }
-
+
{empty ? null : }
@@ -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";
---
+
+
diff --git a/styles/_variables.scss b/styles/_variables.scss
index 26858a2..c4317c4 100644
--- a/styles/_variables.scss
+++ b/styles/_variables.scss
@@ -9,6 +9,7 @@ $secondary: hsl(48, 100%, 50%);
$dark: hsl(340, 13%, 5%);
$background: hsl(210, 40%, 96%);
+$backgroundDarker: hsl(210, 40%, 80%);
$light: hsl(214, 64%, 98%);
$lightAlt: hsl(0, 0%, 100%);
diff --git a/styles/shared.scss b/styles/shared.scss
index d6961a1..5844332 100644
--- a/styles/shared.scss
+++ b/styles/shared.scss
@@ -7,7 +7,7 @@
%heading {
font-family: $titleFontStack;
- line-height: 1.25;
+ line-height: 1.55;
margin-block-start: 0.75em;
margin-block-end: 0.25em;
}
--
cgit v1.3