📋 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

Frontend
Styling
Performance
Animation
API Integration
Deployment
Version Control

🗂️ File Structure

├── src/
│   ├── index.html         # Main HTML structure
│   ├── output.css         # Compiled Tailwind CSS
│   ├── images/            # Image assets
│   ├── js/
│   │   ├── app.js         # Main application logic
│   │   ├── data.js        # Content data
│   │   ├── generator.js   # Dynamic content generation
│   │   ├── github.js      # GitHub API integration
│   │   ├── loader.js      # Loading animations
│   │   └── theme.js       # Theme switching functionality
│   ├── robots.txt         # Search engine directives
│   └── sitemap.xml        # Site structure for crawlers
├── tailwind.config.js     # Tailwind configuration
└── 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

# 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

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 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

📝 License

Distributed under the MIT License. See LICENSE for more information.

📬 Contact

Amirhossein Allami - [email protected]

Portfolio: https://amirallami.com

GitHub: amirallami-code

Project Link: https://github.com/amirallami-code/amirallami.com