🎓 ITI Academy Showcase

A modern, fully-responsive single-page landing application showcasing the Information Technology Institute (ITI) Academy's educational programs, featuring smooth scroll animations, interactive elements, and a professional user experience optimized for all devices.

---

🌐 Live Preview

👀 Watch Live Demo: https://ahmed-maher77.github.io/ITI-Academy-Showcase/

---

💻 Used Technologies

Frontend Technologies

• HTML5: Semantic markup structure providing accessibility and SEO optimization
• CSS3: Modern styling with custom properties, animations, flexbox, and grid layouts
• JavaScript (ES6+): Vanilla JavaScript for interactive features and DOM manipulation
• Bootstrap 5.3.8: Responsive UI framework for grid system, components, and utility classes
• Bootstrap Icons: SVG icon library for scalable vector graphics integration

JavaScript APIs

• Intersection Observer API: Performance-optimized scroll animation triggers with viewport detection
• ScrollSpy API: Automatic navigation highlighting based on scroll position
• DOM Event Listeners: Dynamic interactivity for user actions and page state management

CSS Features

• CSS Custom Properties: Centralized theme variables for maintainable styling
• CSS Animations & Keyframes: Smooth loader and fade effects for enhanced UX
• CSS Transforms: 2D/3D transformations for interactive hover states
• Media Queries: Responsive breakpoints (350px, 576px, 991px) for mobile-first design

External Integrations

• Google Fonts: Typography integration (Noto Sans Georgian, Manrope, Playfair Display, Roboto)
• YouTube Embed API: Responsive video player with 16:9 aspect ratio

Hosting & Deployment

• Frontend Hosting: GitHub Pages
• Version Control: Git
• Package Manager: NPM

---

✨ Key Features

Visual & Animation Features

• Animated Page Loader: Professional double-bounce spinner with gradient background and smooth fade-out transition
• Scroll-Triggered Animations: Four animation types (fade-up, fade-in-left, fade-in-right, scale-in) using Intersection Observer for performance
• Staggered Animation Delays: Sequential reveals (0s, 0.1s, 0.2s, 0.3s) for feature cards creating depth and hierarchy
• Smooth Transitions: Consistent 0.3s-0.8s ease timing across all interactive elements

Navigation & UX

• Sticky Navigation Bar: Fixed-position navbar with professional gradient design and backdrop blur effect
• Active Section Highlighting: Real-time navigation updates based on scroll position using ScrollSpy
• Smooth Scroll Anchors: Seamless navigation between sections (Home, Features, Testimonials, Contact)
• Mobile-Responsive Menu: Collapsible hamburger navigation optimized for touch devices

Content Sections

• Hero Welcome Section: Compelling introduction with professional copy highlighting ITI's mission
• Features Showcase: Grid layout displaying four key benefits (Expert Instructors, Practical Labs, Market-Oriented Training, Continuous Evaluation)
• Interactive Testimonials: Bootstrap carousel with student reviews, profile images, and social links
• Video Experience Section: Embedded YouTube player with responsive aspect ratio and accessibility features
• Call-to-Action Footer: Contact section with enrollment CTAs and external resource links

Design & Interactivity

• Sidebar Visual Navigation: Vertical image navigation with 360° rotation hover effects
• Dynamic Hover States: Transform animations on cards, links, SVG icons, and buttons
• Card-Based Layouts: Feature cards with color-coded badges, icons, and 3-line text truncation
• Professional Color Palette: Dark navy (#1a1d29), blue (#4a90e2), and green (#2ecc71) accent scheme
• Responsive Typography: Fluid font sizing using CSS clamp() for optimal readability across devices

Performance & Accessibility

• Lazy Animation Loading: Animations initialize only after page loader completes for optimized performance
• Semantic HTML Structure: Proper heading hierarchy and ARIA labels for screen reader compatibility
• Mobile-First Approach: Progressive enhancement from mobile to desktop breakpoints
• Image Optimization: Properly sized and compressed images with descriptive alt text

---

📸 Website Preview

---

📁 Project Structure

Task02/
├── index.html              # Main HTML file with semantic structure
├── packages/               # project dependencies
    └── bootstrap/
        ├── dist/
        │   ├── css/       # Bootstrap CSS framework
        │   └── js/        # Bootstrap JavaScript bundle
├── README.md               # Project documentation
│
├── css/
│   └── style.css          # Custom styles (variables, animations, responsive design)
│
├── images/                # Image assets

Folder Descriptions

• css/: Contains all custom stylesheets including theme variables, animations, and responsive media queries
• images/: Static assets including logos, feature images, profile pictures, and decorative graphics
• node_modules/: Third-party dependencies managed by NPM (Bootstrap framework)

---

📬 Contact & Contribution

• 🧑‍💻 Portfolio: https://ahmedmaher-portfolio.vercel.app/
• 🔗 LinkedIn: https://www.linkedin.com/in/ahmed-maher-algohary
• 📧 Email: ahmedmaher.dev1@gmail.com

Contributions, suggestions, and bug reports are welcome. Feel free to open issues or pull requests.

---

⭐ Support

If you found this project helpful, please consider giving it a ⭐️ on GitHub!

---

📄 License

This project is licensed under the MIT License - see the LICENSE file for details.

---

Built with ❤️ by Ahmed Maher