1. Item Name : Bfolio - Personal Portfolio NextJs Template
  2. Created: 11 November 2025
  3. Item Version: v0.1.1
  4. Author : aqlova
  5. Support Ticket: https://help.aqlova.com/

Introduction

Bfolio - Personal Portfolio 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 Bfolio - Personal Portfolio NextJs Template.

Requirements

There are system requirements in order to install and setup Bfolio - Personal Portfolio NextJs Template and its components properly. Make sure that you are installed node.js and Yarn.

For nodejs go here Nodejs

For yarn go here Yarn

Install Yarn

Getting started

The template is easy to customize, ensuring a unique and professional look for your business. Get ahead of the competition and stand out in the market with our React Nextjs template for businesses.

Template Features - Latest Version

  • React JS
  • Next JS
  • Typescript
  • GSAP
  • Bootstrap v5.x
  • Font-awesome
  • Scroll Animation Included.
  • Split Text Animation Included.
  • Scroll Magic Animation Included.
  • Hover Effect Animation Included.
  • 10+ Awesome Homepage
  • Responsive Design
  • Pixel Perfect Design
  • Clean Code & Unique Design
  • Easy to Customize

What's Included

After purchasing Bfolio Personal Portfolio NextJs Template on themeforest.net with your Envato account, go to your Download page. You can choose to download Bfolio Personal Portfolio NextJs Template package which contains the following files:

The contents of the template package downloaded from ThemeForest

  • Bfolio - An NextJs Template file. this file you can edit and use for your business.
  • Documentation - This folder contains what you are reading now :)

React Installation

Please follow the instructions.

  1. For local host: -
    1. Open you command prompt
    2. npm install or npm install --legacy-peer-deps
    3. npm run dev (will start the dev server at http://loaclhost:3000)

  1. To deploy a Next.js application on Vercel, you can follow these steps: -
    1. Sign up for an account on Vercel if you don't have one already.
    2. Connect your GitHub, GitLab, or Bitbucket repository where your Next.js application is hosted.
    3. Import your repository on Vercel and select the Next.js project to be deployed.
    4. Vercel will automatically detect your Next.js application and perform the necessary build and deployment steps.
    5. Once the deployment is complete, you'll be able to access your application using the URL provided by Vercel.

Template Site Setting

Change Site Title, Favicon and Page Title

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

3.1.1
You can change favicon here
3.1.1
You can change title here
3.1.1
Example of changing the page background color dynamically based on the current route and theme.
3.1.1 3.1.1
Example of using ThemeCursorProvider and CustomCursorProvider to dynamically manage the page background color — either globally based on the current route and theme, or directly within individual pages.

Customize Menu

To customize menu do the following:

  1. From the project folder go to src data menuData.tsOpen the menu you want to use
  2. Then customize the menu
3.1.1 3.1.1
Customize the menu

GSAP Animation

How I Used Hook and Component

I implemented a reusable React hook to handle all GSAP animation logic (such as reveal, split text, and scroll-trigger effects) for a cleaner and more maintainable codebase. The AnimationWrapper component dynamically maps animations based on the current pathname using the centralized animationConfig.ts file. This ensures that only the animations relevant to the active route are executed. Additionally, the wrapper intelligently manages both SSR and CSR rendering contexts, preventing unnecessary client-side rendering and improving overall performance.

animation-hook
Example of creating animation with hook (fade animation, split text, scroll trigger setup)
animation-use
Example of using route-based animations inside a component with useGSAP and a custom hook.
animation-use
Example of implementing route-based animations in a React component using useGSAP with a custom hook for page-specific animation effects.
animation-use
Example of using the animation wrapper that handles both global and page-specific GSAP animations using useGSAP and a custom hook

404

To change 404 and setting you can change by following this screenshot here.

  1. From the project folder go to src app not-found.tsx Open the page you want to use
  2. Then customize the 404 data
3.1.1
Customize the 404

Customize Project Data

To change Project data and setting you can change by following this screenshot here.

  1. From the project folder go to src data projectData.ts Open the data you want to use
  2. Then customize the project data
3.1.1
Customize the Project data

Customize blog Data

To change blog data and setting you can change by following this screenshot here.

  1. From the project folder go to src data blogData.ts Open the blog data you want to use
  2. Then customize the blog data
3.1.1
Customize the blog data

Changing template colors

  1. Open the colors.scss file from public > assets > scss > utils 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 Support Ticket. We provide 15 hours real-time support for our customers.

Thank you for purchasing our Template.