Add blog page

public/img/java-logo.svg

@@ -0,0 +1,2 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="256px" height="346px" viewBox="0 0 256 346" version="1.1" preserveAspectRatio="xMidYMid"><g><path d="M82.5539491,267.472524 C82.5539491,267.472524 69.35552,275.147869 91.9468218,277.745105 C119.315549,280.867375 133.303389,280.419607 163.463913,274.711273 C163.463913,274.711273 171.393396,279.683258 182.467491,283.989644 C114.855564,312.966982 29.4483782,282.311215 82.5539491,267.472524" fill="#5382A1"/><path d="M74.2921309,229.658996 C74.2921309,229.658996 59.4888145,240.616727 82.0968727,242.955171 C111.333004,245.971316 134.421411,246.218007 174.373236,238.524975 C174.373236,238.524975 179.899113,244.127185 188.588218,247.190807 C106.841367,271.094691 15.79008,249.075898 74.2921309,229.658996" fill="#5382A1"/><path d="M143.941818,165.514705 C160.601367,184.695156 139.564684,201.955142 139.564684,201.955142 C139.564684,201.955142 181.866124,180.117876 162.438982,152.772422 C144.294633,127.271098 130.380335,114.600495 205.706705,70.9138618 C205.706705,70.9138618 87.4691491,100.44416 143.941818,165.514705" fill="#E76F00"/><path d="M233.364015,295.441687 C233.364015,295.441687 243.131113,303.489396 222.60736,309.715316 C183.580858,321.537862 60.1748945,325.107898 25.8932364,310.186356 C13.5698618,304.825251 36.67968,297.385425 43.9491491,295.824291 C51.5304727,294.180305 55.8629236,294.486575 55.8629236,294.486575 C42.15808,284.832116 -32.7195927,313.443607 17.8287709,321.637469 C155.681513,343.993251 269.121164,311.570618 233.364015,295.441687" fill="#5382A1"/><path d="M88.9008873,190.479825 C88.9008873,190.479825 26.1287564,205.389265 66.6717091,210.803433 C83.7901964,213.095331 117.915462,212.576815 149.702284,209.913484 C175.680233,207.722124 201.765236,203.062924 201.765236,203.062924 C201.765236,203.062924 192.605091,206.985775 185.977949,211.510924 C122.233949,228.275665 -0.907636364,220.476509 34.5432436,203.328233 C64.5241018,188.83584 88.9008873,190.479825 88.9008873,190.479825" fill="#5382A1"/><path d="M201.506444,253.422313 C266.305164,219.7504 236.344785,187.392 215.432844,191.751447 C210.307258,192.818269 208.021876,193.742662 208.021876,193.742662 C208.021876,193.742662 209.924655,190.761891 213.558924,189.471651 C254.929455,174.927127 286.746065,232.368873 200.204102,255.11936 C200.204102,255.120291 201.206691,254.223825 201.506444,253.422313" fill="#5382A1"/><path d="M162.438982,0.371432727 C162.438982,0.371432727 198.325527,36.27008 128.402153,91.4720582 C72.3307055,135.753542 115.616116,161.001658 128.37888,189.848669 C95.6490473,160.318371 71.6297309,134.322735 87.7437673,110.128407 C111.395375,74.6132945 176.918342,57.3942691 162.438982,0.371432727" fill="#E76F00"/><path d="M95.2683055,344.665367 C157.466996,348.646865 252.980131,342.45632 255.24224,313.025629 C255.24224,313.025629 250.893964,324.182575 203.838371,333.042967 C150.750487,343.033484 85.2740655,341.867055 46.4393309,335.464262 C46.4402618,335.463331 54.3892945,342.043927 95.2683055,344.665367" fill="#5382A1"/></g></svg>

public/img/svg.svg

