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. 😎
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. 💻🎨
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.
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.
To view or work with the portfolio locally, follow these steps:
-
Clone this repository to your local machine using Git:
git clone https://github.com/GziXnine/Portfolio.git
-
Navigate into the portfolio directory:
cd Portfolio -
Install the necessary dependencies using npm:
npm install
-
Run the development server:
npm run dev
-
Open your browser and view the portfolio locally at
http://localhost:8000.
You can view the live version of my portfolio here: Live Demo 🚀
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. ✨
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. 💡
- Fork the repository.
- Create a new branch for your changes.
- Make your changes and commit them with clear, descriptive messages.
- Push your changes and open a pull request.
If you have any questions or would like to reach out, you can contact me via:
- GitHub: GziXnine
- LinkedIn: Ahmed Allam
- Telegram: Telegram
This project is licensed under the BSD-3-Clause license - see the LICENSE file for details.
- 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.
- 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.
- 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. ✨