Project Portfolio

desktop website

Built with Sveltekit and Tailwind running on Cloudflare's workers. Because LinkedIn does not offer a nice way to show a projects portfolio, I built this website. I wanted to show every page as a separate link on my profile so I needed a Server-Side-Rendered website.

So while this is a simple website from an HTML prespective, there are also complicated technologies involved. It's a serverless app running on Cloudflare's edge network. This means it's infinitely scalable, super secure, very fast for visitors where it doesn't matter if you are in Alaska or Zimbabwe and - in case of Cloudflare - can be deployed with a single command. (Actually, with the latest version of Cloudflare Workers/Pages, you only need to push it to a repository like Github or Gitlab) I also wanted to use Serverless hosting so I don't have to pay for a full server running 24x7. Sveltekit, together with the Cloudflare adapter makes this just a deployment option without the need of any code changes.

desktop website

The Tailwind CSS utility classes made it possible to not have a css file or create classes on every page. Instead you can do a sort of real-time design; keep a browser window open next to your editor and add utility classes directly on elements, like font-bold, text-gray-500 or mt-5 for a top margin.

I like to keep two browser windows open next to my editor; one for a mobile view and one for a desktop view. This way I can immediately see if I need different classes/layouts for mobile or desktop. This way of working is very efficient and a real time saver.

This was my 2nd Sveltekit/Tailwind trial after working for a few years with Vue.js. I like Sveltekit very much because it lets you write exceptionally clear and concise code, it compiles to extremely fast, pure Javascript.

Keywords:
Javascript, HTML, CSS, Tailwind, Svelte, Sveltekit, Cloudflare Workers, Responsive Layout, Server-Side-Rendering, Serverless