Webiny Bootstrap React Portfolio

This is a simple bootstrap project to create a portfolio website with React, Webiny Headless CMS and Apollo.

info

All of the code shown in this tutorial is also hosted in our GitHub repository.

We will continue adding a series of bootstrap projects with different front-end frameworks.

You can't find your favorite bootstrap project? Go ahead and ask for a Guide or Tutorial at the Community Repo of Webiny 🚀

Cover

Demo

What we'll build

Watch the live demo.

Clone the bootstrap project and continue working on your portfolio website to showcase your work. Focus your creativity on creating valuable content and update your projects and blogs with Webiny Headless CMS Content Models.

Portfolio bootstrap features

Headless CMS Content Models:

  • Blogs
  • Projects

Front-end:

  • Reusable UI components
  • Material UI React Components
  • GraphQL to query data
  • Deploy with Vercel

Prerequisites

Back-end

In order to have this project work, you need to have a Webiny Headless CMS project ready for the backend. Follow the tutorial to create your backend Webiny project in the webiny-bootstrap-react-portfolio folder.

Get Started

Front-end

Clone the repository:

git clone
cd webiny-bootstrap-react-portfolio/frontend

Start your front-end project:

Using yarn:

yarn install
yarn develop

Or, using npm:

npm install
npm run develop

Deploy

Back-end

When you create a Webiny project, one of the steps to finalize and continue working on the project is deployment. Make sure you have followed the tutorial for the back-end set up.

Front-end

Follow the Front-end deployment section on the tutorial.

Last updated on by albionahoti