PaperHouse Review — Astro Bento Portfolio Template with Tailwind 4

Most portfolio templates look the same. A grid of images, a hero section, an about page. Functional, yes. But forgettable.

PaperHouse is a different approach. It’s a premium Astro 7 + Tailwind 4 bento portfolio template with works, blog, docs, and an order page — all built around a distinctive bento grid layout and a warm, editorial design system.

This review covers what’s inside, who it’s for, and whether it’s worth the one-time price.

What Is PaperHouse?

PaperHouse is a premium Astro portfolio theme. It includes:

• Bento grid portfolio with three card sizes (normal, wide, large)
• Works collection with case studies and per-work galleries
• Blog system with categories, tags, reading time, and prev/next navigation
• Documentation site built into the template
• Contact page with configurable form
• Order page designed to close the sale
• Markdown and JSON driven — zero hardcode
• SEO per page — Open Graph, Twitter Cards, canonical URLs
• Dark mode with system preference detection
• 6 example works and 5 example blog posts

Demo: paperhouse-astro.pages.dev Price: $45 one-time Buy: creativitaz.gumroad.com/l/paperhouse-astro-bento

What Makes PaperHouse Different

1. Built with Astro 7 + Tailwind 4

PaperHouse uses the latest versions of both Astro and Tailwind. That means:

• Astro 7’s performance improvements
• Tailwind 4’s new @theme block and faster builds
• Modern CSS features throughout

If you’re already comfortable with Tailwind, you can rebrand the entire site by editing the design tokens in globals.css.

2. Bento Grid Layout

PaperHouse uses a bento grid layout with three card sizes:

• Normal — one column
• Wide — two columns
• Large — two columns with a taller aspect ratio

This creates visual hierarchy on the works grid, which makes the portfolio feel curated rather than uniform.

3. Built for Conversion

PaperHouse is engineered to convert. Every page has a clear next step:

• Home has a hero CTA and a closing CTA
• Works cards link to case studies with a clear “next project” path
• Journal posts link to categories, tags, and other posts
• Contact page has a form and a meta grid
• Order page exists to close the sale

This is the structure that sells on Gumroad and ThemeForest.

4. Markdown and JSON — Zero Hardcode

Every piece of content in PaperHouse is editable without touching a layout file:

• src/content/works/ — case studies as markdown
• src/content/blog/ — journal posts as markdown
• src/content/pages/ — static pages as markdown
• src/content/docs/ — documentation as markdown
• src/data/*.json — brand, nav, footer, SEO, home copy, labels

You don’t need to know Astro to run PaperHouse. If you can edit a markdown file, you can run the site.

5. Documentation Built In

PaperHouse includes a full documentation site with its own content collection and sidebar. This is rare for a portfolio template — most don’t include docs at all.

If you’re selling a product or service and need to document it, this saves you from building a separate docs site.

6. Design Tokens in @theme

All design tokens live in src/styles/globals.css inside the @theme block. Change these to rebrand the entire site:

@theme {
  --color-paper: #FFFCF7;
  --color-ink: #14120F;
  --color-stone: #EDE8DF;
  --color-lime: #E8FF5A;
  --font-serif: "Instrument Serif", serif;
  --font-sans: "Instrument Sans", "Syne", sans-serif;
  --font-hand: "Caveat", cursive;
  --radius-bento: 28px;
}

Tailwind picks these up automatically. No config file needed.

7. SEO Foundation

PaperHouse handles:

• Meta title and description per page
• Open Graph tags for social sharing
• Twitter card support
• Canonical URLs
• Clean URL structure
• Semantic HTML
• Sitemap-ready

Every page has its own title, description, and social share image.

Who PaperHouse Is For

PaperHouse is a good fit if you’re:

• A designer tired of template sameness
• A freelancer who wants to look bigger than you are
• A studio shipping portfolios for clients
• A developer who wants a clean Astro 7 + Tailwind 4 starting point

It’s probably not a good fit if you need:

• A full CMS-first workflow (though Git-based CMS integration is possible)
• E-commerce with cart and checkout (the order page is a landing page, not a store)
• Multi-language support (not included out of the box)

For those cases, you’d need custom development on top of the template.

Installation

Installation is standard for an Astro project:

# Extract the source code
# Open the project folder in a terminal
cd path/to/paperhouse

# Install dependencies
npm install

# Start the development server
npm run dev

The site runs at localhost:4321.

For production:

npm run build
npm run preview

The build output goes to dist/, ready to upload to any static host.

Configuration

Configuration happens in two main files:

1. astro.config.mjs — set your site URL:

export default defineConfig({
  site: 'https://your-domain.com',
  vite: {
    plugins: [tailwindcss()],
  },
});

2. src/data/site.json — brand, nav, footer, SEO defaults

Example site.json:

{
  "brand": {
    "name": "Your Studio",
    "initial": "Y",
    "tagline": "studio ~",
    "homeHref": "/"
  },
  "seo": {
    "title": "Your Studio — Design Portfolio",
    "description": "Your studio description for search engines.",
    "keywords": ["design studio", "portfolio", "branding"],
    "ogImage": "/astro.svg",
    "twitterHandle": "@yourstudio"
  },
  "nav": [
    { "href": "/about", "label": "About" },
    { "href": "/works", "label": "Works" },
    { "href": "/blog", "label": "Journal" },
    { "href": "/contact", "label": "Contact" }
  ]
}

Content Structure

PaperHouse organizes content into clear folders:

• src/content/works/ — case studies
• src/content/blog/ — journal posts
• src/content/pages/ — static pages
• src/content/contact/ — contact page data
• src/content/docs/ — documentation
• src/data/ — site configuration JSON

Customization

The template is built to be customized:

• Colors — edit the @theme block in globals.css
• Fonts — edit --font-serif, --font-sans, --font-hand
• Navigation — edit nav in site.json
• Footer — edit footer.columns in site.json
• Pages — create a markdown file in content/pages/
• Works — create a markdown file in content/works/
• Blog posts — create a markdown file in content/blog/

If you can write Astro, you can customize anything. If you can only edit JSON and Markdown, you can still run a functional portfolio site.

Performance

PaperHouse builds to static HTML. That means:

• No server runtime
• No database queries
• No JavaScript framework overhead
• Loads instantly from a CDN

Actual performance depends on your images, hosting, and third-party scripts. Astro 7 + Tailwind 4 gives you a clean foundation.

Pricing

PaperHouse is available for $45 one-time on Gumroad. No subscription. No per-site license. Use it on unlimited projects.

Buy PaperHouse → creativitaz.gumroad.com/l/paperhouse-astro-bento

Alternatives

If PaperHouse isn’t quite right, here are other Astro themes from the same creator:

• AstroCar — Car rental booking template
• Docuna — Starlight docs + landing + blog
• Docus — Starlight docs + blog + landing
• Blacks — Multipurpose portfolio + gallery + blog
• Finance App — SaaS/finance landing page

Or if you want an all-in-one theme with landing page, Starlight docs, blog, and optional Decap CMS integration, check out ForgeDocs.

Verdict

PaperHouse does one thing well: it gives designers and studios a distinctive bento portfolio with a blog, docs, and an order page — all built with Astro 7 and Tailwind 4.

It’s not a CMS. It’s not a hosted platform. It’s a static Astro project — and a well-designed one.

If you want a portfolio that doesn’t look like every other template, PaperHouse is worth the $45.

Get PaperHouse on Gumroad → creativitaz.gumroad.com/l/paperhouse-astro-bento

If you need a custom Astro site built for your brand, hire me on Fiverr →.

PaperHouse is built by Creativitaz. This review is independent and based on the publicly available demo and documentation.