Skip to content

Latest commit

 

History

History
185 lines (144 loc) · 7.53 KB

README.md

File metadata and controls

185 lines (144 loc) · 7.53 KB

Amirhossein Allami | Personal Portfolio

GitHub stars GitHub releases GitHub last commit License Website Status


Modern | Responsive | Performance-Optimized

View Live Site · Report Bug · Request Feature

📋 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 HTML5 CSS3 JavaScript
Styling Tailwind CSS
Performance Vanilla Lazyload
Animation Custom CSS Creattie
API Integration GitHub API
Deployment Vercel
Version Control Git GitHub

🗂️ 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 - 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 with ❤️ by Amirhossein Allami