Skip to content

A modern, responsive, and accessible website showcasing Ahmed Maher's full-stack development services. Features interactive animations, service details modals, image slider, and comprehensive contact information with professional UI/UX design.

License

Notifications You must be signed in to change notification settings

Ahmed-Maher77/Services-Showcase-Website

Repository files navigation

Services Showcase Website

A modern, responsive, and accessible website showcasing Ahmed Maher's full-stack development services. Features interactive animations, service details modals, image slider, and comprehensive contact information with professional UI/UX design.


🌐 Live Preview

👀 Watch Live Demo: https://ahmed-maher77.github.io/Services-Showcase-Website/


🎥 Demo Video

Watch the Demo on LinkedIn: coming soon


💻 Used Technologies

Frontend:

  • React JS - Modern UI library for building interactive, component-based user interfaces
  • Vite - Lightning-fast build tool and development server for optimal performance
  • Bootstrap - Comprehensive CSS framework ensuring responsive design and consistent styling
  • Sass / Scss - Advanced CSS preprocessor enabling modular and maintainable stylesheets
  • Boxicons - Professional icon library providing consistent visual elements
  • ESLint - Code quality tool ensuring maintainable and consistent JavaScript code
  • Intersection Observer API - Native browser API powering smooth scroll-triggered animations
  • CSS3 Animations - Pure CSS animations with custom timing functions for enhanced user experience

Hosting:

  • GitHub Pages - Static site hosting directly from your GitHub repository, enabling free and fast deployment of our React app

✨ Key Features

  • 🎨 Responsive Design - Mobile-first approach with seamless cross-device compatibility
  • Accessibility Features - Skip navigation, ARIA labels, and keyboard navigation support
  • 🎬 Interactive Animations - Scroll-triggered animations using Intersection Observer API
  • 🛠️ Service Showcase - 10+ comprehensive development services with detailed information modals
  • 🖼️ Image Slider - Professional carousel component with indicators and manual controls
  • Performance Optimized - Lazy loading, code splitting, and efficient animation system
  • 📱 Mobile Responsive - Optimized for all screen sizes and devices
  • 🎯 Scroll Tracking - Active navigation highlighting based on user scroll position
  • 🔄 Reusable Components - Modular architecture with reusable modal and animation systems
  • 🎭 Professional Loader - Smooth initial loading screen with elegant transitions
  • 📞 Contact Integration - Social media links and comprehensive contact information
  • 🔍 SEO Ready - Semantic HTML structure and meta tags for search engine optimization

📸 Website Preview

website preview - UI Mockup

📥 Installation Instructions for Local Setup

Prerequisites

  • Node.js (version 16 or higher)
  • npm or yarn package manager

Setup Steps

  1. Clone the repository

    git clone https://github.com/Ahmed-Maher77/Services-Showcase-Website.git
    cd Services-Showcase-Website
  2. Install dependencies

    npm install
  3. Start development server

    npm run dev
  4. Open in browser

    http://localhost:5001
    

📬 Contact & Contribution

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


⭐ Support

If you found this project helpful or inspiring, please consider giving it a ⭐. Your support helps me grow and share more open-source projects like this!


📄 License

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


Built with ❤️ by Ahmed Maher

About

A modern, responsive, and accessible website showcasing Ahmed Maher's full-stack development services. Features interactive animations, service details modals, image slider, and comprehensive contact information with professional UI/UX design.

Topics

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

 
 
 

Contributors