Merge branch 'main' of https://github.com/amirallami-code/amirhosseinallami.com

Author: amirallami-code

README.md

@@ -1,67 +1,185 @@
-# Amirhossein Allami - Portfolio
-
-![License](https://img.shields.io/badge/license-MIT-blue.svg)
-![GitHub Release](https://img.shields.io/github/v/release/amirallami-code/amirallami.com)
-![GitHub last commit](https://img.shields.io/github/last-commit/amirallami-code/amirallami.com)
-![GitHub stars](https://img.shields.io/github/stars/amirallami-code/amirallami.com?style=flat&color=yellow)
-![Forks](https://img.shields.io/github/forks/amirallami-code/amirallami.com?style=flat&color=yellow)
-
-Welcome to my personal portfolio website! This is a modern, responsive, and performance-optimized showcase of my work as a **Frontend Developer** and **Graphic Designer**. Explore my projects, skills, and creative journey at [amirallami.com](https://amirallami.com).
-
----
-
-## ✨ Features
-
-- **Fully Responsive Design**: Optimized for seamless viewing across all devices, from desktops to mobile phones.
-- **Performance Optimization**: Utilizes **vanilla lazyload library** for faster image loading and improved performance.
-- **Dynamic Content**: Leverages the GitHub API to display real-time project updates and contributions.
-- **Interactive UI**: Engaging user interface elements with smooth animations and transitions.
-- **Dark/Light Mode**: A toggleable theme for personalized user experience.
-- **Project Showcase**: Detailed project descriptions with live demos and source code links.
-- **Skills & Technologies**: A comprehensive breakdown of my technical expertise and tools.
-- **Contact Form**: An integrated form for easy communication and collaboration inquiries.
-
----
-
-## 🛠️ Technologies Used
-
-- **Frontend**: HTML5, CSS3, JavaScript
-- **Styling Framework**: Tailwind CSS v3
-- **Performance**: Vanilla Lazyload Library
-- **Hosting**: Vercel
-- **APIs**: GitHub API
-- **Version Control**: Git
-
----
+<div align="center">
+  
+# Amirhossein Allami | Personal Portfolio
+  
+![GitHub stars](https://img.shields.io/github/stars/amirallami-code/amirallami.com?style=for-the-badge&color=507dbb)
+![GitHub forks](https://img.shields.io/github/forks/amirallami-code/amirallami.com?style=for-the-badge&color=507dbb)
+![GitHub last commit](https://img.shields.io/github/last-commit/amirallami-code/amirallami.com?style=for-the-badge&color=507dbb)
+![License](https://img.shields.io/badge/license-MIT-blue?style=for-the-badge&color=507dbb)
+![Website Status](https://img.shields.io/website?url=https%3A%2F%2Famirallami.com&style=for-the-badge&color=green)
+
+<br>
+
+**Modern | Responsive | Performance-Optimized**
+
+[View Live Site](https://amirallami.com) · [Report Bug](https://github.com/amirallami-code/amirallami.com/issues) · [Request Feature](https://github.com/amirallami-code/amirallami.com/issues)
+
+</div>
+
+## 📋 Overview
+
+A meticulously crafted professional portfolio website showcasing my journey and expertise as a **Front-end Developer** and **Designer**. Built with performance and user experience at its core, the site features responsive design, dynamic content integration with GitHub API, and thoughtfully implemented animations.
+
+## ✨ Key Features
+
+- **Interactive Code Editor UI** - Engaging hero section with animated code display
+- **Dynamic GitHub Integration** - Real-time repository data using GitHub API
+- **Bilingual Support** - Content in both English and Persian
+- **Performance Optimization** - Lazy loading, deferred scripts, and optimized assets
+- **Dark/Light Mode** - System-preference and user-toggleable theme
+- **Responsive Design** - Seamless experience across all devices
+- **Animated Sections** - Engaging UI with smooth transitions and microinteractions
+- **Accessibility Focused** - WCAG compliance for inclusive user experience
+- **SEO Optimized** - Structured metadata and semantic HTML
+- **Certificate Showcase** - Dynamic display of professional certifications
+- **Tech Stack Visualization** - Interactive display of skills and proficiency
+
+## 🛠️ Technology Stack
+
+<table>
+  <tr>
+    <td align="center"><strong>Frontend</strong></td>
+    <td>
+      <img src="https://img.shields.io/badge/HTML5-E34F26?style=flat-square&logo=html5&logoColor=white" alt="HTML5">
+      <img src="https://img.shields.io/badge/CSS3-1572B6?style=flat-square&logo=css3&logoColor=white" alt="CSS3">
+      <img src="https://img.shields.io/badge/JavaScript-F7DF1E?style=flat-square&logo=javascript&logoColor=black" alt="JavaScript">
+    </td>
+  </tr>
+  <tr>
+    <td align="center"><strong>Styling</strong></td>
+    <td>
+      <img src="https://img.shields.io/badge/Tailwind_CSS-38B2AC?style=flat-square&logo=tailwind-css&logoColor=white" alt="Tailwind CSS">
+    </td>
+  </tr>
+  <tr>
+    <td align="center"><strong>Performance</strong></td>
+    <td>
+      <img src="https://img.shields.io/badge/Vanilla_Lazyload-8DD6F9?style=flat-square&logo=webpack&logoColor=black" alt="Vanilla Lazyload">
+    </td>
+  </tr>
+  <tr>
+    <td align="center"><strong>Animation</strong></td>
+    <td>
+      <img src="https://img.shields.io/badge/Custom_CSS_Animations-FF9E0F?style=flat-square&logo=css3&logoColor=white" alt="Custom CSS">
+      <img src="https://img.shields.io/badge/Creattie-0081CB?style=flat-square&logo=material-ui&logoColor=white" alt="Creattie">
+    </td>
+  </tr>
+  <tr>
+    <td align="center"><strong>API Integration</strong></td>
+    <td>
+      <img src="https://img.shields.io/badge/GitHub_API-181717?style=flat-square&logo=github&logoColor=white" alt="GitHub API">
+    </td>
+  </tr>
+  <tr>
+    <td align="center"><strong>Deployment</strong></td>
+    <td>
+      <img src="https://img.shields.io/badge/Vercel-000000?style=flat-square&logo=vercel&logoColor=white" alt="Vercel">
+    </td>
+  </tr>
+  <tr>
+    <td align="center"><strong>Version Control</strong></td>
+    <td>
+      <img src="https://img.shields.io/badge/Git-F05032?style=flat-square&logo=git&logoColor=white" alt="Git">
+      <img src="https://img.shields.io/badge/GitHub-181717?style=flat-square&logo=github&logoColor=white" alt="GitHub">
+    </td>
+  </tr>
+</table>
+
+## 🔍 File Structure
+
+```
+amirallami.com/
+├── images/                 # Image assets
+│   ├── github/            # GitHub section assets
+│   ├── favicon.png        # Site favicon
+│   └── ...                # Other image assets
+├── js/
+│   ├── app.js             # Main application logic
+│   ├── data.js            # Data management
+│   ├── generator.js       # Dynamic content generation
+│   ├── github-card.js     # GitHub API integration
+│   ├── loader.js          # Page loading optimization
+│   └── theme.js           # Theme management
+├── output.css             # Compiled Tailwind CSS
+├── index.html             # Main entry point
+└── README.md              # Project documentation
+```
+
+## 🚀 Performance Optimizations
+
+- **Deferred Script Loading** - Non-critical JavaScript loaded after page render
+- **Lazy Loading Images** - Using vanilla-lazyload for on-demand asset loading
+- **Conditional Animation Loading** - Animations loaded only after page content
+- **Resource Hints** - Preconnect and DNS prefetch for external resources
+- **Content Visibility** - Optimized rendering of off-screen content
+- **CSS Delivery Optimization** - Print-first loading strategy with fallback
+- **Minified Assets** - Reduced file sizes for faster downloads
+- **Dynamic Imports** - Module loading on demand
+
+## 📊 GitHub API Integration
+
+The portfolio leverages the GitHub API to showcase real-time repository data, including:
+
+- Repository count
+- Follower metrics
+- Star counts
+- Recent activity
+- Project highlights
+
+This creates a dynamic, always up-to-date display of my development work without manual updates.
+
+## 🎨 Design Features
+
+- **Code Editor UI** - Custom-built code editor with syntax highlighting
+- **Responsive Layout** - Mobile-first approach with optimized breakpoints
+- **Custom Animations** - Thoughtfully implemented for engagement without performance impact
+- **Color Scheme** - Professional palette with brand color (#507dbb) and complementary accents
+- **Typography** - Custom font implementation with optimized loading
+- **Accessibility** - Color contrast compliance and semantic structure
+
+## 💻 Local Development
+
+```bash
+# Clone the repository
+git clone https://github.com/amirallami-code/amirallami.com.git
+
+# Navigate to directory
+cd amirallami.com
+
+# Open in browser (or use your preferred method)
+open index.html
+```
 
 ## 🤝 Contributing
 
-I welcome contributions, suggestions, and feedback! If you'd like to contribute:
+Contributions are what make the open-source community an amazing place to learn, inspire, and create. Any contributions you make are **greatly appreciated**.
 
-1. Fork the repository.
-2. Create a new branch for your feature or bugfix.
-3. Submit a pull request with a detailed description of your changes.
+1. Fork the Project
+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
 
-For major changes, please open an issue first to discuss your ideas.
+## 📝 License
 
-[View Open Issues](https://github.com/amirallami-code/amirallami.com/issues)
+Distributed under the MIT License. See `LICENSE` for more information.
 
----
-
-## 📄 License
+## 📬 Contact
 
-This project is licensed under the **MIT License**. See the [LICENSE](https://choosealicense.com/licenses/mit/) file for details.
+Amirhossein Allami - [amirallami.dev@gmail.com](mailto:amirallami.dev@gmail.com)
 
----
+Portfolio: [https://amirallami.com](https://amirallami.com)
 
-## 📧 Contact
+GitHub: [amirallami-code](https://github.com/amirallami-code)
 
-- **Name**: Amirhossein Allami
-- **Email**: [amirallami.dev@gmail.com](mailto:amirallami.dev@gmail.com)
-- **Portfolio**: [https://amirallami.com](https://amirallami.com)
-- **GitHub**: [amirallami-code](https://github.com/amirallami-code)
-- **Project Link**: [https://github.com/amirallami-code/amirallami.com](https://github.com/amirallami-code/amirallami.com)
+Project Link: [https://github.com/amirallami-code/amirallami.com](https://github.com/amirallami-code/amirallami.com)
 
 ---
 
-⭐ If you find this project helpful or inspiring, please consider giving it a **star** on GitHub! Your support is greatly appreciated.
+<div align="center">
+  
+ **If you found this project helpful, please consider giving it a star!** 
+
+Made with ❤️ by [Amirhossein Allami](https://github.com/amirallami-code)
+  
+</div>