Portfolio-style personal website improvement project developed in Next.Js
This project was born from the need to improve the features offered by the free WordPress configuration to create a new and better way to offer you an experience that better conveys what I want to communicate about my work. Don't think I'm doing this because my annual hosting plan was about to expire; that's just a famous coincidence.
Okay, so what are the improvements then? I'm a believer in the phrase 'a picture is worth a thousand words,' and that's why I'm presenting a series of screenshots so you can appreciate the original version of my portfolio-style website along with some things I 'think' I was able to implement in this new version.
Tools used in this project:
- Language: JavaScript
- Framework: Next.Js
- Layout: HTML, CSS
- Design pattern: Simple
Project Documentation
Old Version
Main Section (Hero)
Let's not kid ourselves, there are many parts I like, and this is one of them. Not only because it was relatively easy to make, but because I'm passionate about simple and functional things and I believe this section fulfills its purpose: it tells you who I am, what I do, what skills I have to do it, and it provides access to my resume.
Skills Section
Based on my experience with various recruiters, I realized that more people wanted to know what technologies I had used in my career as an automation engineer, rather than the exact years of experience with each one. Furthermore, many of them find it easier to identify them by their icons, not just by their names.
Portfolio Section
In this regard, I noticed, based on heat maps of the old page, that displaying individual projects on the same page made it difficult to view the entire page, and many people only got halfway through.
On the other hand, when I displayed a mosaic of design projects, they often had display issues depending on the browser used.
Project Presentation
In addition to usually including them on the same page, due to limitations of the previous tool, I was forced to include two languages at once to explain the content. And of course, when I had to add custom functionality (HTML, JS, CSS), I had to do it blindly because it wasn't natively supported by the tool.
About Me Section
In this section, according to the heat maps, a large number of people didn't scroll at all, rather than those who read the entire content. So, I wanted to develop something more graphic, interactive, and easy to understand.
Okay, so where's the project code?
Well, since this is a project that involves sharing all the professional information about my career on this cheerful page, I decided to keep the GitHub project private. However, I can share a screenshot so you can get an idea of the default layout that Next.Js 13+ can provide. I was guided by the functional documentation and some helpful AI.