Microsoft-Foundry

#30DaysOf Learning Journey

A beautiful, interactive static website built with Astro.js and Starlight, featuring a cards-based landing page for a 30-day learning journey through Microsoft's cutting-edge AI and cloud technologies.

✨ Features

• 📚 Cards-Based Gallery: Browse lessons in an attractive card layout with images, titles, descriptions, and tags
• 🔍 Search: Real-time search across lesson titles and descriptions
• 🏷️ Filter by Tags: Filter lessons by categories (AI, Azure, ML, Data Science, Cloud, Beginner, Intermediate, Advanced)
• 🔄 Sort Options: Sort by date (newest/oldest) or title (A-Z/Z-A)
• 🎨 Modern UI: Built with Astro.js Starlight for a clean, professional look
• 📱 Responsive Design: Works beautifully on desktop, tablet, and mobile
• 🌙 Dark Mode: Automatic theme switching with light/dark modes
• 📊 JSON-Driven Content: Easy customization through JSON data files

🚀 Quick Start

Prerequisites

• Node.js 20+
• Python 3.12+ (optional, for data processing scripts)

Installation

# Clone the repository
git clone https://github.com/30DaysOf/Microsoft-Foundry.git
cd Microsoft-Foundry

# Install dependencies
npm install

# Install Python dependencies (optional)
pip install -r requirements.txt

Development

# Start the development server
npm run dev

# The site will be available at http://localhost:4321

Build for Production

# Build the static site
npm run build

# Preview the production build
npm run preview

📁 Project Structure

Microsoft-Foundry/
├── .devcontainer/          # Dev container configuration for VS Code
│   └── devcontainer.json
├── .vscode/                # VS Code settings
│   └── mcp.json           # Model Context Protocol configuration
├── public/                 # Static assets
│   └── images/            # Lesson images
├── src/
│   ├── components/        # Astro components
│   │   ├── Hero.astro           # Landing page hero
│   │   ├── CardGallery.astro    # Interactive card gallery
│   │   └── LessonCard.astro     # Individual lesson card
│   ├── content/
│   │   └── docs/          # Markdown content
│   │       ├── index.mdx        # Home page
│   │       └── intro.md         # Introduction page
│   ├── data/              # JSON data files
│   │   ├── posts.json           # Lesson metadata
│   │   └── tags.json            # Tag definitions
│   └── styles/
│       └── custom.css     # Custom styles
├── astro.config.mjs       # Astro configuration
├── package.json           # Node.js dependencies
├── requirements.txt       # Python dependencies
└── tsconfig.json          # TypeScript configuration

🎨 Customization

Adding New Lessons

Edit src/data/posts.json:

{
  "id": 11,
  "title": "Your Lesson Title",
  "description": "Brief description of the lesson",
  "image": "/images/day11.jpg",
  "tags": ["ai", "azure", "beginner"],
  "date": "2024-01-11",
  "author": "Your Name"
}

Adding New Tags

Edit src/data/tags.json:

{
  "id": "newtag",
  "name": "New Tag",
  "color": "#FF6B6B"
}

Customizing Images

Add your images to public/images/ and reference them in posts.json. Images should be:

• Format: JPG, PNG, or SVG
• Recommended size: 800x400px
• Optimized for web

🛠️ Development Container

This project includes a devcontainer configuration for VS Code. To use it:

1. Install the "Remote - Containers" extension in VS Code
2. Open the project in VS Code
3. Click "Reopen in Container" when prompted
4. The container will automatically install all dependencies

📝 Technologies Used

• Astro.js: Static site generator
• Starlight: Documentation theme
• TypeScript: Type-safe JavaScript
• Python 3.12: For data processing scripts
• JSON: Data storage format

🤝 Contributing

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

📄 License

This project is part of the #30DaysOf learning initiative by Microsoft.

🔗 Links

• GitHub Repository
• Astro Documentation
• Starlight Documentation