thumbnail_dax-avatar.jpg

dax-avatar.jpg

Web developer

### The Look and Feel
My decision was to present a clean, concise and pleasant look, without distractions since the person who I am talking to has little time and probably is checking several other peoples Resumes.

I think the look should be a little casual because I want people to feel that they are meeting a real person, a future team member who they can relate to and not another boring candidate. Hence the use of emoticons and casual photos of me.

Also the color choices are not random. I chose red because evokes passion and energy. Cool points if you guess which red I chose 🇨🇭

Finally I used subtle animations but just to indicate changes of state in elements, like in buttons or in transitions between pages. The idea is to not distract the user.

large_daxwebsite_look_c953b5a8b8.jpg

medium_daxwebsite_look_c953b5a8b8.jpg

small_daxwebsite_look_c953b5a8b8.jpg

thumbnail_daxwebsite_look_c953b5a8b8.jpg

daxwebsite_look_c953b5a8b8.jpg

### The Language
My language is casual, the same I would use in a work environment. I want to be understood quickly and I would like people to relate. I use some technical jargon but only when is needed.

Also I speak in first person because I am presenting my story, my experiences and points of view. At the end this is friendly conversation between colleagues.

large_daxwebsite_language_b81b63bd42.jpg

medium_daxwebsite_language_b81b63bd42.jpg

small_daxwebsite_language_b81b63bd42.jpg

thumbnail_daxwebsite_language_b81b63bd42.jpg

daxwebsite_language_b81b63bd42.jpg

## The Technologies
I wanted to show my skills in new technologies but also wanted to have ease on maintenance and to have good performance. My decision was to go [JAMSTACK](https://jamstack.org/), so that way I could have a decoupled Backend from Frontend. The other reason for this is great performance and low costs.

This website is a static HTML built with NextJs in the Frontend and the Backend is built with Strapi, which is a pure API CMS.

medium_jamstack-med.png

small_jamstack-med.png

thumbnail_jamstack-med.png

jamstack-med.png

### Strapi
The backend of this website is built with Strapi, which is full Javascript API driven CMS. The reasons for using this CMS are:
- Self hosted so I can choose where to upload the data and have it decoupled from the Frontend.
- It is very flexible to build your own data types, like Content Types with its own custom fields and custom Components data.
- The API is very simple to build and consume via RESTful or GraphQL.
- The data in the API is clean and just contain what you need. There are no extra data you will never use like in other CMS.

I think Strapi is not a fully mature CMS like the big names in the market but it is a enjoyable experience to work with. 

large_strapi_cms.png

medium_strapi_cms.png

small_strapi_cms.png

thumbnail_strapi_cms.png

strapi_cms.png

### NextJs
I love to work with [ReactJs](https://reactjs.org/) since the development process is very enjoyable and the code is easy to maintain. The downside is that a React app is not readable by web crawlers since the HTML is not rendered until Javascript is executed, that is the reason I chose [NextJs](https://nextjs.org/).

#### SEO Friendly
NextJs is a React framework that prerenders the HTML so web crawlers can read what the webpage is about which is needed for indexing the website and show it in search results.

Next also gives among other advantages: image optimization, incremental static generation, an easy file system routing, code splitting and bundling, built in CSS support and all of this with almost zero configuration.

### Decoupled Frontend
The data is completely decoupled from the Frontend, so I can make small changes to styles, rearrange completely the website or use a different technology like React, Angular or Vue without worrying about compatibilities with the data.

Dax Website Technologies: NextJs and Strapi

large_daxwebsite_technologies_e1ddc525b9.jpg

medium_daxwebsite_technologies_e1ddc525b9.jpg

small_daxwebsite_technologies_e1ddc525b9.jpg

thumbnail_daxwebsite_technologies_e1ddc525b9.jpg

daxwebsite_technologies_e1ddc525b9.jpg

### Easy Deployments
All of the deployments are made through GIT. I can work in separate branches or work in new features and once they are finished I just upload them with GIT, merge the changes to the Main branch which is then automatically uploaded to the production server.

### Speed
NextJs can export the final result in static HTML files and the final product renders super fast. Also, these small static files can be uploaded to static cloud hosting for blazing performance.

The source code is uploaded to a GIT repository, but only the final static HTML is uploaded to the production server.

large_daxwebsite_git_06e09c071f.jpg

medium_daxwebsite_git_06e09c071f.jpg

small_daxwebsite_git_06e09c071f.jpg

thumbnail_daxwebsite_git_06e09c071f.jpg

daxwebsite_git_06e09c071f.jpg

## Email service: EmailJS

I searched for a fast and easy solution to send mails from the website and EmailJS seemed like the best option since I don't need to send a large amount of messages per day.

I considered the idea of maybe use Nodemailer but since this website has small needs, EmailJS is the fastest and easiest option to implement in my opinion.

large_emailjs_e2fcf5b291.jpg

medium_emailjs_e2fcf5b291.jpg

small_emailjs_e2fcf5b291.jpg

thumbnail_emailjs_e2fcf5b291.jpg

emailjs_e2fcf5b291.jpg

## Performance

I really enjoy the performance results. Granted, it is a static HTML website but if you don't know what you are doing you can end up with a very slow website even with a static one. Some of the best performance statistics about this website:

- The Homepage fully loads in 1 second
- The first Contentful Paint is 420ms and the time to be Interactive is 421ms
- Google gives the website a performance ranking of 95 in mobile and 100 in desktop
- The images are loaded only when needed    

You can check an entire performance report in [Google Page Speed Insights](https://developers.google.com/speed/pagespeed/insights/) and [GTMetrix](https://gtmetrix.com/)

large_gtmetrix_5b810337b4.jpg

medium_gtmetrix_5b810337b4.jpg

small_gtmetrix_5b810337b4.jpg

thumbnail_gtmetrix_5b810337b4.jpg

gtmetrix_5b810337b4.jpg

large_daxwebsite_responsive_308fd7d013.png

medium_daxwebsite_responsive_308fd7d013.png

small_daxwebsite_responsive_308fd7d013.png

thumbnail_daxwebsite_responsive_308fd7d013.png

daxwebsite_responsive_308fd7d013.png

I am very pleased with the results but I am planning a couple of improvements:

- Cleaning of the code by refactoring or adding more reusable components.
- I am not a huge fan of using lots of animations in a website but I think I should add a couple in some elements, like images.
- Optimizing more the code for search engines, like add structured data and a XML sitemap.

large_daxwebsite_intro_8ebefcccfa.jpg

medium_daxwebsite_intro_8ebefcccfa.jpg

small_daxwebsite_intro_8ebefcccfa.jpg

thumbnail_daxwebsite_intro_8ebefcccfa.jpg

daxwebsite_intro_8ebefcccfa.jpg

Yup, I really like this website and I feel proud. Is it corny to show this?

This website is built with [NextJs](https://nextjs.org/) and [Strapi CMS](https://strapi.io/) and it loads super fast. It is a React app but it prerenders the HTML as static HTML files.