Asli – AJAX Portfolio HTML5 Template preview 1

Asli – AJAX Portfolio HTML5 Template

bookmark

Asli is an AJAX Portfolio HTML5 template designed for creative professionals, featuring seamless page transitions without refresh, GSAP scroll animations, WebGL mask effects, and responsive layout. It includes a built-in preloader, custo...

HTML

Project Overview

Asli is an AJAX Portfolio HTML5 template designed for creative professionals, featuring seamless page transitions without refresh, GSAP scroll animations, WebGL mask effects, and responsive layout. It includes a built-in preloader, custom cursor follower, and Photoswipe image lightbox, making it ideal for building high-end portfolio websites.

Tech Stack

  • HTML5 / CSS3 (Sass)
  • JavaScript (Vanilla)
  • Gulp (Build Tool)
  • GSAP (GreenSock) — ScrollTrigger, ScrollToPlugin, MorphSVGPlugin
  • Photoswipe (Image Lightbox)

Project Structure

text
aslihtml-10/
├── HTML/
│   ├── index.html              # Main entry page
│   ├── css/
│   │   ├── main.css            # Theme styles (162 modules)
│   │   └── vendor.css          # Third-party library styles
│   └── js/
│       └── app.js              # Core application logic and configuration
├── SOURCE/
│   ├── gulpfile.js             # Gulp build configuration
│   └── package.json            # Dependency declaration
└── Documentation/
    └── index.html              # Documentation redirect page

Core File Description

  • HTML/index.html — Template main page, imports fonts, styles, and scripts
  • HTML/js/app.js — Application entry point, includes global configuration for AJAX navigation, animations, lightbox, etc.
  • HTML/css/main.css — 162 style modules covering all UI components across the site
  • SOURCE/gulpfile.js — Build rules for Sass compilation, CSS/JS minification, and hot reload
  • HTML/css/vendor.css — Styles for third-party components like Photoswipe

Quick Start

Method 1: Direct Preview (Pre-compiled HTML) Open HTML/index.html in a browser to view the result.

Method 2: Local Development

bash
cd aslihtml-10/SOURCE
npm install
gulp default
# Visit http://localhost:3000/

Usage Recommendations

Each HTML page in this template is a standalone complete structure. WebGL and non-WebGL versions (e.g., 02-01-01 vs 02-01-02) provide progressive enhancement options. When deploying, choose the appropriate animation scheme based on target performance.

help_outline

FAQ