Bella
Documentation

Static Version

Welcome to Bella | React Personal Resume & Portfolio Template

Requirements

There are system requirements in order to install and setup this template and its components properly. Make sure that you are running the node.js

Install Npm Packages

NPM : You must have to npm install packages. You can do this by running "npm install" from the root of your project to install all the necessary dependencies. 
npm install

Development server

Run "npm start" for a dev server. Navigate to http://localhost:3000/ . The app will automatically reload if you change any of the source files. 
npm start

What's Included

After purchasing Bella template on themeforest.net with your envato account you will find following this files:
  • Bella - React template folder.
  • Documentation - This folder contains what you are reading now :)

Change Site Title and Favicon

To change your Site title and Favicon open the Shane in your editor and go to the location by following screenshot which are given bellow.
From the template root go to   public
1 2

Change Logo

To change your Site logo by following screenshot
From the template root go to   src assets img
3

Change Main Color of The Template

To change your site main color by following code
From the template root go to   src assets scss var.scss 

    // Colors
    $main: #1FA78F; // This is the main color
    $white: #fff;
    $gray: #646F87;
    $dark-gray: #293651;
    $white-gray: #8D99AE;
    $light-gray: #D3DCEE;

In order to deploy to your server you can do the following

Run "npm run build" to generate the build files 
npm run build
Upload the files inside   build   folder to the server

Editing One File Only

You won't need to change each file separately, just the data file which responsible for all the template.
From the template root go to   src data.json
4

Data File Content

                
  {
    "settings": {...}
    "general-info": {...}
    "about-page": {...}
    "portfolio-page": {...}
    "blog-page": {...}
  }

Settings of the site

Here, you can change the title of the site and the name of the logo image in case you changed the logo name
For uploading the logo, From the template root go to   src assets img 
                
  "settings": {
    "logo": "Logo-white.png",
    "site-name": "Bella"
  }

General information of the site

Here, you can change the name, title, description, image, resume and contact info
For uploading the resume (CV), From the template root go to   public 
                
  "general-info": {
    "name": "Ammar Yaser",
    "title": "Front-End Developer",
    "image": "jack-finnigan-701253-unsplash.jpg",
    "description": "Duis porta, ligula rhoncus euismod pretium, nisi tellus eleifend odio, luctus viverra sem dolor id sem.",
    "resume-file": "Ammar-Yaser-CV.pdf",
    "email": "support@example.com",
    "phone": "+201000110010",
    "social-links": {
      "dribbble": "https://dribbble.com/username",
      "facebook": "https://www.facebook.com/username",
      "instagram": "https://instagram.com/username",
      "twitter": "https://twitter.com/username"
    }
  }

About Page

Here, you can change the description, services, work experience, testimonials and skills
For uploading images, From the template root go to   src assets img 
                
  "about-page": {
    "description": "Duis porta, ligula rhoncus euismod pretium, nisi tellus eleifend odio.",
    "services": [
      {
        "id": 1,
        "name": "UI/UX Design",
        "description": "Duis porta, ligula rhoncus euismod pretium.",
        "icon": "edit-tools.svg"
      },
      {
        "id": 2,
        "name": "Web Development",
        "description": "Duis porta, ligula rhoncus euismod pretium.",
        "icon": "monitor.svg"
      },
      {
        "id": 3,
        "name": "Graphic Design",
        "description": "Duis porta, ligula rhoncus euismod pretium.",
        "icon": "anchor-point.svg"
      }
    ],
    "work-experience": [
      {
        "id": 1,
        "title": "UI Developer",
        "company": "HMASERV",
        "description": "Duis porta, ligula rhoncus euismod pretium.",
        "location": "Alexandria",
        "duration": "27/01/2019 - 10/02/2020"
      },
      {
        "id": 2,
        "title": "Front-End Developer",
        "company": "Addicta",
        "description": "Duis porta, ligula rhoncus euismod pretium.",
        "location": "Cairo",
        "duration": "27/01/2019 - 10/02/2020"
      },
      {
        "id": 3,
        "title": "Back-End Developer",
        "company": "Google",
        "description": "Duis porta, ligula rhoncus euismod pretium.",
        "location": "Cairo",
        "duration": "27/01/2019 - 10/02/2020"
      }
    ],
    "testimonials": [
      {
        "id": 1,
        "name": "Thomas Castro",
        "description": "Thanks to the skill of Felecia, we have a design that we can be proud",
        "photo": "person_3.jpg"
      },
      {
        "id": 2,
        "name": "Dean Bernit",
        "description": "Thanks to the skill of Felecia, we have a design that we can be proud",
        "photo": "person_2.jpg"
      }
    ],
    "skills": [
      {
        "id": 1,
        "name": "HTML",
        "percentage": 75
      },
      {
        "id": 2,
        "name": "Adobe Photoshop",
        "percentage": 50
      },
      {
        "id": 3,
        "name": "CSS",
        "percentage": 80
      }
    ]
  }

