https://github.com/mahmoud-khairy/portfolio
A responsive and animated portfolio website showcasing professional experience, skills, and projects with elegant animations and modern design elements.
https://github.com/mahmoud-khairy/portfolio
apu css dmu engineering frontend html html-css-javascript mechatronics portfolio portfolio-website website
Last synced: 6 days ago
JSON representation
A responsive and animated portfolio website showcasing professional experience, skills, and projects with elegant animations and modern design elements.
- Host: GitHub
- URL: https://github.com/mahmoud-khairy/portfolio
- Owner: mahmoud-khairy
- License: apache-2.0
- Created: 2025-02-19T13:44:51.000Z (8 months ago)
- Default Branch: main
- Last Pushed: 2025-02-19T16:03:20.000Z (8 months ago)
- Last Synced: 2025-05-21T09:11:34.699Z (5 months ago)
- Topics: apu, css, dmu, engineering, frontend, html, html-css-javascript, mechatronics, portfolio, portfolio-website, website
- Language: CSS
- Homepage: https://mahmoud-khairy.github.io/Portfolio/
- Size: 1.18 MB
- Stars: 2
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Modern Portfolio Website
A responsive and animated portfolio website showcasing professional experience, skills, and projects with elegant animations and modern design elements.
## Features
### Visual Design
- Modern, minimalist design with a sophisticated gold and dark color scheme
- Responsive layout that adapts seamlessly across all device sizes
- Custom animated background with geometric patterns and subtle movements
- Smooth scrolling and transition effects
- Dynamic hover states and interactive elements
### Technical Implementation
- Vanilla JavaScript with GSAP for advanced animations
- CSS Grid and Flexbox for responsive layouts
- SVG animations and manipulations
- Scroll-triggered animations using GSAP ScrollTrigger
- Mobile-first responsive design
- Optimized performance with hardware acceleration
### Key Sections
- Hero section with animated introduction
- About section with personal information
- Education and experience timeline
- Skills showcase with animated illustrations
- Project portfolio with hover effects
- Contact section with social media integration
## Technologies Used
- HTML5
- CSS3
- JavaScript (ES6+)
- GSAP (GreenSock Animation Platform)
- Font Awesome Icons
- Google Fonts
- SVG Animations
## Getting Started
1. Clone the repository:
```bash
git clone https://github.com/mahmoud-khairy/portfolio-website.git
```
2. Navigate to the project directory:
```bash
cd portfolio-website
```
3. Open `index.html` in your web browser to view the website.
## Browser Support
The website is compatible with:
- Chrome (latest)
- Firefox (latest)
- Safari (latest)
- Edge (latest)
## Performance Optimization
- Minified CSS and JavaScript files
- Optimized SVG illustrations
- Lazy loading of images
- Hardware-accelerated animations
- Efficient animation techniques using GSAP
## Customization
### Colors
The color scheme can be modified in the `styles.css` file:
```css
:root {
--gold: #C4A467;
--gold-light: #E2C992;
--gold-dark: #9A7A3E;
--dark: #0A0A0A;
--darker: #050505;
--light: #FFFFFF;
--gray: #808080;
}
```
### Animations
Animation timings and effects can be adjusted in the `script.js` file within the various animation functions:
- `heroAnimation()`
- `aboutAnimation()`
- `skillsAnimation()`
- `timelineAnimation()`
- `projectsAnimation()`
## Contributing
1. Fork the repository
2. Create your feature branch (`git checkout -b feature/AmazingFeature`)
3. Commit your changes (`git commit -m 'Add some AmazingFeature'`)
4. Push to the branch (`git push origin feature/AmazingFeature`)
5. Open a Pull Request
## License
This project is licensed under the Appache License - see the [LICENSE](LICENSE) file for details.
## Contact
Mahmoud Khairy - tp066167@mail.apu.edu.my
Project Link: [https://github.com/mahmoud-khairi/portfolio-website](https://github.com/mahmoud-khairi/portfolio-website)