Rierink.dev

Creating the first mockups

Initial design

When building the portfolio I had a few things in Mind, I wanted to be able to do the following things

• Show off my Laravel skills with building backend & frontend applications
• Show my previous work experience and education
• Have a place for me to be able to create little writeups on projects I've done

Starting off with choosing my toolkit

Initially I wanted to create every part of the backend myself, No cool things like Laravel Nova Or Filament, and use the github integration for me to be able to dynamically show my projects off without any manual work. But there were a few caveats with this approach like:

• Not being able to show off non open source projects
• Not being able to choose if a project gets posted on here.
• Not being able to make a writeup on it (like the one you are reading right now)

There are of course a lot of ways to fix these problems but the approach I chose was to go with the Filament route. This allows me to have a quick & easy backend for me to manage the DB and a rich text editor for me to write project write-ups. 

Building the UI

Components or no components?

This site does not use any of the default Laravel components and most of the components are actually custom written Tailwind components. like the Navigation bar, project cards, buttons & some components were grabbed from various component library like my discord contact card & the work experience + education timeline.

Integration

Discord

My discord integration is done using Lanyard which allows me to get a lot of information from my discord account. like my username, status & spotify status. which gets retrieved server sided (where it get's cached using Laravel cache) and gets displayed in 4 simple elements.

Github

The current github integration is not much, where I wish to be able to display stars, traffic & possibly tags it currently is doing nothing. more information soon™ 

Optimisation

There is ofcourse a part where every developer wants to stop their project, making it fast.

Since I use a few third party services I needed to make sure I always remembered to do the following

• Cache any & every request to a third party API if it isn't really realtime (like my discord username)
• Preload pages when hovering over the links, this makes it so that the cache is already filled & page load should be faster
• Don't overload the server

For the caching it's extremely easy with Laravel their Cache::remember functionality. This allows me to easily implement caching without having to write a lot of checks to see If it is cached or needs to be added to the Cache.

For preloading it's a different story since it uses a small custom package called preload.ts (fitting name I know) Which is a small (46 line) file which just creates a preloading link tag as soon as you hover over a link, not that hard but it makes it so the page can load within 20ms.

For overloading the server I can't do that much, the server is hosted on a Hetzner server, but if it can't handle it I might need to switch the infrastructure. But that's a problem for future me.