Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/gzixnine/portfolio
Welcome to my portfolio! 🌟 This repository highlights my expertise in front-end development, featuring diverse projects built with HTML, CSS, JavaScript, SCSS, PugJS, jQuery, GulpJS, and popular libraries. Explore my journey through interactive designs, responsive layouts, and optimized performance! 🚀
https://github.com/gzixnine/portfolio
accessibility gsap-animation isotope jquery portfolio portfolio-website pugjs seo-optimization textition vanilla-tilt
Last synced: 21 days ago
JSON representation
Welcome to my portfolio! 🌟 This repository highlights my expertise in front-end development, featuring diverse projects built with HTML, CSS, JavaScript, SCSS, PugJS, jQuery, GulpJS, and popular libraries. Explore my journey through interactive designs, responsive layouts, and optimized performance! 🚀
- Host: GitHub
- URL: https://github.com/gzixnine/portfolio
- Owner: GziXnine
- License: bsd-3-clause
- Created: 2024-11-21T05:26:17.000Z (about 1 month ago)
- Default Branch: main
- Last Pushed: 2024-12-02T19:07:15.000Z (22 days ago)
- Last Synced: 2024-12-02T19:43:57.605Z (22 days ago)
- Topics: accessibility, gsap-animation, isotope, jquery, portfolio, portfolio-website, pugjs, seo-optimization, textition, vanilla-tilt
- Language: SCSS
- Homepage: https://ahmadallam.netlify.app/
- Size: 40.2 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Portfolio ✨
Welcome to my **Portfolio**! This repository showcases my web development projects, highlighting my skills in **HTML**, **CSS**, **JavaScript**, **SASS**, **PugJs**, **GulpJS**, and more! 🚀
This portfolio includes various projects that demonstrate my proficiency in modern web development practices, responsive design, interactive functionality, and performance optimization. 😎
## Project Overview 🌟
This portfolio contains a collection of all my web development projects. It is designed to give you a comprehensive look at my skills and development journey. The portfolio features **responsive design**, **interactive features**, and showcases the use of various libraries and tools. 💻🎨
## 📸 Preview
## 📊 Development Time
## Technologies Used 🛠️
The following technologies and libraries were used to build the projects featured in this portfolio:
- **HTML5** 🧑💻: For structuring the content and layout.
- **CSS3** 🎨: For styling the pages and ensuring responsive designs.
- **SASS** 🧣: For writing modular, reusable, and maintainable styles.
- **PugJs** 🧩: For simplifying HTML generation with a cleaner and more readable structure.
- **JavaScript (Vanilla & jQuery)** 📜: For adding interactivity and dynamic content.
- **GulpJS** 🔧: For automating tasks like file minification, compilation, and more.
- **Bootstrap** 💼: For responsive grid systems and pre-designed components.
- **EmailJS** 📧: For integrating email sending functionality.
- **GSAP** 💨: For high-performance animations.
- **Isotope** 🧩: For filtering and sorting projects dynamically.
- **Particles.js** 🎆: For adding beautiful interactive particles effects.
- **Textition** ✍️: For transforming text content interactively.
- **Vanilla-Titl** 🏷️: For customizing the browser tab title dynamically.
- **SEO** 🔍: Optimized for search engines with clean HTML and metadata.
- **Accessibility** ♿: Ensures the portfolio is accessible to all users.
- **Performance Optimization** 🚀: Achieved 100% performance using modern techniques like lazy loading and code splitting.
## Key Features ✨
Here are some of the **key features** of this portfolio:
- **Responsive Design** 📱💻: Seamlessly adjusts to different screen sizes.
- **Interactive Layout** 🎮: Includes hover effects, smooth scrolling, and dynamic content loading.
- **SEO Optimized** 🌐: Fully optimized for search engines with well-structured metadata.
- **Accessibility Optimized** ♿: Ensures usability for all, including those with disabilities.
- **Performance 100% 🚀**: Achieved perfect performance scores using the latest best practices.
- **Project Showcase** 🖼️: Each project has detailed sections with technologies used, links, and more.
- **Animations with GSAP** 💥: Smooth animations to make the site more engaging.
- **Particles Effects** ✨: Beautiful, interactive particles in the background.
## Installation Instructions 💻
To view or work with the portfolio locally, follow these steps:
1. Clone this repository to your local machine using Git:
```bash
git clone https://github.com/GziXnine/Portfolio.git
```
2. Navigate into the portfolio directory:
```bash
cd Portfolio
```
3. Install the necessary dependencies using npm:
```bash
npm install
```
4. Run the development server:
```bash
npm run dev
```
5. Open your browser and view the portfolio locally at `http://localhost:8000.`
## Live Demo 🌍
You can view the live version of my portfolio here: [Live Demo 🚀](https://ahmadallam.netlify.app/)
## Usage 📑
To navigate through the portfolio, explore the following sections:
- **Home Page 🏠**:
- Key highlights of my professional journey and skills.
- A timeline showcasing my progress as an intern and trainee.
- **About Me 🧑💻**:
- An introduction to who I am and what I do.
- Insights into my background and journey in programming.
- Details about my **programming skills** in both front-end and back-end development.
- A showcase of my **language skills** and **soft skills**.
- **Knowledge 💡**:
- A summary of my experience with various libraries and frameworks.
- A list of **superficial knowledge** areas I’m currently exploring.
- **Services ⚙️**:
- A description of the services I offer, including web development and design.
- **Portfolio 📂**:
- A collection of my web development projects with detailed descriptions.
- Links to live demos and code repositories for each project.
- **Certificates 🏆**:
- A gallery of certifications I’ve earned in programming, development, and other relevant fields.
- **Blog ✍️**:
- Articles and insights on web development, coding practices, and my learning journey.
- **Contact Me 📧**:
- Ways to reach out to me for collaborations, inquiries, or professional opportunities.
Each section is designed to provide a comprehensive view of my skills, experience, and projects, making it easy to navigate and explore my portfolio. ✨
## Contributions 🤝
While this portfolio is a personal project, I welcome contributions that can improve its functionality, design, or content. If you'd like to contribute, feel free to fork the repository and submit a pull request. 💡
### Guidelines for Contributing:
1. Fork the repository.
2. Create a new branch for your changes.
3. Make your changes and commit them with clear, descriptive messages.
4. Push your changes and open a pull request.
## Contact Information 📫
If you have any questions or would like to reach out, you can contact me via:
- **GitHub**: [GziXnine](https://github.com/GziXnine)
- **LinkedIn**: [Ahmed Allam](https://www.linkedin.com/in/1ahmed-allam)
- **Telegram**: [Telegram](http://t.me/GziXnine)
## License 📜
This project is licensed under the BSD-3-Clause license - see the [LICENSE](LICENSE) file for details.
## SEO, Accessibility & Performance Optimization ⚡
### SEO 🔍
- Clean HTML structure for easy crawling by search engines.
- Proper use of meta tags for description, keywords, and social sharing.
- Structured data to improve visibility in search engines.
### Accessibility ♿
- Semantic HTML elements for screen readers and assistive technologies.
- High-contrast color schemes for improved readability.
- Focus states for interactive elements to support keyboard navigation.
### Performance 🚀
- Image optimization with lazy loading for faster load times.
- Code splitting and minification to reduce file size.
- 100% performance score on tools like Google Lighthouse.
---
These practices ensure that the portfolio is **search engine friendly**, **accessible to all users**, and **blazingly fast** while providing an excellent user experience. ✨