Portfolio picture with man standing
toblu.dev - Projects

Personal Project TOBLU - Portfolio Website

System Architecture Overview

For a long time, I wanted to develop my own portfolio website. For me, this is a way to show my interests and skills in an easy-to-understand way. This project also allows me to let my creativity run free. I always develop my projects according to the ideas and not according to my skills. This way, I learn many new techniques and tools during the project, which are useful at a later stage. Such projects are also the perfect place to optimize my work process.

Nuxt.js
Tailwind CSS
Figma
Vercel

Importance of Portfolio Website for Developers

From my point of view, every developer should have his portfolio website. This is the perfect place to show your skills with your project and highlight your interests. It shows future clients how clean your work is and that you master your work. Besides, it offers the possibility to present ideas to other developers and thus make new contacts.

Why Planning is Key

Any project should start with clean planning. This is about becoming aware of the goal of the project and knowing the minimum requirements. It's no use to start developing directly. Every project has to meet the target audience, most projects we don't develop for ourselves.

Target your Audience

Every project has to be adapted directly to the target audience. For this portfolio website, I decided to target web developers as well as company representatives in IT/OT. Since this branch deals more with web applications, I built the website like a web application. This way the target audience can find their way around the website faster and relate the work directly to projects from their field of work.

Inspiration / Design

I always take my design inspiration from multiple sources and use the best parts of it in a design of my own. There are many design resources on the internet such as dribble, but these often can't be used in real projects. The designers of Tailwind Labs have an extremely good eye for industrial designs, so I took a lot of inspiration from them. The idea to design a website as an application I found on rauno's website and developed it further. Here I never use the same designs but use them as inspiration.

Development

System Architecture Overview
System Architecture Overview
System Architecture Overview

I often start the implementation of a chosen design on a sheet of paper. Here I can quickly make some sketches and test different arrangements. This way I don't get tempted to design too many details right from the start. As soon as I have an idea of the design, I draw it in Figma. This gives me a good feeling for the later implementation and lets me play with more details like the color choice. As soon as I'm done with the rough mockups, I start developing in the framework. There I use NuxtJS and Tailwind CSS for the frontend. During the implementation, I can always make minor changes as this is the first time the final look reveals itself in detail.

Do you like what you see? Let me know.