package.json

@@ -13,7 +13,6 @@
     "@astrojs/check": "^0.5.10",
     "@astrojs/mdx": "^3.1.2",
     "@astrojs/tailwind": "^5.1.0",
-    "@types/node": "^22.3.0",
     "astro": "^4.11.5",
     "tailwindcss": "^3.4.5",
     "typescript": "^5.5.3"

pnpm-lock.yaml

@@ -13,16 +13,13 @@ importers:
         version: 0.5.10(typescript@5.5.3)
       '@astrojs/mdx':
         specifier: ^3.1.2
-        version: 3.1.2(astro@4.11.5(@types/node@22.3.0)(typescript@5.5.3))
+        version: 3.1.2(astro@4.11.5(typescript@5.5.3))
       '@astrojs/tailwind':
         specifier: ^5.1.0
-        version: 5.1.0(astro@4.11.5(@types/node@22.3.0)(typescript@5.5.3))(tailwindcss@3.4.5)
+        version: 5.1.0(astro@4.11.5(typescript@5.5.3))(tailwindcss@3.4.5)
-      '@types/node':
-        specifier: ^22.3.0
-        version: 22.3.0
       astro:
         specifier: ^4.11.5
-        version: 4.11.5(@types/node@22.3.0)(typescript@5.5.3)
+        version: 4.11.5(typescript@5.5.3)
       tailwindcss:
         specifier: ^3.4.5
         version: 3.4.5
@@ -642,9 +639,6 @@ packages:
   '@types/nlcst@2.0.3':
     resolution: {integrity: sha512-vSYNSDe6Ix3q+6Z7ri9lyWqgGhJTmzRjZRqyq15N0Z/1/UnVsno9G/N40NBijoYx2seFDIl0+B2mgAb9mezUCA==}
 
-  '@types/node@22.3.0':
-    resolution: {integrity: sha512-nrWpWVaDZuaVc5X84xJ0vNrLvomM205oQyLsRt7OHNZbSHslcWsvgFR7O7hire2ZonjLrWBbedmotmIlJDVd6g==}
-
   '@types/unist@2.0.10':
     resolution: {integrity: sha512-IfYcSBWE3hLpBg8+X2SEa8LVkJdJEkT2Ese2aaLs3ptGdVtABxndrMaxuFlQ1qdFf9Q5rDvDpxI3WwgvKFAsQA==}
 
@@ -1981,9 +1975,6 @@ packages:
     engines: {node: '>=14.17'}
     hasBin: true
 
-  undici-types@6.18.2:
-    resolution: {integrity: sha512-5ruQbENj95yDYJNS3TvcaxPMshV7aizdv/hWYjGIKoANWKjhWNBsr2YEuYZKodQulB1b8l7ILOuDQep3afowQQ==}
-
   unified@11.0.5:
     resolution: {integrity: sha512-xKvGhPWw3k84Qjh8bI3ZeJjqnyadK+GEFtazSfZv/rKeTkTjOJho6mFqh2SM96iIcZokxiOpg78GazTSg8+KHA==}
 
@@ -2291,12 +2282,12 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  '@astrojs/mdx@3.1.2(astro@4.11.5(@types/node@22.3.0)(typescript@5.5.3))':
+  '@astrojs/mdx@3.1.2(astro@4.11.5(typescript@5.5.3))':
     dependencies:
       '@astrojs/markdown-remark': 5.1.1
       '@mdx-js/mdx': 3.0.1
       acorn: 8.12.1
-      astro: 4.11.5(@types/node@22.3.0)(typescript@5.5.3)
+      astro: 4.11.5(typescript@5.5.3)
       es-module-lexer: 1.5.4
       estree-util-visit: 2.0.0
       github-slugger: 2.0.0
@@ -2316,9 +2307,9 @@ snapshots:
     dependencies:
       prismjs: 1.29.0
 
