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:

git clone https://github.com/mahmoud-khairy/portfolio-website.git

2. Navigate to the project directory:

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:

: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 file for details.

Contact

Mahmoud Khairy - [email protected]

Project Link: https://github.com/mahmoud-khairi/portfolio-website