🌍 Khalil Charfi - Multilingual Full-Stack Developer Portfolio

Welcome to my multilingual portfolio showcasing my expertise as a Full-Stack Developer specializing in Vue.js, Angular, Laravel, and more. This repository powers my personal website hosted on GitHub Pages.

---

📌 Table of Contents

1. About the Project
2. Features
3. Languages Supported
4. SEO Optimization
5. How It Works
6. Deployment
7. Contributions
8. License
9. Contact

---

🌟 About the Project

This project is a multilingual portfolio website designed to showcase my skills, projects, and experience as a Full-Stack Developer. It supports multiple languages and ensures a seamless user experience with proper SEO optimization.

The site is built using:

• HTML5, CSS3, and JavaScript
• Three.js for 3D animations
• Charming.js for text morphing effects
• GitHub Pages for hosting

---

✨ Features

• Multilingual Support: Automatically redirects users based on their browser language (English, French, Arabic, German).
• Responsive Design: Fully responsive layout for all devices and screen sizes.
• SEO Optimization: Includes meta tags, Open Graph tags, Twitter cards, hreflang tags, and schema markup.
• Fallback Mechanism: Provides manual language selection if JavaScript is disabled.
• 3D Animations: Interactive 3D objects powered by Three.js.
• Text Morphing: Dynamic text animations using Charming.js.
• Favicons: Comprehensive favicon setup for all devices and browsers.

---

🌐 Languages Supported

The portfolio is available in the following languages:

• English (/en/)
• French (/fr/)
• Arabic (/ar/) (RTL support)
• German (/de/)

Each language version includes localized content, metadata, and SEO tags.

---

🔍 SEO Optimization

The site is fully optimized for search engines with:

• Meta Tags: Descriptions, keywords, and author information.
• Open Graph Tags: For social media sharing (Facebook, LinkedIn).
• Twitter Cards: For Twitter sharing.
• Hreflang Tags: For multilingual SEO.
• Schema Markup: Structured data for search engines.
• Canonical URLs: Prevents duplicate content issues.
• Sitemap: Helps search engines index all pages.

---

⚙️ How It Works

1. Redirection Logic:

   • The root index.html detects the user's browser language and redirects them to the appropriate language folder (/en/, /fr/, /ar/, /de/).
   • If JavaScript is disabled, fallback links allow manual navigation.

2. 3D Animations:

   • Two rotating 3D objects (Octahedron and Icosahedron) are rendered using Three.js.
   • The objects dynamically resize based on the screen dimensions for responsiveness.

3. Text Morphing:

   • The title text animates with random characters before settling into the final text using Charming.js.

---

🚀 Deployment

This site is hosted on GitHub Pages. To deploy your own version:

1. Fork this repository.
2. Update the content in each language folder (/en/, /fr/, /ar/, /de/) with your details.
3. Push your changes to the main branch.
4. Enable GitHub Pages in your repository settings:
   • Go to Settings > Pages.
   • Select the main branch as the source.
5. Your site will be live at https://<username>.github.io.

---

🤝 Contributions

Feel free to fork this repository and customize it for your own portfolio. If you find any issues or have suggestions for improvements, please open an issue or submit a pull request.

---

📜 License

This project is licensed under the MIT License. See the LICENSE file for details.

---

📧 Contact

If you have any questions or want to collaborate, feel free to reach out:

• Email: [email protected]
• GitHub: @khalilcharfi
• LinkedIn: Khalil Charfi
• Twitter: @khalilcharfi8

---

🌟 Live Demo

Visit the live site: Khalil Charfi's Portfolio