Add Microsoft AI open source portal with resource discovery

[richardogundele]

Summary

This PR introduces a new web portal for discovering Microsoft's AI/ML open source projects, reference architectures, and best practices. It includes a React-based frontend application with curated resource collections and comprehensive contribution planning documentation.

Key Changes

New Web Portal Application

• React + TypeScript frontend with Vite build tooling
• Responsive design using Tailwind CSS with mobile-first approach
• Framer Motion animations for smooth transitions and interactions
• Component-based architecture:
  • Navbar: Navigation with mobile menu support
  • Hero: Landing section with call-to-action
  • ResourceSection: Reusable component for displaying categorized resources
  • Footer: Multi-column footer with links and information

Resource Data Structure

• Created src/data/resources.ts with three main categories:
  • AI100 - Samples: Microsoft's open source AI/ML repositories (Azure ML SDK, Cognitive Services, ML-For-Beginners, etc.)
  • AI200 - Reference Architectures: Deployment patterns for ML models on Kubernetes, Pipelines, and other platforms
  • AI300 - Best Practices: Guidelines for Computer Vision, NLP, and other domains
• Each resource includes title, description, URL, tags, and icon associations

Documentation & Planning

• contribution_plan.md: Comprehensive 6-week contribution strategy targeting three high-impact Microsoft repositories:
  • ML-For-Beginners documentation enhancement and confusion matrix bug fix
  • Recommenders transformer-based model implementation
  • Azure ML MLOps pipeline examples
• contribution_tracker.md: Detailed tracking system with weekly milestones, success metrics, and development setup checklists

Build Configuration

• Vite configuration for fast development and optimized production builds
• TypeScript strict mode enabled
• Tailwind CSS with custom color palette
• PostCSS with autoprefixer support
• Path aliases for cleaner imports

Code Quality

• Fixed trailing whitespace and formatting issues in CI/CD YAML files
• Normalized line endings across configuration files
• Proper TypeScript configuration with module resolution

Implementation Details

• Uses Lucide React icons for consistent visual design
• Implements smooth scroll navigation with anchor links
• Responsive grid layouts (1 column mobile, 2-3 columns desktop)
• Sticky navigation bar with backdrop blur effect
• Accessible HTML structure with proper semantic elements

https://claude.ai/code/session_01GHaThzDk3BBN9YD3gfBn9d