Nav With Availability Dot

About this block

Nav with Availability Dot adds a live-status indicator to a standard portfolio navbar: the name Avery Stone on the left, Work, About, Services, and Contact centred, and a pulsing emerald dot with the label Available from August on the right. The dot uses an animate-ping ring so it reads as a live signal without any JavaScript state.

Links are one array; the indicator is a standalone flex row. The pulsing dot is the distinctive detail; it turns an ambient availability message into something a visitor notices on first scan without it being a banner or a popup.

When to use

Reach for this block when you are actively looking for work and want the status visible on every page without repeating a banner section. The installer swaps the month label and switches the dot colour to a muted tone when they are not available.

A natural flow around it on a Portfolio Pro page:

Before

• Nothing; this block opens the page.

After

• Hero sections
• Availability CTA band

What you can display

One strong use is the actively-seeking-clients header. Other availability nav layouts:

• Not available. A grey static dot with a label such as Booked until Q4 to set expectations early.
• With a hire me link. The dot beside an anchor button that jumps to the contact form.
• Studio capacity. Two of three spots taken, written as a compact fraction beside the dot.

Tip: pair the dot with a matching availability band lower on the page so a visitor who misses the nav still gets the full context.