From e3141794b95e534656427fadf0354435c62254d6 Mon Sep 17 00:00:00 2001
From: Ariel Costas Guerrero <ariel@costas.dev>
Date: Thu, 10 Apr 2025 21:42:41 +0200
Subject: Fix formatting

---
 src/layouts/ContactPageLayout.astro    | 165 +++++++++--------
 src/layouts/HomePageLayout.astro       |  89 +++++----
 src/layouts/Layout.astro               | 318 +++++++++++++++++----------------
 src/layouts/PortfolioPageLayout.astro  | 150 ++++++++--------
 src/layouts/TrajectoryPageLayout.astro | 111 ++++++------
 5 files changed, 425 insertions(+), 408 deletions(-)

(limited to 'src/layouts')

diff --git a/src/layouts/ContactPageLayout.astro b/src/layouts/ContactPageLayout.astro
index 3b3c278..c09969f 100644
--- a/src/layouts/ContactPageLayout.astro
+++ b/src/layouts/ContactPageLayout.astro
@@ -5,95 +5,94 @@ import Layout from "./Layout.astro";
 const t = useTranslations(Astro.currentLocale);
 
 const schema = {
-    "@context": "https://schema.org",
-    "@type": "ContactPage",
-    url: "https://www.costas.dev/contact",
-    headline: t.contactPage.headline,
+  "@context": "https://schema.org",
+  "@type": "ContactPage",
+  url: "https://www.costas.dev/contact",
+  headline: t.contactPage.headline,
 };
 ---
 
 <Layout title={t.contactPage.title} description={t.contactPage.description}>
-    <script
-        is:inline
-        type="application/ld+json"
-        slot="head-jsonld"
-        set:html={JSON.stringify(schema)}
-    />
-
-    <h1>{t.contactPage.headline}</h1>
-
-    <noscript>
-        <div role="alert" class="warning">
-            {t.contactPage.enableJs}
-        </div>
-    </noscript>
-
-    <p set:html={t.contactPage.intro} />
-
-    <p>{t.contactPage.socialMedia}</p>
-
-    <dl>
-        <dt>GitHub</dt>
-        <dd><a href="https://github.com/arielcostas">@arielcostas</a></dd>
-        <dt>LinkedIn</dt>
-        <dd>
-            <a href="https://www.linkedin.com/in/ariel-costas/"
-                >/in/ariel-costas</a>
-        </dd>
-        <dt>BlueSky</dt>
-        <dd><a href="https://bsky.app/profile/costas.dev">@costas.dev</a></dd>
-    </dl>
+  <script
+    is:inline
+    type="application/ld+json"
+    slot="head-jsonld"
+    set:html={JSON.stringify(schema)}
+  />
+
+  <h1>{t.contactPage.headline}</h1>
+
+  <noscript>
+    <div role="alert" class="warning">
+      {t.contactPage.enableJs}
+    </div>
+  </noscript>
+
+  <p set:html={t.contactPage.intro} />
+
+  <p>{t.contactPage.socialMedia}</p>
+
+  <dl>
+    <dt>GitHub</dt>
+    <dd><a href="https://github.com/arielcostas">@arielcostas</a></dd>
+    <dt>LinkedIn</dt>
+    <dd>
+      <a href="https://www.linkedin.com/in/ariel-costas/">/in/ariel-costas</a>
+    </dd>
+    <dt>BlueSky</dt>
+    <dd><a href="https://bsky.app/profile/costas.dev">@costas.dev</a></dd>
+  </dl>
 </Layout>
 
 <script>
