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

Improve layout

main
Araozu 2024-04-29 10:35:20 -05:00
parent 55ee8971e6
commit 84dfae9a8c
6 changed files with 316 additions and 118 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
public/img/go-logo.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 5.9 KiB

42
public/img/go-logo.svg Normal file
View File

@ -0,0 +1,42 @@
<?xml version="1.0" encoding="UTF-8"?>
<!-- Generator: Adobe Illustrator 24.0.1, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 205.4 76.7" style="enable-background:new 0 0 205.4 76.7;" xml:space="preserve">
<style type="text/css">
.st0{fill:#00ACD7;}
</style>
<g>
<g>
<g>
<g>
<path class="st0" d="M15.5,23.2c-0.4,0-0.5-0.2-0.3-0.5l2.1-2.7c0.2-0.3,0.7-0.5,1.1-0.5h35.7c0.4,0,0.5,0.3,0.3,0.6l-1.7,2.6 c-0.2,0.3-0.7,0.6-1,0.6L15.5,23.2z"/>
</g>
</g>
</g>
<g>
<g>
<g>
<path class="st0" d="M0.4,32.4c-0.4,0-0.5-0.2-0.3-0.5l2.1-2.7c0.2-0.3,0.7-0.5,1.1-0.5h45.6c0.4,0,0.6,0.3,0.5,0.6l-0.8,2.4 c-0.1,0.4-0.5,0.6-0.9,0.6L0.4,32.4z"/>
</g>
</g>
</g>
<g>
<g>
<g>
<path class="st0" d="M24.6,41.6c-0.4,0-0.5-0.3-0.3-0.6l1.4-2.5c0.2-0.3,0.6-0.6,1-0.6h20c0.4,0,0.6,0.3,0.6,0.7L47.1,41 c0,0.4-0.4,0.7-0.7,0.7L24.6,41.6z"/>
</g>
</g>
</g>
<g>
<g id="CXHf1q_3_">
<g>
<g>
<path class="st0" d="M128.4,21.4c-6.3,1.6-10.6,2.8-16.8,4.4c-1.5,0.4-1.6,0.5-2.9-1c-1.5-1.7-2.6-2.8-4.7-3.8 c-6.3-3.1-12.4-2.2-18.1,1.5c-6.8,4.4-10.3,10.9-10.2,19c0.1,8,5.6,14.6,13.5,15.7c6.8,0.9,12.5-1.5,17-6.6 c0.9-1.1,1.7-2.3,2.7-3.7c-3.6,0-8.1,0-19.3,0c-2.1,0-2.6-1.3-1.9-3c1.3-3.1,3.7-8.3,5.1-10.9c0.3-0.6,1-1.6,2.5-1.6 c5.1,0,23.9,0,36.4,0c-0.2,2.7-0.2,5.4-0.6,8.1c-1.1,7.2-3.8,13.8-8.2,19.6c-7.2,9.5-16.6,15.4-28.5,17 c-9.8,1.3-18.9-0.6-26.9-6.6c-7.4-5.6-11.6-13-12.7-22.2c-1.3-10.9,1.9-20.7,8.5-29.3c7.1-9.3,16.5-15.2,28-17.3 c9.4-1.7,18.4-0.6,26.5,4.9c5.3,3.5,9.1,8.3,11.6,14.1C130,20.6,129.6,21.1,128.4,21.4z"/>
</g>
<g>
<path class="st0" d="M161.5,76.7c-9.1-0.2-17.4-2.8-24.4-8.8c-5.9-5.1-9.6-11.6-10.8-19.3c-1.8-11.3,1.3-21.3,8.1-30.2 c7.3-9.6,16.1-14.6,28-16.7c10.2-1.8,19.8-0.8,28.5,5.1c7.9,5.4,12.8,12.7,14.1,22.3c1.7,13.5-2.2,24.5-11.5,33.9 c-6.6,6.7-14.7,10.9-24,12.8C166.8,76.3,164.1,76.4,161.5,76.7z M185.3,36.3c-0.1-1.3-0.1-2.3-0.3-3.3 c-1.8-9.9-10.9-15.5-20.4-13.3c-9.3,2.1-15.3,8-17.5,17.4c-1.8,7.8,2,15.7,9.2,18.9c5.5,2.4,11,2.1,16.3-0.6 C180.5,51.3,184.8,44.9,185.3,36.3z"/>
</g>
</g>
</g>
</g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 2.2 KiB

BIN
public/img/rust-logo.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 84 KiB

61
public/img/rust-logo.svg Normal file
View File

@ -0,0 +1,61 @@
<svg version="1.1" height="106" width="106" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g id="logo" transform="translate(53, 53)">
<path id="r" transform="translate(0.5, 0.5)" stroke="black" stroke-width="1" stroke-linejoin="round" d="
M -9,-15 H 4 C 12,-15 12,-7 4,-7 H -9 Z
M -40,22 H 0 V 11 H -9 V 3 H 1 C 12,3 6,22 15,22 H 40
V 3 H 34 V 5 C 34,13 25,12 24,7 C 23,2 19,-2 18,-2 C 33,-10 24,-26 12,-26 H -35
V -15 H -25 V 11 H -40 Z" />
<g id="gear" mask="url(#holes)">
<circle r="43" fill="none" stroke="black" stroke-width="9" />
<g id="cogs">
<polygon id="cog" stroke="black" stroke-width="3" stroke-linejoin="round" points="46,3 51,0 46,-3" />
<use xlink:href="#cog" transform="rotate(11.25)" />
<use xlink:href="#cog" transform="rotate(22.50)" />
<use xlink:href="#cog" transform="rotate(33.75)" />
<use xlink:href="#cog" transform="rotate(45.00)" />
<use xlink:href="#cog" transform="rotate(56.25)" />
<use xlink:href="#cog" transform="rotate(67.50)" />
<use xlink:href="#cog" transform="rotate(78.75)" />
<use xlink:href="#cog" transform="rotate(90.00)" />
<use xlink:href="#cog" transform="rotate(101.25)" />
<use xlink:href="#cog" transform="rotate(112.50)" />
<use xlink:href="#cog" transform="rotate(123.75)" />
<use xlink:href="#cog" transform="rotate(135.00)" />
<use xlink:href="#cog" transform="rotate(146.25)" />
<use xlink:href="#cog" transform="rotate(157.50)" />
<use xlink:href="#cog" transform="rotate(168.75)" />
<use xlink:href="#cog" transform="rotate(180.00)" />
<use xlink:href="#cog" transform="rotate(191.25)" />
<use xlink:href="#cog" transform="rotate(202.50)" />
<use xlink:href="#cog" transform="rotate(213.75)" />
<use xlink:href="#cog" transform="rotate(225.00)" />
<use xlink:href="#cog" transform="rotate(236.25)" />
<use xlink:href="#cog" transform="rotate(247.50)" />
<use xlink:href="#cog" transform="rotate(258.75)" />
<use xlink:href="#cog" transform="rotate(270.00)" />
<use xlink:href="#cog" transform="rotate(281.25)" />
<use xlink:href="#cog" transform="rotate(292.50)" />
<use xlink:href="#cog" transform="rotate(303.75)" />
<use xlink:href="#cog" transform="rotate(315.00)" />
<use xlink:href="#cog" transform="rotate(326.25)" />
<use xlink:href="#cog" transform="rotate(337.50)" />
<use xlink:href="#cog" transform="rotate(348.75)" />
</g>
<g id="mounts">
<polygon id="mount" stroke="black" stroke-width="6" stroke-linejoin="round" points="-7,-42 0,-35 7,-42" />
<use xlink:href="#mount" transform="rotate(72)" />
<use xlink:href="#mount" transform="rotate(144)" />
<use xlink:href="#mount" transform="rotate(216)" />
<use xlink:href="#mount" transform="rotate(288)" />
</g>
</g>
<mask id="holes">
<rect x="-60" y="-60" width="120" height="120" fill="white"/>
<circle id="hole" cy="-40" r="3" />
<use xlink:href="#hole" transform="rotate(72)" />
<use xlink:href="#hole" transform="rotate(144)" />
<use xlink:href="#hole" transform="rotate(216)" />
<use xlink:href="#hole" transform="rotate(288)" />
</mask>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 3.2 KiB

14
src/components/Sidebar.astro Normal file
View File

@ -0,0 +1,14 @@
<div class="lg:px-1">
<h1 class="text-xl font-light py-4">
Hi 👋! I'm
<br />
<span class="font-black text-3xl">Fernando Araoz</span>
</h1>
<div class="text-center">
<div class="inline-block w-28 h-28 lg:w-40 lg:h-40 rounded-full bg-slate-500"></div>
</div>
<p class="text-center">
I'm a (human) software engineer passionate about web technologies. I
love building things and learning new stuff.
</p>
</div>

183
src/pages/index.astro
View File

@ -1,5 +1,6 @@
--- ---
import LangLogo from "../components/LangLogo.astro"; import LangLogo from "../components/LangLogo.astro";
import Sidebar from "../components/Sidebar.astro";
--- ---
<html lang="en"> <html lang="en">
@ -28,23 +29,15 @@ import LangLogo from "../components/LangLogo.astro";
<script src="//unpkg.com/alpinejs" defer></script> <script src="//unpkg.com/alpinejs" defer></script>
</head> </head>
<body> <body>
<div class="p-2"> <div class="p-2 lg:grid lg:grid-cols-[20rem_auto] lg:gap-4">
<h1 class="text-xl font-light py-4"> <Sidebar />
Hi 👋! I'm <div class="2xl:grid 2xl:grid-cols-2 2xl:gap-2">
<br /> <div
<span class="font-black text-3xl">Fernando Araoz</span> x-data="{open: true}"
</h1> class="shadow-lg p-2 bg-white rounded-md max-w-[50rem] border border-slate-600"
<div class="text-center"> >
<div class="inline-block w-28 h-28 rounded-full bg-slate-500">
</div>
</div>
<p class="text-center">
I'm a (human) software engineer passionate about web
technologies. I love building things and learning new stuff.
</p>
<div x-data="{open: true}">
<h2 <h2
class="text-2xl font-bold mt-6 py-2 pl-2 cursor-pointer hover:underline sticky top-0 bg-c-bg border-b border-b-slate-600" class="text-2xl font-bold py-2 pl-2 cursor-pointer hover:underline sticky top-0 border-b border-b-slate-600"
@click="open = !open" @click="open = !open"
> >
Languages Languages
@ -52,7 +45,10 @@ import LangLogo from "../components/LangLogo.astro";
x-bind:class="open? 'ph ph-caret-down': 'ph ph-caret-right'" x-bind:class="open? 'ph ph-caret-down': 'ph ph-caret-right'"
></i> ></i>
</h2> </h2>
<div class="border-l border-b rounded-bl-lg border-slate-600 pt-4 pl-1 pb-2" x-show="open"> <div
class="rounded-bl-lg border-slate-600 pt-4 pl-1 pb-2"
x-show="open"
>
<div class="grid grid-cols-[5rem_auto] gap-x-2 gap-y-4"> <div class="grid grid-cols-[5rem_auto] gap-x-2 gap-y-4">
<img <img
class="inline-block p-2" class="inline-block p-2"
@ -65,8 +61,8 @@ import LangLogo from "../components/LangLogo.astro";
> >
JS/TS JS/TS
</span> </span>
: Being the lingua franca of the web, I've used a lot : Being the lingua franca of the web, I've used a
of JS/TS, vanilla and with frameworks. lot of JS/TS, vanilla and with frameworks.
</p> </p>
<img <img
class="inline-block p-2" class="inline-block p-2"
@ -79,13 +75,13 @@ import LangLogo from "../components/LangLogo.astro";
> >
Java/Kotlin Java/Kotlin
</span> </span>
: The language I learned in university, along with JS/TS : The language I learned in university, along with
is the language I've used the most. I've mostly written JS/TS is the language I've used the most. I've mostly
DSAs and backends with it (JSP/Spring). written DSAs and backends with it (JSP/Spring).
</p> </p>
<img <img
class="inline-block p-2" class="inline-block p-2"
src="/img/rust-logo.png" src="/img/rust-logo.svg"
alt="Rust logo" alt="Rust logo"
/> />
<p> <p>
@ -94,13 +90,13 @@ import LangLogo from "../components/LangLogo.astro";
> >
Rust Rust
</span> </span>
: Currently my favorite language, I began learning it : Currently my favorite language, I began learning
in late 2022. I've written a backend and I'm currently it in late 2022. I've written a backend and I'm currently
writing a programming language. writing a programming language.
</p> </p>
<img <img
class="inline-block p-2" class="inline-block p-2"
src="/img/go-logo.png" src="/img/go-logo.svg"
alt="Go logo" alt="Go logo"
/> />
<p> <p>
@ -109,42 +105,126 @@ import LangLogo from "../components/LangLogo.astro";
> >
Go Go
</span> </span>
: I'm currently learning Go through advent of code, and : I'm currently learning Go through advent of code,
I hope to use it for some projects in the future. and I hope to use it for some projects in the future.
</p> </p>
</div> </div>
<p class="my-4"> <p class="my-4">
<span class="font-medium text-lg">Others</span>: Other <span class="font-medium text-lg">Others</span>:
languages I've used (mostly at uni): Other languages I've used (mostly at uni):
<br /> <br />
<div class="text-center"> <div class="text-center">
<LangLogo href="https://www.iso.org/standard/74528.html" lang="C" icon="c" /> <LangLogo
<LangLogo href="https://isocpp.org/std/the-standard" lang="C++" icon="cpp" /> href="https://www.iso.org/standard/74528.html"
<LangLogo href="https://learn.microsoft.com/en-us/dotnet/csharp/" lang="Microsoft Java" icon="c-sharp" /> lang="C"
<LangLogo href="https://www.php.net/" lang="PHP" icon="php" /> icon="c"
<LangLogo href="https://www.python.org/" lang="Python" icon="python" /> />
<LangLogo href="https://dart.dev/" lang="Dart" icon="dart" /> <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> </div>
<br /> <br />
Other languages I've tried for fun: Other languages I've tried for fun:
<br /> <br />
<div class="text-center"> <div class="text-center">
<LangLogo href="https://elixir-lang.org/" lang="Elixir" icon="elixir" /> <LangLogo
<LangLogo href="https://www.erlang.org/" lang="Erlang" icon="erlang" /> href="https://elixir-lang.org/"
<LangLogo href="https://gleam.run/" lang="Gleam" icon="gleam" /> lang="Elixir"
<LangLogo href="https://coffeescript.org/" lang="CoffeeScript" icon="coffeescript" /> icon="elixir"
<LangLogo href="https://racket-lang.org/" lang="Racket" icon="racket" /> />
<LangLogo href="https://ziglang.org/" lang="Zig" icon="zig" /> <LangLogo
<LangLogo href="https://learn.microsoft.com/en-us/dotnet/fsharp/what-is-fsharp" lang="F#" icon="f-sharp" /> href="https://www.erlang.org/"
<LangLogo href="https://www.haskell.org/" lang="Haskell" icon="haskell" /> lang="Erlang"
<LangLogo href="https://ocaml.org/" lang="OCaml" icon="ocaml" /> icon="erlang"
<LangLogo href="https://rescript-lang.org/" lang="Rescript" icon="rescript" /> />
<LangLogo href="https://www.swift.org/" lang="Swift" icon="swift" /> <LangLogo
<LangLogo href="https://www.scala-lang.org/" lang="Scala" icon="scala" /> href="https://gleam.run/"
<LangLogo href="https://clojure.org/" lang="Clojure" icon="clojure" /> lang="Gleam"
<LangLogo href="https://www.gnu.org/software/bash/" lang="Bash" icon="bash" /> icon="gleam"
<LangLogo href="https://www.lua.org/" lang="Lua" icon="lua" /> />
<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> </div>
</p> </p>
<p> <p>
@ -154,5 +234,6 @@ import LangLogo from "../components/LangLogo.astro";
</div> </div>
</div> </div>
</div> </div>
</div>
</body> </body>
</html> </html>