From 99a80c425c81713d2fd8bbddadbda1b858ab4cae Mon Sep 17 00:00:00 2001
From: Araozu <fernando@araozu.dev>
Date: Fri, 17 May 2024 18:53:35 -0500
Subject: [PATCH] Add blog page

---
 src/components/Sidebar.astro         |  3 +++
 src/components/index/Languages.astro | 23 ++++++++++++++---------
 src/components/index/Learning.astro  | 18 ++++++++++++++++--
 src/components/index/Tools.astro     |  3 ---
 src/layouts/BlogLayout.astro         | 25 +++++++++++++++++++++++++
 src/pages/blog/first.md              |  7 +++++++
 src/pages/blog/index.astro           |  7 +++++++
 src/pages/index.astro                |  2 +-
 8 files changed, 73 insertions(+), 15 deletions(-)
 create mode 100644 src/layouts/BlogLayout.astro
 create mode 100644 src/pages/blog/first.md
 create mode 100644 src/pages/blog/index.astro

diff --git a/src/components/Sidebar.astro b/src/components/Sidebar.astro
index 9269c6f..74e9b78 100644
--- a/src/components/Sidebar.astro
+++ b/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>
diff --git a/src/components/index/Languages.astro b/src/components/index/Languages.astro
index 77c5594..7cc3b8a 100644
--- a/src/components/index/Languages.astro
+++ b/src/components/index/Languages.astro
@@ -31,6 +31,14 @@ import ToolIcon from "../ToolIcon.astro";
         </div>
 
         <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
@@ -69,14 +77,6 @@ import ToolIcon from "../ToolIcon.astro";
                 I've used PHP at work, to mantain & update legacy websites, and
                 to create a REST API along with a React frontend.
             </div>
-            <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>
         <p class="my-4">
             <span class="font-medium text-lg">Other</span> languages I've used:
@@ -116,6 +116,12 @@ import ToolIcon from "../ToolIcon.astro";
             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"
@@ -137,7 +143,6 @@ import ToolIcon from "../ToolIcon.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#"
diff --git a/src/components/index/Learning.astro b/src/components/index/Learning.astro
index f0d57a0..1a3b27d 100644
--- a/src/components/index/Learning.astro
+++ b/src/components/index/Learning.astro
@@ -1,7 +1,21 @@
 ---
 import Card from "../Card.astro";
+import ToolIcon from "../ToolIcon.astro";
 ---
 
 <Card title="I'm learning">
-    a
-</Card>
\ No newline at end of file
+    <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>
diff --git a/src/components/index/Tools.astro b/src/components/index/Tools.astro
index 8a955ce..c326264 100644
--- a/src/components/index/Tools.astro
+++ b/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" />
diff --git a/src/layouts/BlogLayout.astro b/src/layouts/BlogLayout.astro
new file mode 100644
index 0000000..bfa7dfa
--- /dev/null
+++ b/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>
diff --git a/src/pages/blog/first.md b/src/pages/blog/first.md
new file mode 100644
index 0000000..5a6f8de
--- /dev/null
+++ b/src/pages/blog/first.md
@@ -0,0 +1,7 @@
+---
+layout: ../../layouts/BlogLayout.astro
+---
+# First
+
+The first page
+
diff --git a/src/pages/blog/index.astro b/src/pages/blog/index.astro
new file mode 100644
index 0000000..091a98a
--- /dev/null
+++ b/src/pages/blog/index.astro
@@ -0,0 +1,7 @@
+---
+import BlogLayout from "../../layouts/BlogLayout.astro";
+---
+
+<BlogLayout>
+    <h1>Blog index, WIP</h1>
+</BlogLayout>
diff --git a/src/pages/index.astro b/src/pages/index.astro
index 35c93a2..937d6a4 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -12,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