Build a liquid-glass portfolio in React

Start with the finished layout

The free portfolio starter combines an introduction, selected projects, a contact section and a glass dock. Its live preview renders the same composition the registry installs.

Use a React app with Tailwind CSS 4 and the Glassy UI registry mapping, then install the starter:

pnpm dlx shadcn@4.14.1 add @glassyui/glass-portfolio

import { GlassPortfolio } from "@/components/glassyui/glass-portfolio";

export default function Page() {
  return <GlassPortfolio />;
}

The install includes its primitives, scoped stylesheet and decorative artwork. It does not require a separate wallpaper download, a hosted image service or a Glassy UI account.

Replace the sample with your work

Edit the profile and projects in the installed source, or pass the typed profile and projects props. The default person and projects are demonstration content. Replace the name, introduction, project descriptions and destination URLs together before publishing.

import { GlassPortfolio } from "@/components/glassyui/glass-portfolio";

export default function Page() {
  return (
    <GlassPortfolio
      profile={{
        name: "Morgan Chen",
        role: "Designer and developer",
        introduction: "I build useful, considered interfaces.",
        email: "hello@example.com",
        location: "Toronto, Canada",
      }}
      projects={[{
        title: "My first project",
        description: "What I built and why it matters.",
        href: "#contact",
        category: "Product design",
        year: "2026",
      }]}
    />
  );
}

Choose two or three projects that make your work easy to understand. Describe your contribution and give each card one useful destination: the running product, a case study or its source. Keep project titles short enough to scan on a phone.

Set the contact destination to a channel you actually use. The starter is a frontend composition; it does not send mail or provide a contact-form backend.

Keep navigation connected

The dock uses ordinary links to sections on the page. If you rename a section ID, update the corresponding link. Keep visible headings and accessible icon labels so keyboard and touch users have the same destinations.

The glass is decoration around real HTML content. Keep your introduction and projects in the document instead of putting essential text inside an image or canvas.

Check your version before sharing

Replace the sample links, try the page at a narrow phone width, and tab through every dock and project link. Test both light and dark appearance, reduced motion and reduced transparency. A longer project title or a different background can change readability even when the default demo looks good.

Run your app’s production build and inspect the resulting page. Add your own page title, description and share image in your app’s metadata. The starter gives you the layout; your hosting and domain remain under your control.

Read the glass accessibility guide before increasing refraction or animating more of the screen.