-  '@astrojs/tailwind@5.1.0(astro@4.11.5(@types/node@22.3.0)(typescript@5.5.3))(tailwindcss@3.4.5)':
+  '@astrojs/tailwind@5.1.0(astro@4.11.5(typescript@5.5.3))(tailwindcss@3.4.5)':
     dependencies:
-      astro: 4.11.5(@types/node@22.3.0)(typescript@5.5.3)
+      astro: 4.11.5(typescript@5.5.3)
       autoprefixer: 10.4.19(postcss@8.4.39)
       postcss: 8.4.39
       postcss-load-config: 4.0.2(postcss@8.4.39)
@@ -2843,10 +2834,6 @@ snapshots:
     dependencies:
       '@types/unist': 3.0.2
 
-  '@types/node@22.3.0':
-    dependencies:
-      undici-types: 6.18.2
-
   '@types/unist@2.0.10': {}
 
   '@types/unist@3.0.2': {}
@@ -2956,7 +2943,7 @@ snapshots:
 
   astring@1.8.6: {}
 
-  astro@4.11.5(@types/node@22.3.0)(typescript@5.5.3):
+  astro@4.11.5(typescript@5.5.3):
     dependencies:
       '@astrojs/compiler': 2.8.2
       '@astrojs/internal-helpers': 0.4.1
@@ -3014,8 +3001,8 @@ snapshots:
       tsconfck: 3.1.1(typescript@5.5.3)
       unist-util-visit: 5.0.0
       vfile: 6.0.1
-      vite: 5.3.3(@types/node@22.3.0)
+      vite: 5.3.3
-      vitefu: 0.2.5(vite@5.3.3(@types/node@22.3.0))
+      vitefu: 0.2.5(vite@5.3.3)
       which-pm: 2.2.0
       yargs-parser: 21.1.1
       zod: 3.23.8
@@ -4669,8 +4656,6 @@ snapshots:
 
   typescript@5.5.3: {}
 
-  undici-types@6.18.2: {}
-
   unified@11.0.5:
     dependencies:
       '@types/unist': 3.0.2
@@ -4751,18 +4736,17 @@ snapshots:
       unist-util-stringify-position: 4.0.0
       vfile-message: 4.0.2
 
-  vite@5.3.3(@types/node@22.3.0):
+  vite@5.3.3:
     dependencies:
       esbuild: 0.21.5
       postcss: 8.4.39
       rollup: 4.18.1
     optionalDependencies:
-      '@types/node': 22.3.0
       fsevents: 2.3.3
 
-  vitefu@0.2.5(vite@5.3.3(@types/node@22.3.0)):
+  vitefu@0.2.5(vite@5.3.3):
     optionalDependencies:
-      vite: 5.3.3(@types/node@22.3.0)
+      vite: 5.3.3
 
   volar-service-css@0.0.59(@volar/language-service@2.4.0-alpha.16):
     dependencies:

src/layouts/SideProject.astro

@@ -1,15 +1,7 @@
 ---
-import {readdirSync} from "node:fs";
 import GithubIcon from "../components/Sideprojects/GithubIcon.astro";
 import GlobeIcon from "../components/Sideprojects/GlobeIcon.astro";
 import NavigationLayout from "./NavigationLayout.astro";
-
-const { project_title, git_url, page_url, previous, next, images_folder } = Astro.props;
-
-const images_base = "/img/projects/";
-const images = readdirSync(`./public${images_base}${images_folder}/`)
-    .map((s) => `${images_base}${images_folder}/${s}`);
-const images_str = JSON.stringify(images);
 ---
 
 <!doctype html>
@@ -38,86 +30,41 @@ const images_str = JSON.stringify(images);
     <body>
         <NavigationLayout>
             <div class="grid grid-cols-[30rem_auto] gap-2">
-                <div class="flex items-center justify-center gap-4 flex-col">
+                <div class="flex items-center">
                     <div
-                        class="bg-c-bg-2 rounded p-4 shadow shadow-zinc-500 dark:shadow-black w-full"
+                        class="bg-c-bg-2 my-4 rounded p-4 dark:shadow-black shadow"
                     >
                         <h1
                             class="font-display font-semibold text-xl text-center"
                         >