@@ -0,0 +1 @@
+<svg fill="none" height="512" viewBox="0 0 512 512" width="512" xmlns="http://www.w3.org/2000/svg"><rect fill="#3178c6" height="512" rx="50" width="512"/><rect fill="#3178c6" height="512" rx="50" width="512"/><path clip-rule="evenodd" d="m316.939 407.424v50.061c8.138 4.172 17.763 7.3 28.875 9.386s22.823 3.129 35.135 3.129c11.999 0 23.397-1.147 34.196-3.442 10.799-2.294 20.268-6.075 28.406-11.342 8.138-5.266 14.581-12.15 19.328-20.65s7.121-19.007 7.121-31.522c0-9.074-1.356-17.026-4.069-23.857s-6.625-12.906-11.738-18.225c-5.112-5.319-11.242-10.091-18.389-14.315s-15.207-8.213-24.18-11.967c-6.573-2.712-12.468-5.345-17.685-7.9-5.217-2.556-9.651-5.163-13.303-7.822-3.652-2.66-6.469-5.476-8.451-8.448-1.982-2.973-2.974-6.336-2.974-10.091 0-3.441.887-6.544 2.661-9.308s4.278-5.136 7.512-7.118c3.235-1.981 7.199-3.52 11.894-4.615 4.696-1.095 9.912-1.642 15.651-1.642 4.173 0 8.581.313 13.224.938 4.643.626 9.312 1.591 14.008 2.894 4.695 1.304 9.259 2.947 13.694 4.928 4.434 1.982 8.529 4.276 12.285 6.884v-46.776c-7.616-2.92-15.937-5.084-24.962-6.492s-19.381-2.112-31.066-2.112c-11.895 0-23.163 1.278-33.805 3.833s-20.006 6.544-28.093 11.967c-8.086 5.424-14.476 12.333-19.171 20.729-4.695 8.395-7.043 18.433-7.043 30.114 0 14.914 4.304 27.638 12.912 38.172 8.607 10.533 21.675 19.45 39.204 26.751 6.886 2.816 13.303 5.579 19.25 8.291s11.086 5.528 15.415 8.448c4.33 2.92 7.747 6.101 10.252 9.543 2.504 3.441 3.756 7.352 3.756 11.733 0 3.233-.783 6.231-2.348 8.995s-3.939 5.162-7.121 7.196-7.147 3.624-11.894 4.771c-4.748 1.148-10.303 1.721-16.668 1.721-10.851 0-21.597-1.903-32.24-5.71-10.642-3.806-20.502-9.516-29.579-17.13zm-84.159-123.342h64.22v-41.082h-179v41.082h63.906v182.918h50.874z" fill="#fff" fill-rule="evenodd"/></svg>

public/img/ts-logo.svg

@@ -0,0 +1 @@
+<svg fill="none" height="512" viewBox="0 0 512 512" width="512" xmlns="http://www.w3.org/2000/svg"><rect fill="#3178c6" height="512" rx="50" width="512"/><rect fill="#3178c6" height="512" rx="50" width="512"/><path clip-rule="evenodd" d="m316.939 407.424v50.061c8.138 4.172 17.763 7.3 28.875 9.386s22.823 3.129 35.135 3.129c11.999 0 23.397-1.147 34.196-3.442 10.799-2.294 20.268-6.075 28.406-11.342 8.138-5.266 14.581-12.15 19.328-20.65s7.121-19.007 7.121-31.522c0-9.074-1.356-17.026-4.069-23.857s-6.625-12.906-11.738-18.225c-5.112-5.319-11.242-10.091-18.389-14.315s-15.207-8.213-24.18-11.967c-6.573-2.712-12.468-5.345-17.685-7.9-5.217-2.556-9.651-5.163-13.303-7.822-3.652-2.66-6.469-5.476-8.451-8.448-1.982-2.973-2.974-6.336-2.974-10.091 0-3.441.887-6.544 2.661-9.308s4.278-5.136 7.512-7.118c3.235-1.981 7.199-3.52 11.894-4.615 4.696-1.095 9.912-1.642 15.651-1.642 4.173 0 8.581.313 13.224.938 4.643.626 9.312 1.591 14.008 2.894 4.695 1.304 9.259 2.947 13.694 4.928 4.434 1.982 8.529 4.276 12.285 6.884v-46.776c-7.616-2.92-15.937-5.084-24.962-6.492s-19.381-2.112-31.066-2.112c-11.895 0-23.163 1.278-33.805 3.833s-20.006 6.544-28.093 11.967c-8.086 5.424-14.476 12.333-19.171 20.729-4.695 8.395-7.043 18.433-7.043 30.114 0 14.914 4.304 27.638 12.912 38.172 8.607 10.533 21.675 19.45 39.204 26.751 6.886 2.816 13.303 5.579 19.25 8.291s11.086 5.528 15.415 8.448c4.33 2.92 7.747 6.101 10.252 9.543 2.504 3.441 3.756 7.352 3.756 11.733 0 3.233-.783 6.231-2.348 8.995s-3.939 5.162-7.121 7.196-7.147 3.624-11.894 4.771c-4.748 1.148-10.303 1.721-16.668 1.721-10.851 0-21.597-1.903-32.24-5.71-10.642-3.806-20.502-9.516-29.579-17.13zm-84.159-123.342h64.22v-41.082h-179v41.082h63.906v182.918h50.874z" fill="#fff" fill-rule="evenodd"/></svg>

