Modern | Responsive | Performance-Optimized
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.
- 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
| Frontend |
|
| Styling |
|
| Performance |
|
| Animation |
|
| API Integration |
|
| Deployment |
|
| Version Control |
|
├── 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
- 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
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.
- 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
# 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.htmlContributions are what make the open-source community an amazing place to learn, inspire, and create. Any contributions you make are greatly appreciated.
- Fork the Project
- Create your Feature Branch (
git checkout -b feature/AmazingFeature) - Commit your Changes (
git commit -m 'Add some AmazingFeature') - Push to the Branch (
git push origin feature/AmazingFeature) - Open a Pull Request
Distributed under the MIT License. See LICENSE for more information.
Amirhossein Allami - amirallami.dev@gmail.com
Portfolio: https://amirallami.com
GitHub: amirallami-code
Project Link: https://github.com/amirallami-code/amirallami.com
If you found this project helpful, please consider giving it a star!
Made by Amirhossein Allami