Compare commits

...

2 Commits

Author SHA1 Message Date
99a80c425c Add blog page 2024-05-17 18:53:35 -05:00
213befca6b Simplify index 2024-05-17 18:27:11 -05:00
14 changed files with 263 additions and 156 deletions

2
public/img/java-logo.svg Normal file
View File

@ -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>

After

Width:  |  Height:  |  Size: 3.0 KiB

1
public/img/svg.svg Normal file
View File

@ -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>

After

Width:  |  Height:  |  Size: 1.7 KiB

1
public/img/ts-logo.svg Normal file
View File

@ -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>

After

Width:  |  Height:  |  Size: 1.7 KiB

BIN
public/rimajon_win.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 125 KiB

View File

@ -1,12 +1,13 @@
--- ---
const { lang, icon, href } = Astro.props; const { lang, icon, size, alpineOnClick } = Astro.props;
--- ---
<a href={href} target="_blank"> <button >
<img <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`} src={`/img/${icon}-logo.svg`}
alt={`${lang} logo`} alt={`${lang} logo`}
title={`${lang} logo`} title={`${lang} logo`}
/> />
</a> </button>

View File

@ -11,4 +11,7 @@
I'm a (human) software engineer passionate about web technologies. I I'm a (human) software engineer passionate about web technologies. I
love building things and learning new stuff. love building things and learning new stuff.
</p> </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> </div>

View File

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

View File

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

View File

@ -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>

View File

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

View File

@ -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>

7
src/pages/blog/first.md Normal file
View File

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

View File

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

View File

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