src/components/LangLogo.astro

@@ -1,12 +1,13 @@
 ---
-const { lang, icon, href } = Astro.props;
+const { lang, icon, size, alpineOnClick } = Astro.props;
 ---
 
-<a href={href} target="_blank">
+<button >
     <img
-        class="inline-block h-8 px-1 my-1"
+        @click={alpineOnClick}
+        class={"inline-block " + (size? size: "h-8") + " px-1 my-1"}
         src={`/img/${icon}-logo.svg`}
         alt={`${lang} logo`}
         title={`${lang} logo`}
     />
-</a>
+</button>

src/components/Sidebar.astro

@@ -11,4 +11,7 @@
         I'm a (human) software engineer passionate about web technologies. I
         love building things and learning new stuff.
     </p>
+    <div class="text-center py-4">
+    <a class="inline-block py-2 px-4 rounded bg-blue-600 text-white" href="/blog/">Blog</a>
+    </div>
 </div>

src/components/ToolIcon.astro

@@ -1,5 +1,5 @@
 ---
-const { name, icon, href, size } = Astro.props;
+const { name, icon, size, isRoot, alpineOnClick } = Astro.props;
 
 let tailwindSize = "h-8";
 
@@ -10,17 +10,16 @@ if (size === "big") {
 }
 ---
 
-<a
-    href={href}
-    target="_blank"
-    class="inline-block py-2 px-2 hover:bg-zinc-200 dark:hover:bg-zinc-800 transition-colors rounded text-center"
+<button
+    class="inline-block py-2 px-2 hover:bg-zinc-200 dark:hover:bg-zinc-800 transition-colors rounded text-center cursor-pointer"
+    @click={alpineOnClick}
 >
     <img
-        class={`"inline-block ${tailwindSize} px-1 my-1"`}
-        src={`/img/tools/${icon}.svg`}
+        class={`"inline-block mx-auto ${tailwindSize} px-1 my-1"`}
+        src={`/img/${isRoot? "" : "tools" }/${icon}.svg`}
         alt={`${name} logo`}
         title={`${name} logo`}
     />
     <br />
     <span class="font-bold">{name}</span>
-</a>
+</button>

src/components/index/Languages.astro

@@ -1,90 +1,127 @@
 ---
 import Card from "../Card.astro";
 import LangLogo from "../LangLogo.astro";
+import ToolIcon from "../ToolIcon.astro";
 ---
 
-<Card title="Programming languages">
-    <div class="grid grid-cols-[5rem_auto] gap-x-2 gap-y-4">
-        <img class="inline-block p-2" src="/img/ts-logo.png" alt="TS logo" />
-        <p>
-            <span
-                class="text-yellow-600 dark:text-yellow-400 font-medium text-lg"
-            >
-                JS/TS
-            </span>
-            : Being the lingua franca of the web, I've used a lot of JS/TS, vanilla
-            and with frameworks.
-        </p>
-        <img
-            class="inline-block p-2"
-            src="/img/java-logo.png"
-            alt="Java logo"
+<Card title="I've coded in">
+    <div x-data="{active_tab: ''}">
+        <div class="flex justify-evenly">
+            <ToolIcon
+                isRoot={true}
+                name="JS/TS"
+                icon="ts-logo"
+                size="big"
+                alpineOnClick="active_tab = 'ts'"
             />
