Softbun Web is a portfolio website template built on Next.js, Tailwind CSS, TypeScript, GraphQL, and Contentful, designed to give developers a headless-CMS-driven personal site out of the box. The project is bootstrapped with create-next-app, so it includes the standard Next.js file structure: a pages directory with index.tsx as the home page, an API route at pages/api/hello.ts, and a package.json wired for the standard npm/yarn scripts. The repository description confirms the stack: Next.js for the React framework, TailwindCSS for styling, GraphQL for querying content, and Contentful as the content management backend, with TypeScript for typed code.
What is Softbun Web?
Softbun Web is a personal portfolio starter that couples a Next.js front end with Contentful as a headless CMS, using GraphQL to fetch content and Tailwind CSS to style it. As a create-next-app baseline, it runs on Node.js and can be deployed to Vercel with minimal configuration. The output is a static or server-rendered portfolio site whose content lives in Contentful, so non-developers can update projects, bio, and posts without touching code.
Key Features
- Next.js framework — File-based routing under the pages directory, automatic static optimization, and API routes that map every file in pages/api to an /api/* endpoint; the template includes pages/index.tsx and pages/api/hello.ts.
- Tailwind CSS styling — Utility-first CSS framework integrated for rapid, consistent styling of portfolio sections.
- GraphQL data layer — Query Contentful's GraphQL API to pull structured content into Next.js pages; the exact schema depends on the content model you build in Contentful.
- Contentful headless CMS — Content is managed remotely via Contentful's web app, decoupled from the Next.js rendering layer.
- TypeScript — The project is written in TypeScript (pages/index.tsx and pages/api/hello.ts are .tsx/.ts files), giving type safety across components and API handlers.
- Create-next-app baseline — Includes the standard npm run dev, yarn dev scripts and the default Next.js documentation README section.
- Vercel deployment — The README points to the Vercel Platform as the easiest deployment target, with one-click import from the Next.js template gallery.
Who is it for?
- Front-end developers — who want a pre-wired Next.js + Tailwind + TypeScript project to build a portfolio without starting from scratch.
- Designers and freelancers — who need a portfolio site whose content they can update themselves through Contentful's editor instead of editing JSX.
- Next.js learners — who want a working example of API routes and file-based routing that they can extend.
- GraphQL enthusiasts — who want to see how a Next.js app can fetch data from Contentful's GraphQL endpoint.
What can you do with it?
- Personal branding: publish a portfolio with project showcases, biography, and contact links, with content managed through Contentful.
- Content updates: edit text, images, and project metadata in the Contentful dashboard and have changes appear on the site without redeploying.
- Learning playground: modify pages/index.tsx to experiment with Next.js, Tailwind utilities, and GraphQL queries in a real project structure.
How does Softbun Web work?
After cloning the repository, install dependencies with npm or yarn, then start the dev server with npm run dev (or yarn dev) and open http://localhost:3000. The home page is pages/index.tsx; editing it triggers hot reload. API routes live in pages/api, where each file becomes an endpoint — the included hello.ts is available at /api/hello. To connect Contentful, you would add your space ID and access token and then define GraphQL queries to fetch your portfolio content.
FAQ
Is Softbun Web free?
The repository is a standard create-next-app project with no license or pricing stated in the README, and it appears to be an open personal template. Fork it and reuse the code freely in your own portfolio, subject to the terms of any dependencies.
Does Softbun Web use a CMS?
Yes, according to the repository description the stack includes Contentful, a headless CMS. Content is fetched via GraphQL and rendered by Next.js, so the site is not limited to static text in the repo.
What is the styling approach?
Tailwind CSS is used for styling. The project is set up with TailwindCSS per the repository metadata, so you write utility classes directly in JSX.
How do I deploy it?
The README recommends the Vercel Platform. Connect the repository to Vercel, and the Next.js build will run automatically; you can also deploy to any Node.js host that supports Next.js.
Can I change the content without redeploying?
If you wire up Contentful correctly, yes. Content stored in Contentful is fetched at build time or request time, so updates in the CMS can appear after a rebuild or on server-rendered pages without changing code.
