Amirhossein Allami | Personal Portfolio

Modern | Responsive | Performance-Optimized

View Live Site · Report Bug · Ask a question

📋 Overview

A modern portfolio website that highlights my work as a Front-end Developer and Designer. It’s built for speed, easy use, and looks great on any device, with live GitHub data and smooth animations.

✨ Key Features

• Interactive Code Editor UI - Engaging hero section with animated code display
• Dynamic GitHub Integration - Real-time repository data using GitHub API
• 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
  input.css          # Tailwind source
  output.css         # Compiled CSS
  js/                # App logic (app.js, github.js, etc.)
  images/            # Assets (certificates, signature, github, etc.)
  fonts/             # Custom fonts
  libs/              # Animation & lazyload libraries
  robots.txt
  sitemap.xml
tailwind.config.js   # Tailwind config
package.json         # Dependencies & scripts

🚀 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

---

Made by Amir