-                            {project_title}
+                            Typed Hyperscript Processor (webpage)
                         </h1>
 
                         <p class="pt-8">
-                            <slot />
+                            Descripción del proyecto :D (carita feliz) en 240
+                            palabras o menos
                         </p>
 
                         <div class="pt-8">
                             <GithubIcon color="var(--c-on-bg)" />
-                            <a href={git_url} class="underline">Source code</a>
+                            <a href="" class="underline">Source code</a>
                             <br />
-                            {
-                                page_url && (
-                                    <>
                             <GlobeIcon color="var(--c-on-bg)" />
-                                        <a href={page_url} class="underline">
+                            <a href="" class="underline"
-                                            Webpage
+                                >https://webpage.araozu.dev/</a
-                                        </a>
+                            >
-                                    </>
-                                )
-                            }
                         </div>
 
-                        <!--
                         <div class="pt-8">logos</div>
-                        -->
-                    </div>
-
-                    <div class="grid grid-cols-2 w-full gap-6">
-                        <a
-                            class={`inline-block w-full bg-c-bg-2 rounded p-4 shadow shadow-zinc-500
-                                 dark:shadow-black transition-colors
-                                ${previous? "hover:bg-zinc-300 dark:hover:bg-zinc-800": "opacity-50 cursor-default"}`}
-                            href={previous? `/side-projects/${previous}` : `#`}
-                        >
-                            &larr; <span class="underline">Previous project</span>
-                        </a>
-                        <a
-                            class={`inline-block w-full bg-c-bg-2 rounded p-4 shadow shadow-zinc-500
-                                 dark:shadow-black transition-colors text-right
-                                ${next? "hover:bg-zinc-300 dark:hover:bg-zinc-800": "opacity-50 cursor-default"}`}
-                            href={next? `/side-projects/${next}` : `#`}
-                        >
-                            <span class="underline">Next project</span> &rarr;
-                        </a>
                     </div>
                 </div>
 
                 <div
-                    class="relative w-full h-screen flex items-center justify-center p-16"
+                    class="w-full h-screen flex items-center justify-center p-16"
-                    x-data={`{img: ${images_str}, img_len: ${images.length}, idx: 0}`}
                 >
-                    <button 
-                        class="absolute left-12 top-[50%] bg-zinc-800 border border-zinc-950
-                            rounded py-1 px-2 text-2xl not:disabled:hover:bg-zinc-700 transition-all
-                            disabled:opacity-25"
-                        x-bind:disabled="idx === 0"
-                        x-on:click="idx -= 1"
-                    >
-                        &larr;
-                    </button>
-                    <button 
-                        class="absolute right-12 top-[50%] bg-zinc-800 border border-zinc-950 text-white
-                            rounded py-1 px-2 text-2xl not:disabled:hover:bg-zinc-700 transition-all
-                            disabled:opacity-25"
-                        x-bind:disabled="idx === img_len - 1"
-                        x-on:click="idx += 1"
-                    >
-                        &rarr;
-                    </button>
                     <img
                         class="inline-block shadow-sm dark:shadow-black rounded"
-                        x-bind:src="img[idx]"
+                        src="/img/projects/thp/01.png"
                         alt="Project image"
                     />
                 </div>

src/pages/side-projects/acecha.astro

@@ -1,18 +0,0 @@
----
-import SideProject from "../../layouts/SideProject.astro";
----
-
-<SideProject
-    project_title="Acechanime"
-    previous="horarios-2"
-    next="pseudo"
-    images_folder="acecha"
->
-    A now defunt video platform for anime I made for a
-    startup from Spain.
-    <br />
-    <br />
-    It featured shows indexing, comments, video playback,
-    search, scheduling, and a custom content management
-    system.
-</SideProject>

src/pages/side-projects/horarios-1.astro

