Screenshot of the Astro Animated portfolio in dark mode with Scene Controls panel showing custom time field

YearGitHubLink
Jul 2025 - Feb 2026GithubLive

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

Screenshot of the Astro Animated portfolio in dark mode with Scene Controls panel showing custom time field

Screenshot of the Astro Animated portfolio in light mode with digital clock style showing glowing LED-style clock

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 GIF of the Astro Animated live weather scene with glowing segmented digital clock and rain particles

Animated GIF of the Astro Animated analog clock with weather effects including snow, fog, and wind

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

Inspiration screenshot of minimal white website hero section with bold headline and 3D rendered green textured blob

Inspiration screenshot of bold editorial blog layout with large headline text, fitness photography, and article grid

Inspiration screenshot of creative studio website hero with 3D rendered desk scene

Inspiration screenshot of dark-themed split-screen login page with green gradient promotional panel

Cards

Inspiration screenshot showing stacked job listing cards from companies on lavender background

Inspiration screenshot showing pastel-colored service category cards for Web Design, Graphic Design, Developers, and Copywriting

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.