Project Overviewlink

JAYDEN is a creative personal portfolio HTML template featuring 12 homepage variations, with support for video backgrounds, sidebar navigation, scroll animations, and other interactive effects. It is ideal for freelancers, designers, or creative professionals building personal websites.

Tech Stacklink

• HTML5 / CSS3
• Bootstrap 5
• SASS (requires compilation to CSS)
• Swiper (carousel), Lightbox (image preview), Odometer (number animation)

Project Structurelink

jayden-mainfiles/
├── documentation/          # Official documentation (HTML format)
└── jayden/
    ├── index.html          # Homepage (default)
    ├── home1-v2.html ~ home1-v6.html
    ├── home2.html ~ home2-v6.html
    ├── landing.html        # Landing page
    ├── blog-single.html
    ├── blog-standard.html
    ├── blog-two-columns.html
    ├── blog-three-columns.html
    └── asset/
        ├── css/            # Compiled styles
        ├── scss/           # Source files (requires compilation)
        ├── font/           # Font files
        ├── icons/          # Icons
        └── images/         # Images (including video backgrounds)

Core File Descriptionlink

• index.html — Homepage entry, includes video background and sidebar menu
• landing.html — Clean landing page template
• asset/scss/app.scss — SASS source entry, requires compilation to CSS
• asset/css/styles.css — Compiled main stylesheet
• blog-*.html — 4 blog list/detail page templates

Quick Startlink

# 1. Navigate to template directory
cd jayden-mainfiles/jayden

# 2. Install Sass (if not already installed)
npm install -g sass

# 3. Watch SASS changes and auto-compile
sass asset/scss/app.scss asset/css/styles.css --watch

# 4. Open index.html directly in browser to preview

Usage Suggestionslink

• Modify variable files in asset/scss/ to quickly adjust theme colors and fonts; if not using SASS, editing asset/css/styles.css directly also works, but maintenance costs will be higher in the long run.
• The homepage video files are located in asset/images/bg-3d/ and can be replaced with local assets to improve loading speed.