@@ -1,18 +0,0 @@
----
-import SideProject from "../../layouts/SideProject.astro";
----
-
-<SideProject
-    project_title="Horarios Unsa (v1)"
-    git_url="https://git.araozu.dev/fernando/horarios-v2"
-    page_url="https://horarios-v1.araozu.dev/"
-    previous="pseudo"
-    images_folder="horarios-v1"
->
-    My first programming project ever (2017), completely
-    made in vanilla JavaScript.
-    <br />
-    <br />
-    It has (more or less) the same functionality as the
-    next rewrites, but it's a little more ugly.
-</SideProject>

src/pages/side-projects/horarios-2.astro

@@ -1,20 +0,0 @@
----
-import SideProject from "../../layouts/SideProject.astro";
----
-
-<SideProject
-    project_title="Horarios Unsa (v2)"
-    git_url="https://git.araozu.dev/fernando/horarios-v2"
-    page_url="https://horarios-v2.araozu.dev/"
-    previous="kscript"
-    next="acecha"
-    images_folder="horarios-v2"
->
-    A schedule creator for the courses at
-    National Saint Austing University (second rewrite).
-    <br />
-    <br />
-    Allows students to visually see which classes may
-    collide with each other, see professor names
-    and easily keep track of missing courses.
-</SideProject>

src/pages/side-projects/horarios.astro

@@ -1,20 +0,0 @@
----
-import SideProject from "../../layouts/SideProject.astro";
----
-
-<SideProject
-    project_title="Horarios Unsa (v3)"
-    git_url="https://git.araozu.dev/fernando/horarios-v3"
-    page_url="https://horarios-v3.araozu.dev/#/sistemas/"
-    previous="thp"
-    next="rimajon"
-    images_folder="horarios-v3"
->
-    A schedule creator for the courses at
-    National Saint Austing University (Third rewrite).
-    <br />
-    <br />
-    Allows students to visually see which classes may
-    collide with each other, see professor names
-    and easily keep track of missing courses.
-</SideProject>

src/pages/side-projects/index.astro

@@ -1,24 +1,84 @@
 ---
-import SideProject from "../../layouts/SideProject.astro";
+import GithubIcon from "../../components/Sideprojects/GithubIcon.astro";
+import GlobeIcon from "../../components/Sideprojects/GlobeIcon.astro";
+import NavigationLayout from "../../layouts/NavigationLayout.astro";
 ---
 
-<SideProject
+<!doctype html>
-    project_title="Typed Hyperscript Processor (webpage)"
+<html lang="en">
-    git_url="https://git.araozu.dev/fernando/thp-web"
+    <head>
-    page_url="https://thp.araozu.dev"
+        <meta charset="utf-8" />
-    next="thp"
+        <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
-    images_folder="thp"
+        <meta name="viewport" content="width=device-width" />
->
+        <meta name="generator" content={Astro.generator} />
+        <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.gstatic.com" crossorigin />
+        <link
+            href="https://fonts.googleapis.com/css2?family=Outfit:wght@100..900&display=swap"
+            rel="stylesheet"
+        />
+        <link
+            rel="stylesheet"
+            type="text/css"
+            href="https://unpkg.com/@phosphor-icons/web@2.1.1/src/regular/style.css"
+        />
+        <script src="//unpkg.com/alpinejs" is:inline defer></script>
+    </head>
+    <body>
+        <NavigationLayout>
+            <div class="grid grid-cols-[30rem_auto] gap-2">
+                <div class="flex items-center">
+                    <div
+                        class="bg-c-bg-2 my-4 rounded p-4 dark:shadow-black shadow"
+                    >
+                        <h1
+                            class="font-display font-semibold text-xl text-center"
+                        >
+                            Typed Hyperscript Processor (webpage)
+                        </h1>
+
+                        <p class="pt-8 text-sm">
                             This is a static webpage that contains documentation
-    for the THP programming language.
+                            for my other project, the THP compiler.
                             <br />
                             <br />
