Documentation:

Nightfolio Documentation

Nightfolio is availiable in HTML (node.js is optional):

$\\$

Nightfolio – HTML Personal Portfolio Template

All Features

Attractive Hero Sections
Theme Section Variants & Flexibility
GSAP – Animations While Scrolling
Real Showcase
Modern & Sleek Design
Next.js 15 – Tailwind 4 – Typescript 5 – React.js 19
3 Home Section variants

home-1
home-2
home-3

2 Clients/Testimonials variants

cards
stacked-sticky-cards

6 Projects Section variants

cards
3-cards
stacked-sticky-cards
stacked-cards
list
side-cards

2 Services Section variants

cards
list

2 Contact Section variants

contact-1
contact-2

Smooth Scrolling

true (toggled on)
false (toggled off)

Custom Cursor

true (toggled on)
false (toggled off)

Dark & Light mode

true (dark)
false (light)

Parallax
Visual hierarchy
Bold Typography
Perfect For Developers/Designers/UI&UX
High Performance Both In Desktop & Mobile
High Contrast
Constantly & Free Updates
100% SEO
Open To Suggestions
Quick and free of stuffing
Easy Customization
No Jquery dependency
Well Coded & Clean Script without any errors
Well Documented with deployment guide
Structured Folders
Straightforward
Modern design & UI/UX
Fully Responsive
Contact Form Working
Css variables for Customization

Why Next.js?

While setting up a Next.js app requires Node.js and some terminal commands:

it provides a very simple way to modify and manage portfolio content
Structured Folder
Image Optimization
Server-Side Rendering giving faster load times and better SEO
Easy Configration
Easy to deploy the theme to vercel (free)
Modern and Compatible with Tailwind css, Typescript, React

Files included:

Typescript files: .ts, .tsx
Placeholder images: .png, .jpg
svg: .svg
PDF CV file: .pdf
Environment Variables: file .env
2 CSS files: .css

How To Edit:

public/images folder to add images
src/data folder to add sections data files
.env file to add contact form data

Technologies:

next.js
typescript
tailwind css

Libraries:

gsap
lucide-react
fortawesome
shadcn-ui
zod
react-hook-form
clsx
tailwind-merge
motion/react

Edit Template:

You need to have text editor program installed on your system. Just open files in code writer and edit them easily.

Notes:

this template not wordpress theme
images used in demo preview only
theme variants panel in demo preview only, in downloadable theme folder you can change theme variant in /src/data/config.ts

Help:

If you have any problems or confusion, questions or ideas, suggestions, Please Contact Me anytime.

Change Log

```
v1.0 (10/14/2025) - initial release
```

v1.1 (10/31/2025)
- remove useless code
- fix navigation delay
- optimize custom cursor performance

v1.2 (11/11/2025)
- remove useless code
- optimize overall performance
- add an Updates section to the documentation to guide users on what to do after downloading a new update.

v1.3: 11/21/2025
- add parallax in footer
- update to next.js v16.0.3
- add text animation in buttons

V1.4: 11/23/2025
- optimize fill text animation
- optimize ticker performance
- enhance footer parallax

Credits:

Free fonts google fonts
Free icons from lucide react
Free icons from fontawesome
Free 3D service icons images from 3dicons
arrow svg from & tool icons svgrepo
hero & about image from unsplash

Nightfolio - Next.js Personal Portfolio Template