Project Overviewlink

lieon is a dark-themed personal portfolio HTML template designed for designers, photographers, full-stack developers, and others to showcase resumes, portfolios, and service capabilities. It includes 10 complete pages covering home, about, blog, portfolio, service details, and more, with GSAP scroll animations and mouse-following effects.

Tech Stacklink

• Bootstrap 5 (Layout & Responsive Grid)
• jQuery (Interaction Logic & DOM Manipulation)
• GSAP + ScrollTrigger (Advanced Scroll Animations)
• Font Awesome 6 + Icomoon (Icons)
• Sora (Google Fonts Primary Typeface)

Project Structurelink

lieon/
  index.html              # Homepage entry
  about.html              # About page
  blog.html               # Blog list
  blog-details.html       # Blog details
  contact.html            # Contact page
  portfolio.html          # Portfolio
  portfolio-details.html  # Portfolio details
  portfolio-slider.html   # Portfolio slider
  service.html            # Services page
  service-details.html    # Service details
  css/
    main.css              # Main stylesheet
    lib/
      bootstrap.min.css
      magnific-popup.css
      swiper-bundle.min.css
    fonts/
      font-awesome.css
      lieon-icon.css
  js/
    main.js               # All interaction logic (GSAP animations, lightbox, counters, etc.)
  image/                  # Page images and resources
  fonts/                  # Font files (.ttf/.woff2)

Core File Descriptionlink

• lieon/index.html — Template main entry, contains all modules
• lieon/js/main.js — Core interactions including animations, navigation, lightbox, infinite scroll
• lieon/css/main.css — Complete stylesheet (includes SCSS compilation output)
• lieon/css/lib/bootstrap.min.css — Bootstrap base styles and grid system
• lieon/css/lib/swiper-bundle.min.css — Carousel/slider styles
• documentation/ — Official template documentation directory

Quick Startlink

Pure static project, no dependencies required. Simply double-click lieon/index.html or use any local server (such as VS Code Live Server extension) to preview all pages.

Usage Suggestionslink

The template includes sample placeholder data. Modify the text and image paths in index.html and other page HTML files for quick deployment. For custom styling, it's recommended to modify main.css rather than SCSS source files. Animations are concentrated in the lieon object within main.js and can be commented out or adjusted as needed.