https://github.com/ahmed-maher77/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.
https://github.com/ahmed-maher77/services-showcase-website
accessibility animation-css bootstrap boxicons css-animations eslint github-pages image-slider interactive-animations intersection-observer-api performance-optimization professional-ui reactjs responsive-design sass-framework scroll-tracking seo-friendly services-showcased vitejs website
Last synced: about 2 months ago
JSON representation
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.
- Host: GitHub
- URL: https://github.com/ahmed-maher77/services-showcase-website
- Owner: Ahmed-Maher77
- License: mit
- Created: 2025-10-01T22:16:28.000Z (8 months ago)
- Default Branch: main
- Last Pushed: 2025-10-01T23:19:32.000Z (8 months ago)
- Last Synced: 2025-10-02T00:21:39.310Z (8 months ago)
- Topics: accessibility, animation-css, bootstrap, boxicons, css-animations, eslint, github-pages, image-slider, interactive-animations, intersection-observer-api, performance-optimization, professional-ui, reactjs, responsive-design, sass-framework, scroll-tracking, seo-friendly, services-showcased, vitejs, website
- Language: JavaScript
- Homepage: https://ahmed-maher77.github.io/Services-Showcase-Website/
- Size: 5.2 MB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# 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/](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
---
## 📥 Installation Instructions for Local Setup
### Prerequisites
- Node.js (version 16 or higher)
- npm or yarn package manager
### Setup Steps
1. **Clone the repository**
```bash
git clone https://github.com/Ahmed-Maher77/Services-Showcase-Website.git
cd Services-Showcase-Website
```
2. **Install dependencies**
```bash
npm install
```
3. **Start development server**
```bash
npm run dev
```
4. **Open in browser**
```
http://localhost:5001
```
---
## 📬 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 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](LICENSE) file for details.
---
_Built with ❤️ by Ahmed Maher_