Project Overviewlink

Aliyo is a static single-page personal portfolio/resume HTML template featuring 13 complete pages including homepage, portfolio, blog, contact page, and more. It comes with responsive layout and various interactive animations, making it ideal for quickly building a personal website for designers or developers.

Tech Stacklink

• HTML5 + CSS3 (semantic structure)
• Bootstrap 5 (grid system and base components)
• Font Awesome 6 (icon library)
• Swiper (carousel/slideshow)
• Magnific Popup (image lightbox)
• Animate.css (page animations)
• MeanMenu (mobile hamburger menu)

Project Structurelink

aliyohtml-10/aliyo-html-package-file/
├── documentation/          # Template official documentation
│   └── index.html
└── download-version/        # Ready-to-use template files
    ├── index.html           # Homepage (style 1)
    ├── index2.html         # Homepage (style 2)
    ├── about.html           # About Me
    ├── blog.html            # Blog list
    ├── blog-details.html    # Blog post details
    ├── contact.html         # Contact page
    ├── project.html          # Portfolio list
    ├── project-details.html # Project details
    ├── service.html         # Services
    ├── pricing.html         # Pricing page
    ├── team.html            # Team members
    ├── faq.html              # FAQ
    ├── 404.html              # Error page
    └── assets/               # CSS, JS, images, and other static resources

Key Fileslink

• download-version/index.html — Main entry page of the template
• download-version/assets/css/main.css — All styles combined
• download-version/assets/css/bootstrap.min.css — Bootstrap framework styles
• download-version/assets/js/main.js — Interactive logic (please verify if it exists)
• documentation/index.html — Official documentation page
• download-version/contact.html — Contact form page

Quick Startlink

1. Deploy the contents of the download-version folder to a web server, or open index.html directly in a browser.
2. For local preview, it is recommended to use the Live Server extension in VS Code or run python -m http.server to start a lightweight server.
3. Edit personal information (such as name, contact details, social links) in each HTML file and replace placeholder content.

Usage Tipslink

• All pages share the same assets folder. To change the logo or global color scheme, simply modify the corresponding variables in main.css.
• The mobile menu relies on jQuery/MeanMenu. Make sure the relevant initialization code is properly included in main.js.
• Social links in the template are placeholders and need to be manually replaced with actual account URLs.