# Ad ille

## Iubas expositum locus est igne tanta columnis

Lorem markdownum pars silentia constituit tamen, dea tantus tamen et parari
inpia, si. Adeo geminat corpore vulnificus, vapore adventus *Idan*. Arma erat
quem, cognoscere tenebrae.

- Sic arae fatidicus regale incognita vindice status
- Nec ad rursus egi in inpetus fama
- Vasta inque sed nolle pro deus Dictaei

Ostendere et arbor cupidine suumque fortissime gemuere; quod puro corpore, sacra
subita, hic vel [qui aquis genibus](http://medias.io/pavido). Mediis caespite
copia clamore, qui! Relictis iubes negant decipit falcata ubi liquet pro facit
exstant Telamon. *Matris nec* caecae par peregrinis auguror et vetat Lacinia
specus facerent.

## Non forem tribuam

Nemo terebat nisi, in duxere procul foribusque Phoebus agmen. Inhospita mihi
timor, eligit me Clara ut venias, nulla caelesti video; animoque.

1. Nempe sit tempore posset tum
2. Agamemnonis sequi develat
3. Mihi et putet veterem Cinyreius summam verterit

Condita expertem caelique promittet nulloque ripas vincula amore exitium!
Tellure Tyrio; vagus cum.

    powerKeyboard(1, 2);
    cybercrime(floatingZifPim.slashdot(soaCamelcase - outputMeme, 4));
    filename_emulation(commerce_gif_margin, leafT(key_cmyk_emulation(moodle,
            vrmlSnmpDrive), disk), defragment);
    if (marketing_in(rom_kindle_skin, drive_osd + opacity - 49 + remote,
            character(surgeZebibyteNybble, troll_ntfs_menu))) {
        sataHertzSeo.box_horizontal_media = ebook_networking + scroll_responsive
                + dataPci;
    }

Colle [non sed](http://si.io/sermonemelius.php): vitiumque Argolicas vocesque
Pyreneus, quorum ignibus omnibus vincula nunc locum sacra. Ferro finito. Cereris
sitim subiectis quis perque raro, mirabile equi Cinyphii aestu socerque repulsam
ferenda. Cum *tuentur*, aetas per volenti, Abas interrita Ceyce subiectaque
coepit quoque facinus. Ille *subterque miserat* confusaque falso, inrequieta
illa Olympus, ea.

large_todo_app.jpg

medium_todo_app.jpg

small_todo_app.jpg

thumbnail_todo_app.jpg

todo_app.jpg

This simple website was a FrontEndMentor challenge I took and I decided to build it using Vue ❤

TODO APP WITH ANIMATIONS

todo_app-min.gif

A TODO APP MADE WITH VUE3, VUEX AND ANIME.JS FOR HANDLING ANIMATIONS

This website has some really cool animations and I got insipired by it so I kept adding more and more **animations**, is a very good looking website and when it's contents changes to the final ones it will look even more good.

*My favorite part of this website was this one:*

![milanportada.PNG](https://h3lltronik-portfolio.s3.us-west-1.amazonaws.com/milanportada_ceecb40814.PNG)

That little section brought me some headaches because I wanted to add a background animation so it would look like a window or something but since it is asymetrical and had a rect border at the center I could not use a plain simple clip path not only for that but because **it had to be responsive too**...

At the end I managed to make it look exactly like I wanted it to look 🥳

This website is still in demo form, which means it is not the final project, most of the images and texts will change and some little behaviors but it has beed published on demo so people can see it and test it, let me know your thoughts 🎉.



large_milanportada.PNG

medium_milanportada.PNG

small_milanportada.PNG

thumbnail_milanportada.PNG

milanportada.PNG

A landing page made while working on ZipVisual

MILAN LIVING LANDING PAGE

milangif.gif

# Diu vapore

## Apicemque post sensus

Lorem markdownum [pater matutinis ille](http://www.perira.org/pertibi),
crudelis, silet, quo! Si torum ante prosunt taurorum sororem aequore precor
vultus caeli innumerosque nequiquam percutiensque Lycaoniae.

1. Forma extrema sterilis hinc
2. Fuerat erat
3. Opis consiliique crimine in utilis recepta rettuleram

## Et meae

Et summa ullum stabula, Tres vinctae circum tulerat *quid similes* subiit.
Nepotum animoque, tu nitens corpora humano. Animos nervo; et lumen suum fatis
tui morientia venturi, equos [ferarum](http://www.ad-magno.com/vix.php) elidunt:
vis credunt forte.

Futuri mora siqua iter ingens taceam parentis **primi** age pia concipit aditus
ne voce sic! Fulmen norat cuncta inpervius animos conduntur draconum corde iter
Phaethon. Vocavit nato, **nemorisque moenia Prospicientis**: non et illis, illa
Aurora, et.

## Voce et videamus discenda primamque rustica boum

Tyron breve Delius sociae Lenis conscia. Pedem Dauno parat offensus, gestanda si
undas ore: supplice, [tellus](http://lyaeusapollinis.org/circum.html).

1. Nunc iubet urget currum si solum iamdudum
2. Misero est perque discurrunt quos et litibus
3. Celebrabere actis
4. Et annos sed et ad

## Pariter armorum

Iamque velis quamvis: quod pectus, laudis fata praecordia. Terebat migrare,
ramos guttur, **obicit aether desuetudine** orbem? Factos sed Quirini prius
aetherias petiere geminasque reluxit.

Utilitas inquit, dum fuit arcus lugeat carne lucem adsuetasque aethere *arte*,
o, odit morsa porrigit. Priami colla tellus Acrisioniades dixit; sim nec colitur
omnes. Admonitu **ora ensem**.

![E-3IiQPVIAkQM7t.jpg](https://h3lltronik-portfolio.s3.us-west-1.amazonaws.com/E_3_Ii_QPVI_Ak_QM_7t_d0b592bc9d.jpg)


large_launch-page.jpg

medium_launch-page.jpg

small_launch-page.jpg

thumbnail_launch-page.jpg

launch-page.jpg

This website was a FrontEndMentor challenge and I added a lot of animations x)

LAUNCHING SOON WEBSITE

launch-page.gif

A SIMPLE LAUNCHING SOON WEBSITE WITH PRETTY CSS ANIMATIONS

large_rock_paper_scissors.jpg

medium_rock_paper_scissors.jpg

small_rock_paper_scissors.jpg

thumbnail_rock_paper_scissors.jpg

rock_paper_scissors.jpg

This was the first challenge I took when I was still a software student, about 5 years ago

ROCK PAPER SCISSORS

rock_paper_scissors-min.gif

A ROCK PAPER SCISSORS GAME WEBSITE WITH A LOT OF ANIMATIONS

## This was a funny project

I started learning Rust and then I searched on the internet how could I practice Rust so that I could feel more confident and learn much more about the internals of the language and a reddit post suggested to try building a CHIP-8 emulator and I did not have any idea of what that was so I started my investigation.

The funny part is that after some hours of investigation and study, somehow, I ended up building it in JavaScript 🤯🤯🤯

I am planning to write down a CHIP-8 emulator again but this time implemented in Rust since right now I know exactly how it works, it refreshed some knowledge I forgot I had about low level computers functionality.

large_chip-8.jpg

medium_chip-8.jpg

small_chip-8.jpg

thumbnail_chip-8.jpg

chip-8.jpg

A simple Chip-8 Emulator made with Javascript, using a canvas as the render.

CHIP 8 EMULATOR

chip-8.gif

CHIP 8 EMULATOR MADE WITH JAVASCRIPT

# I'm releasing my personal portfolio!

Today is the day. After almost two weeks of work, one half of a week working on the design and the rest coding it.

It could be more time invested in the design only tbh, I take a very long time trying to find the inspiration to actually make the design and that span of time could be even months... That's right, I've been months planning to do this website but the fear of building something ugly and average was holding me back. 

I had to see a lot of someone else's portoflios to find little pieces of them that I liked because I am not designer, not even a little bit but not long ago I read a book called [Steal Like an Artist](https://www.amazon.com.mx/Steal-Like-Artist-Things-Creative/dp/0761169253) which actually motivated me to keep looking at the creativity of others and to try to build my own based on the good practices of the others. 

 
<div style="display: flex;">
 <img src="https://images-na.ssl-images-amazon.com/images/I/51+U79ZDXjL._SY498_BO1,204,203,200_.jpg" style="margin: auto; width: 200px;"/>
</div>
 

If you happend to be interested in the design I made, you can [check it out here](https://drive.google.com/file/d/1e4CFFJh1efxyvA4KyTIYFloLMFcBwdA9/view?usp=sharing). 
It was made with Figma and hour and hours of videotutorials to learn how to use it.

 

## But enough of that, let me tell you the technologies used for this website:

- *ReactJS* and *NextJS*
- *MongoDB*
- *Strapi CMS*
- *TailwindCSS* and *SASS*
- *AWS S3*

The Strapi server is hosted somewhere in Heroku and this NextJS application is hosted in vercel ❤.

The reason behind these technologies are that I needed to build something dynamic but cheap, I did not wanted to waste money on expensive hosting because this website will not be updated very frecuently once it's fully done so it's almost like a static website but since I will be using dynamic contents I needed either to build the backend service or to use a CMS and for this website's purpose, a CMS was the best bet.

Regarding of the hosting and the static website thing I was talking before, NextJS allowed me to make extremelly performant websites without the need to rebuild the project myself, **these pages are revalidated and are using fallbacks** which also allowed me to use my dynamic content from the CMS without the need for the client to fetch them using something like **SWR** or **Axios** to perform high speed pages transitions.

Heroku offers a free tier usage that fitted my needs, about 400 server hours a month so that is why I choosed it to host my Strapi project but it lacked of other core functionalities *(for free)* like hosting files or a decent DB with enough queries per day to allow the Strapi project to build the schema and load the data I already wrote.
 
That is where MongoDB enters the game, it was all I needed for this simple website, fast, easy to use and the most important feaute, it was **free** and about the file storage I had no choice but to use AWS S3, it was the cheapest service that I was comfortable with since I have used AWS before.

TailwindCSS allowed me to start faster to beauty the website and since it is a **utility-class** package, it was perfect for me since I used this approach before in my daily work as a FrontEnd developer rather than using something like BEM naming which I'm also used to.

And I think that's it for this post, I you feel like something is missing or you are curious about it, feel free to [Contact me (u‿u *)](/#contact).

large_h3lltronik-portfolio.jpg

medium_h3lltronik-portfolio.jpg

small_h3lltronik-portfolio.jpg

thumbnail_h3lltronik-portfolio.jpg

h3lltronik-portfolio.jpg

My first website portfolio and the first time I designed a website, Im proud of it

PERSONAL PORTFOLIO V1

h3lltronik-portfolio.gif

THE FIRST VERSION OF MY PERSONAL PORTFOLIO IS LIVE NOW x)

## I did this as a challenge for myself

I paid a month of FronEndMentor service and I took this premium design, it does look pretty cool.

I just wanted to build something else so I could show others what I can do but then... somehow I wanted to do a FullStack project and this design was a perfect choice for it.

![invoices_app8.gif](https://h3lltronik-portfolio.s3.us-west-1.amazonaws.com/invoices_app8_181f1a7d35.gif)

It was just a simple invoice website, a frontend-only webstie that uses state management to record the data of invoices but I added a NestJS server and handled authentication, authorization, file uploading and image manipulation apart from the invoice CRUD.

For the authentication/authorization I used JWT so I could avoid the server to store any session-related data and store it securely in an _http-only header_.

 

This is how the login page looks like, you will not be able see the invoice index if you are not logged in and once you are logged in the login page will not be visible until you log off.

![invoices_app3.jpg](https://h3lltronik-portfolio.s3.us-west-1.amazonaws.com/invoices_app3_30b2c6ccf7.jpg)

The whole website implements a dark/light theme and this is how the index invoice page looks like

![invoices_app.jpg](https://h3lltronik-portfolio.s3.us-west-1.amazonaws.com/invoices_app_a1319f507c.jpg)

There is a details page where you could see the details of the invoice and also edit its contents and its status (draft/paid/pending)

![invoices_app7.gif](https://h3lltronik-portfolio.s3.us-west-1.amazonaws.com/invoices_app7_2c2f0ee69a.gif)

The image manipulation is a crop tool to personalize your profile a little bit since it's the only feature it has for personalization.

![invoices_app2.jpg](https://h3lltronik-portfolio.s3.us-west-1.amazonaws.com/invoices_app2_85a07b3637.jpg)


Each invoice can have multiple items so the edit modal does support dynamic addition/edition.

![invoices_app5.jpg](https://h3lltronik-portfolio.s3.us-west-1.amazonaws.com/invoices_app5_75227c79bb.jpg)

And they can be filteres by status.

![invoices_app1.jpg](https://h3lltronik-portfolio.s3.us-west-1.amazonaws.com/invoices_app1_f8ab0446be.jpg)

 

## This website is fully accesible 🎉


This means, you could travel through it without using a mouse and its content can be identified by the screen readers.

Right now this project is only available in the repository since to be able to run it a would need a server and this project was only to test my abilities and to show it to others, this project produces no income so I would no be able to pay constantly for a server to make this app work but you should be able to run it locally!

In a future I contain the whole project in a docker container so anyone intersted of running it locally could be do it just by download the docker image and not worrying about some other details such as the node version, the database, etc.

large_invoices_app.jpg

medium_invoices_app.jpg

small_invoices_app.jpg

thumbnail_invoices_app.jpg

invoices_app.jpg

Yet again, this is anothe FrontEndMentor challenge but I wanted to show off 😎

INVOICE APP FULLSTACK

invoices_app8.gif

AN INVOICE WEBAPP, A FULLSTACK PROJECT WITH A LOT OF FEATURES

large_calculator_app.jpg

medium_calculator_app.jpg

small_calculator_app.jpg

thumbnail_calculator_app.jpg

calculator_app.jpg

Another FrontEndMentor challenge I made using a library parser call Math,js

CALCULATOR APP

calculator_app-min.gif

A SIMPLE CALCULATOR APP WITH 3 THEME MODES

# This was my first contract on UpWork 🥳

The contract was for 3 different websites but this was the first one developed.

My participation in this specific website was little, since when I joined, a co-worker was already half-way to finish it.

All my work was on the frontend, I did a little bit of cleanup of bugs, addition of featureas and a form validation.

Even though my participation was little, I really like what I did since I could practice some patters I learned for _React_ since this and the following projects were made using React.

More specifically, the pattern I used was **render props** to build a highly resusable way to validate forms using **react-hook-form**

![dadada1.PNG](https://h3lltronik-portfolio.s3.us-west-1.amazonaws.com/dadada1_0d8eaeedb6.PNG)


large_dadada.PNG

medium_dadada.PNG

small_dadada.PNG

thumbnail_dadada.PNG

dadada.PNG

My first UpWork contract, I helped a little bit in the frontend since when I joined, this project was already half-way done

ESTEREO PICNIC | MEMORIAS DE UMD

During my first contract at UpWork I had to help with 3 different websites, this was the last one.

It was a really nice and beautiful website.

![vassar-2.jpg](https://h3lltronik-portfolio.s3.us-west-1.amazonaws.com/vassar_2_730cbdd26b.jpg)

 
It was not only a pretty website with simple sections, it also had a form in place

![form.jpg](https://h3lltronik-portfolio.s3.us-west-1.amazonaws.com/form_84c63fe23d.jpg)

This form was meant to let the contribuitor of the festival to upload some contents and marketing to this website and in the making of this very form I had the oportunity to test again the validation system I made in the first [website](https://h3lltronik-portfolio-v1.vercel.app/works/619554b8c6f34a0016f3ad34/estereo-picnic-or-memorias-de-umd) and it felt so good.

large_vassar-1.jpg

medium_vassar-1.jpg

small_vassar-1.jpg

thumbnail_vassar-1.jpg

vassar-1.jpg

The last website I had to help with during my first contract at UpWork

FERIA VASSAR

vassar-portada.gif

FERIA VASSAR WEBSITE

Even though this is one of my favorite projects, I can not show the code nor the apk for you to run it on your own device since it's meant to be used only for workers inside **Refaccionaria del Centro**.

![refaccionaria-opening.gif](https://h3lltronik-portfolio.s3.us-west-1.amazonaws.com/refaccionaria_opening_d05da6682e.gif)

 
This project is formed by 3 parts:

- The android application you are seeing right now.
- A desktop app to print the invoices
- A website to administrate the products, credentials and stores.

 

Add product

<video src="https://h3lltronik-portfolio.s3.us-west-1.amazonaws.com/refaccionaria_add_product_8add3b8c3b.mp4" controls></video>

 
Scanning the print server QR

<video src="https://h3lltronik-portfolio.s3.us-west-1.amazonaws.com/refaccionaria_scan_66998d32e0.mp4" controls></video>

 

## Desktop app

This is an electron application that runs an express server at the same time it runs the application,

When the application is fully opened, a QR code will show, that code is the URL of the express server so when a purchase is made through the application, it will request to print the correspondent invoice.

![refaccionaria-app-qr.PNG](https://h3lltronik-portfolio.s3.us-west-1.amazonaws.com/refaccionaria_app_qr_52b0c21cd9.PNG)

![refaccionaria-app-impresoras.PNG](https://h3lltronik-portfolio.s3.us-west-1.amazonaws.com/refaccionaria_app_impresoras_dec685fc6d.PNG)

![refaccionaria-app-empty.PNG](https://h3lltronik-portfolio.s3.us-west-1.amazonaws.com/refaccionaria_app_empty_ab9cca6f06.PNG)

large_refaccionaria-portada.jpg

medium_refaccionaria-portada.jpg

small_refaccionaria-portada.jpg

thumbnail_refaccionaria-portada.jpg

refaccionaria-portada.jpg

A system for a car parts shop, formed by a phone and desktop application and a website

REFACCIONARIA DEL CENTRO

refaccionaria-opening.gif

REFACCIONARIA DEL CENTRO SYSTEM

## Current tooling
- DIOT batch upload 
- PDF to Excel extractor

## DIOT batch upload:
![accountant-tools-1.png](https://h3lltronik-portfolio.s3.us-west-1.amazonaws.com/accountant_tools_1_43bf7bbdf9.png)

## PDF to Excel extractor:
![accountant-tools-2.png](https://h3lltronik-portfolio.s3.us-west-1.amazonaws.com/accountant_tools_2_f01353250e.png)



## The app uses the operative system's theme
 


### Dark theme:
![accountant-tools-3.png](https://h3lltronik-portfolio.s3.us-west-1.amazonaws.com/accountant_tools_3_bffdb9d55d.png)


### Light theme:
![accountant-tools-4.png](https://h3lltronik-portfolio.s3.us-west-1.amazonaws.com/accountant_tools_4_c9b70a0b17.png)

large_accountant-tools-3.png

medium_accountant-tools-3.png

small_accountant-tools-3.png

thumbnail_accountant-tools-3.png

accountant-tools-3.png

A DESKTOP APP GROUP OF TOOLS FOR ACCOUNTING

ACCOUNTANT TOOLING

large_accountant-tools-4.png

medium_accountant-tools-4.png

small_accountant-tools-4.png

thumbnail_accountant-tools-4.png

accountant-tools-4.png

I had the opportunity to build a website about a loans company and they gave me the time to actually train my design skills.
 
I could approach a "enterprise way" to build this software, I collected the requerements, made documentation, designed a prototype of the website, etc...
 
It was refreshing and intersting.
 
### Luve home
![luve-home.gif](https://h3lltronik-portfolio.s3.us-west-1.amazonaws.com/luve_home_ed1795c3f0.gif)
 
### Luve about us
![luve-2.png](https://h3lltronik-portfolio.s3.us-west-1.amazonaws.com/luve_2_5451ad0c7d.png)
 

### Figma desgin
![luve-design.png](https://h3lltronik-portfolio.s3.us-west-1.amazonaws.com/luve_design_871f7aa454.png)

 
### Software and IT section
![luve-software.gif](https://h3lltronik-portfolio.s3.us-west-1.amazonaws.com/luve_software_e8faf13fb1.gif)

 
The website is not fully completed, there is a missing section about legal stuff, yet to be desgined and integrated.