Nightfolio - HTML Personal Portfolio Template
Documentation:
- Nightfolio Documentation
Nightfolio is availiable in Next.js:
- Nightfolio – Next.js Personal Portfolio Template
All Features
- Attractive Hero Sections
- Theme Section Variants & Flexibility
- GSAP – Animations While Scrolling
- Real Showcase
- Modern & Sleek Design
- 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
- Dark & Light mode
-
<html class="dark">...</html>(dark) -
<html class="">...</html>(light) - Parallax
- Visual hierarchy
- Bold Typography
- Perfect For Developers/Designers/UI&UX
- High Performance Both In Desktop & Mobile
- High Contrast
- Constantly Free Updates & New Variants
- 100% SEO
- Open To Suggestions
- Fancy Preloader
- Form Validation & Feedback
- Quick and free of stuffing
- Easy Customization
- No Jquery dependency
- Well Coded & Clean Script without any errors
- Well Documented
- Structured Folders
- Straightforward
- Modern design & UI/UX
- Fully Responsive
- Contact Form Working
- Css variables for Customization
Why HTML?
- Lightweight and Fast
- SEO-Friendly by Nature
- Perfect for Static Portfolios
Files included:
- html files: index.html, home-1.html, home-2.html, home-3.html
- Placeholder images: .png, .jpg
- svg: .svg
- PDF CV file: .pdf
- Environment Variables: file .env
- CSS files: .css
- JS files: .js
- PHP files: .php
How To Edit:
- public/images folder to add images
- src/js/data folder to add sections data files
- .env file to add contact form data
Technologies:
- HTML
- Javascript with GSAP
- tailwind css
- PHP
Libraries:
- gsap
- lenis
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
- node.js is needed only if you want to add new tailwind css classes or modify tailwind styles
- images used in demo preview only
- theme variants panel in demo preview only, in downloadable theme folder you can change theme variant in /src/js/data/config.js
Help:
- If you have any problems or confusion, questions or ideas, suggestions, Please Contact Me anytime.
Change Log
○ v1.0 (11/7/2025) - initial release
-
○ v1.1 (11/28/2025): - optimize ticker slider - optimize parallax - optimize text animation
-
○ v1.2 (12/19/2025): - enhance side card animation - enhance contact-1 design
Credits:
- Free fonts google fonts
- Free icons from fontawesome
- Free 3D service icons images from 3dicons
- svg icons from svgrepo
- hero & about image from unsplash