Asim Husain - Personal Portfolio

A modern, responsive portfolio website showcasing my expertise in AI/ML engineering and full-stack development. Built with pure HTML, CSS, and JavaScript, deployed on Azure with custom domain integration.

🌐 Live Website

👉 www.asimhusain.dev

---

✨ Features

🎨 Modern Design

• Clean & Professional UI - Minimalist design with dark theme and accent colors
• Custom Cursor - Interactive cursor with hover effects (desktop only)
• Smooth Animations - GSAP-powered transitions and micro-interactions
• Typewriter Effect - Dynamic text animation in hero section

📱 Fully Responsive

• Mobile-First Approach - Optimized for all screen sizes
• Touch-Friendly - Swipe gestures for mobile navigation
• Cross-Browser Compatible - Works seamlessly across modern browsers

🛠️ Interactive Elements

• Certifications Slider - Auto-advancing certificate showcase with thumbnail navigation
• Project Gallery - Hover effects with detailed project descriptions
• Blog Topics - Color-coded blog topics with popup content system
• Contact Form - Functional contact form powered by EmailJS

⚡ Performance Optimized

• Lightweight - Pure HTML/CSS/JS without heavy frameworks
• Fast Loading - Optimized images and efficient code structure
• SEO Ready - Proper meta tags and semantic HTML

---

🛠️ Tech Stack

Frontend

• HTML5 - Semantic markup and modern structure
• CSS3 - Flexbox, Grid, animations, and responsive design
• JavaScript (ES6+) - Interactive functionality and animations

Services & APIs

• EmailJS - Contact form processing and email delivery
• GSAP - Advanced animations and smooth transitions
• Google Fonts - Typography (Ubuntu, Raleway, Poppins)

Deployment & Infrastructure

• Azure Static Web Apps - Hosting and global CDN
• GitHub Actions - CI/CD automated deployments
• Name.com - Domain registration and DNS management

---

🚀 Deployment Journey

Phase 1: Development & Setup

• Local development with live server-
• Responsive design testing across devices
• Performance optimization and testing

Phase 2: Development & Setup

• Created Azure Static Web App (Free Tier)
• Configured GitHub repository connection
• Set up automatic deployments via GitHub Actions
• Initial deployment to Azure staging URL: https://lively-sky-057d13400.1.azurestaticapps.net

Phase 3: Custom Domain Integration

• Purchased domain: asimhusain.dev via Name.com
• Configured CNAME record in DNS settings: www → lively-sky-057d13400.1.azurestaticapps.net
• Set up 301 redirect for root domain: asimhusain.dev → https://www.asimhusain.dev
• Azure automatically provisioned SSL certificate

Phase 4: Production Launch

• Final testing and optimization
• SEO implementation and meta tags
• Performance monitoring setup
• Production website live at: https://www.asimhusain.dev

---

🎯 Key Sections

1. Hero Section

• Professional introduction with typewriter effect
• Social media links with hover animations
• Direct contact options (email, phone)

2. About Me

• Professional background and skills overview
• Profile image with responsive design
• Detailed technical expertise description

3. Achievements

• Interactive certificate slider (13 certifications)
• Auto-advancing with 3-second intervals
• Thumbnail navigation for desktop users
• Touch/swipe support for mobile

4. What I Do

• Flip cards showcasing four key service areas:
  • Software Development
  • Machine Learning Engineering
  • Data Analysis
  • IT Support Specialist

5. Projects

• Six featured projects with descriptions
• Live demo links and GitHub repositories
• Hover effects with overlay animations

6. Blogs

• 25+ technical blog topics ready for content
• Color-coded interactive buttons
• Popup system for future blog content

---

🔧 Local Development

Prerequisites

• Modern web browser
• Local server (VS Code Live Server recommended)

Setup Instructions

1. Clone the repository:

git clone https://github.com/yourusername/portfolio.git

---

Author

Built with ❤️ by Asim Husain | AI/ML Engineer & Full-Stack Developer