diff options
Diffstat (limited to 'src/layouts')
| -rw-r--r-- | src/layouts/HomePageLayout.astro | 43 | ||||
| -rw-r--r-- | src/layouts/Layout.astro | 43 |
2 files changed, 74 insertions, 12 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; |