Portfolio Under Construction

ComingSoon60: Portfolio Under Construction

An Auralis personal coming-soon page that centers a monospace parenthetical eyebrow, an oversized name, a role and tagline, an email contact pill button, a row of social icon links, and a pulsing availability status line.

Installation

Swap YOUR_EMAIL and YOUR_KEY for the email and license key on your account. Find your license key on your account page.

Radix flavor

npx shadcn add "https://ui.beste.co/r/comingsoon60?email=YOUR_EMAIL&license_key=YOUR_KEY"

Base UI flavor

npx shadcn add "https://ui.beste.co/r-base/comingsoon60?email=YOUR_EMAIL&license_key=YOUR_KEY"

This installs the block to components/beste/block/comingsoon60.tsx.

Quick start

The installed file exports comingsoon60Demo alongside the block: the exact props behind the preview above. Spread it to get a working portfolio holding page in one line.

import { ComingSoon60, comingsoon60Demo } from "@/components/beste/block/comingsoon60";

export default function Page() {
  return <ComingSoon60 {...comingsoon60Demo} />;
}

Then replace the demo with your own props. The socials icons come from lucide-react, so import the ones you need. Written out, a trimmed setup looks like this:

import { Dribbble, Instagram, Linkedin } from "lucide-react";
import { ComingSoon60 } from "@/components/beste/block/comingsoon60";

export default function Page() {
  return (
    <ComingSoon60
      badge={{ label: "Under construction" }}
      name="Mara Ellison"
      role="Designer & Art Director"
      tagline="My new portfolio is nearly ready. In the meantime, the work still speaks for itself, just reach out."
      contact={{ label: "Email me", href: "mailto:[email protected]" }}
      socials={[
        { label: "Dribbble", href: "/dribbble", icon: Dribbble },
        { label: "Instagram", href: "/instagram", icon: Instagram },
        { label: "LinkedIn", href: "/linkedin", icon: Linkedin },
      ]}
      labels={{
        statusText: "Currently open to new projects",
        socialsCaption: "Find me on",
      }}
    />
  );
}

Props

type Badge = {
  label: string;
};

type ActionLink = {
  label: string;
  href: string;
};

type SocialLink = {
  label: string;
  href: string;
  icon: LucideIcon;
};

type ComingSoon60Labels = {
  statusText?: string;
  socialsCaption?: string;
};

Behavior notes

• This block has no form: it is a static holding page, so there is no email input, submit state, or success panel.
• The contact pill renders as a real link via Button12 asChild wrapping a Next.js <Link href={contact.href} /> with a Mail icon, so it navigates rather than firing a handler.
• The social row renders only when socials is non-empty, mapping each entry to a Next.js <Link> whose icon component is drawn straight from the prop and given an aria-label from social.label.
• The availability line renders only when labels.statusText is set, prefixed by a small animate-pulse dot for a live-status feel.
• Following the Auralis language, the whole layout is a centered max-w-2xl column with the name set in oversized text-5xl to md:text-7xl type, and every string is plain text with no inline markup parsing, so HTML passed in shows as escaped text.