Let's build something


Have a question or want to work together?

message-me-button

The making of Toughmonkey.dev

logo-tough-monkey

In het kort

Elke web developer heeft een plekje waar zijn programmeer skills tentoongesteld staan, in de vorm van een portfolio website. Natuurlijk hoefde ik er niet lang over na te denken of ik ook voor mij z’n plekje in wilde inrichten op het internet.

Het doel

Het doel van deze website is natuurlijk potentiële cliënten laten zien wat ik, als developer, in huis heb. Ook geeft deze website mij de ruimte om te oefenen met nieuwe tech die ik onderweg oppik. Ik zie deze plek als mijn kleine laboratorium waar ik mij gang kan gaan met web development experimenten. Elke developer heeft ook een eigen blog en hier wil ik mijzelf ook aan wagen. Om een blog te ontwikkelen kan ik mijn geliefde JAM-stack nog een keer gebruiken (hierover meer in “technisch”).

Het proces

Zo snel als ik kon startte ik mijn favoriete design software op (Adobe XD) en begon met het maken van een wireframe (het minimale van een website, eigenlijk een ruwe schets). Ik besloot om met mijn website dicht bij de basis te blijven. Hierbij had ik de gedachten dat potentiële cliënten geen tijd hebben om urenlang te scrollen op mijn website. Ik hou van websites die recht voor zijn raap zijn. Toen ik tevreden was met mijn wireframe maakte ik de uiteindelijk website als een ‘mock-up’.

In mijn uiteindelijke design besloot ik om een header te maken die direct in het oog springt met mij logo en een knop om direct mijn werk te zien. Hieronder een klein stukje over mijzelf met wat persoonlijke informatie. Hierna volgt het stukje met mijn werk en de testimonials. Op mobiel ziet het er iets anders uit en staan ze niet naast elkaar, maar onder elkaar. Voor extra informatie over het project kan er op het vergrootglas gedrukt worden, die verschijnt als je over de project box gaat of klikt, hier krijg je het proces te lezen van het project.

Om de website compleet te maken moest er nog een blog toegevoegd worden en natuurlijk de footer. De blog op de homepage vertoont de drie meest recentste artikelen. Om de rest te zoeken maak ik gebruik van een “tag” systeem. Zodra de users op een van de “tags” drukt dan krijgt diegene alle artikelen te zien met die “tags”.

Technisch

Eerder gaf ik al aan dat ik weer aan het werk kon gaan met mijn de JAM-stack. De site is gehost bij Netlify, het is gratis en zo gemakkelijk in gebruikt. Ik link het aan mijn Github en de website wordt automatisch geüpdatet elke keer als ik er een nieuwe versie uitrol.

In mijn laatste project ben ik aan de slag gegaan met Eleventy en dit beviel mij zo goed dat ik er weer voor koos. Het is zo gemakkelijk om met Eleventy aan de slag te gaan en het heeft zoveel mogelijkheden om alles naar eigen wens aan te passen. Het “tag”-systeem is zo elegant op te zetten in combinatie met een template language (Nunjucks).

logo-tough-monkey