-    const encryptedEmail = "LygNLiMmFRo/GlQZaFIWBA==";
-    const encryptedPhoneNumber = "ZWlQfX1QT0Z+XgVd";
-    const key = "NZdKOfvuLn5jF6sryF0Q";
-
-    const emailAddrLink = document.getElementById(
-        "email-addr",
-    ) as HTMLAnchorElement;
-    const phoneNumberLink = document.getElementById(
-        "phone-number",
-    ) as HTMLAnchorElement;
-
-    (() => {
-        if (emailAddrLink == null || phoneNumberLink == null) {
-            return;
-        }
-
-        const emailAddress = xorData(encryptedEmail, key);
-        const phoneNumber = xorData(encryptedPhoneNumber, key);
-
-        emailAddrLink.href = `mailto:${emailAddress}`;
-        emailAddrLink.textContent = emailAddress;
-
-        phoneNumberLink.href = `tel:${phoneNumber}`;
-        phoneNumberLink.textContent = phoneNumber;
-    })();
-
-    function xorData(data: string, key: string): string {
-        let actualData = atob(data);
-        let actualKey = key;
-        const keyLength = key.length;
-        const dataLength = actualData.length;
-        const result = new Array(dataLength);
-
-        // If the key is 12 characters but the data is 30 characters, the key should be repeated 3 times and truncated to 30 characters
-        if (keyLength < dataLength) {
-            actualKey = key
-                .repeat(Math.ceil(dataLength / keyLength))
-                .substring(0, dataLength);
-        } else if (keyLength > dataLength) {
-            actualKey = key.substring(0, dataLength);
-        }
-
-        for (let i = 0; i < dataLength; i++) {
-            result[i] = String.fromCharCode(
-                actualData.charCodeAt(i) ^ actualKey.charCodeAt(i),
-            );
-        }
-
-        return result.join("");
+  const encryptedEmail = "LygNLiMmFRo/GlQZaFIWBA==";
+  const encryptedPhoneNumber = "ZWlQfX1QT0Z+XgVd";
+  const key = "NZdKOfvuLn5jF6sryF0Q";
+
+  const emailAddrLink = document.getElementById(
+    "email-addr",
+  ) as HTMLAnchorElement;
+  const phoneNumberLink = document.getElementById(
+    "phone-number",
+  ) as HTMLAnchorElement;
+
+  (() => {
+    if (emailAddrLink == null || phoneNumberLink == null) {
+      return;
     }
+
+    const emailAddress = xorData(encryptedEmail, key);
+    const phoneNumber = xorData(encryptedPhoneNumber, key);
+
+    emailAddrLink.href = `mailto:${emailAddress}`;
+    emailAddrLink.textContent = emailAddress;
+
+    phoneNumberLink.href = `tel:${phoneNumber}`;
+    phoneNumberLink.textContent = phoneNumber;
+  })();
+
+  function xorData(data: string, key: string): string {
+    let actualData = atob(data);
+    let actualKey = key;
+    const keyLength = key.length;
+    const dataLength = actualData.length;
+    const result = new Array(dataLength);
+
+    // If the key is 12 characters but the data is 30 characters, the key should be repeated 3 times and truncated to 30 characters
+    if (keyLength < dataLength) {
+      actualKey = key
+        .repeat(Math.ceil(dataLength / keyLength))
+        .substring(0, dataLength);
+    } else if (keyLength > dataLength) {
+      actualKey = key.substring(0, dataLength);
+    }
+
+    for (let i = 0; i < dataLength; i++) {
+      result[i] = String.fromCharCode(
+        actualData.charCodeAt(i) ^ actualKey.charCodeAt(i),
+      );
+    }
+
+    return result.join("");
+  }
 </script>
diff --git a/src/layouts/HomePageLayout.astro b/src/layouts/HomePageLayout.astro
index 146eaec..0906a11 100644
--- a/src/layouts/HomePageLayout.astro
+++ b/src/layouts/HomePageLayout.astro
@@ -4,59 +4,56 @@ import Layout from "./Layout.astro";
 import { useTranslations } from "../i18n";
 
 const blogCollection = (await getCollection("blog")).sort((a, b) => {
-	return b.data.publishedAt.getTime() - a.data.publishedAt.getTime();
+  return b.data.publishedAt.getTime() - a.data.publishedAt.getTime();
 });
 
 const t = useTranslations(Astro.currentLocale);
 
 const schema = {
-	"@context": "http://schema.org",
-	"@type": "WebSite",
-	id: "https://www.costas.dev/",
-	url: "https://www.costas.dev/",
-	headline: t.homePage.title,
+  "@context": "http://schema.org",
+  "@type": "WebSite",
+  id: "https://www.costas.dev/",
+  url: "https://www.costas.dev/",
+  headline: t.homePage.title,
 };
 ---
 
 <Layout title={t.homePage.title} description={t.homePage.description}>
-	<script
-		is:inline
-		type="application/ld+json"
-		slot="head-jsonld"
-		set:html={JSON.stringify(schema)}
-	/>
-
-	<h1>{t.homePage.title}</h1>
-	<p>{t.homePage.welcome}</p>
-
-	<h2>{t.homePage.whoAmI}</h2>
-	<p>{t.homePage.whoAmIDesc}</p>
-	<a href="/trajectory">{t.homePage.moreAboutMe}</a>
-
-	<h2>{t.homePage.whatIDo}</h2>
-	<p>{t.homePage.whatIDoDesc}</p>
-	<a href="/portfolio">{t.homePage.myPortfolio}</a>
-
-	<h2>{t.homePage.latestBlogPosts}</h2>
-	<ul>
-		{
-			blogCollection.slice(0, 5).map((p) => {
-				const date = Intl.DateTimeFormat(Astro.currentLocale, {
-					day: "2-digit",
-					month: "short",
-					year: "numeric",
-				}).format(p.data.publishedAt);
-				return (
-					<li>
-						<time datetime={p.data.publishedAt.toISOString()}>
-							{date}
-						</time>
-						<a href={`/blog/${p.id}`}>{p.data.title}</a>
-					</li>
-				);
-			})
-		}
-	</ul>
-	<a href="/blog">{t.homePage.viewAllPosts}</a>
-
+  <script
+    is:inline
+    type="application/ld+json"
+    slot="head-jsonld"
+    set:html={JSON.stringify(schema)}
+  />
+
+  <h1>{t.homePage.title}</h1>
+  <p>{t.homePage.welcome}</p>
+
+  <h2>{t.homePage.whoAmI}</h2>
+  <p>{t.homePage.whoAmIDesc}</p>
+  <a href="/trajectory">{t.homePage.moreAboutMe}</a>
+
+  <h2>{t.homePage.whatIDo}</h2>
+  <p>{t.homePage.whatIDoDesc}</p>
+  <a href="/portfolio">{t.homePage.myPortfolio}</a>
+
+  <h2>{t.homePage.latestBlogPosts}</h2>
+  <ul>
+    {
+      blogCollection.slice(0, 5).map((p) => {
+        const date = Intl.DateTimeFormat(Astro.currentLocale, {
+          day: "2-digit",
+          month: "short",
+          year: "numeric",
+        }).format(p.data.publishedAt);
+        return (
+          <li>
+            <time datetime={p.data.publishedAt.toISOString()}>{date}</time>
+            <a href={`/blog/${p.id}`}>{p.data.title}</a>
+          </li>
+        );
+      })
+    }
+  </ul>
+  <a href="/blog">{t.homePage.viewAllPosts}</a>
 </Layout>
diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro
index c8d3302..ff3a6cc 100644
--- a/src/layouts/Layout.astro
+++ b/src/layouts/Layout.astro
@@ -4,11 +4,11 @@ import "@fontsource-variable/sen";
 import Header from "../partials/Header.astro";
 import Footer from "../partials/Footer.astro";
 import { getAbsoluteLocaleUrl } from "astro:i18n";
-import { getUrlWithoutLocale } from '../i18n';
+import { getUrlWithoutLocale } from "../i18n";
 
 interface Props {
-	title: string;
-	description: string;
+  title: string;
+  description: string;
 }
 
 const { title, description } = Astro.props;
@@ -17,156 +17,170 @@ const urlWithoutLocale = getUrlWithoutLocale(Astro.url.pathname);
 
 <!doctype html>
 <html lang={Astro.currentLocale}>
-	<head>
-		<meta charset="UTF-8" />
-		<meta name="description" content={description} />
-		<meta name="viewport" content="width=device-width" />
-
-		<link rel="canonical" href={Astro.url.toString().replace(/\.html$/, '')} />
-		<link rel="alternate" hreflang="es" href={getAbsoluteLocaleUrl("es", urlWithoutLocale)} />
-		<link rel="alternate" hreflang="en" href={getAbsoluteLocaleUrl("en", urlWithoutLocale)} />
-		<link rel="alternate" hreflang="x-default" href={getAbsoluteLocaleUrl("es", urlWithoutLocale)} />
-
-		<link rel="alternate" type="application/rss+xml" href="/blog.xml" />
-		<link rel="sitemap" type="application/xml" href="/sitemap-index.xml" />
-
-		<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
-		<link rel="icon" type="image/png" href="/favicon.png" />
-		<link rel="apple-touch-icon" href="/favicon.png" />
-
-		<meta property="og:title" content={title} />
-		<meta property="og:description" content={description} />
-		<meta property="og:type" content="website" />
-		<meta property="og:url" content={Astro.url} />
-		<meta property="og:image" content="/favicon.png" />
-
-		<meta name="twitter:card" content="summary" />
-		<meta name="twitter:title" content={title} />
-		<meta name="twitter:description" content={description} />
-		<meta name="twitter:image" content="/favicon.png" />
-
-		<title>{title} - Ariel Costas</title>
-
-		<slot name="head-jsonld" />
-	</head>
-	<body>
-		<Header />
-		<main>
-			<slot />
-		</main>
-		<Footer />
-	</body>
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="description" content={description} />
+    <meta name="viewport" content="width=device-width" />
+
+    <link rel="canonical" href={Astro.url.toString().replace(/\.html$/, "")} />
+    <link
+      rel="alternate"
+      hreflang="es"
+      href={getAbsoluteLocaleUrl("es", urlWithoutLocale)}
+    />
+    <link
+      rel="alternate"
+      hreflang="en"
+      href={getAbsoluteLocaleUrl("en", urlWithoutLocale)}
+    />
+    <link
+      rel="alternate"
+      hreflang="x-default"
+      href={getAbsoluteLocaleUrl("es", urlWithoutLocale)}
+    />
+
+    <link rel="alternate" type="application/rss+xml" href="/blog.xml" />
+    <link rel="sitemap" type="application/xml" href="/sitemap-index.xml" />
+
+    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+    <link rel="icon" type="image/png" href="/favicon.png" />
+    <link rel="apple-touch-icon" href="/favicon.png" />
+
+    <meta property="og:title" content={title} />
+    <meta property="og:description" content={description} />
+    <meta property="og:type" content="website" />
+    <meta property="og:url" content={Astro.url} />
+    <meta property="og:image" content="/favicon.png" />
+
+    <meta name="twitter:card" content="summary" />
+    <meta name="twitter:title" content={title} />
+    <meta name="twitter:description" content={description} />
+    <meta name="twitter:image" content="/favicon.png" />
+
+    <title>{title} - Ariel Costas</title>
+
+    <slot name="head-jsonld" />
+  </head>
+  <body>
+    <Header />
+    <main>
+      <slot />
+    </main>
+    <Footer />
+  </body>
 </html>
 
 <style is:global lang="scss">
-	@use "../../styles/shared.scss" as *;
-	@use "sass:color";
-
-	html,
-	body {
-		margin: 0;
-		padding: 0;
-		box-sizing: border-box;
-	}
-
-	body {
-		min-height: 100vh;
-		max-width: 100vw;
-
-		display: flex;
-		flex-direction: column;
-		gap: 1.5rem;
-
-		background: linear-gradient(to bottom,
-			#FFFFFF 0%,
-			$background 3rem,
-			$background 100%
-		);
-		color: $dark;
-	}
-
-	a {
-		color: $accent;
-	}
-
-	*::selection {
-		background-color: color.adjust($accent, $alpha: -0.85);
-	}
-
-	li > time {
-		font-family: $monoFontStack;
-	}
-
-	div[role="alert"] {
-		padding: 1rem;
-		margin-block: 1rem;
-		border-radius: 0.5rem;
-		
-		&.note {
-			background-color: $noteBackground;
-			color: $noteText;
-			box-shadow: 0 0 0 1px $noteText;
-		}
-
-		&.warning {
-			background-color: $warningBackground;
-			color: $warningText;
-			box-shadow: 0 0 0 1px $warningText;
-		}
-	}
-
-	main {
-		box-sizing: border-box;
-		margin-bottom: auto;
-
-		align-self: center;
-
-		max-width: 82ch;
-		font-size: 1.2rem;
-		
-		padding-block-end: 3rem;
-
-		> p > code {
-			word-break: break-word;
-			font-family: $monoFontStack;
-
-			color: $accentDark;
-			background-color: #f6f6f6;
-		}
-
-		p.meta {
-			display: block;
-			font-size: 0.85rem;
-			margin-bottom: 1rem;
-		}
-
-		pre {
-			overflow: scroll;
-		}
-	}
-
-	main a {
-		color: $accentDark;
-	}
-
-	footer a {
-		color: $accentLight;
-	}
-
-	main a, footer a {
-		text-decoration: none;
-		padding: 0.1rem;
-		box-shadow: 0 1px $accent;
-
-		&:hover {
-			box-shadow: 0 2px $accentDark;
-		}
-
-		&:focus {
-			color: $accentDark;
-			outline: none;
-			background-color: $secondary;
-			box-shadow: 0 4px #0b0c0c;
-		}
-	}
+  @use "../../styles/shared.scss" as *;
+  @use "sass:color";
+
+  html,
+  body {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+  }
+
+  body {
+    min-height: 100vh;
+    max-width: 100vw;
+
+    display: flex;
+    flex-direction: column;
+    gap: 1.5rem;
+
+    background: linear-gradient(
+      to bottom,
+      #ffffff 0%,
+      $background 3rem,
+      $background 100%
+    );
+    color: $dark;
+  }
+
+  a {
+    color: $accent;
+  }
+
+  *::selection {
+    background-color: color.adjust($accent, $alpha: -0.85);
+  }
+
+  li > time {
+    font-family: $monoFontStack;
+  }
+
+  div[role="alert"] {
+    padding: 1rem;
+    margin-block: 1rem;
+    border-radius: 0.5rem;
+
+    &.note {
+      background-color: $noteBackground;
+      color: $noteText;
+      box-shadow: 0 0 0 1px $noteText;
+    }
+
+    &.warning {
+      background-color: $warningBackground;
+      color: $warningText;
+      box-shadow: 0 0 0 1px $warningText;
+    }
+  }
+
+  main {
+    box-sizing: border-box;
+    margin-bottom: auto;
+
+    align-self: center;
+
+    max-width: 82ch;
+    font-size: 1.2rem;
+
+    padding-block-end: 3rem;
+
+    > p > code {
+      word-break: break-word;
+      font-family: $monoFontStack;
+
+      color: $accentDark;
+      background-color: #f6f6f6;
+    }
+
+    p.meta {
+      display: block;
+      font-size: 0.85rem;
+      margin-bottom: 1rem;
+    }
+
+    pre {
+      overflow: scroll;
+    }
+  }
+
+  main a {
+    color: $accentDark;
+  }
+
+  footer a {
+    color: $accentLight;
+  }
+
+  main a,
+  footer a {
+    text-decoration: none;
+    padding: 0.1rem;
+    box-shadow: 0 1px $accent;
+
+    &:hover {
+      box-shadow: 0 2px $accentDark;
+    }
+
+    &:focus {
+      color: $accentDark;
+      outline: none;
+      background-color: $secondary;
+      box-shadow: 0 4px #0b0c0c;
+    }
+  }
 </style>
diff --git a/src/layouts/PortfolioPageLayout.astro b/src/layouts/PortfolioPageLayout.astro
index 0ade4ba..88f8614 100644
--- a/src/layouts/PortfolioPageLayout.astro
+++ b/src/layouts/PortfolioPageLayout.astro
@@ -6,108 +6,108 @@ import TechnologyBadge from "../partials/TechnologyBadge.astro";
 const t = useTranslations(Astro.currentLocale);
 
 const schema = {
-    "@context": "https://schema.org",
-    "@type": "WebPage",
-    url: "https://www.costas.dev/portfolio",
-    headline: t.portfolioPage.headline,
+  "@context": "https://schema.org",
+  "@type": "WebPage",
+  url: "https://www.costas.dev/portfolio",
+  headline: t.portfolioPage.headline,
 };
 ---
 
 <Layout title={t.portfolioPage.title} description={t.portfolioPage.description}>
-    <script
-        is:inline
-        type="application/ld+json"
-        slot="head-jsonld"
-        set:html={JSON.stringify(schema)}
-    ></script>
+  <script
+    is:inline
+    type="application/ld+json"
+    slot="head-jsonld"
+    set:html={JSON.stringify(schema)}
+  />
 
-    <h1>{t.portfolioPage.headline}</h1>
+  <h1>{t.portfolioPage.headline}</h1>
 
-    <p set:html={t.portfolioPage.intro} />
+  <p set:html={t.portfolioPage.intro} />
 
-    <h2>{t.portfolioPage.freelanceTitle}</h2>
+  <h2>{t.portfolioPage.freelanceTitle}</h2>
 
-    <p>{t.portfolioPage.freelanceDesc}</p>
+  <p>{t.portfolioPage.freelanceDesc}</p>
 
-    <section>
-        <article>
-            <h3>{t.portfolioPage.orderExtractorTitle}</h3>
+  <section>
+    <article>
+      <h3>{t.portfolioPage.orderExtractorTitle}</h3>
 
-            <p set:html={t.portfolioPage.orderExtractorDesc} />
+      <p set:html={t.portfolioPage.orderExtractorDesc} />
 
-            <TechnologyBadge code="java" />
-            <TechnologyBadge code="windows" />
-        </article>
+      <TechnologyBadge code="java" />
+      <TechnologyBadge code="windows" />
+    </article>
 
-        <article>
-            <h3>{t.portfolioPage.touristInfoTitle}</h3>
+    <article>
+      <h3>{t.portfolioPage.touristInfoTitle}</h3>
 
-            <p set:html={t.portfolioPage.touristInfoDesc} />
+      <p set:html={t.portfolioPage.touristInfoDesc} />
 
-            <TechnologyBadge code="php" />
-            <TechnologyBadge code="mysql" />
-        </article>
+      <TechnologyBadge code="php" />
+      <TechnologyBadge code="mysql" />
+    </article>
 
-        <article>
-            <h3>{t.portfolioPage.wpConsultingTitle}</h3>
+    <article>
+      <h3>{t.portfolioPage.wpConsultingTitle}</h3>
 
-            <p set:html={t.portfolioPage.wpConsultingDesc} />
+      <p set:html={t.portfolioPage.wpConsultingDesc} />
 
-            <TechnologyBadge code="php" />
-        </article>
-    </section>
+      <TechnologyBadge code="php" />
+    </article>
+  </section>
 
-    <h2>{t.portfolioPage.ownProjectsTitle}</h2>
+  <h2>{t.portfolioPage.ownProjectsTitle}</h2>
 
-    <p>{t.portfolioPage.ownProjectsDesc}</p>
+  <p>{t.portfolioPage.ownProjectsDesc}</p>
 
-    <section>
-        <article>
-            <h3>{t.portfolioPage.personalWebTitle}</h3>
+  <section>
+    <article>
+      <h3>{t.portfolioPage.personalWebTitle}</h3>
 
-            <p>{t.portfolioPage.personalWebDesc}</p>
+      <p>{t.portfolioPage.personalWebDesc}</p>
 
-            <TechnologyBadge code="astro" />
-            <TechnologyBadge code="azure" />
-        </article>
+      <TechnologyBadge code="astro" />
+      <TechnologyBadge code="azure" />
+    </article>
 
-        <article>
-            <h3>{t.portfolioPage.mientrenoTitle}</h3>
+    <article>
+      <h3>{t.portfolioPage.mientrenoTitle}</h3>
 
-            <p set:html={t.portfolioPage.mientrenoDesc} />
+      <p set:html={t.portfolioPage.mientrenoDesc} />
 
-            <TechnologyBadge code="dotnet" />
-            <TechnologyBadge code="sqlserver" />
-            <TechnologyBadge code="azure" />
-            <TechnologyBadge code="rabbitmq" />
-        </article>
+      <TechnologyBadge code="dotnet" />
+      <TechnologyBadge code="sqlserver" />
+      <TechnologyBadge code="azure" />
+      <TechnologyBadge code="rabbitmq" />
+    </article>
 
-        <article>
-            <h3>{t.portfolioPage.vigo360Title}</h3>
+    <article>
+      <h3>{t.portfolioPage.vigo360Title}</h3>
 
-            <p set:html={t.portfolioPage.vigo360Desc} />
-            
-            <TechnologyBadge code="go" />
-            <TechnologyBadge code="mysql" />
-            <TechnologyBadge code="linux" />
-        </article>
-    </section>
+      <p set:html={t.portfolioPage.vigo360Desc} />
+
+      <TechnologyBadge code="go" />
+      <TechnologyBadge code="mysql" />
+      <TechnologyBadge code="linux" />
+    </article>
+  </section>
 </Layout>
 
 <style>
-    section {
-        display: grid;
-        grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
-        gap: 1rem;
-    }
-
-    article {
-        padding: 1rem;
-        border: 1px solid var(--accent);
-        border-radius: 0.5rem;
-    }
-
-    article h3 {
-        margin-top: 0;
-    }
-</style>
\ No newline at end of file
+  section {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
+    gap: 1rem;
+  }
+
+  article {
+    padding: 1rem;
+    border: 1px solid var(--accent);
+    border-radius: 0.5rem;
+  }
+
+  article h3 {
+    margin-top: 0;
+  }
+</style>
diff --git a/src/layouts/TrajectoryPageLayout.astro b/src/layouts/TrajectoryPageLayout.astro
index 1739a32..a5bfb46 100644
--- a/src/layouts/TrajectoryPageLayout.astro
+++ b/src/layouts/TrajectoryPageLayout.astro
@@ -5,77 +5,84 @@ import Layout from "./Layout.astro";
 const t = useTranslations(Astro.currentLocale);
 
 const schema = {
-    "@context": "https://schema.org",
-    "@type": "WebPage",
-    url: "https://www.costas.dev/trajectory",
-    headline: t.trajectoryPage.headline,
+  "@context": "https://schema.org",
+  "@type": "WebPage",
+  url: "https://www.costas.dev/trajectory",
+  headline: t.trajectoryPage.headline,
 };
 ---
 
-<Layout title={t.trajectoryPage.title} description={t.trajectoryPage.description}>
-    <script
-        is:inline
-        type="application/ld+json"
-        slot="head-jsonld"
-        set:html={JSON.stringify(schema)}
-    />
+<Layout
+  title={t.trajectoryPage.title}
+  description={t.trajectoryPage.description}
+>
+  <script
+    is:inline
+    type="application/ld+json"
+    slot="head-jsonld"
+    set:html={JSON.stringify(schema)}
+  />
 
-    <h1>{t.trajectoryPage.headline}</h1>
+  <h1>{t.trajectoryPage.headline}</h1>
 
-    <p>{t.trajectoryPage.intro}</p>
+  <p>{t.trajectoryPage.intro}</p>
 
-    <h2>{t.trajectoryPage.techTitle}</h2>
+  <h2>{t.trajectoryPage.techTitle}</h2>
 
-    <p>{t.trajectoryPage.techDescription1}</p>
+  <p>{t.trajectoryPage.techDescription1}</p>
 
-    <p>{t.trajectoryPage.techDescription2}</p>
+  <p>{t.trajectoryPage.techDescription2}</p>
 
-    <h2>{t.trajectoryPage.educationTitle}</h2>
+  <h2>{t.trajectoryPage.educationTitle}</h2>
 
-    <ul>
-        <li>
-            <strong>{t.trajectoryPage.efsetCert1}</strong>
-            {t.trajectoryPage.efsetCert2} <a
-                href="https://cert.efset.org/es/Yxzc9L"
-                >{t.trajectoryPage.viewCertificate}</a
-            >
-        </li>
+  <ul>
+    <li>
+      <strong>{t.trajectoryPage.efsetCert1}</strong>
+      {t.trajectoryPage.efsetCert2}
+      <a href="https://cert.efset.org/es/Yxzc9L"
+        >{t.trajectoryPage.viewCertificate}</a
+      >
+    </li>
 
-        <li>
-            <strong>{t.trajectoryPage.azureDeveloperCert1}</strong>
-            {t.trajectoryPage.azureDeveloperCert2} <a
-                href="https://learn.microsoft.com/api/credentials/share/en-us/ariel-costas/E15072607CCF2DA9?sharingId=149A1CD9C13790F4"
-                >{t.trajectoryPage.viewCredential}</a
-            >.
-        </li>
+    <li>
+      <strong>{t.trajectoryPage.azureDeveloperCert1}</strong>
+      {t.trajectoryPage.azureDeveloperCert2}
+      <a
+        href="https://learn.microsoft.com/api/credentials/share/en-us/ariel-costas/E15072607CCF2DA9?sharingId=149A1CD9C13790F4"
+        >{t.trajectoryPage.viewCredential}</a
+      >.
+    </li>
 
-        <li>
-            <strong>{t.trajectoryPage.azureDevOpsCert1}</strong>
-            {t.trajectoryPage.azureDevOpsCert2} <a
-                href="https://learn.microsoft.com/api/credentials/share/en-us/ariel-costas/5FB94876A1701595?sharingId=149A1CD9C13790F4"
-                >{t.trajectoryPage.viewCredential}</a
-            >
-        </li>
+    <li>
+      <strong>{t.trajectoryPage.azureDevOpsCert1}</strong>
+      {t.trajectoryPage.azureDevOpsCert2}
+      <a
+        href="https://learn.microsoft.com/api/credentials/share/en-us/ariel-costas/5FB94876A1701595?sharingId=149A1CD9C13790F4"
+        >{t.trajectoryPage.viewCredential}</a
+      >
+    </li>
 
-        <li>
-            <strong>{t.trajectoryPage.higherTechCert1}</strong>
-            {t.trajectoryPage.higherTechCert2} <a href="https://iesteis.es/">{t.trajectoryPage.higherTechCert3}</a> {t.trajectoryPage.higherTechCert4}
-        </li>
-    </ul>
+    <li>
+      <strong>{t.trajectoryPage.higherTechCert1}</strong>
+      {t.trajectoryPage.higherTechCert2}
+      <a href="https://iesteis.es/">{t.trajectoryPage.higherTechCert3}</a>
+      {t.trajectoryPage.higherTechCert4}
+    </li>
+  </ul>
 
-    <h2>{t.trajectoryPage.experienceTitle}</h2>
+  <h2>{t.trajectoryPage.experienceTitle}</h2>
 
-    <h3>{t.trajectoryPage.estelaria1}</h3>
+  <h3>{t.trajectoryPage.estelaria1}</h3>
 
-    <p>{t.trajectoryPage.estelaria2}</p>
+  <p>{t.trajectoryPage.estelaria2}</p>
 
-    <p>{t.trajectoryPage.estelaria3}</p>
+  <p>{t.trajectoryPage.estelaria3}</p>
 
-    <h3>{t.trajectoryPage.polygon1}</h3>
+  <h3>{t.trajectoryPage.polygon1}</h3>
 
-    <p>{t.trajectoryPage.polygon2}</p>
+  <p>{t.trajectoryPage.polygon2}</p>
 
-    <h2>{t.trajectoryPage.projectsTitle}</h2>
+  <h2>{t.trajectoryPage.projectsTitle}</h2>
 
-    <p set:html={t.trajectoryPage.projectsDescription} />
+  <p set:html={t.trajectoryPage.projectsDescription} />
 </Layout>
-- 
cgit v1.3