The making of Toughmonkey.dev
Every web developer needs a place to show off projects and the skills we have in our toolbox. So it was a no-brainer to put my skills to work and design and code a portfolio website myself.
The main goal of this website was to create a place that showcases my work to potential customers. Coincidentally it also allows me to practice with new tech in my small laboratory for web development experiments. Every developer blogs these days so I figured I should give it a go so I’ve got a reason to once again use my beloved JAM-stack (more in the technical).
As quickly as I possibly could I fired up my favorite design software (Adobe XD) and started making a wireframe (the absolute minimum for a website, compare it to a rough sketch). I decided on a basic portfolio website without any fancy techniques. I kept in mind that potential customers don’t have the time to spend hours on my website, so I decided to keep it simple but elegant. I like sites without too much squabble and design it with a “what you see is what you get” approach. When I was happy with the wireframe I made a mock-up of the website and tweaked it a bit until I was satisfied with the result.
For the final design, I decided on a big header with my logo and a button to go directly to my work. Then a section with some personal information followed by my project section and testimonials. On mobile, you will see the sections apart from one another, but on bigger screens, they will be next to each other. To provide some extra information about a project I’ve included an overview of the process when the user clicks on the small icon with the magnifying glass, this appears when you hover over or click on a project.
To finalize the website I made a section for the blog and a small footer. The blog section on the home page will only display the latest blogs. To search for and display all the other blogs I’ve decided on a tag system. When the user clicks on one of the tags it will sort all the blogs and display l the blogs connected with that tag.
Because of the freedom, I got a little wild with the animations this time. Some may say I overdid it, some may say (mostly me) I have style. Anyway, the header got a small animation on the text so that it will pop more. In the services section, I decided to use three Lottiefiles SVG animations. In the project section, I build an overlay that appears when hovering over the text and makes two icons pop up. For the blog section, I did something similar.