Cookie cutter react portfolio suited perfectly for Github Pages, get up and running in less then 5 minutes, just edit the data.json file and off you go!


Install in 5 easy steps

  1. Fork this repo
  2. Edit data.json and config.ts to fit your needs
  3. Change package.json homepage property to {your-github-username}
  4. Run yarn from your favourite CLI
  5. Run yarn deploy and watch the magic happens

Your react portfolio is waiting for you at {your-github-username}}
*Please note that you have to enable github pages in your new forked branch, and point it to "gh-pages" branch after deploying it (step 5).


React-Portfolio is built on modules, each in its own sub-folder inside the modules main folder
Each module has its own properties defined by it's TypeScript interface, all modules extend the IModuleBase interface.

In order to add a module or change a module in your portfolio, simply edit data.json with the required properties.

Let's say we want to add another About section, simply add it in your data.json at the wanted position.

      "type": "about",
      "data": {
          "about": "This is another About module",
          "education": {
              "title": "Education",
              "data": [
                  "title": "BSc Information Systems",
                  "institute": "University of Haifa",
                  "startingYear": "2014",
                  "endingYear": "2018"
                  "title": "BA Psychology",
                  "institute": "The Open University",
                  "startingYear": "2020",
                  "endingYear": "2022"
      "title": "About"


React-portfolio comes bundled with 5 out-of-the-box themes.
Those include Desert, Aurora, Abstract, Hightech and Mellow.

Adding themes is super-easy! Here's how it's done:

  • Open a new sub-folder under the themes folder.
  • Name it whatever you want (no spaces).
  • Add 3 images, named bg.jpg, 1.jpg and 2.jpg (keep those under 100kb each).
  • Add your theme inside the config.ts file, like so:
enum Theme {
    MY_THEME = "my_theme"

export const themeConfig = {
    [Theme.MY_THEME]: {
        color: "red",

export const config = {
    theme: Theme.MY_THEME

And that's it!
Is your theme awesome? Share it with the world, open a PR for it.