Staaarter

Portfolio Under Construction

A centered personal placeholder page for a portfolio site that's still being built. Shows an oversized name heading, a role/tagline line, a pill-shaped mailto contact button, a row of social links, and an availability status line with a small pulsing dot.

By Staaarter Team
Coming Soon
Docs
Live preview

Docs

Installation

A real shadcn registry command, not a copy-paste stand-in: it fetches this block plus its button dependencies and any missing npm packages, and installs them straight into your project.

npx shadcn add https://staaarter.com/r/portfolio-under-construction.json

Prefer not to use the CLI? Copy the source from the Code toggle above into src/components/blocks/coming-soon/comingsoon60.tsx instead.

Usage

The file also exports comingsoon60Demo, the exact props behind the preview above. Spread it to get a working section in one line, then replace it with your own data.

import { ComingSoon60, comingsoon60Demo } from "@/components/blocks/coming-soon/comingsoon60";

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

Props

PropTypeDefaultDescription
eyebrowstring"(portfolio under construction)"Monospace label above the name.
namestringnoneOversized name heading.
rolestringnoneRole/tagline line under the name.
emailstringnoneAddress used to build the mailto: contact button.
socialLinksPortfolioSocialLink[]noneIcon-only social links rendered below the contact button.
availabilityLabelstring"Open to new projects"Text next to the pulsing availability dot.
classNamestringnoneExtra classes for the outer section element.

Types

interface PortfolioSocialLink {
  label: string;
  href: string;
  icon: "twitter" | "github" | "linkedin";
}

Behavior notes

  • Plain Server Component: the contact button is a real mailto: link and the social icons are real external links (target="_blank"), but nothing sends data or holds state, there is no client-side behavior at all.
  • The availability dot's pulse is CSS-only (animate-pulse), it does not reflect any real-time status.
  • Icon-only social buttons each get an aria-label from the link's label, since they render no visible text.