Change landing page

Jenkinsfile

@@ -1,25 +1,29 @@
 pipeline {
-    agent any
+agent {
-    environment {
+		docker {
-        PATH = "/var/lib/jenkins/.nvm/versions/node/v20.9.0/bin:/var/lib/jenkins/bin:${env.PATH}"
+			image 'node:22'
+		}
 	}
     stages {
-        stage('Install deps') {
+		stage('Install pnpm') {
+			steps {
+				sh 'npm i -g pnpm'
+			}
+		}
+		stage('Install dependencies') {
 			steps {
 				sh 'pnpm i'
 			}
 		}
-        stage('Build') {
+		stage('Buid') {
-            environment {
-                PATH = "${env.WORKSPACE}/node_modules/.bin:${env.PATH}"
-            }
 			steps {
 				sh 'pnpm build'
 			}
 		}
 		stage('Deploy') {
 			steps {
-                sh 'cp -r ./dist/* /var/www/araozu.dev/'
+				sh 'rm -rf /var/www/dev.araozu/*'
+				sh 'mv -f dist/* /var/www/dev.araozu/'
 			}
 		}
 	}

package.json

@@ -10,11 +10,11 @@
     "astro": "astro"
   },
   "dependencies": {
-    "@astrojs/check": "^0.5.10",
+    "@astrojs/check": "^0.9.4",
-    "@astrojs/mdx": "^3.1.2",
+    "@astrojs/mdx": "^3.1.7",
-    "@astrojs/tailwind": "^5.1.0",
+    "@astrojs/tailwind": "^5.1.1",
     "@types/node": "^22.3.0",
-    "astro": "^4.11.5",
+    "astro": "^4.15.11",
     "tailwindcss": "^3.4.5",
     "typescript": "^5.5.3"
   },

public/blog.css

@@ -1,5 +1,5 @@
 :not(pre)>code {
-    font-family: "Iosevka Fixed Web", Iosevka, monospace;
+    font-family: var(--font-mono);
     border: solid 1px var(--c-border-2);
     padding: 0 0.25rem;
     border-radius: 0.25rem;
@@ -33,7 +33,7 @@ pre.astro-code>code .line::before {
 
 #blog h2 {
     font-size: 1.5rem;
-    font-family: "Iosevka Etoile Web", serif;
+    font-family: var(--font-display);
     font-weight: 900;
     margin-top: 3rem;
     margin-bottom: 1.5rem;
@@ -41,7 +41,7 @@ pre.astro-code>code .line::before {
 
 #blog h3 {
     font-size: 1.25rem;
-    font-family: "Iosevka Etoile Web", serif;
+    font-family: var(--font-display);
     font-weight: 900;
     margin-top: 2.25rem;
     margin-bottom: 1.5rem;

public/global.css

@@ -8,24 +8,6 @@
     src: url("/Iosevka/Regular.woff2") format("woff2");
 }
 
-@font-face {
-    font-family: 'Iosevka Fixed Web';
-    font-display: swap;
-    font-weight: 700;
-    font-stretch: normal;
-    font-style: normal;
-    src: url('/Iosevka/Bold.woff2') format('woff2');
-}
-
-@font-face {
-    font-family: 'Iosevka Etoile Web';
-    font-display: swap;
-    font-weight: 900;
-    font-stretch: normal;
-    font-style: normal;
-    src: url('/IosevkaEtoile/Heavy.woff2') format('woff2');
-}
-
 /* Iosevka from Xe Iaso: https://xeiaso.net/ https://github.com/Xe/iosevka  */
 @font-face {
     font-family: "Iosevka Iaso";
@@ -43,6 +25,10 @@
     --c-bg-2: #18181b;
     --c-border-1: transparent;
     --c-border-2: #606060;
+
+    --font-display: "Atkinson Hyperlegible", sans-serif;
+    --font-body: "Iosevka Iaso", "Iosevka Fixed Web", sans-serif;
+    --font-mono: "Iosevka Fixed Web", Iosevka, sans-serif;
 }
 
 @media (prefers-color-scheme: light) {
@@ -62,6 +48,6 @@ html {
 }
 
 body {
-    font-family: "Iosevka Iaso", "Iosevka Fixed Web", sans-serif;
+    font-family: var(--font-body);
     font-optical-sizing: auto;
 }

src/components/Card.astro

@@ -4,7 +4,7 @@ const { title } = Astro.props;
 
 <div
     x-data="{open: true}"
-    class="shadow-lg p-2 bg-c-bg-2 rounded-md max-w-[50rem] border border-slate-600 dark:border-transparent mb-2"
+    class="shadow-lg p-2 bg-c-bg-2 rounded-md max-w-[50rem] border border-zinc-600 dark:border-zinc-900 mb-2"
 >
     <h2
         class="text-2xl font-bold bg-c-bg-2 py-2 pl-2 cursor-pointer hover:underline sticky top-0 font-etoile"

src/components/Navigation.astro

@@ -1,9 +1,10 @@
 <div class="h-screen">
     <nav
-        class="fixed top-0 left-0 bg-white text-black rotate-[-90deg] font-display
+        class="fixed top-0 left-0 rotate-[-90deg] font-display w-[100vh] translate-y-[100vh] p-2"
-            w-[100vh] translate-y-[100vh] px-8 py-2 shadow shadow-zinc-500"
         style="transform-origin: 0% 0%;"
     >
+        <div class="shadow hover:shadow-md transition-shadow bg-c-bg-2 py-2 px-4 border border-zinc-600 dark:border-zinc-900 rounded-md">
+
         <a class="font-semibold inline-block text-2xl hover:underline" href="/">
             Fernando Araoz
         </a>
@@ -14,22 +15,6 @@
         >
         <a class="ml-6 inline-block hover:underline" href="/blog/es">Es Blog</a>
 
-        <svg width="1.5rem" height="1.5rem" class="absolute -bottom-6 right-0">
+        </div>
-            <filter id='shadow' color-interpolation-filters="sRGB">
-                <feDropShadow dx="1" dy="1" stdDeviation="2"
-                    flood-opacity="1"
-                    flood-color="#71717a"
-                />
-            </filter>
-            <g filter="url(#shadow)">
-                <path d="m 0 0 h 24 v 24 c 0 -12, -12 -24, -24 -24" fill="white" />
-            </g>
-        </svg>
-
-        <svg width="1.5rem" height="1.5rem" class="absolute -bottom-6 left-0">
-            <g filter="url(#shadow)">
-                <path d="m 24 0 h -24 v 24 c 0 -12, 12 -24, 24 -24" fill="white" />
-            </g>
-        </svg>
     </nav>
 </div>

src/components/Sidebar.astro

@@ -1,18 +1,12 @@
 <div class="lg:px-1">
-    <h1 class="text-xl font-light py-4">
-        Hi 👋! I'm
-        <br />
-        <span class="font-bold text-3xl">Fernando Araoz</span>
-    </h1>
     <div class="text-center">
         <div class="inline-block w-28 h-28 lg:w-40 lg:h-40 rounded-full bg-slate-500"></div>
     </div>
-    <p class="text-center">
+
-        I'm a (human) software engineer passionate about web technologies. I
+    <h1 class="text-xl font-light py-4">
-        love building things and learning new stuff.
+        <span class="font-display font-bold text-3xl">Fernando Araoz</span>
+    </h1>
+    <p class="font-display">
+        Human software engineer based in Peru
     </p>
-    <div class="text-center py-4">
-    <a class="inline-block py-2 px-4 rounded bg-blue-600 text-white" href="/blog/en/">Blog (en)</a>
-    <a class="inline-block py-2 px-4 rounded bg-indigo-600 text-white" href="/blog/es/">Blog (es)</a>
-    </div>
 </div>

src/components/index/EsBlogIndex.astro

@@ -0,0 +1,32 @@
+---
+import Card from "../Card.astro"
+
+const allPosts = await Astro.glob("../../pages/blog/en/*.md");
+---
+
+<Card title="en blog">
+    <div class="font-display">
+        <p>
+            Things I've thought about, about programming.
+        </p>
+
+    <ul class="py-4">
+        {
+            allPosts
+                .toSorted((x, y) =>
+                    x.frontmatter.pubDate > y.frontmatter.pubDate ? -1 : 1,
+                )
+                .map((post) => {
+                    return (
+                        <li class="py-1">
+                            {post.frontmatter.pubDate} -
+                            <a class="underline text-lg" href={post.url}>
+                                {post.frontmatter.title}
+                            </a>
+                        </li>
+                    );
+                })
+        }
+    </ul>
+    </div>
+</Card>

src/env.d.ts

@@ -1 +1,2 @@
+/// <reference path="../.astro/types.d.ts" />
 /// <reference types="astro/client" />

src/layouts/BlogLayout.astro

@@ -15,12 +15,10 @@ lang = lang ?? "en";
         <link rel="stylesheet" href="/global.css" />
         <link rel="stylesheet" href="/blog.css" />
         <title>Blog - Fernando Araoz</title>
-        <link rel="preconnect" href="https://fonts.googleapis.com" />
+        <link rel="preconnect" href="https://fonts.googleapis.com">
-        <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+        <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-        <link
+        <link href="https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible:ital,wght@0,400;0,700;1,400;1,700&display=swap" rel="stylesheet">
-            href="https://fonts.googleapis.com/css2?family=Outfit:wght@100..900&display=swap"
+
-            rel="stylesheet"
-        />
         <link
             rel="stylesheet"
             type="text/css"
@@ -34,7 +32,7 @@ lang = lang ?? "en";
                 <div class="py-6">
                     {
                         frontmatter?.title && (
-                            <h1 class="font-etoile text-center text-4xl py-2">
+                            <h1 class="font-display font-bold text-center text-4xl py-2">
                                 {frontmatter.title}
                             </h1>
                         )
@@ -64,26 +62,15 @@ lang = lang ?? "en";
                     }
                 </div>
 
-                <div class="text-base">
+                <div
-                    <slot />
+                    class="text-base shadow-lg p-2 bg-c-bg-2 rounded-md border border-slate-600 dark:border-transparent mb-2"
-                </div>
-
-                <div class="pt-4 border-t border-c-on-bg">
-                    <h3>Comments/Comentarios</h3>
-                    <section id="isso-thread"
-
                 >
-                        <noscript>Javascript needs to be activated to view comments.</noscript>
+                    <slot />
-                    </section>
                 </div>
 
                 <div class="min-h-40"></div>
             </div>
         </NavigationLayout>
 
-        <script data-isso="https://comments.araozu.dev/"
-            data-isso-lang={lang}
-            src="https://comments.araozu.dev/js/embed.min.js"
-        ></script>
     </body>
 </html>

src/layouts/SideProject.astro

@@ -22,12 +22,9 @@ const images_str = JSON.stringify(images);
         <link rel="stylesheet" href="/global.css" />
         <link rel="stylesheet" href="/blog.css" />
         <title>Side projects - Fernando Araoz</title>
-        <link rel="preconnect" href="https://fonts.googleapis.com" />
+        <link rel="preconnect" href="https://fonts.googleapis.com">
-        <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+        <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-        <link
+        <link href="https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible:ital,wght@0,400;0,700;1,400;1,700&display=swap" rel="stylesheet">
-            href="https://fonts.googleapis.com/css2?family=Outfit:wght@100..900&display=swap"
-            rel="stylesheet"
-        />
         <link
             rel="stylesheet"
             type="text/css"

src/pages/index.astro

@@ -1,9 +1,7 @@
 ---
 import Sidebar from "../components/Sidebar.astro";
-import Languages from "../components/index/Languages.astro";
-import Learning from "../components/index/Learning.astro";
-import Tools from "../components/index/Tools.astro";
 import NavigationLayout from "../layouts/NavigationLayout.astro";
+import EsBlogIndex from "../components/index/EsBlogIndex.astro";
 ---
 
 <!doctype html>
@@ -14,6 +12,10 @@ import NavigationLayout from "../layouts/NavigationLayout.astro";
         <meta name="viewport" content="width=device-width" />
         <meta name="generator" content={Astro.generator} />
         <link rel="stylesheet" href="/global.css" />
+        <link rel="preconnect" href="https://fonts.googleapis.com">
+        <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+        <link href="https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible:ital,wght@0,400;0,700;1,400;1,700&display=swap" rel="stylesheet">
+
         <title>Fernando Araoz</title>
         <link
             rel="stylesheet"
@@ -29,9 +31,7 @@ import NavigationLayout from "../layouts/NavigationLayout.astro";
             >
                 <Sidebar />
                 <div>
-                    <Languages />
+                    <EsBlogIndex />
-                    <Learning />
-                    <Tools />
                 </div>
             </div>
         </NavigationLayout>

tailwind.config.mjs

@@ -9,13 +9,13 @@ export default {
                 'c-bg-2': 'var(--c-bg-2)',
             },
             fontFamily: {
-                "etoile": ["'Iosevka Etoile Web'", "serif"],
+                "etoile": ["var(--font-display)"],
-                "display": ["'Outfit'", "sans-serif"],
+                "display": ["var(--font-display)"],
             }
         },
     },
     plugins: [
-        function ({ addComponents }) {
+        function({ addComponents }) {
             addComponents({
                 '.container': {
                     width: '98%',