-        <p>
-            <span
-                class="text-purple-700 dark:text-purple-500 font-medium text-lg"
-            >
-                Java/Kotlin
-            </span>
-            : The language I learned in university, along with JS/TS is the language
-            I've used the most. I've mostly written DSAs and backends with it (JSP/Spring).
-        </p>
-        <img
-            class="inline-block p-2"
-            src="/img/rust-logo.svg"
-            alt="Rust logo"
+            <ToolIcon
+                isRoot={true}
+                name="Java/Kotlin"
+                icon="java-logo"
+                size="big"
+                alpineOnClick="active_tab = 'java'"
+            />
+            <ToolIcon
+                isRoot={true}
+                name="Rust"
+                icon="rust-logo"
+                size="big"
+                alpineOnClick="active_tab = 'rust'"
             />
-        <p>
-            <span
-                class="text-amber-800 dark:text-amber-600 font-medium text-lg"
-            >
-                Rust
-            </span>
-            : Currently my favorite language, I began learning it in late 2022. I've
-            written a backend and I'm currently writing a programming language.
-        </p>
-        <img class="inline-block p-2" src="/img/go-logo.svg" alt="Go logo" />
-        <p>
-            <span class="text-sky-600 dark:text-sky-400 font-medium text-lg">
-                Go
-            </span>
-            : I'm currently learning Go through advent of code, and I plan to use
-            it for some projects in the future.
-        </p>
         </div>
 
-    <p class="my-4">
-        <span class="font-medium text-lg">Others</span>: Other languages I've
-        used (mostly at uni):
+        <div class="py-4 md:px-16">
+            <div
+                class="text-center table h-32 w-full"
+                x-show="active_tab === ''"
+            >
+                <div class="table-cell align-middle">
+                    &darr; Click one &uarr;
+                </div>
+            </div>
+            <div x-show="active_tab === 'ts'">
+                I've used JS/TS since my first year at uni. I've written a lot
+                of small pages, with either vanilla JS or frameworks in the
+                frontend (vue, react, solid, astro) & backend (express, nest).
                 <br />
-        <div class="text-center">
+                <br />
+                And as far as web goes, I've also used Pug, SASS, Tailwind, CSS-in-JS.
+            </div>
+            <div x-show="active_tab === 'java'">
+                The first PL I've learnt, I've used Java through uni to
+                implement algorithms, DSAs and backends with Java EE.
+                <br />
+                <br />
+                Nowadays I'm pivoting towards using Spring and either REST APIs or
+                dynamic pages with HTMX.
+            </div>
+            <div x-show="active_tab === 'rust'">
+                Rust is currently my favorite language. I've used it by myself
+                for some algorithms, at my last job for a Backend REST API with
+                <a
+                    class="underline text-blue-600"
+                    href="https://rocket.rs"
+                    target="_blank">rocket.rs</a
+                >, and currently I'm using it in a side project as full stack
+                language.
+            </div>
+            <div x-show="active_tab === 'c'">
+                I've used C & C++ in uni, to learn about low level programming,
+                operating systems and Programming Language theory.
+            </div>
+            <div x-show="active_tab === 'csharp'">
+                I've used C# in uni to learn about videogames, with both Unity &
+                Godot.
+            </div>
+            <div x-show="active_tab === 'php'">
+                I've used PHP at work, to mantain & update legacy websites, and
+                to create a REST API along with a React frontend.
+            </div>
+        </div>
+        <p class="my-4">
+            <span class="font-medium text-lg">Other</span> languages I've used:
+            <br />
+            <div class="flex justify-evenly">
                 <LangLogo
                     href="https://www.iso.org/standard/74528.html"
                     lang="C"
                     icon="c"
+                    size="h-16"
+                    alpineOnClick="active_tab = 'c'"
                 />
                 <LangLogo
                     href="https://isocpp.org/std/the-standard"
                     lang="C++"
                     icon="cpp"
+                    size="h-16"
+                    alpineOnClick="active_tab = 'c'"
+                    k
                 />
                 <LangLogo
                     href="https://learn.microsoft.com/en-us/dotnet/csharp/"
                     lang="Microsoft Java"
                     icon="c-sharp"
+                    size="h-16"
+                    alpineOnClick="active_tab = 'csharp'"
                 />
-            <LangLogo href="https://www.php.net/" lang="PHP" icon="php" />
                 <LangLogo
-                href="https://www.python.org/"
-                lang="Python"
-                icon="python"
+                    href="https://www.php.net/"
+                    lang="PHP"
+                    icon="php"
+                    size="h-16"
+                    alpineOnClick="active_tab = 'php'"
                 />
