1. Item Name : Exgrid - Personal Portfolio React NextJs Template
  2. Created: 31th August, 2023
  3. Item Version : v 1.0.0
  4. Author : creationic

Introduction

Exgrid - Personal Portfolio React NextJs Template

For any support please don't hesitate to contact us at Support Center . We provide 13 hours real-time support for our customers.

We would like to thank you for choosing Exgrid - Personal Portfolio React NextJs Template

Getting started

Exgrid is a modern Responsive Multi-Page bootstrap 5 React NextJs template.

Template Features

  • React
  • Next Js
  • Bootstrap v5.x & Scss
  • Font-awesome
  • Custom Icons
  • No jQuery
  • 10 Awesome Homepage (Dark/ Light)
  • Responsive Design
  • Pixel Perfect Design
  • Clean Code & Unique Design
  • Easy to Customize
  • W3C Validated Codes

What's Included

After purchasing Exgrid template on themeforest.net with your Envato account, go to your Download page. You can choose to download Exgrid template package which contains the following files:

The contents of the template package downloaded from ThemeForest

  • main-file - React Template file. this file you can edit and use for your business.
  • documentation - This folder contains what you are reading now :)

Installation

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 & npm install.

Recommended node and npm

install node for your pc


Install Npm Packages

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


Run Development Server

npm run dev


Run Production Server

npm run build

Template Structures

Articles

React Structure

This template is a fixed layout with four columns. The main contents are inside the 'src' folder divided into differt components (i.e. header, banner, features,... footer etc.). The general template structure is the same throughout the template. Here is the general structure.

3.1.1
React Markup Structure

CSS Files and Structure

We are using one customed CSS files (main.css) and several vendor css files. CSS file structure is as follows:

3.1.1
CSS Files and Structure

Change Contents

Changing Images

To change any images of the website

  1. Carefully collect the source name of the image (i.e. hero.jpg)
  2. Open the file called images.
  3. Find the particular image file.
  4. Replace the file with your image.
  5. Make sure that the file name does not change.The file name should be the same.

Example: Suppose you want to change the following image file:

4.1.1

You have to do the following to change this image with your own image:

  1. Open the file called images.
  2. Find the particular image file called banner-img.jpg
  3. Replace the file with your image
  4. Make sure that the file name does not change.

Changing Colors

We have used scss for this project to write css. If you are familiar with scss you should customize only the .scss files.

Changing default template colors

  1. Open the variable.scss file from styles > abstracts > _variables.scss folder with a text-editor.
  2. Change the right-side values of the variables to change any default colors of your site.
  3. Save your file.
4.1.1

Support

If you face any issue please contact us at creationic@gmail.com We provide 15 hours real-time support for our customers.

Thank you for purchasing our theme.