thalida.com version history

2025: Astro Animated

thalida.com built with Astro, featuring an animated window effect.

Published July 2, 2025

2025-astro-animated/Screenshot 2025-07-03 at 16.48.24.png

Goals

After having used Super / Notion for a while, I wanted to move to a more flexible and customizable solution. Super was great for quick setups, but I missed the ability to fully control the design and functionality of my site.

Blog Implementation

The site is built using Astro, a modern static site generator that allows for a high degree of customization and performance optimization.

The site is deployed on Vercel, which provides excellent performance and scalability.

Live Weather & Time

Implementation

2025-astro-animated/Screenshot 2025-07-03 at 16.48.24.png2025-astro-animated/Screenshot 2025-07-03 at 16.53.46.png

The live weather and time functionality is implemented using the Open Weather API. I get the users current location using their IP via https://ipregistry.co/.

The window itself is made by using a custom Web Component which enables me to place the window anywhere on any page easily. The web component loads and renders a scene created with Matter JS.

Customization

Animated weather and time window in digital format

The window effect is customizable, users can switch between analog and digital clocks, change the time, and choose between different weather effects

Design Inspiration

Colors, Vibe, Layout

2025-astro-animated/inspo/Screenshot 2025-07-03 at 17.16.38.png2025-astro-animated/inspo/Screenshot 2025-07-03 at 17.16.48.png
2025-astro-animated/inspo/Screenshot 2025-07-03 at 17.16.59.png2025-astro-animated/inspo/Screenshot 2025-07-03 at 17.17.15.png

Cards

2025-astro-animated/inspo/Screenshot 2025-07-03 at 17.11.17.png2025-astro-animated/inspo/Screenshot 2025-07-03 at 17.12.47.png

Meta

Styleguide & Components

Admonitions

Note

NOTE

Optional information that can help users understand the context or provide additional insights.

> [!NOTE]
> Optional information that can help users understand the context or provide additional insights.

Tip

TIP

Optional information to help a user be more successful.

> [!TIP]
> Optional information to help a user be more successful.

Important

IMPORTANT

Crucial information necessary for users to succeed.

> [!IMPORTANT]
> Crucial information necessary for users to succeed.

Warning

WARNING

Critical content demanding immediate user attention due to potential risks.

> [!WARNING]
> Critical content demanding immediate user attention due to potential risks.

Caution

CAUTION

Negative potential consequences of an action.

> [!CAUTION]
> Negative potential consequences of an action.