Personal Portfolio/CV NextJS Template

DOCUMENTATION

• Doc version: 2.0
• Created: 17 June 2023
• Last update: 12 Jan 2026

OVERVIEW

Vfolio Personal Portfolio/CV HTML Template suitable for any type services, experience, works and expertise. Clean, modern and organized looking material design and well commented, flexible code Landing website template. it’s the great HTML Template that enables you to create a professional website. It includes high-quality 01 HTML files are well organized and named accordingly so it’s very easy to change any and all of the design. It’s all that you looking for your Sass, Startup, App Landing, Software Landing & similar other company….

We have built this HTML Template base on in-depth research on services, experience, works and expertise to your need and to the expectation for your clients.

Images in the main file are replaced by placeholders, all images used for demo purpose only. Don’t worry about elements, shapes and graphic, it is all ready in your main file.

We have a dedicated support center for all of your support needs. It includes our Documentation and Ticket system for any questions you have.

Main Features

• Completely adaptable to any device - 100% Fluid Responsive
• Thoroughly tested on real devices
• Creative Homepage design
• Features a creative and unique design
• Includes handcrafted and carefully designed inner pages to choose from
• Utilizes React 19 and NextJs 16 technologies
• Implements React scroll-up functionality for smooth scrolling
• Incorporates React wow animation for engaging visual effects
• Includes React swiper slider for interactive image sliders
• Utilizes Bunny Fonts for distinctive typography
• Ensures 100% responsiveness across all devices
• Boasts a clean and appealing design
• Utilizes clean and well-commented code
• Implements valid Redux/Jsx Component/CSS3 code
• Offers ease of customization
• Provides flexibility and multipurpose functionality
• Built on the Bootstrap 5 framework
• Detailed documentation available Here
• Lifetime free updates
• And much more...

What do you get?

• NextJS Template source code
• Documentation

Note

All images are just used for Preview Purpose Only. They are not part of the template and maybe NOT included in the final purchase files.

Change log

                                VERSION 2.0
                                - Updated to NextJS 16
                                - Updated to React 19
                                
                                VERSION 1.0
                                - First release.
                            

GET STARTED

Folder Structure

Structure

_app.js Structure

Dependencies

package.json

                                "dependencies": {
                                "eslint": "^9.0.0",
                                "eslint-config-next": "16.1.1",
                                "gsap": "^3.12.5",
                                "next": "16.1.1",
                                "react": "^19.2.0",
                                "react-dom": "^19.2.0",
                                "react-modal-video": "^2.0.2",
                                "react-slick": "^0.29.0",
                                "slick-carousel": "^1.8.1",
                                "wowjs": "^1.1.3",
                                "@types/node": "^20.11.28",
                                "@types/react": "^19.0.0",
                                "@types/react-dom": "^19.0.0",
                                "typescript": "^5.3.3"
                            }
                            

Create a Page

Create page pages\blank.js

                                function Blank() {
                                    export function MyPage() {
                                      return(
                                       
Hello!
                                      )
                                    }
                                export default Blank;
                            

Routing

The Next.js router allows you to do client-side route transitions between pages, similar to a single-page application

A React component called Link is provided to do this client-side route transition.

In the example above we have multiple links, each one maps a path (href) to a known page:

• / → pages/index.js
• /page-about → pages/page-about.js

Any in the viewport (initially or through scroll) will be prefetched by default (including the corresponding data) for pages using Static Generation. The corresponding data for server-rendered routes is not prefetched.

Deployment

If you haven’t already done so, push your Next.js app to a Git provider of your choice: GitHub, GitLab, or BitBucket. Your repository can be private or public.

Then, follow these steps:

• Sign up to Vercel (no credit card is required).
• After signing up, you’ll arrive on the “Import Project” page. Under “From Git Repository”, choose the Git provider you use and set up an integration. (Instructions: GitHub / GitLab / BitBucket).
• Once that’s set up, click “Import Project From …” and import your Next.js app. It auto-detects that your app is using Next.js and sets up the build configuration for you. No need to change anything — everything should work just fine!
• After importing, it’ll deploy your Next.js app and provide you with a deployment URL
• To get more help on the deployment checkout

UPDATE

Important Note:

- Backup your website and template folders completely to make sure you have a restore point in case of any complications.

Update using FTP

1. Download the latest version of the template to your device.
2. Connect to your hosting via FTP software
3. Upload the template folder you unzipped to your site folder
4. You should be asked to confirm overwriting of this folder and its contents. Confirm the overwrite.

SOURCES & CREDITS

THANK YOU

Thank you so much for using this template.

- AliThemes Team -