index

Trip to Spain

So here we are; time flies by so quickly that already two weeks of my vacation have passed. But anyway, it was a great trip, and this year it will not be the last one! So I keep looking forward and staying positive—even after I checked my accumulated work emails, I briefly saw only the number 🙈.
We were in Mallorca; surprisingly, for a German, it was my first time, and I really liked it. I never thought that this island, aside from the go-to tourist places like ‘Ballermann’ or Cala Rajada, is such a beautiful space.

We visited the astonishing city of Palma and saw some really nice smaller places like Artà and the lovely roads leading to Cap Formentor (minus the dozens of cyclists there).

Hotel and Relaxing

Empty Hotel Restaurant with a clear Blue Sky and a nice view

Because we booked outside of the vacation time and the hotel just opened again (or at least it gave that impression), we had the whole hotel to ourselves aside from 2-3 other couples. It was a blast, but it also took some time to get used to it, as all the waiters patiently awaited our orders.
But there was also a lot of quiet, nice relaxing time for us there with beautiful weather at 17-20°C!
It was definitely warm enough for some pool time, including the necessary mojito 😎.

Coding Time

Laptop with a Icecold drink near a Pool with beatiful weather

As this vacation was originally planned for some relaxation, I already brought my trusty laptop with me to dedicate some time to coding! I finished my Scrimba Solo Project - The JavaScript Password Generator and even took it a bit further as requested. It was so easy to get into a focused state because of the quietness there; I’m missing it already. After this project, I thought again about my personal page, and instead of learning more with Scrimba, I saw the advantage of having all this time to give my portfolio page another try.

Personal Portfolio

Because you are reading this blog post here on my page, you can see it worked really well.

Requirements

Optimized for Desktop and Mobile
Light and Dark mode
Capable of Blog posts
Nice and modern looking

I stumbled upon Astro a few years ago and loved the component approach of this framework, but unfortunately, the last attempt was too complex for me at that time. Now years have passed, and I tried it again, this time with a ton more knowledge in my background. There are still a lot of new things I didn’t grasp immediately, but it is enough to present you with this nicely looking personal portfolio page without the hassle of bloated CMS like WordPress. I found this amazing theme for Astro from @enscribe - Erudite and already knew this was the way to go. I didn’t modify it from the ground up, but it wasn’t necessary; it’s just simple, nice, and modern looking (ticked the requirement right off!). I made some tweaks here and there to fit it to my needs, spending more time on the ‘Imprint’ and ‘Privacy Policy’ parts as I wanted. Unfortunately, I have to go the extra mile to be on safe ground. In the end, I like the implementations; I think they blend nicely into the rest.

As I planned to use this page for some blogging as well, one feature was missing for me: I really like a small progress bar when I’m reading any article. So, long story short, with some help from the trusty LLMs out there, I could establish this feature faster than I thought, and I really liked it, as it reuses the CSS styling. As you are reading this, you will see an orange bar on top show up and completely fill to the right as you finish this entry!

ReadingProgress Component Code

1
---
2
const accentColor = 'var(--accent)'
3
---
4

5
<div
6
  class="fixed top-0 left-0 w-full h-1 z-50"
7
  id="reading-progress"
8
>
9
  <div
10
    class="h-full transition-all duration-200"
11
    style={`background-color: ${accentColor}; width: 0%;`}
12
  ></div>
13
</div>
14

15
<script>
16
  document.addEventListener('astro:page-load', () => {
17
    const progressBar = document.getElementById('reading-progress')
18
    const progressBarInner = progressBar?.querySelector('div')
19

20
    if (progressBar && progressBarInner) {
21
      window.addEventListener('scroll', () => {
22
        const windowHeight = window.innerHeight
23
        const documentHeight = document.documentElement.scrollHeight - windowHeight
24
        const scrollTop = window.scrollY
25
        const progress = (scrollTop / documentHeight) * 100
26

27
        progressBarInner.style.width = `${Math.min(progress, 100)}%`
28
      })
29
    }
30
  })
31
</script> ```

Vacation - done