176 lines
6.7 KiB
HTML
176 lines
6.7 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<title>Fernando Araoz</title>
|
|
|
|
<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">
|
|
</head>
|
|
|
|
<body>
|
|
|
|
<div id="scroll-container-element" class="scroll-container h-screen overflow-y-scroll" autofocus>
|
|
|
|
<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>
|
|
|
|
<p class="font-xanh text-center text-4xl absolute w-full bottom-10">
|
|
What I've done over the years
|
|
<br>
|
|
<br>
|
|
↓
|
|
</p>
|
|
|
|
</div>
|
|
|
|
<div class="bg-slate-800 h-screen grid grid-cols-2">
|
|
|
|
<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>
|
|
|
|
<img
|
|
class="rounded-xl"
|
|
src="/public/img/horarios_1.png"
|
|
alt="Image of Horarios UNSA"
|
|
>
|
|
|
|
<div class="py-4">
|
|
<img class="h-12 rounded-md" src="/public/icons/js.png" alt="JS logo">
|
|
</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>
|
|
|
|
<div class="bg-red-950 h-screen grid grid-cols-2">
|
|
|
|
<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>
|
|
|
|
<img
|
|
class="rounded-xl"
|
|
src="/public/img/pseudo_1.png"
|
|
alt="Image of Horarios UNSA"
|
|
>
|
|
|
|
<div class="py-4">
|
|
<img class="h-12 rounded-md inline-block" src="/public/icons/php.png" alt="PHP logo">
|
|
/
|
|
<img class="h-12 rounded-md inline-block" src="/public/icons/vue.png" alt="VueJS logo">
|
|
<img class="h-12 rounded-md inline-block" src="/public/icons/sass.png" alt="Sass logo">
|
|
·
|
|
<img class="h-12 rounded-md inline-block" src="/public/icons/node.png" alt="Node logo">
|
|
<img class="h-12 rounded-md inline-block" src="/public/icons/ts.png" alt="TS logo">
|
|
<img class="h-12 rounded-md inline-block bg-white p-1" src="/public/icons/express.png" alt="Express logo">
|
|
·
|
|
<img class="h-12 rounded-md inline-block bg-white" src="/public/icons/mysql.png" alt="MySQL logo">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="flex justify-center flex-col">
|
|
<p class="my-2">
|
|
Between 2017 & 2019 I became interested in fansubbing anime. I made a website
|
|
where you could download subtitles for anime.
|
|
</p>
|
|
<p class="my-2">
|
|
The website was first made in PHP, although most of the pages were static.
|
|
At the time I didn't know about databases, so I made my own file based database,
|
|
with a custom format in PHP. Unfortunately I lost the code for this version.
|
|
</p>
|
|
<p class="my-2">
|
|
I later remade the website in VueJS and Express. I also learned about databases
|
|
and used MySQL.
|
|
</p>
|
|
<p class="my-2">
|
|
I also learned about domain names, A/AAAA/CNAME records, shared hosting &
|
|
integrating with external services like analytics & disqus.
|
|
</p>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</body>
|
|
|
|
</html> |