WebberUI

Personal Writing Site

Personal site: about/work/writing, spotlight hover, built-in blog.

ProContentportfolio7 sections
See it liveSee the plans

Install

npx shadcn@latest add "https://webberui.com/r/personal-writing-site.json?t=<install token>"

The whole page lands in app/templates/personal-writing-site/. You can also use a long-lived licence key instead: set the Authorization: Bearer <key> header in the registries block of components.json — better for CI or a project several people share. What you may do with the source is in the licence terms.

Sections it ships with

Sections inside one template share the same design tokens, so swapping and reordering them keeps the colours, spacing and animation rhythm consistent. Pick and combine them in the section composer.

  1. 1

    Nav and Hero

    In-section sticky nav bar with a large serif headline that enters line by line, role tags and two action buttons.

    hero
  2. 2

    About Me

    Parallax portrait colour block beside three narrative paragraphs, four writing stats and a tag cloud of everyday tools.

    content
  3. 3

    Selected Work

    Four work cards lit by a spotlight that follows the cursor, covering an essay collection, an open-source tool, a newsletter and a podcast.

    gallery
  4. 4

    Recent Writing

    A list of five posts; hovering fills the whole row with a gradient and nudges the title to the right.

    content
  5. 5

    Notes Timeline

    A terracotta progress line that extends as you scroll, threading four short everyday note cards.

    timeline
  6. 6

    Newsletter Signup

    A pull quote on deep ink with a glow backdrop, an email signup form and a thank-you message after submitting.

    cta
  7. 7

    Footer

    Site blurb, navigation and further links, contact channels, and a copyright line promising no tracking and no ads.

    footer

Included in these starter kits

A kit packs this template together with the components it needs, an SEO skeleton and the form fields a Taiwanese storefront has to collect — all behind a single install command.

What you get is source code

Not an npm package, not a zip file. Once installed, the page's TypeScript source sits in your repo: edit it however you like, no runtime dependency, no expiry mechanism. Your site keeps running even if ours goes down.

Browse the other 103 templates →