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.

large_luve-1.png

medium_luve-1.png

small_luve-1.png

thumbnail_luve-1.png

luve-1.png

LUVE CI

luve-home.gif

## 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

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

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

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

# 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