Portfolio Page

Here, you can add categories and works
For uploading images, From the template root go to   src assets img 
                
  "portfolio-page": {
    "categories": ["Devices", "Accessories", "Tools", "Fruits", "Shoes"],
    "works": [
      {
        "id": 1,
        "name": "Camera",
        "category": "Devices",
        "thumbnail": "1.png",
        "content": "<p>Duis porta, ligula rhoncus euismod pretium, nisi tellus eleifend odio, luctus viverra sem dolor id sem. Maecenas venenatis enim, quis porttitor magna. Etiam nec rhoncus neque. Sed quis ultrices eros. Curabitur sit amet eros eu arcu Duis porta, ligula rhoncus euismod pretium, nisi tellus eleifend odio, luctus viverra sem dolor id sem. Maecenas a venenatis enim, quis porttitor magna. Etiam nec rhoncus neque. Sed quis ultrices eros. Curabitur sit amet eros eu arcu</p><blockquote>Duis porta, ligula rhoncus euismod pretium, nisi tellus eleifend odio, luctus viverra sem dolor id sem. Maecenas venenatis enim, quis porttitor magna. Etiam nec rhoncus neque. Sed quis ultrices eros. Curabitur sit amet eros eu arcu Duis porta, ligula rhoncus euismod pretium, nisi tellus eleifend odio, luctus viverra sem dolor id sem. Maecenas a venenatis enim, quis porttitor magna. Etiam nec rhoncus neque. Sed quis ultrices eros. Curabitur sit amet eros eu arcu</blockquote><ul><li>Duis porta, ligula rhoncus euismod pretium.</li><li>Etiam nec rhoncus neque.</li><li>quis porttitor magna.</li><li>Maecenas a venenatis enim.</li></ul>",
        "images": [
          {
            "name": "11.png",
            "caption": "Duis porta, ligula rhoncus euismod pretium."
          },
          {
            "name": "22.png",
            "caption": "Duis porta"
          },
          {
            "name": "33.png",
            "caption": "Ligula rhoncus euismod pretium."
          }
        ],
        "videos": [
          "<iframe src=\"https://www.youtube.com/embed/nfewBuxsuBk\" title=\"YouTube video player\" frameBorder=\"0\" allowtransparency=\"true\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture\" allowFullScreen />",
          "<iframe title=\"Soundcloud player\" scrolling=\"no\" frameBorder=\"no\" allowtransparency=\"true\" allow=\"autoplay\" src=\"https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/210002474&color=%23ff5500&auto_play=false&hide_related=false&show_comments=true&show_user=true&show_reposts=false&show_teaser=true&visual=true\"/>",
          "<iframe src=\"https://www.youtube.com/embed/ZNMMPXnEeno\" title=\"YouTube video player\" frameBorder=\"0\" allowtransparency=\"true\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture\"  allowFullScreen />"
        ],
        "links": ["https://engtechnos.com/", "https://example.com/"],
        "tools-and-techs": [
          "Adobe Photoshop",
          "Adobe Lightroom",
          "Canon Camera",
          "HTML",
          "CSS",
          "3D Max"
        ]
      },
      {
        "id": 2,
        "name": "Avocado",
        "category": "Fruits",
        "thumbnail": "2.png",
        "content": "<p>Duis porta, ligula rhoncus euismod pretium, nisi tellus eleifend odio, luctus viverra sem dolor id sem. Maecenas venenatis enim, quis porttitor magna. Etiam nec rhoncus neque. Sed quis ultrices eros. Curabitur sit amet eros eu arcu Duis porta, ligula rhoncus euismod pretium, nisi tellus eleifend odio, luctus viverra sem dolor id sem. Maecenas a venenatis enim, quis porttitor magna. Etiam nec rhoncus neque. Sed quis ultrices eros. Curabitur sit amet eros eu arcu</p><blockquote>Duis porta, ligula rhoncus euismod pretium, nisi tellus eleifend odio, luctus viverra sem dolor id sem. Maecenas venenatis enim, quis porttitor magna. Etiam nec rhoncus neque. Sed quis ultrices eros. Curabitur sit amet eros eu arcu Duis porta, ligula rhoncus euismod pretium, nisi tellus eleifend odio, luctus viverra sem dolor id sem. Maecenas a venenatis enim, quis porttitor magna. Etiam nec rhoncus neque. Sed quis ultrices eros. Curabitur sit amet eros eu arcu</blockquote><ul><li>Duis porta, ligula rhoncus euismod pretium.</li><li>Etiam nec rhoncus neque.</li><li>quis porttitor magna.</li><li>Maecenas a venenatis enim.</li></ul>",,
        "images": [
          {
            "name": "11.png",
            "caption": "Duis porta, ligula rhoncus euismod pretium."
          },
          {
            "name": "22.png",
            "caption": "Duis porta"
          },
          {
            "name": "33.png",
            "caption": "Ligula rhoncus euismod pretium."
          }
        ],
        "videos": [
          "<iframe class=\"full\" src=\"https://www.youtube.com/embed/nfewBuxsuBk\" title=\"YouTube video player\" frameBorder=\"0\" allowtransparency=\"true\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture\" allowFullScreen />",
          "<iframe class=\"half float-left\" title=\"Soundcloud player\" scrolling=\"no\" frameBorder=\"no\" allowtransparency=\"true\" allow=\"autoplay\" src=\"https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/210002474&color=%23ff5500&auto_play=false&hide_related=false&show_comments=true&show_user=true&show_reposts=false&show_teaser=true&visual=true\"/>",
          "<iframe =\"half float-right\" src=\"https://www.youtube.com/embed/ZNMMPXnEeno\" title=\"YouTube video player\" frameBorder=\"0\" allowtransparency=\"true\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture\"  allowFullScreen />"
        ],
        "links": ["https://engtechnos.com/", "https://example.com/"],
        "tools-and-techs": [
          "Adobe Photoshop",
          "Adobe Lightroom",
          "Canon Camera",
          "HTML",
          "CSS",
          "3D Max"
        ]
      }
    ]
  },

