🚀 A modern, professional portfolio website showcasing DevOps engineering expertise, cloud architecture, and infrastructure automation.

• Responsive Design: Optimized for all devices and screen sizes
• Smooth Animations: CSS animations and JavaScript interactions
• Professional UI: Clean, modern interface with gradient effects
• Dark/Light Theme: Toggle between themes with smooth transitions
• Interactive Elements: Hover effects, parallax scrolling, and micro-interactions

• Smooth Scrolling: Seamless navigation between sections
• Loading Animations: Progressive content loading with fade-in effects
• Particle Background: Subtle animated particles on the homepage
• Scroll to Top: Convenient navigation button
• Search Functionality: Enhanced search with real-time filtering

• Hugo Static Site Generator: Fast, secure, and SEO-friendly
• Blowfish Theme: Modern, feature-rich theme with customization
• Custom CSS/JS: Tailored styling and interactive features
• Optimized Performance: Fast loading times and smooth interactions
• SEO Optimized: Meta tags, structured data, and search engine friendly

• Professional Homepage: Hero section with animated profile and skills showcase
• Enhanced Blog: Technical articles with categories and tags
• Project Portfolio: Detailed project showcases with metadata
• About Page: Comprehensive professional background and expertise
• Contact Integration: Multiple ways to connect and collaborate

• Static Site Generator: Hugo
• Theme: Blowfish (heavily customized)
• Styling: Custom CSS with animations
• Interactivity: Vanilla JavaScript
• Deployment: Git-based deployment with submodule

portfolio-v1/
├── assets/
│   ├── css/
│   │   └── custom.css          # Custom animations and styling
│   ├── js/
│   │   └── custom.js           # Interactive features
│   └── img/                    # Images and assets
├── content/
│   ├── _index.md              # Enhanced homepage
│   ├── about/
│   │   └── _index.md          # Professional about page
│   ├── blogs/
│   │   ├── _index.md          # Blog index with categories
│   │   ├── git-github-mastery.md
│   │   └── ollama.md
│   └── projects/
│       ├── _index.md          # Projects showcase
│       ├── chat-app.md
│       ├── easyshop.md
│       └── ...
├── hugo.toml                  # Enhanced configuration
└── README.md                  # This file

• Hugo Extended version (latest)
• Git
• Basic knowledge of Markdown and Hugo

1. Clone the repository

   git clone https://github.com/iemafzalhassan/portfolio-v1.git
   cd portfolio-v1

2. Install Hugo theme (if not already included)

   git submodule add https://github.com/nunocoracao/blowfish.git themes/blowfish

3. Run the development server

   hugo server -D

4. Access the site Open your browser and navigate to http://localhost:1313

• Update hugo.toml with your personal details
• Replace images in assets/img/
• Modify content in content/ directory

• Edit assets/css/custom.css for visual changes
• Modify assets/js/custom.js for interactive features
• Update theme parameters in hugo.toml

• Add new blog posts in content/blogs/
• Create project showcases in content/projects/
• Update about page in content/about/_index.md

• Senior DevOps Engineer positioning
• Cloud Architect expertise showcase
• Enterprise-grade project examples
• Certification highlights
• Community leadership emphasis

• Gradient animations on titles and buttons
• Card-based layouts for skills and projects
• Hover effects and micro-interactions
• Professional color scheme with brand consistency
• Typography hierarchy for better readability

• Technical depth in blog posts
• Real-world examples in projects
• Professional achievements and metrics
• Community involvement and open source contributions
• Clear call-to-actions for engagement

The portfolio is fully responsive and optimized for:

• Desktop: Full-featured experience with all animations
• Tablet: Optimized layouts and touch-friendly interactions
• Mobile: Streamlined navigation and fast loading
• Accessibility: Screen reader friendly and keyboard navigation

1. Create a new .md file in content/blogs/
2. Use the enhanced front matter template:

   ---
   title: "Your Post Title"
   description: "Brief description for SEO"
   date: 2024-01-01
   tags: ["tag1", "tag2"]
   categories: ["category1", "category2"]
   author: "Afzal Hassan"
   thumbnail: "/img/your-image.jpg"
   featured: true
   readingTime: "5 min read"
   ---

1. Create a new .md file in content/projects/
2. Include project metadata:

   ---
   title: "Project Name"
   description: "Project description"
   date: 2024-01-01
   tags: ["tech1", "tech2"]
   categories: ["category1"]
   author: "Afzal Hassan"
   thumbnail: "/img/project-image.jpg"
   featured: true
   projectUrl: "https://project-url.com"
   githubUrl: "https://github.com/username/project"
   ---

• Edit assets/css/custom.css for CSS animations
• Modify assets/js/custom.js for JavaScript interactions
• Update timing and effects in the animation classes

The portfolio uses a simple git submodule deployment strategy:

1. Build the site

   hugo --minify

2. Deploy to public directory

   ./deploy.sh

3. Push changes

   git add .
   git commit -m "Update portfolio"
   git push origin main

• Netlify: Connect GitHub repository for automatic deployment
• Vercel: Deploy with zero configuration
• GitHub Pages: Use GitHub Actions for automated builds
• AWS S3: Static hosting with CloudFront CDN

• Minified CSS/JS: Reduced file sizes
• Optimized images: Compressed and responsive
• Lazy loading: Images load as needed
• Caching headers: Improved loading times
• CDN ready: Optimized for content delivery networks

• Lighthouse Score: 95+ across all categories
• Page Load Time: < 2 seconds
• Mobile Performance: Optimized for mobile devices
• SEO Score: 100/100

Contributions are welcome! Please feel free to submit a Pull Request.

1. Fork the repository
2. Create a feature branch
3. Make your changes
4. Test thoroughly
5. Submit a pull request

This project is licensed under the MIT License - see the LICENSE file for details.

• Website: portfolio.iemafzalhassan.in
• GitHub: @iemafzalhassan
• LinkedIn: Afzal Hassan
• Twitter: @iemafzalhassan
• Email: [email protected]

Built with ❤️ using Hugo and modern web technologies