Homepage Relaunch

I have just revamped my personal website. I wanted to have a place to share my thoughts and showcase what I'm up to. So, grab a virtual beverage and let me walk you through the decisions, late-night coding sessions, and a dash of creativity that went into making this digital corner feel like home.

Why the facelift, you ask? Well, it was time for a fresh coat of paint! I mean, who doesn't love a good makeover, right? But, more seriously, I wanted to share the journey of rebuilding the site using some cool tech – enter Nuxt and Tailwind CSS. Let's just dive right into it.

Tech Stack

Technology-wise, not much actually changed from the previous version. Both versions use Nuxt and Tailwind CSS to create the user interface, now I just use the newest version.

Previously, the website simply displayed my resume and some general information about me. Now, I wanted to integrate projects and a blog into my website. This resulted in the problem of having to manage the content of those. The first prototype I experimented with self-hosted, open source content management systems and used Strapi and SvelteKit to build my personal website. It was a little unwieldy for a personal blog page and I looked further.

I went back to Nuxt and found Nuxt Content which implements a lean interface over content structured as files. Yes, this project page is just a Markdown file.

Tailwind CSS was a pretty straightforward choice. I like how it make implementing cohesive design easier through the use of utility-first approach and amazing presets when it comes to coherent spacing and colors. And with Tailwind Typography, it make it easy to have a text-focused page.

For analytics, I decided to use Umami. It is a self-hosted analytics backend focussed on privacy. No personal data is collected, yet I can get some information about the traffic of my webpage.

Project Structure: Nuxt Magic

Alright, let's peek under the hood and see how the gears turn in this digital playground.

Nuxt's conventions define the project's folder structure to make it easy and efficient to operate a large website.

• /assets: This is where I stashed all the assets – images, fonts, and whatnot. Keeps the clutter out of the main workspace.
• /components: Meet the building blocks! Each component has its cozy corner here, making it easy to find and reuse them across different pages.
• /layouts: Think of these as the templates. They provide the skeleton for various pages, maintaining a consistent look and feel.
• /pages: The heavy lifters reside here. Each page is a Vue component, making navigation smooth and the codebase modular.
• /content: Home of all the content of my website, the JSON-files containing information about my past experience, skills and strengths, as well as Markdown-files for the projects and blogs
• /static: For static assets that don't need the magic touch of Webpack.

Design Decision

When working on this website, I tried to focus on a couple of key points:

Simplicity is Key

I've always been a fan of simplicity. The design mantra here was to keep it clean, minimal, and easy on the eyes. Enter Tailwind CSS – its utility-first approach allowed me to craft a sleek interface without drowning in a sea of CSS files.

Responsive by Design

In the era of smartphones and tablets, it's a cardinal sin not to be mobile-friendly. Ensuring a seamless experience across devices was non-negotiable. With Tailwind's responsive design utilities and Nuxt's out-of-the-box mobile optimizations, the site adapts like a chameleon, whether you're on a desktop or scrolling on your phone during the commute.

Personal Touch

Lastly, a website should feel like an extension of oneself. I injected a bit of my personality into the design – from the choice of typography to the color palette. After all, a website should be as unique as its creator.

Deployment

For the deployment, I want to keep it simple, yet effective. I chose technologies have used before and have made good experiences with in the past.

CI with GitHub Actions

Keeping things rolling seamlessly from code changes to deployment is where GitHub Actions comes into play. On each commit, GitHub Actions swings into action, triggering a series of automated steps to ensure that the latest changes are ready for prime time.

Dockerizing the app

To encapsulate the magic of my Nuxt and Tailwind masterpiece, I harnessed the power of Docker. The entire application, along with its dependencies, is neatly packed into a Docker image, ensuring consistency across different environments.

Registry Pit Stop

Next stop, the registry! I chose GitHub Container Registry (ghcr.io) to host my Docker images. With a simple push command, the image finds its cozy spot in the registry, ready to be deployed to the world.

Looking forward

With software, there are always things to improve. While the website is now online, I can still improve it anytime and ship new updates.

Here is a short list of things, I may want to improve in the future:

Automatic Deployments

While the app automatically builds through a CI/CD pipeline, I need to manually update the website versions when I make changes.

Improvements to UX and accessibility

While I am already quite happy with the look and feel of the website, there is always room to improve. I also really did not build the site to be accessible.

Translations

In the future, I may want to offer the website in English and German. While I already set up some basic stuff with Nuxt i18n, there are some things I need to figure out how to handle translations of the actual content.

Wrapping Up

And there you have it – the revamped homepage, a blend of creativity, tech, and a touch of personality. Nuxt and Tailwind CSS joined forces, creating a clean and responsive digital space.

Nuxt Content streamlined content management, Tailwind CSS crafted a sleek interface, and GitHub Actions powered a seamless deployment to GitHub Container Registry.

As I look ahead, the journey continues. Automatic deployments, improved UX, accessibility, and multilingual support are on the to-do list. The site is alive, ready for updates, and eager to evolve.

Explore the revamped space, and stay tuned for more digital adventures!