Blog Page

Here, you can add Posts
For uploading images, From the template root go to   public images 
                    
  "blog-page": {
      "posts": [
          {
            "id": 1,
            "title": "Design Conferences in 2019",
            "date": {
              "day": 16,
              "month": "Jun"
            },
            "excerpt": "Veritatis et quasi architecto beatae vitae dicta sunt, explicabo.",
            "thumbnail": "11.png",
            "content": "<p>  Above all, think of life as a prototype. We can conduct  experiments, make discoveries, and change our perspectives.  We can look for opportunities to turn processes into  projects that have tangible outcomes. We can learn how to  take joy in the things we create whether they take the form  of a fleeting experience or an heirloom that will last for  generations. We can learn that reward comes in creation and  re-creation.</p><img src="/images/11.png" class="full" alt="Design Conferences in 2019"/><p> Above all, think of life as a prototype. We can conduct  experiments, make discoveries, and change our perspectives.  We can look for opportunities to turn processes into  projects that have tangible outcomes. We can learn how to  take joy in the things we create whether they take the form  of a fleeting experience or an heirloom that will last for  generations.</p><div class="row mx-0 justify-content-between"><img src="/images/22.png" class="half float-left" alt="Design Conferences in 2019"/><img src="/images/33.png" class="half float-right" alt="Design Conferences in 2019"/></div><h1> If you’re not prepared to be wrong, you’ll never come up  with anything original.</h1><p> Duis porta, ligula rhoncus euismod pretium, nisi tellus  eleifend odio, luctus viverra sem dolor id sem. Maecenas a  venenatis enim, quis porttitor magna. Etiam nec rhoncus  neque. Sed quis ultrices eros. Curabitur sit amet eros eu  arcu Duis porta, ligula rhoncus euismod pretium, nisi tellus  eleifend odio, luctus viverra sem dolor id sem. Maecenas a  venenatis enim, quis porttitor magna. Etiam nec rhoncus  neque. Sed quis ultrices eros. Curabitur sit amet eros eu  arcu</p><blockquote> If you’re not prepared to be wrong, you’ll never come up  with anything original.</blockquote><p> Duis porta, ligula rhoncus euismod pretium, nisi tellus  eleifend odio, luctus viverra sem dolor id sem. Maecenas a  venenatis enim, quis porttitor magna. Etiam nec rhoncus  neque. Sed quis ultrices eros. Curabitur sit amet eros eu  arcu Duis porta, ligula rhoncus euismod pretium, nisi tellus  eleifend odio, luctus viverra sem dolor id sem. Maecenas a  venenatis enim, quis porttitor magna. Etiam nec rhoncus  neque. Sed quis ultrices eros. Curabitur sit amet eros eu  arcu</p>",
            "write-comment": false,
            "comments": [
              {
                  "id": 1,
                  "parent": 0,
                  "name": "Thomas Castro",
                  "pic": "person_3.jpg",
                  "comment": "Thanks to the skill of Felecia, we have a design that we can be proud of."
              },
              {
                  "id": 2,
                  "parent": 1,
                  "name": "John Smith",
                  "pic": "person_2.jpg",
                  "comment": "Praesent in risus risus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Quisque et pulvinar metus, et dignissim velit."
              },
              {
                  "id": 3,
                  "parent": 0,
                  "name": "Albert Goon",
                  "pic": "person_1.jpg",
                  "comment": "Phasellus faucibus nibh eu justo dignissim, eget elementum ante rutrum. Nunc a sodales magna, sed sollicitudin dolor."
              }
            ]
          }
      ]
  }