-            <LangLogo href="https://dart.dev/" lang="Dart" icon="dart" />
             </div>
             <br />
             Other languages I've tried for fun:
             <br />
             <div class="text-center">
+                <LangLogo
+                    href="https://go.dev/"
+                    lang="Go"
+                    icon="go"
+                />
+                <LangLogo href="https://ziglang.org/" lang="Zig" icon="zig" />
                 <LangLogo
                     href="https://elixir-lang.org/"
                     lang="Elixir"
@@ -106,7 +143,6 @@ import LangLogo from "../LangLogo.astro";
                     lang="Racket"
                     icon="racket"
                 />
-            <LangLogo href="https://ziglang.org/" lang="Zig" icon="zig" />
                 <LangLogo
                     href="https://learn.microsoft.com/en-us/dotnet/fsharp/what-is-fsharp"
                     lang="F#"
@@ -123,7 +159,11 @@ import LangLogo from "../LangLogo.astro";
                     lang="Rescript"
                     icon="rescript"
                 />
-            <LangLogo href="https://www.swift.org/" lang="Swift" icon="swift" />
+                <LangLogo
+                    href="https://www.swift.org/"
+                    lang="Swift"
+                    icon="swift"
+                />
                 <LangLogo
                     href="https://www.scala-lang.org/"
                     lang="Scala"
@@ -142,8 +182,9 @@ import LangLogo from "../LangLogo.astro";
                 <LangLogo href="https://www.lua.org/" lang="Lua" icon="lua" />
             </div>
         </p>
-    <p>
-        In general I like to try new languages, explore new concepts and see new
-        ways to solve problems.
-    </p>
+    </div>
 </Card>
+
+<script>
+    console.log("Hello there!");
+</script>

src/components/index/Learning.astro

@@ -0,0 +1,21 @@
+---
+import Card from "../Card.astro";
+import ToolIcon from "../ToolIcon.astro";
+---
+
+<Card title="I'm learning">
+    <div class="flex justify-evenly">
+        <ToolIcon
+            isRoot={true}
+            name="Zig"
+            icon="zig-logo"
+            size="big"
+        />
+        <ToolIcon
+            isRoot={true}
+            name="Go"
+            icon="go-logo"
+            size="big"
+        />
+    </div>
+</Card>

src/components/index/Tools.astro

@@ -4,9 +4,6 @@ import ToolIcon from "../ToolIcon.astro"
 ---
 
 <Card title="Tools">
-    <p>
-        I've used a lot of tools, some of them are:
-    </p>
     <div class="text-center">
         <ToolIcon name="Git" icon="git" href="https://git-scm.com" size="big" />
         <ToolIcon name="Jira" icon="jira" href="https://www.atlassian.com/jira" size="big" />

src/layouts/BlogLayout.astro

@@ -0,0 +1,25 @@
+<html lang="en">
+    <head>
+        <meta charset="utf-8" />
+        <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+        <meta name="viewport" content="width=device-width" />
+        <meta name="generator" content={Astro.generator} />
+        <link rel="stylesheet" href="/global.css" />
+        <title>Fernando Araoz - Blog</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=JetBrains+Mono:ital,wght@0,100..800;1,100..800&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" defer></script>
+    </head>
+    <body>
+        <slot />
+    </body>
+</html>

src/pages/blog/first.md

@@ -0,0 +1,7 @@
+---
+layout: ../../layouts/BlogLayout.astro
+---
+# First
+
+The first page
+

src/pages/blog/index.astro

@@ -0,0 +1,7 @@
+---
+import BlogLayout from "../../layouts/BlogLayout.astro";
+---
+
+<BlogLayout>
+    <h1>Blog index, WIP</h1>
+</BlogLayout>

src/pages/index.astro

@@ -1,6 +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";
 ---
 
@@ -11,7 +12,7 @@ import Tools from "../components/index/Tools.astro";
         <meta name="viewport" content="width=device-width" />
         <meta name="generator" content={Astro.generator} />
         <link rel="stylesheet" href="/global.css" />
-        <title>Astro</title>
+        <title>Fernando Araoz</title>
         <link rel="preconnect" href="https://fonts.googleapis.com" />
         <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
         <link
@@ -32,6 +33,7 @@ import Tools from "../components/index/Tools.astro";
             <Sidebar />
             <div>
                 <Languages />
+                <Learning />
                 <Tools />
             </div>
         </div>