-    THP is a strong, statically typed, functional first
+                            It is written with Astro and Markdown, highlights the
-    language that compiles to PHP.
+                            syntax in the code snippets using said compiler, and
-    <br>
+                            has some interactive code snippets.
-    <br>
+                        </p>
-    The page is written with Astro, and connects to the
+
-    compiler to provide syntax highlighting, error
+                        <div class="pt-8">
-    detection, reference resolving and automatic
+                            <GithubIcon color="var(--c-on-bg)" />
-    documentation generation.
+                            <a
-</SideProject>
+                                href="https://git.araozu.dev/fernando/araozu.dev"
+                                class="underline">Source code</a
+                            >
+                            <br />
+                            <GlobeIcon color="var(--c-on-bg)" />
+                            <a
+                                href="https://thp.araozu.dev/"
+                                target="_blank"
+                                class="underline">https://thp.araozu.dev/</a
+                            >
+                        </div>
+
+                        <div class="pt-8">logos</div>
+                    </div>
+                </div>
+
+                <div
+                    class="w-full h-screen flex items-center justify-center p-16"
+                >
+                    <img
+                        class="inline-block shadow-sm dark:shadow-black rounded"
+                        src="/img/projects/thp/01.png"
+                        alt="Project image"
+                    />
+                </div>
+            </div>
+        </NavigationLayout>
+    </body>
+</html>

src/pages/side-projects/kscript.astro

@@ -1,18 +0,0 @@
----
-import SideProject from "../../layouts/SideProject.astro";
----
-
-<SideProject
-    project_title="KScript"
-    git_url="https://github.com/misti-lang/kscript"
-    page_url="https://jovial-jepsen-2619da.netlify.app/#/docs/v0.0.43/estructuras/condicionales/"
-    previous="rimajon"
-    next="horarios-2"
-    images_folder="kscript"
->
-    A previous iteration of a new programming language.
-    <br />
-    <br />
-    This project featured a documentation page,
-    a TypeScript compiler, and a online playground.
-</SideProject>

src/pages/side-projects/pseudo.astro

@@ -1,21 +0,0 @@
----
-import SideProject from "../../layouts/SideProject.astro";
----
-
-<SideProject
-    project_title="PseudoSubs"
-    git_url="#"
-    previous="acecha"
-    next="horarios-1"
-    images_folder="pseudo"
->
-    An anime indexing site.
-    <br />
-    <br />
-    It contained information for many shows, comments,
-    responsive design. It served as a way for me to
-    learn about webdev and modern frameworks.
-    <br>
-    <br>
-    It went through many rewrites.
-</SideProject>

src/pages/side-projects/rimajon.astro

@@ -1,22 +0,0 @@
----
-import SideProject from "../../layouts/SideProject.astro";
----
-
-<SideProject
-    project_title="Rimajon"
-    git_url="https://git.araozu.dev/fernando/rimajon-vue"
-    page_url="https://rimajon.araozu.dev/#/"
-    previous="horarios"
-    next="kscript"
-    images_folder="rimajon"
->
-    A Mahjong-like game, with cards instead of Tiles.
-    <br />
-    <br />
-    It's multiplayer, for 4 persons, with the possibility
-    to add bots. Has its own set of rules and behaviors.
-    Everything is communicated through Web Sockets.
-    <br>
-    <br>
-    A Go+Solid rewrite is on the way.
-</SideProject>

src/pages/side-projects/thp.astro

@@ -1,22 +0,0 @@
----
-import SideProject from "../../layouts/SideProject.astro";
----
-
-<SideProject
-    project_title="THP compiler"
-    git_url="https://git.araozu.dev/fernando/thp"
-    previous="#"
-    next="horarios"
-    images_folder="thpc"
->
-    The compiler for the THP Programming Language.
-    <br />
-    <br />
-    Written in Rust, features a hand written lexer,
-    top-down parser, type checker, IR generator
-    and code generator.
-    <br>
-    <br>
-    In the future it will also perform code formatting,
-    provide an LSP and package managing.
-</SideProject>