fernando
/
araozu.dev
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Simplify index

main
Araozu 2024-05-17 18:27:11 -05:00
parent 7665bb2b07
commit 213befca6b
9 changed files with 201 additions and 152 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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>
Side by Side

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>
Side by Side

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>
Side by Side

After

Width:  |  Height:  |  Size: 1.7 KiB

BIN
public/rimajon_win.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 125 KiB

9
src/components/LangLogo.astro
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
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>

15
src/components/ToolIcon.astro
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";
@ -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>

316
src/components/index/Languages.astro
View File

@ -1,149 +1,185 @@
---
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"
<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'"
/>
<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 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 />
<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
class="text-center table h-32 w-full"
x-show="active_tab === ''"
>
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"
/>
<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"
/>
<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.
<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:
<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://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>
</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>
<script>
console.log("Hello there!");
</script>

7
src/components/index/Learning.astro Normal file
View File

@ -0,0 +1,7 @@
---
import Card from "../Card.astro";
---
<Card title="I'm learning">
a
</Card>

2
src/pages/index.astro
View File

@ -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";
---
@ -32,6 +33,7 @@ import Tools from "../components/index/Tools.astro";
<Sidebar />
<div>
<Languages />
<Learning />
<Tools />
</div>
</div>