Avo - React Portfolio Template with NextJs

Introduction

  • Template name: Avo - React Portfolio Template with NextJs
  • Created date: 16/01/2022

Template features

  • Build on React library
  • Build on Next JS
  • No jQuery Dependency
  • 10+ Hompages Variations
  • Using SCSS/SASS
  • Google font include
  • Fully responsive
  • W3C Validated Code
  • Clean Code
  • Speed Optimized
  • Cross Browser Support
  • Well Documented
  • No console error
  • Free Updates

Files Include

  • Main code
  • Avo_react_docs

Install Node.Js & Yarn (or npm)

Your computer must have installed nodejs and yarn to run this template. You can download Node.js from here and install Yarn with this tutorial here . NPM comes bundled with Node.js

Nodejs

Install Npm Packages

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

Install packages

Development server

Run npm run dev from the root of your project to start a dev server. Navigate to http://localhost:3000/. The app will automatically reload if you change any of the source files.

Development

Build

Run npm run build to build the project. The build artifacts will be stored in the .next/ directory.

Development

Deployment

Project can be deployed to any hosting provider that supports Node.js

We suggest some hosting you can consider to use:

Root folder structure

Root folder structure

Src folder structure

Src folder structure

Code structure

Layout structure

Thank you for purchased Avo template

We truly appreciate and really hope that you'll enjoy our template!

If you like our template, plase rate us 5 star !

Customization

How to change logo ?

Open the project on any editor, and follow this steps to open app.json file

  1. src
  2. data
  3. app.json

in app.json file you can easily change your logo

add dark logo image path in darkLogo value on the right to change dark logo

and add light logo image path in lightLogo value on the right to change light logo

Change logo
How to stop eslint when build process ?

in project folder open next.config.js file and in line 13 you will find ignoreDuringBuilds convert it value to true

Stop eslint
How to Hide Preloader page ?

Open the project on any editor, and follow this steps to open app.json file

  1. src
  2. data
  3. app.json

in app.json file in line 4 you will find showLoading convert it value to false

Hide preloader