Getting Started

Welcome to inbio react template! We would like to thank you for choosing our template - inbio.

It’s built with react gatsby. It’s fully responsive and looks well. It is a modern design and high-speed performance react template. To use inbio for Personal Portfolio, Personal Portfolio Landing, Minimal Portfolio, Freelancer Portfolio, Designer Portfolio, Parallax, and other needed inner or details pages availability.

Requirements

There are system requirements in order to install and setup inbio template and its components properly. Make sure that you are installed node.js and Yarn.

Recommended node and yarn

Install Yarn

What's Included

After purchasing inbio template on templateforest.net with your Envato account, go to your Download page. You can choose to download inbio template only (Installable react template) or the entire inbio template package which contains the following files:

The contents of the template package downloaded from templateForest:

inbio.zip - An Installable react template zip file. this file you need to upload to react.
Licensing - This folder contains the terms and conditions of the license.
Documentation - This folder contains what you are reading now :)

React Installation

Please follow the instructions in the video to see how you can install react on your hosting:

For local host -
1. Open you command prompt
2. yarn
3. yarn start (will start the dev server)
Deploying to Netlify - https://www.youtube.com/watch?v=TbQ4kWX29lQ

For locally build -
1. Open you command prompt
2. yarn build (will build locally and generate public directory)
3. yarn serve (will start the locally build server at http://loaclhost:9000)
Deploying to Netlify - https://www.youtube.com/watch?v=TbQ4kWX29lQ

Other Scripts

Open you command prompt
yarn clean (This will clear the cache)
yarn lint:fix (This will format your code and fix auto fixable eslint error)

Change Site Title, Favicon and

To change your Site title and Favicon open the inbio in your editor and go to the location by following screenshot which are given bellow.

Change Logo

To change logo and customize other header data do the following:

From the project folder go to src data generalOpen the header you want to use
Then change the logo as well as you can also change other data

By folllowing this screenshot you can change your Logo

Customize Menu

To customize menu do the following:

From the project folder go to src data generalOpen the menu you want to use
Then customize the menu

Customize the menu. — Customize the menu

Customize Footer

To customize footer data do the following:

From the project folder go to src data generalOpen the footer you want to use
Then customize the footer data

Customize the footer. — Customize the footer

Customize Site Configuration

To customize site configuration do the following:

Customize the config. — Customize the footer

Customize graphql

To create a new page do the following:

From the project folder go to src gatsby-utils typedefs
Our all fields are strictly graphql typed.
If you know graphql and gatsby well then try modified this. Otherwise, contact with us
Then modify the node or resolver

**Don't touch this if you are not experienced enough. But you can learn from here

Customize page's data

To customize page do the following:

From the project folder go to src data homepagesOpen the page you want to use
Don't change the title
Then customize the footer data
Don't Change the field name

Create a new page

To create a new page do the following:

From the project folder go to src data homepagesThen create [your-page-name].json file
Add the page title first. This is most important
Then Add data inside content array
Add data section by section. Such as, create a object for hero section then another for service section.
Inside section's object, section field is important. You must put a value in this field
Then go to pages folder and create a page.