2023-11-18 01:52:14 +00:00
|
|
|
<!doctype html>
|
|
|
|
|
<html lang="en">
|
|
|
|
|
|
|
|
|
|
<head>
|
2023-11-24 03:22:27 +00:00
|
|
|
<meta charset="UTF-8" />
|
|
|
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
|
|
|
<title>Fernando Araoz</title>
|
2023-11-18 01:52:14 +00:00
|
|
|
|
2023-11-24 03:22:27 +00:00
|
|
|
<link rel="stylesheet" href="/style.css" />
|
|
|
|
|
|
|
|
|
|
<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=Fira+Mono&family=Xanh+Mono:ital@0;1&display=swap"
|
|
|
|
|
rel="stylesheet">
|
2023-11-18 01:52:14 +00:00
|
|
|
</head>
|
|
|
|
|
|
|
|
|
|
<body>
|
2023-11-24 03:22:27 +00:00
|
|
|
|
2023-11-24 11:11:29 +00:00
|
|
|
<div id="scroll-container-element" class="scroll-container h-screen overflow-y-scroll" autofocus>
|
2023-11-24 03:22:27 +00:00
|
|
|
|
|
|
|
|
<div class="h-screen mx-auto relative">
|
|
|
|
|
|
|
|
|
|
<h1 class="font-xanh text-8xl text-center py-12">
|
|
|
|
|
Fernando
|
|
|
|
|
<br>
|
|
|
|
|
Araoz
|
|
|
|
|
</h1>
|
|
|
|
|
|
|
|
|
|
<p class="text-center">
|
|
|
|
|
fernando@araozu.dev
|
|
|
|
|
</p>
|
|
|
|
|
|
|
|
|
|
<p class="text-center">
|
|
|
|
|
<a class="underline mx-4" href="https://github.com/Araozu">
|
|
|
|
|
Github</a>
|
|
|
|
|
|
|
|
|
|
<a class="underline mx-4" href="https://git.araozu.dev/">
|
|
|
|
|
Gitea
|
|
|
|
|
</a>
|
|
|
|
|
</p>
|
|
|
|
|
|
|
|
|
|
<p class="text-center py-4">
|
|
|
|
|
Front-End, soon to be Back-End developer from Perú 🇵🇪
|
|
|
|
|
</p>
|
|
|
|
|
|
2023-11-24 11:11:29 +00:00
|
|
|
<p class="font-xanh text-center text-4xl absolute w-full bottom-10">
|
2023-11-24 03:22:27 +00:00
|
|
|
What I've done over the years
|
|
|
|
|
<br>
|
|
|
|
|
<br>
|
|
|
|
|
↓
|
2023-11-24 11:11:29 +00:00
|
|
|
</p>
|
2023-11-24 03:22:27 +00:00
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
2023-11-26 12:38:12 +00:00
|
|
|
<div class="bg-slate-800 h-screen grid grid-cols-2 text-white">
|
2023-11-24 11:11:29 +00:00
|
|
|
|
|
|
|
|
<div class="flex justify-center flex-col">
|
|
|
|
|
|
|
|
|
|
<div class="max-w-[90%] mx-auto">
|
|
|
|
|
<h2 class="font-xanh text-4xl">
|
|
|
|
|
Horarios UNSA
|
|
|
|
|
</h2>
|
|
|
|
|
|
|
|
|
|
<p>
|
|
|
|
|
<span>
|
|
|
|
|
<a class="underline" href="https://horarios-v1.araozu.dev/" target="_blank">
|
|
|
|
|
https://horarios-v1.araozu.dev/</a>
|
|
|
|
|
</span>
|
|
|
|
|
·
|
|
|
|
|
<span>
|
|
|
|
|
<a class="underline" href="https://git.araozu.dev/fernando/horarios-v1" target="_blank">
|
|
|
|
|
Git repo
|
|
|
|
|
</a>
|
|
|
|
|
</span>
|
|
|
|
|
</p>
|
|
|
|
|
|
2023-11-25 02:45:33 +00:00
|
|
|
<img class="rounded-xl" src="/img/horarios_1.png" alt="Image of Horarios UNSA">
|
2023-11-24 11:11:29 +00:00
|
|
|
|
|
|
|
|
<div class="py-4">
|
2023-11-25 02:45:33 +00:00
|
|
|
<img class="h-12 rounded-md" src="/icons/js.png" alt="JS logo">
|
2023-11-24 11:11:29 +00:00
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="flex justify-center flex-col">
|
|
|
|
|
<p class="my-2">
|
|
|
|
|
At my university, the schedule is a mess. We would be given images with the schedule
|
|
|
|
|
for all the courses, and we would have to manually search & match the courses we
|
|
|
|
|
wanted to take.
|
|
|
|
|
</p>
|
|
|
|
|
<p class="my-2">
|
|
|
|
|
So I made a website where you could see which courses overlap, their professors,
|
|
|
|
|
and the classrooms they were in, in a interactive table.
|
|
|
|
|
</p>
|
|
|
|
|
<p class="my-2">
|
|
|
|
|
I made the page completely in vanilla JS, all elements & animations were created dynamically
|
|
|
|
|
using DOM primitives. It was deployed on a free hosting service.
|
|
|
|
|
</p>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
2023-11-26 12:38:12 +00:00
|
|
|
<div class="bg-red-950 h-screen grid grid-cols-2 text-white">
|
2023-11-24 11:11:29 +00:00
|
|
|
|
2023-11-24 11:45:03 +00:00
|
|
|
<div class="flex justify-center flex-col">
|
|
|
|
|
|
|
|
|
|
<div class="max-w-[90%] mx-auto">
|
|
|
|
|
<h2 class="font-xanh text-4xl">
|
|
|
|
|
PseudoSubs
|
|
|
|
|
</h2>
|
|
|
|
|
|
|
|
|
|
<p>
|
|
|
|
|
<span>
|
|
|
|
|
<a class="underline" href="https://pseudosubs-v1.araozu.dev/" target="_blank">
|
|
|
|
|
https://pseudosubs-v1.araozu.dev/</a>
|
|
|
|
|
</span>
|
|
|
|
|
·
|
|
|
|
|
<span>
|
|
|
|
|
<a class="underline" href="https://git.araozu.dev/fernando/pseudosubs-v1" target="_blank">
|
|
|
|
|
Git repo
|
|
|
|
|
</a>
|
|
|
|
|
</span>
|
|
|
|
|
</p>
|
|
|
|
|
|
2023-11-25 02:45:33 +00:00
|
|
|
<img class="rounded-xl" src="/img/pseudo_1.png" alt="Image of Horarios UNSA">
|
2023-11-24 11:45:03 +00:00
|
|
|
|
|
|
|
|
<div class="py-4">
|
2023-11-25 02:45:33 +00:00
|
|
|
<img class="h-12 rounded-md inline-block" src="/icons/php.png" alt="PHP logo">
|
2023-11-24 11:45:03 +00:00
|
|
|
/
|
2023-11-25 02:45:33 +00:00
|
|
|
<img class="h-12 rounded-md inline-block" src="/icons/vue.png" alt="VueJS logo">
|
|
|
|
|
<img class="h-12 rounded-md inline-block" src="/icons/sass.png" alt="Sass logo">
|
2023-11-24 11:45:03 +00:00
|
|
|
·
|
2023-11-25 02:45:33 +00:00
|
|
|
<img class="h-12 rounded-md inline-block" src="/icons/node.png" alt="Node logo">
|
|
|
|
|
<img class="h-12 rounded-md inline-block" src="/icons/ts.png" alt="TS logo">
|
|
|
|
|
<img class="h-12 rounded-md inline-block bg-white p-1" src="/icons/express.png"
|
2023-11-24 12:35:34 +00:00
|
|
|
alt="Express logo">
|
2023-11-24 11:45:03 +00:00
|
|
|
·
|
2023-11-25 02:45:33 +00:00
|
|
|
<img class="h-12 rounded-md inline-block bg-white" src="/icons/mysql.png" alt="MySQL logo">
|
2023-11-24 11:45:03 +00:00
|
|
|
</div>
|
|
|
|
|
</div>
|
2023-11-24 11:11:29 +00:00
|
|
|
</div>
|
|
|
|
|
|
2023-11-24 11:45:03 +00:00
|
|
|
<div class="flex justify-center flex-col">
|
|
|
|
|
<p class="my-2">
|
2023-11-24 11:11:29 +00:00
|
|
|
Between 2017 & 2019 I became interested in fansubbing anime. I made a website
|
2023-11-24 11:45:03 +00:00
|
|
|
where you could download subtitles for anime.
|
2023-11-24 11:11:29 +00:00
|
|
|
</p>
|
2023-11-24 11:45:03 +00:00
|
|
|
<p class="my-2">
|
|
|
|
|
The website was first made in PHP, although most of the pages were static.
|
2023-11-24 11:11:29 +00:00
|
|
|
At the time I didn't know about databases, so I made my own file based database,
|
2023-11-24 11:45:03 +00:00
|
|
|
with a custom format in PHP. Unfortunately I lost the code for this version.
|
|
|
|
|
</p>
|
|
|
|
|
<p class="my-2">
|
2023-11-26 12:38:12 +00:00
|
|
|
I later remade the website with VueJS and Express. I also learned about databases
|
2023-11-24 11:45:03 +00:00
|
|
|
and used MySQL.
|
2023-11-24 11:11:29 +00:00
|
|
|
</p>
|
2023-11-24 11:45:03 +00:00
|
|
|
<p class="my-2">
|
2023-11-24 11:11:29 +00:00
|
|
|
I also learned about domain names, A/AAAA/CNAME records, shared hosting &
|
2023-11-25 02:45:33 +00:00
|
|
|
integrating with external services like analytics & disqus. The Node rewrite was
|
|
|
|
|
hosted on a CPanel shared hosting.
|
2023-11-24 11:11:29 +00:00
|
|
|
</p>
|
|
|
|
|
</div>
|
|
|
|
|
|
2023-11-24 03:22:27 +00:00
|
|
|
</div>
|
|
|
|
|
|
2023-11-26 12:38:12 +00:00
|
|
|
<div class="bg-lime-950 h-screen grid grid-cols-2 text-white">
|
2023-11-24 12:35:34 +00:00
|
|
|
|
|
|
|
|
<div class="flex justify-center flex-col">
|
|
|
|
|
|
|
|
|
|
<div class="max-w-[90%] mx-auto">
|
|
|
|
|
<h2 class="font-xanh text-4xl">
|
|
|
|
|
Web Hostal
|
|
|
|
|
</h2>
|
|
|
|
|
|
|
|
|
|
<p>
|
|
|
|
|
<span>
|
|
|
|
|
<a class="underline" href="https://pseudosubs-v1.araozu.dev/" target="_blank">
|
|
|
|
|
https://pseudosubs-v1.araozu.dev/</a>
|
|
|
|
|
</span>
|
|
|
|
|
·
|
|
|
|
|
<span>
|
|
|
|
|
<a class="underline" href="https://git.araozu.dev/fernando/WebHostal" target="_blank">
|
|
|
|
|
Git repo
|
|
|
|
|
</a>
|
|
|
|
|
</span>
|
|
|
|
|
</p>
|
|
|
|
|
|
2023-11-25 02:45:33 +00:00
|
|
|
<img class="rounded-xl" src="/img/web_hostal.png" alt="Image of Web Hostal">
|
2023-11-24 12:35:34 +00:00
|
|
|
|
|
|
|
|
<div class="py-4">
|
2023-11-25 02:45:33 +00:00
|
|
|
<img class="h-12 rounded-md inline-block bg-white" src="/icons/java.png" alt="Java logo">
|
|
|
|
|
<img class="h-12 rounded-md inline-block" src="/icons/tomcat.webp" alt="Tomcat logo">
|
|
|
|
|
<img class="h-12 rounded-md inline-block" src="/icons/git.png" alt="Git logo">
|
|
|
|
|
<img class="h-12 rounded-md inline-block" src="/icons/gcloud.png" alt="Google cloud logo">
|
2023-11-24 12:35:34 +00:00
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="flex justify-center flex-col">
|
|
|
|
|
<p class="my-2">
|
|
|
|
|
A simple system for a fictional hostel, made for my university's web development course.
|
|
|
|
|
</p>
|
|
|
|
|
<p class="my-2">
|
|
|
|
|
Here I learned more about Java, JSP, Servlets, JDBC, Git, Tomcat, and deploying
|
|
|
|
|
to the cloud.
|
|
|
|
|
</p>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
</div>
|
2023-11-25 02:45:33 +00:00
|
|
|
|
|
|
|
|
<!--
|
|
|
|
|
--
|
|
|
|
|
--
|
|
|
|
|
--
|
|
|
|
|
--
|
|
|
|
|
--
|
|
|
|
|
--
|
|
|
|
|
-->
|
2023-11-26 12:38:12 +00:00
|
|
|
<div class="bg-emerald-950 h-screen grid grid-cols-2 text-white">
|
2023-11-25 02:45:33 +00:00
|
|
|
|
|
|
|
|
<div class="flex justify-center flex-col">
|
|
|
|
|
|
|
|
|
|
<div class="max-w-[90%] mx-auto">
|
|
|
|
|
<h2 class="font-xanh text-4xl">
|
|
|
|
|
Acechanime
|
|
|
|
|
</h2>
|
|
|
|
|
|
|
|
|
|
<p>
|
|
|
|
|
<span>
|
|
|
|
|
<a class="underline" href="https://github.com/Acechanime/acecha/" target="_blank">
|
|
|
|
|
Github repo
|
|
|
|
|
</a>
|
|
|
|
|
</span>
|
|
|
|
|
</p>
|
|
|
|
|
|
|
|
|
|
<img class="rounded-xl" src="/img/acecha.png" alt="Image of Horarios UNSA">
|
|
|
|
|
|
|
|
|
|
<div class="py-4">
|
|
|
|
|
<img class="h-12 rounded-md inline-block" src="/icons/vue.png" alt="Vue logo">
|
|
|
|
|
<img class="h-12 rounded-md inline-block" src="/icons/pug.png" alt="Pug logo">
|
|
|
|
|
<img class="h-12 rounded-md inline-block" src="/icons/coffee.png" alt="CoffeeScript logo">
|
|
|
|
|
<img class="h-12 rounded-md inline-block" src="/icons/sass.png" alt="Sass logo">
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="flex justify-center flex-col">
|
|
|
|
|
<p class="my-2">
|
|
|
|
|
As a result of my previous experience with fansubbing, I was invited to join a
|
|
|
|
|
group of fansubbers. I made a website for them, where they could upload their
|
|
|
|
|
subtitles.
|
|
|
|
|
</p>
|
|
|
|
|
<p class="my-2">
|
|
|
|
|
As it was a low risk project (made for free, for some individuals I didn't personally know),
|
|
|
|
|
I decided to try out new technologies that interested me at the time.
|
|
|
|
|
</p>
|
|
|
|
|
<p class="my-2">
|
|
|
|
|
I made only the Front-End, the Back-End was made by another person.
|
|
|
|
|
</p>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<!--
|
|
|
|
|
--
|
|
|
|
|
--
|
|
|
|
|
--
|
|
|
|
|
--
|
|
|
|
|
--
|
|
|
|
|
--
|
|
|
|
|
-->
|
2023-11-26 12:38:12 +00:00
|
|
|
<div class="bg-cyan-950 h-screen grid grid-cols-2 text-white">
|
2023-11-25 02:45:33 +00:00
|
|
|
|
|
|
|
|
<div class="flex justify-center flex-col">
|
|
|
|
|
|
|
|
|
|
<div class="max-w-[90%] mx-auto">
|
|
|
|
|
<h2 class="font-xanh text-4xl">
|
|
|
|
|
Horarios UNSA 2
|
|
|
|
|
</h2>
|
|
|
|
|
|
|
|
|
|
<p>
|
|
|
|
|
<span>
|
|
|
|
|
<a class="underline" href="https://horarios-v2.araozu.dev/" target="_blank">
|
|
|
|
|
https://horarios-v2.araozu.dev/</a>
|
|
|
|
|
</span>
|
|
|
|
|
·
|
|
|
|
|
<span>
|
|
|
|
|
<a class="underline" href="https://git.araozu.dev/fernando/horarios-v2" target="_blank">
|
|
|
|
|
Git repo
|
|
|
|
|
</a>
|
|
|
|
|
</span>
|
|
|
|
|
</p>
|
|
|
|
|
|
|
|
|
|
<img class="rounded-xl" src="/img/horarios_2.png" alt="Image of Horarios UNSA">
|
|
|
|
|
|
|
|
|
|
<div class="py-4">
|
|
|
|
|
<img class="h-12 rounded-md inline-block" src="/icons/vue.png" alt="Vue logo">
|
|
|
|
|
<img class="h-12 rounded-md inline-block" src="/icons/pug.png" alt="Pug logo">
|
|
|
|
|
<img class="h-12 rounded-md inline-block" src="/icons/coffee.png" alt="CoffeeScript logo">
|
|
|
|
|
<img class="h-12 rounded-md inline-block" src="/icons/sass.png" alt="Sass logo">
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="flex justify-center flex-col">
|
|
|
|
|
<p class="my-2">
|
|
|
|
|
The second iteration of the Horarios UNSA website. This time I used VueJS.
|
|
|
|
|
</p>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<!--
|
|
|
|
|
--
|
|
|
|
|
--
|
|
|
|
|
--
|
|
|
|
|
--
|
|
|
|
|
--
|
|
|
|
|
--
|
|
|
|
|
-->
|
2023-11-26 12:38:12 +00:00
|
|
|
<div class="bg-blue-950 h-screen grid grid-cols-2 text-white">
|
2023-11-25 02:45:33 +00:00
|
|
|
|
|
|
|
|
<div class="flex justify-center flex-col">
|
|
|
|
|
|
|
|
|
|
<div class="max-w-[90%] mx-auto">
|
|
|
|
|
<h2 class="font-xanh text-4xl">
|
|
|
|
|
PL - Modoki
|
|
|
|
|
</h2>
|
|
|
|
|
|
|
|
|
|
<p>
|
|
|
|
|
<span>
|
|
|
|
|
<a class="underline" href="https://modoki.js.org/#/" target="_blank">
|
|
|
|
|
https://modoki.js.org/#/</a>
|
|
|
|
|
</span>
|
|
|
|
|
·
|
|
|
|
|
<span>
|
|
|
|
|
<a class="underline" href="https://github.com/Araozu/modoki/tree/master" target="_blank">
|
|
|
|
|
GitHub repo
|
|
|
|
|
</a>
|
|
|
|
|
</span>
|
|
|
|
|
</p>
|
|
|
|
|
|
|
|
|
|
<img class="rounded-xl" src="/img/modoki.png" alt="Image of Horarios UNSA">
|
|
|
|
|
|
|
|
|
|
<div class="py-4">
|
|
|
|
|
<img class="h-12 rounded-md inline-block" src="/icons/f_sharp.png" alt="F# logo">
|
|
|
|
|
·
|
|
|
|
|
<img class="h-12 rounded-md inline-block" src="/icons/js.png" alt="JS logo">
|
|
|
|
|
<img class="h-12 rounded-md inline-block" src="/icons/vue.png" alt="Vue logo">
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="flex justify-center flex-col">
|
|
|
|
|
<p class="my-2">
|
|
|
|
|
In 2019 I discovered functional programming with F#. As I learned about more
|
|
|
|
|
new languages & paradigms like haskell, erlang, lisp, etc. I became interested
|
|
|
|
|
in making a new programming language.
|
|
|
|
|
</p>
|
|
|
|
|
<p class="my-2">
|
|
|
|
|
I began working on a compiler for my new language, which changed names, syntax, semantics,
|
|
|
|
|
target platform, etc. many times. I wrote a simple compiler, and rewrote it in multiple
|
|
|
|
|
languages.
|
|
|
|
|
</p>
|
|
|
|
|
<p class="my-2">
|
|
|
|
|
The first iteration was called Modoki, an indentation based, functional, statically typed
|
|
|
|
|
language that compiled to JS. I wrote a static site for its documentation.
|
|
|
|
|
</p>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<!--
|
|
|
|
|
--
|
|
|
|
|
--
|
|
|
|
|
--
|
|
|
|
|
--
|
|
|
|
|
--
|
|
|
|
|
--
|
|
|
|
|
-->
|
2023-11-26 12:38:12 +00:00
|
|
|
<div class="bg-violet-950 h-screen grid grid-cols-2 text-white">
|
2023-11-25 02:45:33 +00:00
|
|
|
|
|
|
|
|
<div class="flex justify-center flex-col">
|
|
|
|
|
|
|
|
|
|
<div class="max-w-[90%] mx-auto">
|
|
|
|
|
<h2 class="font-xanh text-4xl">
|
|
|
|
|
KScript
|
|
|
|
|
</h2>
|
|
|
|
|
|
|
|
|
|
<p>
|
|
|
|
|
<span>
|
|
|
|
|
<a class="underline" href="https://jovial-jepsen-2619da.netlify.app/#/" target="_blank">
|
|
|
|
|
Web page at Netlify</a>
|
|
|
|
|
</span>
|
|
|
|
|
·
|
|
|
|
|
<span>
|
|
|
|
|
<a class="underline" href="https://github.com/Araozu/KScript-web" target="_blank">
|
|
|
|
|
GitHub (web page)
|
|
|
|
|
</a>
|
|
|
|
|
</span>
|
|
|
|
|
·
|
|
|
|
|
<span>
|
|
|
|
|
<a class="underline" href="https://github.com/misti-lang/kscript" target="_blank">
|
|
|
|
|
GitHub (compiler)
|
|
|
|
|
</a>
|
|
|
|
|
</span>
|
|
|
|
|
</p>
|
|
|
|
|
|
|
|
|
|
<img class="rounded-xl" src="/img/kscript.png" alt="Image of KScript">
|
|
|
|
|
|
|
|
|
|
<div class="py-4">
|
|
|
|
|
<img class="h-12 rounded-md inline-block" src="/icons/ts.png" alt="TS logo">
|
|
|
|
|
·
|
|
|
|
|
<img class="h-12 rounded-md inline-block" src="/icons/vue.png" alt="Vue logo">
|
|
|
|
|
<img class="h-12 rounded-md inline-block" src="/icons/pug.png" alt="Pug logo">
|
|
|
|
|
<img class="h-12 rounded-md inline-block" src="/icons/coffee.png" alt="CoffeeScript logo">
|
|
|
|
|
<img class="h-12 rounded-md inline-block" src="/icons/sass.png" alt="Sass logo">
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="flex justify-center flex-col">
|
|
|
|
|
<p class="my-2">
|
|
|
|
|
The next rewrite of my compiler was called KScript. It was written in
|
|
|
|
|
TypeScript.
|
|
|
|
|
</p>
|
|
|
|
|
<p class="my-2">
|
|
|
|
|
I wrote a simple web editor for it, syntax highlighting, and a simple
|
|
|
|
|
transpiler & interpreter.
|
|
|
|
|
</p>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<!--
|
|
|
|
|
--
|
|
|
|
|
--
|
|
|
|
|
--
|
|
|
|
|
--
|
|
|
|
|
--
|
|
|
|
|
--
|
|
|
|
|
-->
|
2023-11-26 12:38:12 +00:00
|
|
|
<div class="bg-pink-950 h-screen grid grid-cols-2 text-white">
|
2023-11-25 02:45:33 +00:00
|
|
|
|
|
|
|
|
<div class="flex justify-center flex-col">
|
|
|
|
|
|
|
|
|
|
<div class="max-w-[90%] mx-auto">
|
|
|
|
|
<h2 class="font-xanh text-4xl">
|
|
|
|
|
Emisa
|
|
|
|
|
</h2>
|
|
|
|
|
|
|
|
|
|
<p>
|
|
|
|
|
<span>
|
|
|
|
|
<a class="underline" href="https://jovial-jepsen-2619da.netlify.app/#/" target="_blank">
|
|
|
|
|
Web page</a>
|
|
|
|
|
</span>
|
|
|
|
|
·
|
|
|
|
|
<span>
|
|
|
|
|
<a class="underline" href="https://github.com/Araozu/emisa" target="_blank">
|
|
|
|
|
GitHub
|
|
|
|
|
</a>
|
|
|
|
|
</span>
|
|
|
|
|
</p>
|
|
|
|
|
|
|
|
|
|
<img class="rounded-xl" src="/img/emisa.png" alt="Image of Emisa">
|
|
|
|
|
|
|
|
|
|
<div class="py-4">
|
|
|
|
|
<img class="h-12 rounded-md inline-block" src="/icons/java.png" alt="Java logo">
|
|
|
|
|
<img class="h-12 rounded-md inline-block" src="/icons/mysql.png" alt="MySQL logo">
|
|
|
|
|
<img class="h-12 rounded-md inline-block" src="/icons/tomcat.webp" alt="Tomcat logo">
|
|
|
|
|
<img class="h-12 rounded-md inline-block" src="/icons/vue.png" alt="Vue logo">
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="flex justify-center flex-col">
|
|
|
|
|
<p class="my-2">
|
|
|
|
|
A fictional CRUD system made for a university course.
|
|
|
|
|
</p>
|
|
|
|
|
<p class="my-2">
|
|
|
|
|
It used JavaEE, raw MySQL, VueJS and was deployed on a Tomcat server.
|
|
|
|
|
</p>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<!--
|
|
|
|
|
--
|
|
|
|
|
--
|
|
|
|
|
--
|
|
|
|
|
--
|
|
|
|
|
--
|
|
|
|
|
--
|
|
|
|
|
-->
|
2023-11-26 12:38:12 +00:00
|
|
|
<div class="bg-rose-950 h-screen grid grid-cols-2 text-white">
|
2023-11-25 02:45:33 +00:00
|
|
|
|
|
|
|
|
<div class="flex justify-center flex-col">
|
|
|
|
|
|
|
|
|
|
<div class="max-w-[90%] mx-auto">
|
|
|
|
|
<h2 class="font-xanh text-4xl">
|
|
|
|
|
Rimajon
|
|
|
|
|
</h2>
|
|
|
|
|
|
|
|
|
|
<p>
|
|
|
|
|
<span>
|
|
|
|
|
<a class="underline" href="" target="_blank">
|
|
|
|
|
</a>
|
|
|
|
|
</span>
|
|
|
|
|
·
|
|
|
|
|
<span>
|
|
|
|
|
<a class="underline" href="https://github.com/Araozu/RiMaJonV" target="_blank">
|
|
|
|
|
GitHub (FE)
|
|
|
|
|
</a>
|
|
|
|
|
</span>
|
|
|
|
|
·
|
|
|
|
|
<span>
|
|
|
|
|
<a class="underline" href="https://github.com/Araozu/RiMaJon_backend" target="_blank">
|
|
|
|
|
GitHub (BE)
|
|
|
|
|
</a>
|
|
|
|
|
</span>
|
|
|
|
|
</p>
|
|
|
|
|
|
2023-11-26 12:38:12 +00:00
|
|
|
<img class="rounded-xl" src="/img/rimajon.png" alt="Image of Rimajon">
|
2023-11-25 02:45:33 +00:00
|
|
|
|
|
|
|
|
<div class="py-4">
|
|
|
|
|
<img class="h-12 inline-block" src="/icons/kotlin.png" alt="Kotlin logo">
|
|
|
|
|
·
|
|
|
|
|
<img class="h-12 rounded-md inline-block" src="/icons/vue.png" alt="Vue logo">
|
|
|
|
|
<img class="h-12 rounded-md inline-block" src="/icons/ts.png" alt="TS logo">
|
|
|
|
|
<img class="h-12 rounded-md inline-block" src="/icons/sass.png" alt="Sass logo">
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="flex justify-center flex-col">
|
|
|
|
|
<p class="my-2">
|
|
|
|
|
A Mahjong-like game, but with cards instead of tiles.
|
|
|
|
|
</p>
|
|
|
|
|
<p class="my-2">
|
|
|
|
|
I didn't use a game engine or webgl, I made the game like a regular website.
|
|
|
|
|
It was made with VueJS, and the backend was made with Kotlin.
|
|
|
|
|
</p>
|
|
|
|
|
<p class="my-2">
|
2023-11-26 12:38:12 +00:00
|
|
|
It featured lobby creation/join, waiting rooms, 4 players per game,
|
2023-11-25 02:45:33 +00:00
|
|
|
server-side game logic, and a simple AI.
|
|
|
|
|
</p>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<!--
|
|
|
|
|
--
|
|
|
|
|
--
|
|
|
|
|
--
|
|
|
|
|
--
|
|
|
|
|
--
|
|
|
|
|
--
|
|
|
|
|
-->
|
2023-11-26 12:38:12 +00:00
|
|
|
<div class="bg-pink-950 h-screen grid grid-cols-2 text-white">
|
2023-11-25 02:45:33 +00:00
|
|
|
|
|
|
|
|
<div class="flex justify-center flex-col">
|
|
|
|
|
|
|
|
|
|
<div class="max-w-[90%] mx-auto">
|
|
|
|
|
<h2 class="font-xanh text-4xl">
|
|
|
|
|
Horarios UNSA 3
|
|
|
|
|
</h2>
|
|
|
|
|
|
|
|
|
|
<p>
|
|
|
|
|
<span>
|
|
|
|
|
<a class="underline" href="https://horarios-v3.araozu.dev/" target="_blank">
|
|
|
|
|
https://horarios-v3.araozu.dev/</a>
|
|
|
|
|
</span>
|
|
|
|
|
·
|
|
|
|
|
<span>
|
|
|
|
|
<a class="underline" href="https://git.araozu.dev/fernando/horarios-v3" target="_blank">
|
|
|
|
|
Git repo
|
|
|
|
|
</a>
|
|
|
|
|
</span>
|
|
|
|
|
</p>
|
|
|
|
|
|
|
|
|
|
<img class="rounded-xl" src="/img/horarios_3.png" alt="Image of Horarios 3">
|
|
|
|
|
|
|
|
|
|
<div class="py-4">
|
|
|
|
|
<img class="h-12 rounded-md inline-block" src="/icons/solid.png" alt="SolidJS logo">
|
|
|
|
|
<img class="h-12 rounded-md inline-block" src="/icons/ts.png" alt="TS logo">
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="flex justify-center flex-col">
|
|
|
|
|
<p class="my-2">
|
|
|
|
|
Third rewrite. Now with SolidJS.
|
|
|
|
|
</p>
|
|
|
|
|
<p class="my-2">
|
|
|
|
|
By this time I felt confident with my VueJS skills, so I decided to try out
|
|
|
|
|
new frameworks. I tried React, but I didn't like it as much. I then tried
|
|
|
|
|
SolidJS, and I liked it a lot.
|
|
|
|
|
</p>
|
|
|
|
|
<p class="my-2">
|
|
|
|
|
I also used CSS-in-JS for the first time, with Aphrodite.
|
|
|
|
|
</p>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<!--
|
|
|
|
|
--
|
|
|
|
|
--
|
|
|
|
|
--
|
|
|
|
|
--
|
|
|
|
|
--
|
|
|
|
|
--
|
|
|
|
|
-->
|
2023-11-26 12:38:12 +00:00
|
|
|
<div class="bg-yellow-950 h-screen grid grid-cols-2 text-white">
|
2023-11-25 02:45:33 +00:00
|
|
|
|
|
|
|
|
<div class="flex justify-center flex-col">
|
|
|
|
|
|
|
|
|
|
<div class="max-w-[90%] mx-auto">
|
|
|
|
|
<h2 class="font-xanh text-4xl">
|
|
|
|
|
Misti-lang
|
|
|
|
|
</h2>
|
|
|
|
|
|
|
|
|
|
<p>
|
|
|
|
|
<span>
|
|
|
|
|
<a class="underline" href="https://comforting-youtiao-d58ed0.netlify.app/" target="_blank">
|
|
|
|
|
At Netlify</a>
|
|
|
|
|
</span>
|
|
|
|
|
·
|
|
|
|
|
<span>
|
|
|
|
|
<a class="underline" href="https://github.com/Araozu/misti-web" target="_blank">
|
|
|
|
|
GitHub
|
|
|
|
|
</a>
|
|
|
|
|
</span>
|
|
|
|
|
</p>
|
|
|
|
|
|
|
|
|
|
<img class="rounded-xl" src="/img/misti.png" alt="Image of Misti">
|
|
|
|
|
|
|
|
|
|
<div class="py-4">
|
|
|
|
|
<img class="h-12 rounded-md inline-block" src="/icons/rust.png" alt="Rust logo">
|
|
|
|
|
·
|
|
|
|
|
<img class="h-12 rounded-md inline-block" src="/icons/solid.png" alt="SolidJS logo">
|
|
|
|
|
<img class="h-12 rounded-md inline-block" src="/icons/ts.png" alt="TS logo">
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="flex justify-center flex-col">
|
|
|
|
|
<p class="my-2">
|
|
|
|
|
The next rewrite of my programming language. This time the
|
|
|
|
|
compiler was written in Rust*.
|
|
|
|
|
</p>
|
|
|
|
|
<p class="my-2">
|
|
|
|
|
The documentation was written in SolidJS.
|
|
|
|
|
</p>
|
|
|
|
|
<p class="my-2 text-xs">
|
|
|
|
|
*This site is not endorsed by or affiliated with The Rust Foundation.
|
|
|
|
|
</p>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<!--
|
|
|
|
|
--
|
|
|
|
|
--
|
|
|
|
|
--
|
|
|
|
|
--
|
|
|
|
|
--
|
|
|
|
|
--
|
|
|
|
|
-->
|
2023-11-26 12:38:12 +00:00
|
|
|
<div class="bg-sky-950 h-screen grid grid-cols-2 text-white">
|
2023-11-25 02:45:33 +00:00
|
|
|
|
|
|
|
|
<div class="flex justify-center flex-col">
|
|
|
|
|
|
|
|
|
|
<div class="max-w-[90%] mx-auto">
|
|
|
|
|
<h2 class="font-xanh text-4xl">
|
|
|
|
|
Sistema de acreditacion
|
|
|
|
|
</h2>
|
|
|
|
|
|
|
|
|
|
<p>
|
|
|
|
|
<span>
|
|
|
|
|
<a class="underline" href="https://app.netlify.com/sites/proyecto-gestion-calidad/overview"
|
|
|
|
|
target="_blank">
|
|
|
|
|
At netlify</a>
|
|
|
|
|
</span>
|
|
|
|
|
·
|
|
|
|
|
<span>
|
|
|
|
|
<a class="underline" href="https://github.com/Araozu/fac-psicologia-mirror" target="_blank">
|
|
|
|
|
GitHub
|
|
|
|
|
</a>
|
|
|
|
|
</span>
|
|
|
|
|
</p>
|
|
|
|
|
|
|
|
|
|
<img class="rounded-xl" src="/img/emisa.png" alt="Image of Sistem">
|
|
|
|
|
|
|
|
|
|
<div class="py-4">
|
|
|
|
|
<img class="h-12 rounded-md inline-block" src="/icons/react.png" alt="React logo">
|
|
|
|
|
<img class="h-12 rounded-md inline-block" src="/icons/ts.png" alt="TS logo">
|
|
|
|
|
<img class="h-12 rounded-md inline-block" src="/icons/tailwind.svg" alt="Tailwind logo">
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="flex justify-center flex-col">
|
|
|
|
|
<p class="my-2">
|
|
|
|
|
A capstone project for a university course. I made it with a group of 6 people.
|
|
|
|
|
I lead the Front-End team.
|
|
|
|
|
</p>
|
|
|
|
|
<p class="my-2">
|
|
|
|
|
This was my introduction to TailwindCSS, and I've been using it
|
|
|
|
|
ever since.
|
|
|
|
|
</p>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<!--
|
|
|
|
|
--
|
|
|
|
|
--
|
|
|
|
|
--
|
|
|
|
|
--
|
|
|
|
|
--
|
|
|
|
|
--
|
|
|
|
|
-->
|
2023-11-26 12:38:12 +00:00
|
|
|
<div class="bg-orange-950 h-screen grid grid-cols-2 text-white">
|
2023-11-25 02:45:33 +00:00
|
|
|
|
|
|
|
|
<div class="flex justify-center flex-col">
|
|
|
|
|
|
|
|
|
|
<div class="max-w-[90%] mx-auto">
|
|
|
|
|
<h2 class="font-xanh text-4xl">
|
|
|
|
|
THP
|
|
|
|
|
</h2>
|
|
|
|
|
|
|
|
|
|
<p>
|
|
|
|
|
<span>
|
|
|
|
|
<a class="underline" href="https://thp.araozu.dev/" target="_blank">
|
|
|
|
|
https://thp.araozu.dev/</a>
|
|
|
|
|
</span>
|
|
|
|
|
·
|
|
|
|
|
<span>
|
|
|
|
|
<a class="underline" href="https://git.araozu.dev/fernando/thp-web" target="_blank">
|
|
|
|
|
Git repo (FE)
|
|
|
|
|
</a>
|
|
|
|
|
</span>
|
|
|
|
|
·
|
|
|
|
|
<span>
|
|
|
|
|
<a class="underline" href="https://git.araozu.dev/fernando/thp" target="_blank">
|
|
|
|
|
Git repo (compiler)
|
|
|
|
|
</a>
|
|
|
|
|
</span>
|
|
|
|
|
</p>
|
|
|
|
|
|
|
|
|
|
<img class="rounded-xl" src="/img/thp.png" alt="Image of THP">
|
|
|
|
|
|
|
|
|
|
<div class="py-4">
|
|
|
|
|
<img class="h-12 rounded-md inline-block" src="/icons/rust.png" alt="Rust logo">
|
|
|
|
|
·
|
|
|
|
|
<img class="h-12 rounded-md inline-block" src="/icons/tailwind.svg" alt="Tailwind logo">
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="flex justify-center flex-col">
|
|
|
|
|
<p class="my-2">
|
|
|
|
|
My latest rewrite of my programming language. This time the language
|
|
|
|
|
targets PHP instead of JS.
|
|
|
|
|
</p>
|
|
|
|
|
<p class="my-2">
|
|
|
|
|
The compiler is written in Rust. The Front-End is written in markdown,
|
|
|
|
|
and compiled to HTML with my own static site generator,
|
|
|
|
|
also written in Rust.
|
|
|
|
|
</p>
|
|
|
|
|
<p class="my-2 text-xs">
|
|
|
|
|
This site is not endorsed by or affiliated with The Rust Foundation.
|
|
|
|
|
</p>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
</div>
|
2023-11-24 03:22:27 +00:00
|
|
|
</div>
|
2023-11-18 01:52:14 +00:00
|
|
|
|
|
|
|
|
</body>
|
|
|
|
|
|
|
|
|
|
</html>
|
