feat: add Dockerfile for containerized build and deployment

Dockerfile

@@ -0,0 +1,19 @@
+FROM oven/bun:alpine AS builder
+
+WORKDIR /app
+
+COPY . .
+ENV NODE_ENV=production
+ENV CI=true
+RUN bun install --frozen-lockfile --production
+
+RUN bun run build
+
+FROM joseluisq/static-web-server:2-alpine AS runner
+
+WORKDIR /public
+
+COPY --from=builder /app/dist .
+ENV SERVER_ROOT="/public"
+
+EXPOSE 80

panda.config.ts

@@ -9,9 +9,10 @@ export default defineConfig({
   exclude: [],
   globalCss: {
     body: {
-      fontFamily: "'Roboto Variable', sans-serif",
       backgroundColor: 'neutral.1',
-      color: 'neutral.12'
+      color: 'neutral.12',
+      fontFamily: "'Roboto Variable', sans-serif",
+      lineHeight: 'tight'
     },
     '*, *::before, *::after': {
       margin: 0,
@@ -19,7 +20,33 @@ export default defineConfig({
       boxSizing: 'border-box'
     },
     'h1, h2, h3, h4, h5, h6': {
-      fontWeight: ''
+      fontWeight: '700',
+      textWrap: 'balance',
+      lineHeight: 'normal'
+    },
+    h1: {
+      fontFamily: 'orbitron',
+      fontWeight: '900',
+      fontSize: 'h1'
+    },
+    h2: {
+      fontSize: 'h2'
+    },
+    h3: {
+      fontSize: 'h3'
+    },
+    h4: {
+      fontSize: 'h4'
+    },
+    h5: {
+      fontSize: 'h5'
+    },
+    h6: {
+      fontSize: 'h6'
+    },
+    p: {
+      fontSize: 'body',
+      textWrap: 'pretty'
     }
   },
   theme: {

public/svg/bsky.svg

@@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="600" height="530" version="1.1" xmlns="http://www.w3.org/2000/svg">
+ <path d="m135.72 44.03c66.496 49.921 138.02 151.14 164.28 205.46 26.262-54.316 97.782-155.54 164.28-205.46 47.98-36.021 125.72-63.892 125.72 24.795 0 17.712-10.155 148.79-16.111 170.07-20.703 73.984-96.144 92.854-163.25 81.433 117.3 19.964 147.14 86.092 82.697 152.22-122.39 125.59-175.91-31.511-189.63-71.766-2.514-7.3797-3.6904-10.832-3.7077-7.8964-0.0174-2.9357-1.1937 0.51669-3.7077 7.8964-13.714 40.255-67.233 197.36-189.63 71.766-64.444-66.128-34.605-132.26 82.697-152.22-67.108 11.421-142.55-7.4491-163.25-81.433-5.9562-21.282-16.111-152.36-16.111-170.07 0-88.687 77.742-60.816 125.72-24.795z" fill="#1185fe"/>
+</svg>

public/svg/comment-text.svg

@@ -0,0 +1,37 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   viewBox="0 0 512 512"
+   version="1.1"
+   id="svg1"
+   sodipodi:docname="comment-text.svg"
+   inkscape:version="1.4 (e7c3feb100, 2024-10-09)"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <defs
+     id="defs1" />
+  <sodipodi:namedview
+     id="namedview1"
+     pagecolor="#ffffff"
+     bordercolor="#000000"
+     borderopacity="0.25"
+     inkscape:showpageshadow="2"
+     inkscape:pageopacity="0.0"
+     inkscape:pagecheckerboard="0"
+     inkscape:deskcolor="#d1d1d1"
+     inkscape:zoom="1.65625"
+     inkscape:cx="256.30189"
+     inkscape:cy="256"
+     inkscape:window-width="1920"
+     inkscape:window-height="1057"
+     inkscape:window-x="0"
+     inkscape:window-y="0"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="svg1" />
+  <!--! Font Awesome Pro 6.0.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. -->
+  <path
+     d="M256 31.1c-141.4 0-255.1 93.13-255.1 208c0 47.62 19.91 91.25 52.91 126.3c-14.88 39.5-45.87 72.88-46.37 73.25c-6.625 7-8.374 17.25-4.624 26C5.818 474.3 14.38 480 24 480c61.5 0 109.1-25.75 139.1-46.25c28.88 9 60.15 14.25 92.9 14.25c141.4 0 255.1-93.13 255.1-207.1S397.4 31.1 256 31.1zM256.1 400c-26.75 0-53.13-4.125-78.38-12.12L154.9 380.8L135.4 394.5c-14.25 10.12-33.88 21.38-57.5 29c7.375-12.12 14.38-25.75 19.88-40.25l10.62-28l-20.62-21.88C69.82 314.1 48.07 282.3 48.07 240c0-88.25 93.25-160 208-160s208 71.75 208 160S370.8 400 256.1 400zM328 160h-144C170.8 160 160 170.7 160 183.1S170.8 208 184 208h48v104c0 13.25 10.75 23.1 23.1 23.1S280 325.3 280 312V208h48C341.3 208 352 197.2 352 183.1S341.3 160 328 160z"
+     id="path1"
+     style="fill:#12a594;fill-opacity:1" />
+</svg>

public/svg/twitch.svg

@@ -0,0 +1,37 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   viewBox="0 0 512 512"
+   version="1.1"
+   id="svg1"
+   sodipodi:docname="twitch.svg"
+   inkscape:version="1.4 (e7c3feb100, 2024-10-09)"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <defs
+     id="defs1" />
+  <sodipodi:namedview
+     id="namedview1"
+     pagecolor="#ffffff"
+     bordercolor="#000000"
+     borderopacity="0.25"
+     inkscape:showpageshadow="2"
+     inkscape:pageopacity="0.0"
+     inkscape:pagecheckerboard="0"
+     inkscape:deskcolor="#d1d1d1"
+     inkscape:zoom="1.65625"
+     inkscape:cx="256.30189"
+     inkscape:cy="256"
+     inkscape:window-width="1920"
+     inkscape:window-height="1057"
+     inkscape:window-x="0"
+     inkscape:window-y="0"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="svg1" />
+  <!--! Font Awesome Pro 6.0.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. -->
+  <path
+     d="M391.17,103.47H352.54v109.7h38.63ZM285,103H246.37V212.75H285ZM120.83,0,24.31,91.42V420.58H140.14V512l96.53-91.42h77.25L487.69,256V0ZM449.07,237.75l-77.22,73.12H294.61l-67.6,64v-64H140.14V36.58H449.07Z"
+     id="path1"
+     style="fill:#9146ff;fill-opacity:1" />
+</svg>

public/svg/twitter.svg

@@ -0,0 +1,37 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   viewBox="0 0 512 512"
+   version="1.1"
+   id="svg1"
+   sodipodi:docname="twitter.svg"
+   inkscape:version="1.4 (e7c3feb100, 2024-10-09)"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <defs
+     id="defs1" />
+  <sodipodi:namedview
+     id="namedview1"
+     pagecolor="#ffffff"
+     bordercolor="#000000"
+     borderopacity="0.25"
+     inkscape:showpageshadow="2"
+     inkscape:pageopacity="0.0"
+     inkscape:pagecheckerboard="0"
+     inkscape:deskcolor="#d1d1d1"
+     inkscape:zoom="1.65625"
+     inkscape:cx="256.30189"
+     inkscape:cy="256"
+     inkscape:window-width="1920"
+     inkscape:window-height="1057"
+     inkscape:window-x="0"
+     inkscape:window-y="0"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="svg1" />
+  <!--! Font Awesome Pro 6.0.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. -->
+  <path
+     d="M459.37 151.716c.325 4.548.325 9.097.325 13.645 0 138.72-105.583 298.558-298.558 298.558-59.452 0-114.68-17.219-161.137-47.106 8.447.974 16.568 1.299 25.34 1.299 49.055 0 94.213-16.568 130.274-44.832-46.132-.975-84.792-31.188-98.112-72.772 6.498.974 12.995 1.624 19.818 1.624 9.421 0 18.843-1.3 27.614-3.573-48.081-9.747-84.143-51.98-84.143-102.985v-1.299c13.969 7.797 30.214 12.67 47.431 13.319-28.264-18.843-46.781-51.005-46.781-87.391 0-19.492 5.197-37.36 14.294-52.954 51.655 63.675 129.3 105.258 216.365 109.807-1.624-7.797-2.599-15.918-2.599-24.04 0-57.828 46.782-104.934 104.934-104.934 30.213 0 57.502 12.67 76.67 33.137 23.715-4.548 46.456-13.32 66.599-25.34-7.798 24.366-24.366 44.833-46.132 57.827 21.117-2.273 41.584-8.122 60.426-16.243-14.292 20.791-32.161 39.308-52.628 54.253z"
+     id="path1"
+     style="fill:#1da1f2;fill-opacity:1" />
+</svg>

public/svg/youtube.svg

@@ -0,0 +1,37 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   viewBox="0 0 576 512"
+   version="1.1"
+   id="svg1"
+   sodipodi:docname="youtube.svg"
+   inkscape:version="1.4 (e7c3feb100, 2024-10-09)"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <defs
+     id="defs1" />
+  <sodipodi:namedview
+     id="namedview1"
+     pagecolor="#ffffff"
+     bordercolor="#000000"
+     borderopacity="0.25"
+     inkscape:showpageshadow="2"
+     inkscape:pageopacity="0.0"
+     inkscape:pagecheckerboard="0"
+     inkscape:deskcolor="#d1d1d1"
+     inkscape:zoom="1.5260417"
+     inkscape:cx="288"
+     inkscape:cy="256.21843"
+     inkscape:window-width="1920"
+     inkscape:window-height="1057"
+     inkscape:window-x="0"
+     inkscape:window-y="0"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="svg1" />
+  <!--! Font Awesome Pro 6.0.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. -->
+  <path
+     d="M549.655 124.083c-6.281-23.65-24.787-42.276-48.284-48.597C458.781 64 288 64 288 64S117.22 64 74.629 75.486c-23.497 6.322-42.003 24.947-48.284 48.597-11.412 42.867-11.412 132.305-11.412 132.305s0 89.438 11.412 132.305c6.281 23.65 24.787 41.5 48.284 47.821C117.22 448 288 448 288 448s170.78 0 213.371-11.486c23.497-6.321 42.003-24.171 48.284-47.821 11.412-42.867 11.412-132.305 11.412-132.305s0-89.438-11.412-132.305zm-317.51 213.508V175.185l142.739 81.205-142.739 81.201z"
+     id="path1"
+     style="fill:#ff0000;fill-opacity:1" />
+</svg>

src/components/SrJuggernautLogo.astro

@@ -0,0 +1,73 @@
+---
+export interface Props {
+  width?: number
+  height?: number
+  className?: string
+}
+
+const { width = 600, height = 600, className } = Astro.props
+---
+
+<svg
+  version="1.1"
+  id="svg1"
+  width={width}
+  height={height}
+  class={className}
+  viewBox="0 0 2500 2500"
+  xmlns:xlink="http://www.w3.org/1999/xlink"
+  xmlns="http://www.w3.org/2000/svg"
+>
+  <title>SrJuggernaut Logo</title>
+  <g
+    id="g193"
+    style="display:inline"
+    transform="translate(69.745229,100.53816)"
+  >
+    <path
+      id="path173"
+      d="M 0,0 V 281.011 L 145.56,378.7 193.8,496.063 -38.59,395.585 48.25,712.774 274.98,903.33 c 0,0 71.16,-55.478 137.49,-172.464 V 436.59 Z"
+      transform="matrix(1.1293021,0,0,-1.2103512,1343.6878,1768.72)"
+    />
+    <path
+      id="path174"
+      d="M 0,0 V 281.011 L -145.554,378.7 -193.796,496.063 38.593,395.585 -48.242,712.774 -274.978,903.33 c 0,0 -71.156,-55.48 -137.488,-172.466 V 436.59 Z"
+      transform="matrix(1.1293021,0,0,-1.2103512,1024.9874,1768.72)"
+    />
+    <path
+      id="path175"
+      d="m 0,0 -194.55,-164.022 66.71,253.269 c 0,0 91.66,-50.654 127.84,-89.247"
+      transform="matrix(1.1293021,0,0,-1.2103512,1632.4278,656.39878)"
+    />
+    <path
+      id="path176"
+      d="M 0,0 194.55,-164.022 127.841,89.247 C 127.841,89.247 36.181,38.593 0,0"
+      transform="matrix(1.1293021,0,0,-1.2103512,736.24636,656.39878)"
+    />
+    <path
+      id="path177"
+      d="m 0,0 68.44,50.654 183.32,677.795 c 0,0 -231.56,229.147 -501.714,0 33.769,-118.192 183.318,-677.8 183.318,-677.8 z"
+      transform="matrix(1.1293021,0,0,-1.2103512,1184.6821,1397.9435)"
+    />
+    <path
+      id="path178"
+      d="m 0,0 -26.533,74.78 -410.054,446.234 -2.412,168.845 -156.785,-118.192 -125.429,-69.95 -108.543,-106.132 173.669,28.945 176.083,-94.071 -14.473,-50.654 L -62.714,-9.64 Z"
+      transform="matrix(1.1293021,0,0,-1.2103512,992.29978,1894.2576)"
+    />
+    <path
+      id="path179"
+      d="M 0,0 26.54,74.77 436.59,521.006 439,689.851 595.79,571.659 721.21,501.709 829.76,395.578 656.09,424.522 480.01,330.451 494.48,279.798 62.72,-9.65 Z"
+      transform="matrix(1.1293021,0,0,-1.2103512,1368.2049,1891.3287)"
+    />
+    <path
+      id="path180"
+      d="M 0,0 28.58,66.523 170.31,141.547 148.07,83.058 Z"
+      transform="matrix(1.1293021,0,0,-1.2103512,1317.2846,1390.9331)"
+    />
+    <path
+      id="path181"
+      d="m 0,0 -28.579,66.523 -141.731,75.024 22.241,-58.489 z"
+      transform="matrix(1.1293021,0,0,-1.2103512,1067.7417,1393.8525)"
+    />
+  </g>
+</svg>

src/components/layout/Basic.astro

@@ -0,0 +1,63 @@
+---
+import Footer from '@/components/layout/parts/Footer.astro'
+import Header from '@/components/layout/parts/Header.astro'
+import '@/styles/global.css'
+import '@fontsource-variable/roboto'
+import '@fontsource/orbitron/900.css'
+import '@fortawesome/fontawesome-free/css/brands.min.css'
+import '@fortawesome/fontawesome-free/css/fontawesome.min.css'
+import '@fortawesome/fontawesome-free/css/solid.min.css'
+import { css } from '@styled-system/css'
+
+export interface Props {
+  title?: string
+  description?: string
+  imageUrl?: string
+}
+
+const bodyClass = css({
+  display: 'flex',
+  flexDirection: 'column',
+  height: 'calc(100vh)'
+})
+
+const mainClass = css({
+  flexGrow: 1
+})
+
+const { title, description, imageUrl } = Astro.props
+const permalink = new URL(Astro.url.pathname, Astro.site).href
+const seoTitle =
+  title === undefined ? 'Juggernaut Plays' : `${title} | Juggernaut Plays`
+const seoDescription =
+  description === undefined
+    ? 'Oops, parece que no hay descripción.'
+    : description
+const seoImage =
+  imageUrl === undefined ? 'https://srjuggernaut.dev/DefaultOG.png' : imageUrl
+---
+
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <link rel="icon" type="image/svg+xml" href="/favicon.svg">
+    <link rel="icon" href="/favicon.ico">
+    <meta name="viewport" content="width=device-width">
+    <!-- SEO -->
+
+    <title>{seoTitle}</title>
+    <meta name="description" content={seoDescription}>
+
+    <!-- Open Graph -->
+
+    <meta property="og:title" content={seoTitle}>
+    <meta property="og:description" content={seoDescription}>
+    <meta property="og:url" content={permalink}>
+    <meta property="og:image" content={seoImage}>
+  </head>
+  <body class={bodyClass}>
+    <Header />
+    <main class={mainClass}><slot /></main>
+    <Footer />
+  </body>
+</html>

src/components/layout/Landing.astro

@@ -0,0 +1,50 @@
+---
+import '@/styles/global.css'
+import '@fontsource-variable/roboto'
+import '@fontsource/orbitron/900.css'
+import '@fortawesome/fontawesome-free/css/fontawesome.min.css'
+import '@fortawesome/fontawesome-free/css/solid.min.css'
+import '@fortawesome/fontawesome-free/css/brands.min.css'
+import Footer from '@/components/layout/parts/Footer.astro'
+
+export interface Props {
+  title?: string
+  description?: string
+  imageUrl?: string
+}
+
+const { title, description, imageUrl } = Astro.props
+const permalink = new URL(Astro.url.pathname, Astro.site).href
+const seoTitle =
+  title === undefined ? 'Juggernaut Plays' : `${title} | Juggernaut Plays`
+const seoDescription =
+  description === undefined
+    ? 'Oops, parece que no hay descripción.'
+    : description
+const seoImage =
+  imageUrl === undefined ? 'https://srjuggernaut.dev/DefaultOG.png' : imageUrl
+---
+
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <link rel="icon" type="image/svg+xml" href="/favicon.svg">
+    <link rel="icon" href="/favicon.ico">
+    <meta name="viewport" content="width=device-width">
+    <!-- SEO -->
+
+    <title>{seoTitle}</title>
+    <meta name="description" content={seoDescription}>
+
+    <!-- Open Graph -->
+
+    <meta property="og:title" content={seoTitle}>
+    <meta property="og:description" content={seoDescription}>
+    <meta property="og:url" content={permalink}>
+    <meta property="og:image" content={seoImage}>
+  </head>
+  <body>
+    <main><slot /></main>
+    <Footer />
+  </body>
+</html>

src/components/layout/parts/Footer.astro

@@ -0,0 +1,25 @@
+---
+import { css } from '@styled-system/css'
+
+const footerLegendClass = css({
+  paddingBlock: 'md',
+  textAlign: 'center',
+  fontSize: 'sm'
+})
+const footerLegendHeartClass = css({
+  color: 'red'
+})
+---
+
+<footer>
+  <p class={footerLegendClass}>
+    Hecho con
+    <span class={footerLegendHeartClass}
+      ><i class="fa-solid fa-heart"></i></span
+    >
+    y
+    <a href="https://astro.build">Astro</a>
+    por
+    <a href="https://srjuggernaut.dev">Jugger</a>.
+  </p>
+</footer>

src/components/layout/parts/Header.astro

@@ -0,0 +1,74 @@
+---
+import { css } from '@styled-system/css'
+import SrJuggernautLogo from '@/components/SrJuggernautLogo.astro'
+import { srOnlyClass } from '@/styles/srOnly'
+
+const headerClass = css({
+  backgroundColor: 'neutral.2',
+  color: 'neutral.12'
+})
+
+const headerContainerClass = css({
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'space-between',
+  margin: '0 auto',
+  padding: 'md',
+  width: {
+    base: '100%',
+    sm: 'breakpoint-sm',
+    md: 'breakpoint-md',
+    lg: 'breakpoint-lg',
+    xl: 'breakpoint-xl',
+    '2xl': 'breakpoint-2xl'
+  }
+})
+
+const headerLogoClass = css({
+  fill: 'neutral.12',
+  width: '32px',
+  height: 'auto'
+})
+
+const headerMenuClass = css({
+  display: 'flex',
+  alignItems: 'center',
+  gap: 'md'
+})
+
+const headerMenuLinkClass = css({
+  display: 'inline-flex',
+  alignItems: 'center',
+  gap: 'sm',
+  paddingInline: 'md',
+  paddingBlock: 'sm',
+  borderRadius: 'sm',
+  textDecoration: 'none',
+  _hover: {
+    backgroundColor: 'primary.3'
+  }
+})
+---
+
+<header class={headerClass}>
+  <div class={headerContainerClass}>
+    <div>
+      <a href="/">
+        <SrJuggernautLogo className={headerLogoClass} />
+        <span class={srOnlyClass}>Ir al inicio</span>
+      </a>
+    </div>
+    <nav>
+      <menu class={headerMenuClass}>
+        <li>
+          <a
+            class={headerMenuLinkClass}
+            href="https://blog.juggernautplays.com"
+          >
+            Blog
+          </a>
+        </li>
+      </menu>
+    </nav>
+  </div>
+</header>

src/components/pages/Home/Hero.astro

@@ -0,0 +1,55 @@
+---
+import { css } from '@styled-system/css'
+import SrJuggernautLogo from '@/components/SrJuggernautLogo.astro'
+
+const heroSectionClass = css({
+  display: 'flex',
+  flexDirection: 'column',
+  alignItems: 'center',
+  justifyContent: 'center',
+  minHeight: '50vh',
+  background:
+    'linear-gradient(172deg, {colors.neutral.3} 0%, {colors.neutral.1} 78%)'
+})
+
+const heroContainerClass = css({
+  display: 'flex',
+  flexDirection: 'column',
+  alignItems: 'center',
+  justifyContent: 'center',
+  gap: 'sm'
+})
+
+const heroLogoClass = css({
+  fill: 'neutral.12',
+  width: {
+    base: '100%',
+    sm: 'breakpoint-sm'
+  },
+  height: '100%'
+})
+
+const heroTitleClass = css({
+  fontFamily: 'orbitron',
+  fontSize: 'calc(2rem + 2vw)',
+  textAlign: 'center',
+  fontWeight: '900',
+  color: 'neutral.12'
+})
+
+const heroDescriptionClass = css({
+  color: 'neutral.11',
+  textAlign: 'center',
+  fontSize: 'large'
+})
+---
+
+<section class={heroSectionClass}>
+  <div class={heroContainerClass}>
+    <SrJuggernautLogo className={heroLogoClass} />
+    <h1 class={heroTitleClass}>Juggernaut Plays</h1>
+    <p class={heroDescriptionClass}>
+      A veces hago cosas en internet, luego hablo de ellas.
+    </p>
+  </div>
+</section>

src/components/pages/Home/Links.astro

@@ -0,0 +1,215 @@
+---
+import { css, cx } from '@styled-system/css'
+import { flex } from '@styled-system/patterns'
+import { button, details } from '@styled-system/recipes'
+import { srOnlyClass } from '@/styles/srOnly'
+
+const linksSectionClass = css({
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  gap: 'md',
+  padding: 'md',
+  minHeight: '35vh'
+})
+
+const linksContainerClass = css({
+  margin: '0 auto',
+  width: {
+    base: '100%',
+    sm: 'breakpoint-sm',
+    md: 'breakpoint-md',
+    lg: 'breakpoint-lg',
+    xl: 'breakpoint-xl',
+    '2xl': 'breakpoint-2xl'
+  }
+})
+
+const linksCollectionClass = flex({ flexDirection: 'column', gap: 'md' })
+
+const linksGridClass = css({
+  display: 'grid',
+  gridTemplateColumns: 'repeat(auto-fill, minmax(300px, 1fr))',
+  justifyContent: 'center',
+  alignItems: 'start',
+  gap: 'md'
+})
+
+const detailsClasses = details({ color: 'neutral' })
+
+const detailsDetailsClass = cx(
+  detailsClasses.details,
+  css({
+    '&:is([open])': {
+      '& summary': {
+        flexDirection: 'column',
+        alignItems: 'center',
+        '& img': {
+          width: '75px'
+        },
+        '& a': {
+          opacity: 0,
+          display: 'none'
+        }
+      }
+    },
+    '&:not([open])': {
+      '& summary': {
+        flexDirection: 'row',
+        alignItems: 'center',
+        '& img': {
+          width: '1.75em'
+        },
+        '& a': {
+          opacity: 1,
+          display: 'inline-block'
+        }
+      }
+    }
+  })
+)
+
+const detailsTitleClass = css({
+  textAlign: 'center'
+})
+
+const detailsSummaryClass = cx(
+  css({
+    display: 'flex',
+    justifyContent: 'space-between',
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 'sm',
+    transitionProperty: 'all',
+    transitionDuration: 'fast',
+    transitionTimingFunction: 'easeOutQuint',
+    transitionBehavior: 'allow-discrete',
+    '& img': {
+      width: '1.75em',
+      transitionProperty: 'width, height',
+      transitionDuration: 'normal',
+      transitionTimingFunction: 'easeOutQuint',
+      transitionBehavior: 'allow-discrete'
+    },
+    '& a': {
+      transitionProperty: 'display, opacity',
+      transitionDuration: '0',
+      transitionTimingFunction: 'easeOutQuint',
+      transitionBehavior: 'allow-discrete'
+    },
+    '& h3': {
+      transitionProperty: 'all',
+      transitionDuration: 'normal',
+      transitionTimingFunction: 'easeOutQuint',
+      transitionBehavior: 'allow-discrete'
+    }
+  }),
+  detailsClasses.summary
+)
+
+interface Link {
+  linkIconUrl?: string
+  label: string
+  url: string
+  description: string
+}
+
+interface LinkCollection {
+  title: string
+  links: Link[]
+}
+
+const links: LinkCollection[] = [
+  {
+    title: 'Proyectos',
+    links: [
+      {
+        label: 'Blog',
+        url: 'https://blog.juggernautplays.com',
+        description:
+          'Me gusta escribir sobre las cosa con las que "juego", hablo sobre herramientas para creación de contenido y recientemente sobre IA.',
+        linkIconUrl: '/favicon.svg'
+      },
+      {
+        label: 'EntGamers',
+        url: 'https://entgamers.pro',
+        description: 'Comunidad de Gamers para Gamers.',
+        linkIconUrl: '/svg/EntGamers.svg'
+      }
+    ]
+  },
+  {
+    title: 'Redes Sociales',
+    links: [
+      {
+        label: 'Twitch',
+        url: 'https://www.twitch.tv/juggernautplays',
+        description:
+          'Mi Canal de Twitch. Hago Streamings de Juegos sobre todo.',
+        linkIconUrl: '/svg/twitch.svg'
+      },
+      {
+        label: 'YouTube',
+        url: 'https://www.youtube.com/JuggernautPlays',
+        description:
+          'Mi Canal de YouTube. Si les soy sincero, ha visto tiempos mejores. Ahora no estoy muy activo, pero me gustaría seguir creando contenido.',
+        linkIconUrl: '/svg/youtube.svg'
+      },
+      {
+        linkIconUrl: '/svg/bsky.svg',
+        label: 'BlueSky',
+        url: 'https://bsky.app/profile/jugger.srjuggernaut.dev',
+        description:
+          'Mi Perfil en BlueSky. No publico mucho, pero puedes encontrarme ahí.'
+      },
+      {
+        label: 'Twitter',
+        url: 'https://twitter.com/juggernautplays',
+        description:
+          'Mi cuenta de Twitter. Hago Streamings de Juegos sobre todo.',
+        linkIconUrl: '/svg/twitter.svg'
+      }
+    ]
+  }
+]
+---
+
+<section class={linksSectionClass}>
+  <div class={linksContainerClass}>
+    <h2 class={srOnlyClass}>Links</h2>
+    {links.map((linkCollection) => (
+      <div class={linksCollectionClass}>
+        <h3 class={detailsTitleClass}>{linkCollection.title}</h3>
+        <div class={linksGridClass}>
+          {linkCollection.links.map((link) => (
+            <details class={detailsDetailsClass}>
+              <summary class={detailsSummaryClass}>
+                {(link.linkIconUrl !== undefined && link.linkIconUrl !== '') && <img src={link.linkIconUrl} alt={link.label} />}              
+                <h3>
+                  {link.label} 
+                </h3>
+                <a target="_blank" class={button({color: 'primary',size: 'large'})} href={link.url}>
+                  <i class="fa-solid fa-up-right-from-square"></i>
+                  <span class={srOnlyClass}
+                  >
+                    Visitar
+                  </span>
+                </a>
+              </summary>
+              <div class={detailsClasses.content}>
+                <p>
+                  {link.description}
+                </p>
+                <div class={flex({ justifyContent: 'end', gap: 'sm' })}>
+                  <a target="_blank" class={button({color: 'primary',size: 'large'})} href={link.url}>
+                    Visitar
+                  </a>
+                </div>
+              </div>
+            </details>
+          ))}
+        </div>
+      </div>
+    ))}
+  </div>
+</section>

src/components/ui/Button.astro

@@ -0,0 +1,22 @@
+---
+import { cx } from '@styled-system/css'
+import {
+  type ButtonVariantProps,
+  button as buttonRecipe
+} from '@styled-system/recipes/button'
+import type { HTMLAttributes } from 'astro/types'
+import type { MergeOmitting } from '@/types/utilities'
+
+type ButtonProps = MergeOmitting<HTMLAttributes<'button'>, ButtonVariantProps>
+
+export type Props = ButtonProps
+
+const { class: className, type = 'button', ...props } = Astro.props
+
+const [buttonRecipeArgs, ButtonProps] = buttonRecipe.splitVariantProps(props)
+const buttonClass = buttonRecipe(buttonRecipeArgs)
+---
+
+<button {...ButtonProps} type={type} class={cx(buttonClass, className)}>
+  <slot />
+</button>

src/pages/404.astro

@@ -0,0 +1,30 @@
+---
+import { css } from '@styled-system/css'
+import Basic from '@/components/layout/Basic.astro'
+
+const titleClass = css({
+  fontFamily: 'orbitron',
+  fontSize: '4em',
+  textAlign: 'center'
+})
+
+const notFoundContainerClass = css({
+  display: 'flex',
+  flexDirection: 'column',
+  alignItems: 'center',
+  justifyContent: 'center',
+  width: '100%',
+  height: '100%'
+})
+---
+
+<Basic title="404" description="La página que buscas no existe.">
+  <div class={notFoundContainerClass}>
+    <h1 class={titleClass}>404</h1>
+    <p>
+      Oops, la página que buscas no existe. Vuelve a la
+      <a href="/">página principal</a>
+      e intenta de nuevo.
+    </p>
+  </div>
+</Basic>

src/pages/index.astro

@@ -1,22 +1,13 @@
 ---
-import '@/styles/global.css'
+import Landing from '@/components/layout/Landing.astro'
-import '@fontsource-variable/roboto'
+import Hero from '@/components/pages/Home/Hero.astro'
-import '@fontsource/orbitron/900.css'
+import Links from '@/components/pages/Home/Links.astro'
-import '@fortawesome/fontawesome-free/css/fontawesome.min.css'
-import '@fortawesome/fontawesome-free/css/solid.min.css'
-import '@fortawesome/fontawesome-free/css/brands.min.css'
 ---
 
-<html lang="en">
+<Landing
-  <head>
+  title="Home"
-    <meta charset="utf-8">
+  description="A veces hago cosas en internet, luego hablo de ellas."
-    <link rel="icon" type="image/svg+xml" href="/favicon.svg">
+>
-    <link rel="icon" href="/favicon.ico">
+  <Hero />
-    <meta name="viewport" content="width=device-width">
+  <Links />
-    <meta name="generator" content={Astro.generator}>
+</Landing>
-    <title>Astro</title>
-  </head>
-  <body>
-    <h1>Astro</h1>
-  </body>
-</html>

src/styles/srOnly.ts

@@ -0,0 +1,13 @@
+import { css } from '@styled-system/css'
+
+export const srOnlyClass = css({
+  position: 'absolute',
+  width: 1,
+  height: 1,
+  padding: 0,
+  margin: -1,
+  overflow: 'hidden',
+  clip: 'rect(0, 0, 0, 0)',
+  whiteSpace: 'nowrap',
+  border: 0
+})

src/styles/theme.ts

@@ -9,9 +9,9 @@ export const breakpoints = {
 } satisfies ThemeConfig['breakpoints']
 
 export const themeConfig: ThemeConfig = {
-  neutral: 'gray',
+  neutral: 'slate',
   colorVariation: { dark: true, alpha: false, p3: false },
-  includeColors: ['teal', 'gray'],
+  includeColors: ['teal', 'slate'],
   semanticColors: { primary: 'teal' },
   breakpoints
 }

src/types/utilities.ts

@@ -0,0 +1,5 @@
+export type MergeOmitting<ReplaceableType, ReplacerType> = Omit<
+  ReplaceableType,
+  keyof ReplacerType
+> &
+  ReplacerType