Add more pages

main
Araozu 2023-11-24 21:45:33 -05:00
parent b82e4f99f8
commit 30641cafc8
15 changed files with 589 additions and 18 deletions

View File

@ -74,10 +74,10 @@
</span> </span>
</p> </p>
<img class="rounded-xl" src="/public/img/horarios_1.png" alt="Image of Horarios UNSA"> <img class="rounded-xl" src="/img/horarios_1.png" alt="Image of Horarios UNSA">
<div class="py-4"> <div class="py-4">
<img class="h-12 rounded-md" src="/public/icons/js.png" alt="JS logo"> <img class="h-12 rounded-md" src="/icons/js.png" alt="JS logo">
</div> </div>
</div> </div>
</div> </div>
@ -122,21 +122,20 @@
</span> </span>
</p> </p>
<img class="rounded-xl" src="/public/img/pseudo_1.png" alt="Image of Horarios UNSA"> <img class="rounded-xl" src="/img/pseudo_1.png" alt="Image of Horarios UNSA">
<div class="py-4"> <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="/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="/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="/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="/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" src="/icons/ts.png" alt="TS logo">
<img class="h-12 rounded-md inline-block bg-white p-1" src="/public/icons/express.png" <img class="h-12 rounded-md inline-block bg-white p-1" src="/icons/express.png"
alt="Express logo"> alt="Express logo">
· ·
<img class="h-12 rounded-md inline-block bg-white" src="/public/icons/mysql.png" <img class="h-12 rounded-md inline-block bg-white" src="/icons/mysql.png" alt="MySQL logo">
alt="MySQL logo">
</div> </div>
</div> </div>
</div> </div>
@ -157,7 +156,8 @@
</p> </p>
<p class="my-2"> <p class="my-2">
I also learned about domain names, A/AAAA/CNAME records, shared hosting & I also learned about domain names, A/AAAA/CNAME records, shared hosting &
integrating with external services like analytics & disqus. integrating with external services like analytics & disqus. The Node rewrite was
hosted on a CPanel shared hosting.
</p> </p>
</div> </div>
@ -185,14 +185,13 @@
</span> </span>
</p> </p>
<img class="rounded-xl" src="/public/img/pseudo_1.png" alt="Image of Horarios UNSA"> <img class="rounded-xl" src="/img/web_hostal.png" alt="Image of Web Hostal">
<div class="py-4"> <div class="py-4">
<img class="h-12 rounded-md inline-block bg-white" src="/public/icons/java.png" alt="Java logo"> <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="/public/icons/tomcat.webp" alt="Tomcat 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="/public/icons/git.png" alt="Git 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="/public/icons/gcloud.png" <img class="h-12 rounded-md inline-block" src="/icons/gcloud.png" alt="Google cloud logo">
alt="Google cloud logo">
</div> </div>
</div> </div>
</div> </div>
@ -208,6 +207,577 @@
</div> </div>
</div> </div>
<!--
--
--
--
--
--
--
-->
<div class="bg-emerald-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">
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>
<!--
--
--
--
--
--
--
-->
<div class="bg-cyan-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">
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>
<!--
--
--
--
--
--
--
-->
<div class="bg-blue-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">
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>
<!--
--
--
--
--
--
--
-->
<div class="bg-violet-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">
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>
<!--
--
--
--
--
--
--
-->
<div class="bg-pink-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">
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>
<!--
--
--
--
--
--
--
-->
<div class="bg-rose-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">
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>
<img class="rounded-xl" src="/img/emisa.png" alt="Image of Emisa">
<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">
It featured lobby creation/join, chat rooms, 4 players per game,
server-side game logic, and a simple AI.
</p>
</div>
</div>
<!--
--
--
--
--
--
--
-->
<div class="bg-pink-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">
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>
<!--
--
--
--
--
--
--
-->
<div class="bg-yellow-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">
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>
<!--
--
--
--
--
--
--
-->
<div class="bg-sky-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">
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>
<!--
--
--
--
--
--
--
-->
<div class="bg-orange-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">
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>
</div> </div>
</body> </body>

BIN
public/icons/coffee.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 10 KiB

BIN
public/icons/f_sharp.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.3 KiB

BIN
public/icons/kotlin.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 175 KiB

BIN
public/icons/pug.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 63 KiB

BIN
public/icons/react.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 34 KiB

BIN
public/icons/rust.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 34 KiB

BIN
public/icons/solid.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 29 KiB

View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 54 33"><g clip-path="url(#prefix__clip0)"><path fill="#38bdf8" fill-rule="evenodd" d="M27 0c-7.2 0-11.7 3.6-13.5 10.8 2.7-3.6 5.85-4.95 9.45-4.05 2.054.513 3.522 2.004 5.147 3.653C30.744 13.09 33.808 16.2 40.5 16.2c7.2 0 11.7-3.6 13.5-10.8-2.7 3.6-5.85 4.95-9.45 4.05-2.054-.513-3.522-2.004-5.147-3.653C36.756 3.11 33.692 0 27 0zM13.5 16.2C6.3 16.2 1.8 19.8 0 27c2.7-3.6 5.85-4.95 9.45-4.05 2.054.514 3.522 2.004 5.147 3.653C17.244 29.29 20.308 32.4 27 32.4c7.2 0 11.7-3.6 13.5-10.8-2.7 3.6-5.85 4.95-9.45 4.05-2.054-.513-3.522-2.004-5.147-3.653C23.256 19.31 20.192 16.2 13.5 16.2z" clip-rule="evenodd"/></g><defs><clipPath id="prefix__clip0"><path fill="#fff" d="M0 0h54v32.4H0z"/></clipPath></defs></svg>

After

Width:  |  Height:  |  Size: 771 B

BIN
public/img/acecha.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 748 KiB

BIN
public/img/horarios_2.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 144 KiB

BIN
public/img/horarios_3.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 659 KiB

BIN
public/img/kscript.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 108 KiB

BIN
public/img/misti.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 92 KiB

BIN
public/img/thp.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 218 KiB