Project Overviewlink

Metech (marked as Merga in the code) is a multi-purpose creative agency and personal portfolio HTML template, suitable for tech companies, consulting firms, or freelancers to build their official websites. The template includes homepage variants, service showcases, portfolio, blog, team, pricing, and other page types, featuring a dark theme with built-in GSAP animations and scroll interaction effects.

Tech Stacklink

• HTML5 + CSS3 (Native CSS + SCSS source files)
• Bootstrap 5 (Grid layout and base components)
• jQuery (DOM manipulation and plugin ecosystem)
• GSAP + ScrollTrigger (Advanced animations and parallax scrolling)
• Swiper (Carousel)
• Magnific Popup (Image/video lightbox)
• Font Awesome 6 (Icons)
• Google Fonts (Inter Tight, Poppins, Spline Sans)

Project Structurelink

metechhtml-10/
└── package/
    ├── documentation/          # Template usage documentation
    │   ├── index.html
    │   └── css/
    └── metech/                 # Template main files
        ├── index.html          # Homepage 1
        ├── index-2.html        # Homepage 2
        ├── about.html
        ├── services.html
        ├── service-details.html
        ├── projects.html
        ├── project-details.html
        ├── blog.html
        ├── blog-details.html
        ├── team.html
        ├── pricing.html
        ├── faq.html
        ├── contact.html
        ├── css/
        │   ├── main.css        # Core styles
        │   └── metech-icon.css # Custom icon font
        ├── fonts/              # Icon font files
        ├── img/                # Image resources
        ├── js/
        │   ├── main.js         # Interaction logic
        │   └── animation.js    # GSAP animation configuration
        └── scss/               # SCSS source files

Core File Descriptionlink

• metech/index.html — Homepage entry, includes top toolbar, navigation, slideshow area
• metech/css/main.css — Main stylesheet covering typography, layout, animations, and all visual rules
• metech/js/main.js — Interaction logic including sticky navigation, mobile menu, counter, lightbox, carousel, etc.
• metech/scss/ — SCSS source directory for easy secondary development and theme customization
• metech/css/metech-icon.css — Custom icon font stylesheet
• documentation/index.html — Official documentation containing file structure description and third-party dependency references

Quick Startlink

This project is a pure static template with no build steps required:

1. Open metech/index.html directly in a browser to preview
2. Or run using any local server (e.g., VS Code Live Server, http-server)
3. To modify page content, edit the HTML files directly; to modify styles, edit css/main.css or the scss/ directory

Usage Suggestionslink

• The template comes with built-in GSAP animations and scroll-triggered animations. To adjust animation effects, check the init() method in js/main.js and animation.js
• The SCSS directory provides complete source variable definitions. It's recommended to adjust colors and spacing uniformly by modifying SCSS variables, then recompile to CSS
• Mobile menu, lightbox, carousel, and other interactions depend on jQuery. Ensure jQuery library is correctly included at the bottom of the page before loading business scripts