Let's build something


Have a question or want to work together?

message-me-button

The making of Toughmonkey.dev

logo-with-no-text-tough-monkey

Summary

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 Goal

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).

The process

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.

Technical

As I mentioned, I once again got to work with my beloved JAM-stack. For hosting, I chose Netlify for it’s so easy to use and the hosting is also free. Hook it up on my Github and it updates automatically whenever I push a new update. As for my last project, I used Eleventy as a static site generator and chose to use this once more. Eleventy is easy to set up but it’s a real powerhouse and has a lot of customization possibilities. For example, the tag section for the blog post is very easy and elegant to set up in combination with a template language (Nunjucks). For the slideshow on the projects on the mobile version, I coded a bit of Javascript.

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.

logo-with-no-text-tough-monkey