-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat: Update README with detailed sections and improvements
- Added SEO, accessibility, and performance best practices section. - Enhanced the "Usage" section with additional pages and detailed descriptions. - Included deployment status badge for Netlify. - Centered images in the README for better alignment. - Improved overall clarity and structure for better readability and user experience.
- Loading branch information
Showing
1 changed file
with
187 additions
and
1 deletion.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1 +1,187 @@ | ||
| # Portfolio | ||
| # 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 | ||
|
|
||
| <p align="center"> | ||
| <img src="https://img.shields.io/badge/Completion-100%25-brightgreen" alt="Completion Status"> | ||
| | ||
| <img src="https://visitor-badge.laobi.icu/badge?page_id=GziXnine/Portfolio" alt="Visitors"> | ||
| | ||
| <img src="https://img.shields.io/github/repo-size/GziXnine/Portfolio" alt="Repository Size"> | ||
| | ||
| <img src="https://api.netlify.com/api/v1/badges/6f3dc71c-450e-4c67-85fa-0643032058ba/deploy-status" alt="Deploy"> | ||
| </p> | ||
|
|
||
| ## 📊 Development Time | ||
|
|
||
| <p align="center"> | ||
| <img src="https://wakatime.com/badge/user/5a4657fe-4994-4a36-a877-a6882bc4ec6c/project/72fc83af-9391-40c5-addc-0265cbe2ef68.svg" alt="wakatime" /> | ||
|
|
||
| </p> | ||
|
|
||
|  | ||
|
|
||
| ## 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 ⚡ | ||
| <p align="center"> | ||
| <img width="600" src="https://github.com/GziXnine/Portfolio/blob/main/performance.png" alt="Portfolio Screenshot" /> | ||
| </p> | ||
| ### 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. ✨ | ||