Dynamic Version

Welcome to Bella | React Personal Resume & Portfolio Management System

What's Included

After purchasing Bella template on themeforest.net with your envato account you will find following this files:
  • Bella Front-End - React Front Interface.
  • Bella Dashboard - React Front Interface For Managing Your Portfolio.
  • Bella Back-End - Node.js Back-End of The System
  • Documentation - This folder contains what you are reading now :)


Requirements

There are system requirements in order to install and setup this system and its components properly. Make sure that you are running the Node.js and MySQL

Create database called bella

Install Npm Packages

NPM : You must have to npm install packages. You can do this by running "npm install" from the root of each folder of the mentioned above to install all the necessary dependencies. 
npm install

Development Server For Front-Ends

Run "npm start" for a running dev server. Navigate to http://localhost:3000/ . The app will automatically reload if you change any of the source files. 
npm start

Development Server For Back-End

Run "npm run dev" for a dev server. Navigate to http://localhost:5000/ . You should first install Nodemon globally 
npm i -g Nodemon
npm run dev

In order to deploy to your server you can do the following

For The Back-End

Upload all the files and folders except node_modules to te server.
Then, open the SSH via the terminal and go to the folder containing the Back-End and run the following commands 
npm install
npm install -g pm2
pm2 start index.js

For The Front-Ends

  • Bella Front-End - React Front Interface.
  • Bella Dashboard - React Front Interface For Managing Your Portfolio.

Change Site Title and Favicon
To change your Site title and Favicon open the Shane in your editor and go to the location by following screenshot which are given bellow.
From the template root go to   public
1 2


Changing the base url of the Back-End
Go to the .env file in the root of Bella Front and edit the following 

REACT_APP_API_URL="http://localhost:5000/api"
REACT_APP_BASE_URL="http://localhost:5000"

Go to the .env file in the root of Bella Dashboard and edit the following 

REACT_APP_API_URL="http://localhost:5000/api/dashboard"
REACT_APP_BASE_URL="http://localhost:5000"
REACT_APP_NAME="Bella Dashboard"
Run "npm run build" to generate the build files 
npm run build
Upload the files inside   build   folder to the server

Here you can download the Postman Collection of all Well-Written Back-End APIs. Click here to download the postman Collection Postman Collection