Nightfolio - Next.js Personal Portfolio Template

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
• 7 Projects Section variants
• cards
• 3-cards
• stacked-sticky-cards
• stacked-cards
• list
• side-cards
• cinematic
• 3 Services Section variants
• cards
• list
• slider
• 2 Contact Section variants
• contact-1
• contact-2
• 2 Footer variants
• footer-1
• footer-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
• Harmony
• Dynamic design
• 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
• Scalable Design System
• Production Ready
• 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
• services variants (list, cards) exists only on downloadable folder
• refresh the page when you inspect or checking the Responsive design

Help:

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

Reviews & future enhancements (important):

Your review is highly appreciated and helps improve future updates and enhancements, Both positive and negative reviews encourage me to keep improving and refining the product.

Change Log

• ○ v1.9 1/14/2025
  - add "cinematic" variant to portfolio section
  - add "slider" variant to services section
  - enhance home-1 section
            

• ○ v1.8 12/22/2025
  - add footer-1 & footer-2 variant (modern)
  - update project-list option variant (modern)
  - fix some UX issues
            

• ○ v1.7 12/17/2025
  - optimize & fix custom cursor
            

• V1.6: 12/12/2025
  - update to latest next v16.0.10 & react/react-dom v19.2.3
            

• V1.5: 12/6/2025
  - update to next v16.0.7 & react/react-dom v19.2.1
  - update the design
            

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

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

• 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.1 (10/31/2025)
  - remove useless code
  - fix navigation delay
  - optimize custom cursor performance
          

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

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