diff --git a/.github/ISSUE_TEMPLATE/project-submission.md b/.github/ISSUE_TEMPLATE/project-submission.md deleted file mode 100644 index a21f634..0000000 --- a/.github/ISSUE_TEMPLATE/project-submission.md +++ /dev/null @@ -1,36 +0,0 @@ ---- -name: πŸ› οΈ Project Submission - Build-a-thon -about: Submit your customized azd project for the People's Choice spotlight -title: "[Project Submission] Your Project Name Here" -labels: submission, build-a-thon, people’s choice -assignees: '' ---- - -## 🌍 Problem Statement - -What real-world problem are you addressing? (Societal, personal, climate-related, etc.) - ---- - -## πŸ› οΈ Your Solution - -Describe how you are customizing an azd template to solve this problem. Include: -- Which azd template you picked -- How you're modifying or extending it -- Why this approach is relevant - ---- - -## πŸš€ Repository & Demo (if any) - -- GitHub repo: [link here] -- Live demo (if available): [link here] -- Study Jam: (if you are part of one) ---- - -## πŸ™Œ Call for Upvotes - -Why should this project win the People’s Choice Award? Pitch it to the community! - ---- - diff --git a/.github/ISSUE_TEMPLATE/quest-feedback.md b/.github/ISSUE_TEMPLATE/quest-feedback.md new file mode 100644 index 0000000..e7de8e8 --- /dev/null +++ b/.github/ISSUE_TEMPLATE/quest-feedback.md @@ -0,0 +1,24 @@ +--- +name: Quest or content feedback +about: Report a problem or suggest an improvement to a Quest or the learning site +title: "[Quest feedback] " +labels: documentation +assignees: '' +--- + +## Quest or page + +Which Quest, page, or section is this feedback about? + +## What happened? + +Describe the problem, unclear instruction, or suggested improvement. + +## What did you expect? + +Explain what you expected to find or what would make the content more useful. + +## Additional context + +Include relevant links, screenshots, environment details, or error messages. +Do not include credentials, access tokens, or other secrets. diff --git a/.github/workflows/deploy.yml b/.github/workflows/deploy.yml index 771bad5..cb348aa 100644 --- a/.github/workflows/deploy.yml +++ b/.github/workflows/deploy.yml @@ -21,7 +21,7 @@ jobs: - uses: actions/setup-python@v6 with: - python-version: "3.x" + python-version: "3.12" cache: pip - run: pip install -r requirements.txt diff --git a/01-Local-AI-Development/README.md b/01-Local-AI-Development/README.md index b6e6400..333614b 100644 --- a/01-Local-AI-Development/README.md +++ b/01-Local-AI-Development/README.md @@ -1,8 +1,8 @@ ![Foundry Local](./assets/foundry-local-logo.png) -**Click the image below to watch the recording.** +**Optional companion recording:** click the image below for a guided walkthrough. -[![Reactor Livestream](./assets/poster-quest1.png)](https://www.youtube.com/live/GHH50rDlLn0?si=-i3hPYq1o6H271_z) +[![Watch the Quest 1 companion recording](./assets/quest-1-companion-recording.png)](https://www.youtube.com/live/GHH50rDlLn0?si=-i3hPYq1o6H271_z) ## Overview @@ -15,26 +15,10 @@ With Foundry Local, you gain: - **Cost Efficiency**: No cloud compute costs incurred. - **Offline Access**: AI capabilities even without internet connectivity. -> [!NOTE] -> -> **Hackathon Award Category: Offline-Ready AI Award** -> -> This quest mapped to our Offline-Ready AI Award category, which recognized the best performing AI solutions with standout offline capabilities (local inference). -> -> Winning solutions featured apps that: -> -> - Processed sensitive data entirely on-device. -> - Used Foundry Local for reasoning and cloud storage services for optional sync or analytics. -> -> Winners demonstrated: -> -> - **Privacy** (no sensitive data leaving the device). -> - **Latency** optimization using local inference. -> -> Checkout some Foundry Local + JavaScript projects: - -> -> 1. [Interview Doctor](https://github.com/leestott/interview-doctor-js) - AI-powered interview preparation assistant that runs **100% offline** on your local machine -> 1. [Gas Field Support Agent](https://github.com/leestott/local-rag) - A fully offline, on-device Retrieval-Augmented Generation (RAG) support agent for gas field inspection and maintenance engineers. +Here are two Foundry Local and JavaScript projects you can explore: + +1. [Interview Doctor](https://github.com/leestott/interview-doctor-js) - An AI-powered interview preparation assistant that runs entirely on your local machine. +2. [Gas Field Support Agent](https://github.com/leestott/local-rag) - An offline, on-device RAG support agent for gas-field inspection and maintenance engineers. First step, **installation instructions** for your OS: @@ -196,21 +180,17 @@ Once configured, GitHub Copilot Chat will use your local Foundry model for all r | **Qwen models** | Multilingual code generation | | **GPT models** | Advanced capabilities and broad compatibility | -> [!NOTE] -> -> For the Offline-Ready AI Award, using GitHub Copilot with Foundry Local demonstrates a powerful offline development workflow. Highlight this capability in your submission! - ### 3. Software Development Kits (SDKs) Foundry Local provides SDKs to programmatically send requests to the local management service. Since the endpoint is dynamically allocated each time the service starts, the SDK handles endpoint discovery and management for you (control plane). #### Step 1: Initialize New Project -Create a parent folder for your Build-a-thon projects and navigate into it: +Create a parent folder for your JavaScript AI projects and navigate into it: ```bash - mkdir buildathon - cd buildathon + mkdir javascript-ai-quests + cd javascript-ai-quests ``` Create a new folder for this quest, navigate into it and initialize a Node.js project: @@ -394,7 +374,7 @@ Example UI: ## Stay connected -Have a question, project, or insight to share? Join the [Build-a-thon Discord channel](https://aka.ms/JSAIonDiscord) +Have a question, project, or insight to share? Join the [JavaScript AI community on Discord](https://aka.ms/JSAIonDiscord). ## AI Note diff --git a/01-Local-AI-Development/assets/poster-quest1.png b/01-Local-AI-Development/assets/poster-quest1.png deleted file mode 100644 index f0e859a..0000000 Binary files a/01-Local-AI-Development/assets/poster-quest1.png and /dev/null differ diff --git a/01-Local-AI-Development/assets/quest-1-companion-recording.png b/01-Local-AI-Development/assets/quest-1-companion-recording.png new file mode 100644 index 0000000..94e8318 Binary files /dev/null and b/01-Local-AI-Development/assets/quest-1-companion-recording.png differ diff --git a/02-E2E-Model-Development-on-Foundry/README.md b/02-E2E-Model-Development-on-Foundry/README.md index b9353db..1f9ee16 100644 --- a/02-E2E-Model-Development-on-Foundry/README.md +++ b/02-E2E-Model-Development-on-Foundry/README.md @@ -1,8 +1,8 @@ ![Foundry Local](./assets/foundry-logo.png) -**Click the image below to watch the recording.** +**Optional companion recording:** click the image below for a guided walkthrough. -[![Reactor Livestream](./assets/poster-quest2.png)](https://www.youtube.com/live/8ded7UAdPTA?si=UwncP4b4tIs1dwLS) +[![Watch the Quest 2 companion recording](./assets/quest-2-companion-recording.png)](https://www.youtube.com/live/8ded7UAdPTA?si=UwncP4b4tIs1dwLS) # Building AI Agents E2E On Microsoft Foundry @@ -59,9 +59,7 @@ To complete the quest, you will need: > > The **Foundry SDK is under active development**. > -> If you encounter any blockers, unclear steps, or have suggestions to improve the developer experience, please open an issue using the [provided issue template](https://github.com/microsoft/microsoft-foundry-e2e-js/issues/new/choose) - *Bug report/ Build-a-thon Feedback*. Make sure to **apply the label** that matches the step you were on when the issue occurred. -> -> ![Buildathon issue with labels](./assets/buildathon-feedback.png) +> If you encounter a blocker or unclear instruction in the linked sample, open an issue in the [Microsoft Foundry end-to-end JavaScript repository](https://github.com/microsoft/microsoft-foundry-e2e-js/issues/new/choose). Include the task you were completing and enough environment detail to reproduce the problem. The repoistory is setup with a `devcontainer.json` that installs all the required depdencencies and gives you access to a free tier of GitHub Copilot. @@ -90,9 +88,9 @@ This quest has a lot of steps to complete, many of which cannot be completed in **Explore the rest at your own pace later**. Create a fork of the repo, then launch a new Codespaces instance on that fork and work through the steps in order. Try customizing the data to suit a different scenario. Or change the code to try a different evaluator or attack strategy for red-teaming. Use your fork as a sandbox for building a deeper understanding of these capabilities with hands-on experiments. -### Return to the Build-a-thon +### Continue learning -Once you have completed this quest and get an intuitive sense for end-to-end development with Microsoft Foundry, return to the main Build-a-thon repository to continue with the next quests. +When you have an intuitive sense of end-to-end development with Microsoft Foundry, return to the [Quest directory](https://github.com/Azure-Samples/JavaScript-AI-Buildathon#the-learning-path) to choose what to explore next. ## AI Note diff --git a/02-E2E-Model-Development-on-Foundry/assets/buildathon-feedback.png b/02-E2E-Model-Development-on-Foundry/assets/buildathon-feedback.png deleted file mode 100644 index fdaa53e..0000000 Binary files a/02-E2E-Model-Development-on-Foundry/assets/buildathon-feedback.png and /dev/null differ diff --git a/02-E2E-Model-Development-on-Foundry/assets/poster-quest2.png b/02-E2E-Model-Development-on-Foundry/assets/poster-quest2.png deleted file mode 100644 index b5d7be5..0000000 Binary files a/02-E2E-Model-Development-on-Foundry/assets/poster-quest2.png and /dev/null differ diff --git a/02-E2E-Model-Development-on-Foundry/assets/quest-2-companion-recording.png b/02-E2E-Model-Development-on-Foundry/assets/quest-2-companion-recording.png new file mode 100644 index 0000000..b69e33a Binary files /dev/null and b/02-E2E-Model-Development-on-Foundry/assets/quest-2-companion-recording.png differ diff --git a/03-Run-Serverless-RAG-Support-System/README.md b/03-Run-Serverless-RAG-Support-System/README.md index e8b21b5..1bb34d3 100644 --- a/03-Run-Serverless-RAG-Support-System/README.md +++ b/03-Run-Serverless-RAG-Support-System/README.md @@ -1,8 +1,8 @@ ![Serverless RAG](./assets/favicon.png) -**Click the image below to watch the recording.** +**Optional companion recording:** click the image below for a guided walkthrough. -[![Reactor Livestream](./assets/poster-quest3.png)](https://www.youtube.com/live/hfx7F7lObdg?si=vEtg3dt411oHcvJG) +[![Watch the Quest 3 companion recording](./assets/quest-3-companion-recording.png)](https://www.youtube.com/live/hfx7F7lObdg?si=vEtg3dt411oHcvJG) ## Overview @@ -85,13 +85,13 @@ There are 6 tours to walk you through the entire RAG implementation flow. We rec - Tour 5: Response Generation (7 steps) - Tour 6: Streaming & Chat History (8 steps) -### Return to the Build-a-thon +### Continue learning -Once you have completed the CodeTour and explored the RAG implementation, return to the main Build-a-thon repository to continue with the next quests. +Once you have completed the CodeTour and explored the RAG implementation, return to the [Quest directory](https://github.com/Azure-Samples/JavaScript-AI-Buildathon#the-learning-path) to choose what to explore next. ## Stay connected -Have a question, project, or insight to share? Join the [Build-a-thon Discord channel](https://aka.ms/JSAIonDiscord) +Have a question, project, or insight to share? Join the [JavaScript AI community on Discord](https://aka.ms/JSAIonDiscord). ## AI Note diff --git a/03-Run-Serverless-RAG-Support-System/assets/poster-quest3.png b/03-Run-Serverless-RAG-Support-System/assets/poster-quest3.png deleted file mode 100644 index 0f95453..0000000 Binary files a/03-Run-Serverless-RAG-Support-System/assets/poster-quest3.png and /dev/null differ diff --git a/03-Run-Serverless-RAG-Support-System/assets/quest-3-companion-recording.png b/03-Run-Serverless-RAG-Support-System/assets/quest-3-companion-recording.png new file mode 100644 index 0000000..d597a60 Binary files /dev/null and b/03-Run-Serverless-RAG-Support-System/assets/quest-3-companion-recording.png differ diff --git a/04-Build-Agents-with-AIToolKit/README.md b/04-Build-Agents-with-AIToolKit/README.md index fbfa0a0..c5366b6 100644 --- a/04-Build-Agents-with-AIToolKit/README.md +++ b/04-Build-Agents-with-AIToolKit/README.md @@ -1,8 +1,8 @@ ![AI Toolkit](./assets/aitk.png) -**Click the image below to watch the recording.** +**Optional companion recording:** click the image below for a guided walkthrough. -[![Reactor Livestream](./assets/poster-quest4.png)](https://www.youtube.com/live/k0q5-VIGtWQ?si=yXLiyalxU6wELpxW) +[![Watch the Quest 4 companion recording](./assets/quest-4-companion-recording.png)](https://www.youtube.com/live/k0q5-VIGtWQ?si=yXLiyalxU6wELpxW) ## Overview @@ -20,24 +20,6 @@ The **AI Toolkit** is a powerful VS Code extension that streamlines generative A - **Evaluation**: Measure agent performance with built-in metrics - **Code Export**: Export agent code for integration into applications -> [!NOTE] -> -> **Hackathon Award Category: Agent Architecture Award** -> -> This quest mapped to our special award category that recognized the best AI agents with innovative and well-architected designs. -> -> Winning submissions featured: -> -> - Agents that solved complex problems with multiple steps of reasoning -> - Agents that integrated with custom MCP servers to access specialized tools or data -> - Agents with sophisticated evaluation techniques that pushed performance boundaries -> -> Winners demonstrated: -> -> - Innovative agent design patterns -> - Leverage of MCP servers for specialized tool integration -> - Evaluation methods that validated agent performance - ### Install the AI Toolkit Extension 1. Open VS Code @@ -416,7 +398,7 @@ Include clear instructions on: 3. How to open the UI: Open chat.html in browser 4. How to test: Send a message and verify agent responds -Make it simple, hackathon-ready, and immediately usable! +Make it simple, easy to extend, and immediately usable! ``` Sample UI Output: @@ -444,7 +426,7 @@ This gives you a complete and ready chat application for your AI agent! πŸš€ ## Stay connected -Have a question, project, or insight to share? Join the [Build-a-thon Discord channel](https://aka.ms/JSAIonDiscord) +Have a question, project, or insight to share? Join the [JavaScript AI community on Discord](https://aka.ms/JSAIonDiscord). ## AI Note diff --git a/04-Build-Agents-with-AIToolKit/assets/poster-quest4.png b/04-Build-Agents-with-AIToolKit/assets/poster-quest4.png deleted file mode 100644 index a120c6d..0000000 Binary files a/04-Build-Agents-with-AIToolKit/assets/poster-quest4.png and /dev/null differ diff --git a/04-Build-Agents-with-AIToolKit/assets/quest-4-companion-recording.png b/04-Build-Agents-with-AIToolKit/assets/quest-4-companion-recording.png new file mode 100644 index 0000000..339613e Binary files /dev/null and b/04-Build-Agents-with-AIToolKit/assets/quest-4-companion-recording.png differ diff --git a/05-Run-Burger-Ordering-Agent-System/README.md b/05-Run-Burger-Ordering-Agent-System/README.md index 288f3e2..594c1d8 100644 --- a/05-Run-Burger-Ordering-Agent-System/README.md +++ b/05-Run-Burger-Ordering-Agent-System/README.md @@ -1,8 +1,8 @@ ![Burger Ordering Agent Logo](./assets/burger-logo.png) -**Click the image below to watch the livestream/recording.** +**Optional companion recording:** click the image below for a guided walkthrough. -[![Reactor Livestream](./assets/poster-quest5.png)](https://www.youtube.com/live/kBVsqJbM7Vc?si=hmIEfla6KOB9MsYW) +[![Watch the Quest 5 companion recording](./assets/quest-5-companion-recording.png)](https://www.youtube.com/live/kBVsqJbM7Vc?si=hmIEfla6KOB9MsYW) ## Overview @@ -12,13 +12,7 @@ In this quest, you will set up and run a **complete end-to-end Burger Ordering A > [!NOTE] > -> **Hackathon Award Category: Agentic System Architecture Award** -> -> This quest mapped to our special award category recognizing agentic designs that are **useful, reliable, and secure**. -> -> The quest demonstrated foundational patterns: **MCP tool integration** enabling agents to interact with external systems (useful), **structured agent workflows** with proper error handling ensuring consistent behavior (reliable), and **API-based architectures** allowing for controlled access and validation (secure). -> -> Winners leveraged these patterns to build production-ready agent systems that users could trust. +> This quest highlights three foundations of an agent system: **MCP tool integration** for interaction with external systems, **structured agent workflows** with error handling for consistent behavior, and **API-based architecture** for controlled access and validation. ## Steps to Complete the Quest @@ -83,13 +77,13 @@ There are 6 tours to walk you through the entire agent implementation flow. We r > [!WARNING] > Trouble viewing the CodeTour? Try setting `comments.maxHeightExceeded` to `false` -### Return to the Build-a-thon +### Continue learning -Once you have completed the CodeTour and explored the Agent implementation, return to the main Build-a-thon repository to continue with the next step. +Once you have completed the CodeTour and explored the agent implementation, return to the [Quest directory](https://github.com/Azure-Samples/JavaScript-AI-Buildathon#the-learning-path) to choose what to explore next. ## Stay connected -Have a question, project, or insight to share? Join the [Build-a-thon Discord channel](https://aka.ms/JSAIonDiscord) +Have a question, project, or insight to share? Join the [JavaScript AI community on Discord](https://aka.ms/JSAIonDiscord). ## AI Note diff --git a/05-Run-Burger-Ordering-Agent-System/assets/poster-quest5.png b/05-Run-Burger-Ordering-Agent-System/assets/poster-quest5.png deleted file mode 100644 index a59cf6e..0000000 Binary files a/05-Run-Burger-Ordering-Agent-System/assets/poster-quest5.png and /dev/null differ diff --git a/05-Run-Burger-Ordering-Agent-System/assets/quest-5-companion-recording.png b/05-Run-Burger-Ordering-Agent-System/assets/quest-5-companion-recording.png new file mode 100644 index 0000000..cd5719b Binary files /dev/null and b/05-Run-Burger-Ordering-Agent-System/assets/quest-5-companion-recording.png differ diff --git a/README.md b/README.md index 52d8083..8d3e62e 100644 --- a/README.md +++ b/README.md @@ -1,132 +1,93 @@ -
-
-![The JavaScript AI Build-a-thon Season 2](assets/poster.svg) - -

- Create, compete, and turn ideas into working AI.
- March 2 – March 31, 2026 -

- -

- Discord  - JavaScript  - TypeScript -

- -
- ---- +![JavaScript AI Build-a-thon: hands-on Quests, self-paced and always available](assets/javascript-ai-learning-banner.png) -# What is the JavaScript AI Build-a-thon? +# JavaScript AI Build-a-thon -The JavaScript AI Build-a-thon is a focused, hands-on initiative that helps **builders** quickly move from exploration to working AI prototypes. Through concise quests and practical demos, you'll gain real skills with modern AI tools in a clear, outcome-driven format. +**Learn AI with JavaScript and TypeScript through hands-on Quests.** -If you're building your first AI app or architecting multi-agent systems, the Build-a-thon gives you the tools, the mentorship, and the stage to ship something real. +Self-paced. Open source. Up-to-date. -# Program Timeline +[Start with Quest 1](./01-Local-AI-Development/README.md) Β· +[Browse all Quests](https://azure-samples.github.io/JavaScript-AI-Buildathon/quests/) Β· +[Read the learning guide](https://azure-samples.github.io/JavaScript-AI-Buildathon/start-here/) -| Milestone | Date | -|---|---| -| 🎬 Build-a-thon Began | **Monday, March 2, 2026** | -| πŸ“š Quests & Livestreams | **March 2 – March 13, 2026** | -| **πŸ”₯ Hackathon Phase** | **Friday, March 13 – Tuesday, March 31, 2026** | -| πŸ† Program Concluded | **Tuesday, March 31, 2026** | + -# How It Worked +--- -The Build-a-thon ran in two phases. +## Start here -![The JavaScript AI Build-a-thon Season 2](assets/roadmap.svg) +This repository is for JavaScript and TypeScript developers who want to learn +AI by building. You do not need to complete everything at once: choose the +Quest that matches your goal, follow it at your own pace, and return whenever +you are ready for the next pattern. -## πŸ“š Phase 1: Learn & Skill Up (March 2 – March 13) +New to AI development? Begin with local models in Quest 1, then move through +the learning path in order. Already comfortable with models and retrieval? +Start with the agent-focused Quests. -Participants completed guided quests and attended expert-led livestreams to build the skills needed for the hackathon phase. Each quest was hands-on, self-paced, and designed to teach a core AI development pattern with JavaScript/TypeScript: +## The learning path -| Quest | Topic | What You'll Learn | +| Quest | Build and explore | Environment | |---|---|---| -| [Quest 1](/01-Local-AI-Development/README.md) | Local AI Development with Foundry Local | Run AI models on-device for privacy, speed, and offline access | -| [Quest 2](/02-E2E-Model-Development-on-Foundry/README.md) | End-to-End Model Development on Microsoft Foundry | Build, train and deploy custom AI models with Microsoft Foundry's unified platform | -| [Quest 3](/03-Run-Serverless-RAG-Support-System/README.md) | Serverless RAG Support System | Build retrieval-augmented generation pipelines with LangChain.js | -| [Quest 4](/04-Build-Agents-with-AIToolKit/README.md) | Build Agents with AI Toolkit | Create AI agents with MCP tools, evaluation, and code export on VS Code | -| [Quest 5](/05-Run-Burger-Ordering-Agent-System/README.md) | E2E Burger Ordering Agent | Design and run a full agentic system with MCP server integration | - -Participation Requirement: Participants were required to complete at least 2 quests (including the guided project) to be eligible for the hackathon phase. +| [1. Local AI Development](./01-Local-AI-Development/README.md) | Run models on-device and connect them to a JavaScript application | Local | +| [2. End-to-End Model Development](./02-E2E-Model-Development-on-Foundry/README.md) | Select, customize, evaluate, trace, and protect models with Microsoft Foundry | Cloud | +| [3. Serverless RAG Support System](./03-Run-Serverless-RAG-Support-System/README.md) | Build document ingestion, retrieval, grounded responses, streaming, and chat history | Local & Cloud | +| [4. Build Agents with AI Toolkit](./04-Build-Agents-with-AIToolKit/README.md) | Compare models, build agents, connect MCP tools, evaluate responses, and export code | Local & Cloud | +| [5. Burger Ordering Agent System](./05-Run-Burger-Ordering-Agent-System/README.md) | Explore a complete multi-service agent system with MCP integrations | Local & Cloud | -## πŸ”₯ Phase 2: Hack! (March 13 – March 31) +### Foundations -Participants built solutions that matter using everything they learned in the quests and beyond, creating AI Agents that solved real problems, delighted users, and pushed what's possible. +Quests 1-3 cover three core AI application patterns: running models locally, +working through an end-to-end model lifecycle, and grounding responses with +retrieval-augmented generation. -![Hack roadmap](assets/hack-roadmap.png) +### Agents -During the hack phase, participants attended technical demos and special Discord Office Hours (8:00 AM PDT) to learn the latest tools and best practices. +Quests 4-5 move into agent design, MCP tool use, evaluation, orchestration, and +the boundaries between an agent, its APIs, and external services. -| Date (8:00 AM PDT) | Demo | Archive | -|---|---|---| -| March 16 | Azure & Foundry MCP Server Demo | [Recording](https://discord.gg/microsoftfoundry?event=1476309470312136704) | -| March 18 | Azure Developer CLI (azd) Demo | [Recording](https://discord.gg/microsoftfoundry?event=1476310190885175296) | -| March 20 | Azure DocumentDB Demo | [Recording](https://discord.gg/microsoftfoundry?event=1473725339959033866) | -| March 23 | GitHub Copilot CLI & SDK Demo | [Recording](https://discord.gg/microsoftfoundry?event=1473726030421430272) | -| March 25 | GitHub Agentic Workflows Demo | [Recording](https://discord.gg/microsoftfoundry?event=1473781418956947566) | -| March 27 | GitHub Copilot App Modernization Demo | [Recording](https://discord.gg/microsoftfoundry?event=1473781883811795147) | +## How to use the Quests +1. Open a Quest and review its prerequisites before starting. +2. Follow the setup and hands-on steps in the Quest README. +3. Use the optional recording at the top of a Quest when you want a guided walkthrough. +4. Adapt the scenario or data to reinforce what you learned. +5. Continue to the next Quest or choose another path from this page. -## πŸ’¬ Community & Support +Cloud-based Quests can create costs. Review each Quest's notes and remove cloud +resources when you finish. -Join our community to connect with other participants and experts from Microsoft &. GitHub to support your builder journey. +## Community and support -- **Foundry Discord** (#js-ai-build-a-thon channel): [Our platform for office hours, live QnA, quick questions, finding teammates, community & expert support](https://aka.ms/JSAIonDiscord) -- **Social:** Share your progress online using **#JSAIBuildathon** +- [Join the JavaScript AI community on Discord](https://aka.ms/JSAIonDiscord) +- [Report a problem or suggest an improvement](https://github.com/Azure-Samples/JavaScript-AI-Buildathon/issues/new/choose) +- [Explore the documentation site](https://azure-samples.github.io/JavaScript-AI-Buildathon/) ## Appendix
-The JavaScript AI Build-a-thon (June 2025)
- -Developers from all over the world joined us in the AI June Jams with JavaScript - turning their real-world ideas into ready AI apps, through this hands-on learning experience! +March 2026 program archive -## πŸ… AI Career Navigator - Your Personal AI Career Coach +The March 2026 program introduced these five Quests through live sessions and +a project-building program. Its winning projects, participant submissions, and +reference links are preserved in the +[program archive](https://azure-samples.github.io/JavaScript-AI-Buildathon/appendix/#march-2026-program). -[Aryanjstar](https://github.com/Aryanjstar) - -https://github.com/user-attachments/assets/0bde9089-050a-40d8-8eef-a9bfd92d6e49 +
-## June 2025 Projects +
+June 2025 program archive -|Project|Description|Submission| -|---|---|---| -| AI Career Navigator - Your Personal AI Career Coach | An AI-powered career coaching application that analyzes resumes, identifies skill gaps, and guides developers to targeted job opportunities, interview readiness, and skill growth. | [View project](https://github.com/Azure-Samples/JS-AI-Build-a-thon/issues/47) | -| ACTS Sri Lanka | An AI-powered legal assistant for Sri Lankan government documents that enables fast, citation-backed legal Q&A and search for citizens and professionals. | [View project](https://github.com/Azure-Samples/JS-AI-Build-a-thon/issues/42) | -| JuaKatiba AI Agent | A serverless RAG-powered chatbot that explains and interprets Kenyan legal and constitutional documents, empowering citizens to defend their rights. | [View project](https://github.com/Azure-Samples/JS-AI-Build-a-thon/issues/41) | -| You okay? Meet Vish AI, your mental health companion | An AI chatbot using RAG and LangChain for empathetic conversation and resource-based emotional wellness support whenever needed. | [View project](https://github.com/Azure-Samples/JS-AI-Build-a-thon/issues/38) | -| vmware-tools-broadcom | A Python tool that automatically syncs, archives, and manages VMware Tools from Broadcom, saving time and providing easy access for IT users. | [View project](https://github.com/Azure-Samples/JS-AI-Build-a-thon/issues/37) | -| Onboarding Software | A customizable recruitment and access platform leveraging azd templates to streamline candidate screening and enable healthy workplace culture. | [View project](https://github.com/Azure-Samples/JS-AI-Build-a-thon/issues/36) | -| Deepmine-Sentinel | An AI safety assistant built on a chat template for providing miners with real-time underground safety guidance and accident prevention monitoring. | [View project](https://github.com/Azure-Samples/JS-AI-Build-a-thon/issues/29) | -| Climate Action Assistant | An intelligent AI-powered climate action coach that delivers personalized, location-aware, and gamified environmental advice to help users reduce their carbon footprint effectively. | [View project](https://github.com/Azure-Samples/JS-AI-Build-a-thon/issues/48) | -| AI FODMAP Food Helper | A friendly AI shopping companion that provides instant FODMAP ratings and tailored IBS-safe grocery advice, making the low FODMAP diet accessible and stress-free. | [View project](https://github.com/Azure-Samples/JS-AI-Build-a-thon/issues/46) | -| healthy-living advisor | A health-focused AI chat app offering personalized, evidence-based, and accessible wellness, nutrition, and exercise advice. | [View project](https://github.com/Azure-Samples/JS-AI-Build-a-thon/issues/54) | -| FitMind AI | An AI-powered wellness assistant that delivers personalized workout plans, healthy diet advice, and mental well-being tips for physical and mental health improvement. | [View project](https://github.com/Azure-Samples/JS-AI-Build-a-thon/issues/44) | -| MrBonesπŸ’ͺ🦴.ai | An interactive AI anatomy assistant that transforms learning about the human skeletal system into an engaging, cloud-based virtual tutor and lab experience. | [View project](https://github.com/Azure-Samples/JS-AI-Build-a-thon/issues/49) | -| Academic Advisor AI - Course Discovery & Degree Planning | A specialized RAG-powered AI system that provides intelligent course recommendations, prerequisite guidance, and academic pathway planning for students across multiple degree clusters. | [View project](https://github.com/Azure-Samples/JS-AI-Build-a-thon/issues/50) | -| Cyby-Sec | An AI-driven cybersecurity chatbot that educates users, detects threats, and assists with real-time incident response through natural, human-like conversational guidance. | [View project](https://github.com/Azure-Samples/JS-AI-Build-a-thon/issues/57) | -| AI-Mental--Wellness-Chatbot | An AI-powered mental wellness assistant that delivers empathetic conversations, stress relief guidance, and motivational support through a private chat interface. | [View project](https://github.com/Azure-Samples/JS-AI-Build-a-thon/issues/61) | -| Your AI prompt assistant, PromptFix | An intelligent prompt engineering assistant that analyzes, debugs, and improves user prompts while providing AI-driven guidance for effective generative AI interactions. | [View project](https://github.com/Azure-Samples/JS-AI-Build-a-thon/issues/60) | -| AI Travel Guide for Sri Lanka | A conversational GenAI assistant that offers reliable, document-based travel guidance and local recommendations tailored specifically for visitors to Sri Lanka. | [View project](https://github.com/Azure-Samples/JS-AI-Build-a-thon/issues/59) | -| The Cofounder Who Never Sleeps, inizio.ai | An AI cofounder assistant that provides idea validation, step-by-step startup guidance, and emotionally intelligent mentoring for solo entrepreneurs. | [View project](https://github.com/Azure-Samples/JS-AI-Build-a-thon/issues/58) | -| Doctor AI | An AI health companion that offers real-time symptom triage, lifestyle advice, and always-available access for remote and underserved populations. | [View project](https://github.com/Azure-Samples/JS-AI-Build-a-thon/issues/62) | -| WanderWhiz Bot | An AI-powered travel assistant that offers personalized, city-specific guidance and real-time tips for travelers through a chat interface. | [View project](https://github.com/Azure-Samples/JS-AI-Build-a-thon/issues/63) | -| MediBot: AI Medical Symptom & Disease Assistant | An AI medical assistant that uses curated medical resources to provide instant, reliable answers about symptoms, diseases, and when to seek care. | [View project](https://github.com/Azure-Samples/JS-AI-Build-a-thon/issues/51) | -| Muse AI | An AI-powered platform that uses an enhanced API template to foster self-reflection and empathy through engaging prompts and conversational logic. | [View project](https://github.com/Azure-Samples/JS-AI-Build-a-thon/issues/71) | -| PetPal - Your AI Pet Care Assistant | A highly customized, serverless conversational AI assistant that delivers instant, personalized pet health and care guidance using Azure OpenAI and LangChain.js. | [View project](https://github.com/Azure-Samples/JS-AI-Build-a-thon/issues/70) | -| Education AI | An AI assistant using customized chat-with-your-data for fast student Q&A, quiz creation, and teacher dashboards from school content. | [View project](https://github.com/Azure-Samples/JS-AI-Build-a-thon/issues/69) | -| EcoGuardian: Your AI-Powered Carbon Footprint Tracker & Sustainability Coach | A scalable platform using Azure and JavaScript frameworks to track personal carbon emissions, provide AI-driven sustainability advice, and visualize impact for users. | [View project](https://github.com/Azure-Samples/JS-AI-Build-a-thon/issues/68) | -| MLSA LearnBot | An intelligent chatbot for Microsoft Learn Student Ambassadors that provides instant answers, integrated documentation, and a student-focused experience through Azure OpenAI and AI Search. | [View project](https://github.com/Azure-Samples/JS-AI-Build-a-thon/issues/67) | -| DocuChat AI | An AI chat app that enables users to interact conversationally with complex documents through RAG, memory, and semantic search for expert-level answers. | [View project](https://github.com/Azure-Samples/JS-AI-Build-a-thon/issues/66) | +The June 2025 program brought together developers who turned real-world ideas +into AI applications. Its project showcase is preserved in the +[program archive](https://azure-samples.github.io/JavaScript-AI-Buildathon/appendix/#june-2025-program).
--- -© 2026 JavaScript at Microsoft • [Code of Conduct](https://www.contributor-covenant.org/version/2/1/code_of_conduct/code_of_conduct.md) • [MIT License](https://gh.io/mit) - +JavaScript at Microsoft Β· +[Code of Conduct](https://www.contributor-covenant.org/version/2/1/code_of_conduct/code_of_conduct.md) Β· +[MIT License](https://gh.io/mit) diff --git a/assets/hack-roadmap.png b/assets/hack-roadmap.png deleted file mode 100644 index 601d9c8..0000000 Binary files a/assets/hack-roadmap.png and /dev/null differ diff --git a/assets/javascript-ai-learning-banner.png b/assets/javascript-ai-learning-banner.png new file mode 100644 index 0000000..6415b29 Binary files /dev/null and b/assets/javascript-ai-learning-banner.png differ diff --git a/assets/poster.svg b/assets/poster.svg deleted file mode 100644 index 78bb54e..0000000 --- a/assets/poster.svg +++ /dev/null @@ -1,248 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - Microsoft - - - - - DESIGN AI SOLUTIONS ON MICROSOFT'S AI STACK - - - - - - - - The JavaScript AI - - - - - Build-a-thon - - - - - Create, compete, and turn ideas into working AI. - - - - - - - JS - - - TS - - - - - - - - PROGRAM DATES - March 2 – March 31, 2026 - - - - - GUIDED QUESTS - - - 1 - Local AI - - - 2 - Foundry Models - - - 3 - Agentic RAG - - - 4 - Agent Orchestration - - - - - - - Register Now - - - - - #JSAIBuildathon - β€’ - aka.ms/JSAIBuildathon - - - - - { - } - - - - - - diff --git a/assets/pr-github-icon-dark.png b/assets/pr-github-icon-dark.png deleted file mode 100644 index f7976d6..0000000 Binary files a/assets/pr-github-icon-dark.png and /dev/null differ diff --git a/assets/pr-github-icon-light.png b/assets/pr-github-icon-light.png deleted file mode 100644 index 4e35356..0000000 Binary files a/assets/pr-github-icon-light.png and /dev/null differ diff --git a/assets/roadmap.svg b/assets/roadmap.svg deleted file mode 100644 index 89ec350..0000000 --- a/assets/roadmap.svg +++ /dev/null @@ -1,272 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - Microsoft - - - - - THE JAVASCRIPT AI BUILD-A-THON - - - - - - Program - - - Roadmap - - - - - March 2 – March 31, 2026 - - - - - - - - - - - - - JS - - TS - - - - - - - - - - - - - - { - } - - - - - - - - PHASE 1: LEARN & SKILL UP - - - - PHASE 2: HACK! - - - - - - - - - - - - - - - - - - - - - Mar 2 - Kickoff - Mar 6 - Mar 13 - Hack Launch - Mar 31 - Submissions Due - - - - - - - - - - - WEEK 1 - Mar 2 – 6 - - - - - Quest 1: Local AI - - - - - - Quest 2: E2E Model Dev - on Foundry - - - - - - Quest 3: RAG System - - - - - - - - LIVESTREAMS ON REACTOR - Mon — Foundry Local Deep Dive - Wed — Model Dev on Foundry - Fri — RAG Deep Dive + Project - - - - - + Discord Office Hours after each session - - - - - - - - WEEK 2 - Mar 9 – 13 - - - - - Quest 4: AI Agents - - - - - - Quest 5: Design Scalable - Multi-Agent Systems - - - - - - - - LIVESTREAMS ON REACTOR - Mon — Agent Builder E2E - Wed — Build & Govern Agents - Fri — Global Hack Launch 🚀 - - - - - + Discord Office Hours after each session - - - - - - - - HACK PHASE - Mar 13 – 31 - - - - - - 🔥 - - - Hackathon details will be - published on March 13 - at the Hack Launch! - - - - Registration, submission guidelines, - judging criteria, award categories, - prizes, and more — stay tuned! - - - - - #JSAIBuildathon - • aka.ms/JSAIBuildathon • Free & Open Source - \ No newline at end of file diff --git a/assets/season2-coming-soon.svg b/assets/season2-coming-soon.svg deleted file mode 100644 index aa7b0ef..0000000 --- a/assets/season2-coming-soon.svg +++ /dev/null @@ -1,86 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - JS - - - - - - - - - - - - - - The JavaScript AI Build-a-thon - - - - - SEASON 2 - - - - - - - - COMING SOON - - - - - New quests Β· New challenges Β· Build AI apps with JavaScript - - diff --git a/assets/social/javascript-ai-square.png b/assets/social/javascript-ai-square.png new file mode 100644 index 0000000..a887fcc Binary files /dev/null and b/assets/social/javascript-ai-square.png differ diff --git a/assets/social/javascript-ai-vertical.png b/assets/social/javascript-ai-vertical.png new file mode 100644 index 0000000..7351aef Binary files /dev/null and b/assets/social/javascript-ai-vertical.png differ diff --git a/docs/appendix.md b/docs/appendix.md new file mode 100644 index 0000000..736abd0 --- /dev/null +++ b/docs/appendix.md @@ -0,0 +1,83 @@ +# Program archive + +The JavaScript AI Build-a-thon began as a series of time-bound learning +programs. Their results are preserved here while the Quests remain available +as an anytime learning resource. + +## March 2026 program + +
+View award recipients and project links +
+ +### Award recipients + +| Recognition | Project | Links | +|---|---|---| +| Grand Prize | CivicLens AI | [Repository](https://github.com/JonEricEubanks/CivicLens) Β· [Blog](https://portfolio-jet-five-57.vercel.app/#blog) Β· [Live app](https://civiclens-app.azurewebsites.net/) Β· [Demo](https://youtu.be/rFCUO5acv5Q) | +| Offline-Ready AI Award | SourcingIntel | [Repository](https://github.com/Kalyan-AI-Hub/SourcingIntel) Β· [Blog](https://dev.to/kalyan_8b63839572c8a7db1b/building-sourcing-intel-an-ai-powered-supply-chain-intelligence-platform-with-on-device-inference-4kdi) Β· [Demo](https://youtu.be/CEXyfcWrI_8?si=dO9tQwln6T3ZZDZM) | +| Agentic System Architecture | Agile Sprint Orchestrator | [Repository](https://github.com/snehasankaran/agile-sprint-orchestrator) Β· [Live app](https://agile-sprint-orchestrator-h9ks.vercel.app/) Β· [Demo](https://youtu.be/7eUrJVtNtbQ?si=SrvPo9sBhvHhpoeE) | + +### Project showcase + +| Project | Description | Links | +|---|---|---| +| Sauti Porini | An autonomous AI agent for proactive forest-conservation monitoring using state-machine logic, IoT, and satellite intelligence. | [Repository](https://github.com/Gerald-mut/Sauti-Porini-Js) Β· [Blog](https://medium.com/@muterugerald/building-sauti-porini-356c7e01c225) Β· [Demo](https://youtu.be/-lXLX5dN_T4?si=M4cLJqrlox-HQNoR) | +| Talewind | An AI story tutor that learns a child's world and teaches through personalized stories. | [Repository](https://github.com/digitalfl0wer/taleWind) | +| Superhuman AI Chief of Staff | A multi-agent intelligence layer for organizational knowledge and workflows. | [Repository](https://github.com/snjugunanjenga/org-flow-ai/) Β· [Blog](https://medium.com/@simonnjenganjuguna/superhuman-ai-chief-of-staff-074cf4b2af34) Β· [Live app](https://org-ai-chief-of-staff.vercel.app/) Β· [Demo](https://www.youtube.com/watch?v=wJXagm1TU18) | +| AI Policy Explainer | A grounded assistant that makes policies from colleges, companies, and governments easier to understand. | [Repository](https://github.com/scha54/AI-Policy-Explainer) Β· [Blog](https://medium.com/@sandeepchakravartty/building-a-grounded-pdf-q-a-agent-with-react-express-and-rag-4fc03cbc6741) Β· [Demo](https://youtu.be/S_BTCm2UKh0?si=N7fuAt1PPhK1W_o7) | +| Matchflow | A multi-agent system for autonomous negotiation between brands and creators. | [Repository](https://github.com/tilakgupta2005/Matchflow) Β· [Blog](https://tilak-dev.vercel.app/blog/matchflow-autonomous-ai-negotiation-engine) Β· [Live app](https://matchflow-ai.vercel.app/) Β· [Demo](https://youtu.be/LqKXRuOoUCc?si=ElvTHyQ52sn--tlv) | +| KrishiAI | An AI farming assistant with disease detection, multilingual chat, recommendations, forecasting, and fertilizer optimization. | [Repository](https://github.com/ManishKumawat450/KrishiAi) Β· [Blog](https://dev.to/manish_kumawat_0202f769e7/building-real-ai-in-24-hours-krishiai-with-github-copilot-9ml) Β· [Demo](https://youtu.be/3G2sJmo3rnk?si=CXRS1YUWXtZnj7be) | +| Mauzoplus | An AI-supported sales platform designed for African businesses. | [Blog](https://docs.mauzoplus.app/) Β· [Demo](https://youtu.be/fE7_CjSJ0cs?si=wz3wpIjkW_3Qx1T8) | +| GlobeTrotter | An LLM-powered way to discover landmarks on an interactive globe. | [Repository](https://github.com/BY3D/Globetrotter-Build-a-Thon-2026) Β· [Demo](https://vimeo.com/1178243103?share=copy) | +| AccessBridge AI | A five-agent system that detects and addresses web accessibility barriers. | [Repository](https://github.com/jpablortiz96/accessbridge-ai) Β· [Blog](https://dev.to/jpablortiz96/building-accessbridge-ai-how-5-ai-agents-collaborate-to-make-the-web-accessible-24kf) Β· [Live app](https://accessbridge-ai.vercel.app/) Β· [Demo](https://youtu.be/SFbjWWApP4M?si=8act2mG6aXXszGI8) | +| CODE2FLOW AI | An AI-powered code visualizer for exploring software architecture. | [Repository](https://github.com/shreeplays/Microsoft-hackathon) Β· [Blog](https://dev.to/forgotten_areeb/code2flow-ai-visualizing-code-architecture-using-ai-24) Β· [Demo](https://youtu.be/OG_b3GTaV6o) | +| Multi-Agent Meeting Intelligence Assistant | A real-time meeting assistant built with TypeScript and multi-agent orchestration. | [Repository](https://github.com/Malvine254/Missa-The-Translator) Β· [Blog](https://malvine254.github.io/meeting-intelligence-assistant/) Β· [Demo](https://youtu.be/yo6T_LnPowg?si=kjVIm_z2pzGAH5ZQ) | +| Water Quality Control | A project focused on supporting safe water and sanitation. | [Repository](https://github.com/ZEEZCO/Water-Quality-Analysis-Analyzer-) Β· [Demo](https://youtu.be/xxae9aRmhlk?si=AWzncU7HjXAgGt9G) | +| InboxShield AI | An AI project for email security, fraud detection, and cybersecurity. | [Repository](https://github.com/peymosiec01/inboxshield-ai) | +| AfyaPack | An offline-first clinical decision-support tool for community health workers in East Africa. | [Repository](https://github.com/DaymondMartin/AfyaPack) Β· [Blog](https://daymondmartin.github.io/AfyaPack/) Β· [Demo](https://youtu.be/Hlb94C4W2Ps?si=l_c_ZAyqWAGwEVT8) | +| ContextGuard AI | A grounded MERN study assistant with flashcards and Mermaid diagrams. | [Repository](https://github.com/x88-code/JS-AI-Build-a-thon-Hack) Β· [Blog](https://dev.to/x88code/building-contextguard-ai-a-grounded-mern-study-assistant-with-flashcards-mermaid-diagrams-and-15h1) Β· [Live app](https://js-ai-build-a-thon-hack.vercel.app/) Β· [Demo](https://youtu.be/nTpxgDchvas?si=YBfrVYMF03quDmFD) | +| Tuwon | An interactive learning platform with a real-time AI proctor. | [Repository](https://github.com/nerdeulivrian/tuwon.dev) Β· [Blog](https://medium.com/@ian_52882/building-tuwon-an-ai-study-platform-that-talks-back-968a44b66bf1) Β· [Live app](https://www.tuwon.app/) Β· [Demo](https://youtu.be/fneyfto0pTw?si=zPEyvzfRxIKUi0HJ) | +| Neural Math Lab | A hybrid AI math tutor designed to teach steps and reasoning online or offline. | [Repository](https://github.com/dev-Adhithiya/Neural-Math-Lab) Β· [Blog](https://dev.to/devadhithiya/beyond-the-chatbot-engineering-a-hybrid-ai-math-tutor-for-the-future-86g) Β· [Live app](https://dev-adhithiya.github.io/Neural-Math-Lab/) Β· [Demo](https://youtu.be/-IjN8eADVoA?si=UaoUX5HvlNJh7nYm) | + +
+
+ +## June 2025 program + +
+View the project showcase +
+ +| Project | Description | Submission | +|---|---|---| +| AI Career Navigator - Your Personal AI Career Coach | An AI-powered career coaching application by [Aryanjstar](https://github.com/Aryanjstar) that analyzes resumes, identifies skill gaps, and guides developers to targeted job opportunities, interview readiness, and skill growth. | [View project](https://github.com/Azure-Samples/JS-AI-Build-a-thon/issues/47) | +| ACTS Sri Lanka | An AI-powered legal assistant for Sri Lankan government documents that enables fast, citation-backed legal Q&A and search for citizens and professionals. | [View project](https://github.com/Azure-Samples/JS-AI-Build-a-thon/issues/42) | +| JuaKatiba AI Agent | A serverless RAG-powered chatbot that explains and interprets Kenyan legal and constitutional documents. | [View project](https://github.com/Azure-Samples/JS-AI-Build-a-thon/issues/41) | +| You okay? Meet Vish AI, your mental health companion | An AI chatbot using RAG and LangChain for empathetic conversation and resource-based emotional wellness support. | [View project](https://github.com/Azure-Samples/JS-AI-Build-a-thon/issues/38) | +| vmware-tools-broadcom | A Python tool that syncs, archives, and manages VMware Tools from Broadcom. | [View project](https://github.com/Azure-Samples/JS-AI-Build-a-thon/issues/37) | +| Onboarding Software | A customizable recruitment and access platform using azd templates. | [View project](https://github.com/Azure-Samples/JS-AI-Build-a-thon/issues/36) | +| Deepmine-Sentinel | An AI safety assistant for underground mining guidance and accident prevention monitoring. | [View project](https://github.com/Azure-Samples/JS-AI-Build-a-thon/issues/29) | +| Climate Action Assistant | A personalized, location-aware environmental coach that helps users reduce their carbon footprint. | [View project](https://github.com/Azure-Samples/JS-AI-Build-a-thon/issues/48) | +| AI FODMAP Food Helper | A shopping companion offering FODMAP ratings and tailored IBS-safe grocery guidance. | [View project](https://github.com/Azure-Samples/JS-AI-Build-a-thon/issues/46) | +| healthy-living advisor | A health-focused AI chat app with wellness, nutrition, and exercise guidance. | [View project](https://github.com/Azure-Samples/JS-AI-Build-a-thon/issues/54) | +| FitMind AI | A wellness assistant with personalized workout, diet, and mental well-being guidance. | [View project](https://github.com/Azure-Samples/JS-AI-Build-a-thon/issues/44) | +| MrBones.ai | An interactive anatomy assistant for learning about the human skeletal system. | [View project](https://github.com/Azure-Samples/JS-AI-Build-a-thon/issues/49) | +| Academic Advisor AI - Course Discovery & Degree Planning | A RAG-powered system for course recommendations, prerequisites, and academic pathways. | [View project](https://github.com/Azure-Samples/JS-AI-Build-a-thon/issues/50) | +| Cyby-Sec | An AI-driven cybersecurity chatbot for education, threat detection, and incident response. | [View project](https://github.com/Azure-Samples/JS-AI-Build-a-thon/issues/57) | +| AI-Mental--Wellness-Chatbot | A mental-wellness assistant for empathetic conversations and stress-relief guidance. | [View project](https://github.com/Azure-Samples/JS-AI-Build-a-thon/issues/61) | +| Your AI prompt assistant, PromptFix | A prompt-engineering assistant that analyzes, debugs, and improves prompts. | [View project](https://github.com/Azure-Samples/JS-AI-Build-a-thon/issues/60) | +| AI Travel Guide for Sri Lanka | A conversational assistant for document-based travel guidance and local recommendations. | [View project](https://github.com/Azure-Samples/JS-AI-Build-a-thon/issues/59) | +| The Cofounder Who Never Sleeps, inizio.ai | An AI cofounder for idea validation, startup guidance, and mentoring. | [View project](https://github.com/Azure-Samples/JS-AI-Build-a-thon/issues/58) | +| Doctor AI | A health companion for symptom triage, lifestyle advice, and remote access. | [View project](https://github.com/Azure-Samples/JS-AI-Build-a-thon/issues/62) | +| WanderWhiz Bot | A personalized, city-specific conversational travel assistant. | [View project](https://github.com/Azure-Samples/JS-AI-Build-a-thon/issues/63) | +| MediBot: AI Medical Symptom & Disease Assistant | A medical assistant using curated resources to answer questions about symptoms and diseases. | [View project](https://github.com/Azure-Samples/JS-AI-Build-a-thon/issues/51) | +| Muse AI | A platform using an enhanced API template to support self-reflection and empathy. | [View project](https://github.com/Azure-Samples/JS-AI-Build-a-thon/issues/71) | +| PetPal - Your AI Pet Care Assistant | A serverless conversational assistant for personalized pet health and care guidance. | [View project](https://github.com/Azure-Samples/JS-AI-Build-a-thon/issues/70) | +| Education AI | A customized chat-with-your-data assistant for student Q&A, quizzes, and teacher dashboards. | [View project](https://github.com/Azure-Samples/JS-AI-Build-a-thon/issues/69) | +| EcoGuardian | A platform that tracks personal carbon emissions and provides AI-driven sustainability guidance. | [View project](https://github.com/Azure-Samples/JS-AI-Build-a-thon/issues/68) | +| MLSA LearnBot | A chatbot for Microsoft Learn Student Ambassadors with integrated documentation and student-focused answers. | [View project](https://github.com/Azure-Samples/JS-AI-Build-a-thon/issues/67) | +| DocuChat AI | A document-chat application with RAG, memory, and semantic search. | [View project](https://github.com/Azure-Samples/JS-AI-Build-a-thon/issues/66) | + +
+
diff --git a/docs/index.md b/docs/index.md index 522f79b..af6755d 100644 --- a/docs/index.md +++ b/docs/index.md @@ -1,271 +1,90 @@ --- hide: - navigation + - toc --- -JavaScript AI Build-a-thon - ---- - -
- -πŸ† - -# πŸŽ‰ And the Winners Are... - -

The JavaScript AI Build-a-thon has concluded! Thank you to every builder who turned bold ideas into working AI. Here are the projects that stood out.

- -
- -## πŸ† Award Winners - -
- -
- -πŸ₯‡ -
GRAND PRIZE
-
$1,000
-
CivicLens AI
-
A multi-agent AI pipeline that transforms invisible municipal infrastructure data into plain-language intelligence reports, dispatches repair crews, and predicts infrastructure failures β€” all in JavaScript.
-
-πŸ“‚ Repository -πŸ“ Blog Post -🌐 Live App -▢️ Demo Video -
- -
- -
- -
- -πŸ₯ˆ -
OFFLINE-READY AI AWARD
-
$500
-
SourcingIntel
-
AI-Powered Supply Chain Intelligence Platform with on-device inference.
-
-πŸ“‚ Repo -πŸ“ Blog -▢️ Demo -
- -
- -
- -πŸ₯‰ -
AGENTIC SYSTEM ARCHITECTURE
-
$500
-
Agile Sprint Orchestrator
-
The Intelligence Layer That Runs Your Sprint β€” a multi-agent system for autonomous agile lifecycle management.
-
-πŸ“‚ Repo -🌐 App -▢️ Demo -
- -
- -
- -
- -## πŸš€ All Submissions - -Every project that participated in the JavaScript AI Build-a-thon β€” celebrating builders from around the world. - -
- -
-
Sauti Porini
-
An autonomous AI agent that shifts forest conservation from passive to proactive monitoring using deterministic state-machine logic, IoT, and satellite intelligence.
-
-πŸ“‚ Repo -πŸ“ Blog -▢️ Video -
-
- -
-
Talewind
-
An AI story tutor that learns every child's world β€” then teaches them through a story that feels like it was made just for them.
-
-πŸ“‚ Repo -
-
- -
-
Superhuman AI Chief of Staff
-
The AI Operating System for Organizational Intelligence β€” a multi-agent intelligence layer for the company brain.
-
-πŸ“‚ Repo -πŸ“ Blog -🌐 App -▢️ Video -
-
- -
-
AI Policy Explainer
-
Policies from colleges, companies, and governments β€” now easy to understand.
-
-πŸ“‚ Repo -πŸ“ Blog -▢️ Video -
-
- -
-
Matchflow
-
The Intelligence Layer Connecting Brands and Creators β€” a multi-agent system for autonomous negotiation.
-
-πŸ“‚ Repo -πŸ“ Blog -🌐 App -▢️ Video -
-
- -
-
KrishiAI
-
AI-powered farming assistant for Indian farmers with disease detection, multi-language chat, crop recommendations, price forecasting, and fertilizer optimization.
-
-πŸ“‚ Repo -πŸ“ Blog -▢️ Video -
-
- -
-
Mauzoplus
-
Smarter Sales, Powered by AI for Africa.
-
-πŸ“ Blog -▢️ Video -
-
- -
-
GlobeTrotter
-
A fun, LLM-powered way to discover landmarks on a globe.
-
-πŸ“‚ Repo -▢️ Video -
-
- -
-
AccessBridge AI
-
A multi-agent AI system that transforms any web page into universally accessible content β€” five specialized agents collaborate to detect and auto-fix accessibility barriers.
-
-πŸ“‚ Repo -πŸ“ Blog -🌐 App -▢️ Video -
-
- -
-
CODE2FLOW AI
-
AI-Powered Code Visualizer β€” see your code architecture come to life.
-
-πŸ“‚ Repo -πŸ“ Blog -▢️ Video -
-
- -
-
Multi-Agent Meeting Intelligence Assistant
-
A real-time, AI-powered meeting assistant built with TypeScript and multi-agent orchestration.
-
-πŸ“‚ Repo -πŸ“ Blog -▢️ Video -
-
- -
-
Water Quality Control
-
Healthy lives begin with safe water and sanitation.
-
-πŸ“‚ Repo -▢️ Video -
-
- -
-
InboxShield AI
-
Email Security, Fraud Detection, Cybersecurity.
-
-πŸ“‚ Repo -
-
- -
-
AfyaPack
-
An offline-first AI clinical decision support tool for community health workers in East Africa β€” protocol-grounded guidance in English and Swahili.
-
-πŸ“‚ Repo -πŸ“ Blog -▢️ Video -
-
- -
-
ContextGuard AI
-
A grounded MERN study assistant with flashcards, Mermaid diagrams, and more.
-
-πŸ“‚ Repo -πŸ“ Blog -🌐 App -▢️ Video -
-
- -
-
Tuwon
-
Test your knowledge through interactive activities with a real-time AI proctor.
-
-πŸ“‚ Repo -πŸ“ Blog -🌐 App -▢️ Video -
-
- -
-
Neural Math Lab
-
See the math, learn the steps, and level up your skills β€” online or offline, with an AI that's a partner, not a cheat sheet.
-
-πŸ“‚ Repo -πŸ“ Blog -🌐 App -▢️ Video -
-
- -
- -## πŸ’¬ Community & Support - -
- -- **Discord** - - --- - - Office hours throughout the build-a-thon, plus quick questions and community support - - [**Join Discord β†’**](https://aka.ms/JSAIonDiscord) - -- **Social** - - --- - - Share your progress with **#JSAIBuildathon** on social media - -
+
+

Learn AI by building with JavaScript

+ +
+ + + +
+
+

Self-paced. Open source. Available anytime.

+ Start with Quest 1 + Choose a Quest +
+
+ +## One path, five practical outcomes + +
    +
  1. + Run AI locally + Use on-device models for privacy, speed, and offline access. +
    2. +
  2. + Understand the model lifecycle + Explore selection, customization, evaluation, tracing, and AI red teaming. +
    3. +
  3. + Ground responses with your data + Build a RAG pipeline with ingestion, retrieval, citations, streaming, and history. +
    4. +
  4. + Build and evaluate an agent + Compare models, connect MCP tools, test responses, and export working code. +
    5. +
  5. + Explore a complete agent system + Trace how an agent, APIs, MCP services, and application interfaces work together. +
    6. +
+ +## Choose your starting point + +### New to AI development + +Begin with [Quest 1: Local AI Development](https://github.com/Azure-Samples/JavaScript-AI-Buildathon/tree/main/01-Local-AI-Development), +then follow the Quests in order. Each introduces a new pattern while keeping +JavaScript or TypeScript at the center. + +### Ready for retrieval or agents + +Go directly to the [Quest directory](quests.md) to compare outcomes, +environments, and prerequisites before choosing your path. + +## Learn on your schedule + +Every Quest is available whenever you are. Work through the written guide, +use the optional recording when a walkthrough helps, and adapt the examples to +your own scenario. + +[Read the start guide](start-here.md){ .md-button .md-button--primary } + +

+Looking for earlier program results? +Visit the program archive. +

diff --git a/docs/javascripts/hero-video.js b/docs/javascripts/hero-video.js new file mode 100644 index 0000000..7930639 --- /dev/null +++ b/docs/javascripts/hero-video.js @@ -0,0 +1,48 @@ +(() => { + const reduceMotion = window.matchMedia("(prefers-reduced-motion: reduce)"); + + const setButtonState = (video, button) => { + const label = button.querySelector("[data-hero-toggle-label]"); + const paused = video.paused; + button.setAttribute("aria-label", paused ? "Play animation" : "Pause animation"); + if (label) { + label.textContent = paused ? "Play animation" : "Pause animation"; + } + }; + + const setupHeroVideo = () => { + document.querySelectorAll("[data-hero-video]").forEach((video) => { + const container = video.closest(".hero-media"); + const button = container?.querySelector("[data-hero-toggle]"); + + if (!button || button.dataset.bound === "true") { + return; + } + + button.dataset.bound = "true"; + + if (reduceMotion.matches) { + video.pause(); + } + + button.addEventListener("click", () => { + if (video.paused) { + video.play(); + } else { + video.pause(); + } + setButtonState(video, button); + }); + + video.addEventListener("play", () => setButtonState(video, button)); + video.addEventListener("pause", () => setButtonState(video, button)); + setButtonState(video, button); + }); + }; + + if (typeof document$ !== "undefined") { + document$.subscribe(setupHeroVideo); + } else { + document.addEventListener("DOMContentLoaded", setupHeroVideo); + } +})(); diff --git a/docs/media/award-categories.png b/docs/media/award-categories.png deleted file mode 100644 index 848f15e..0000000 Binary files a/docs/media/award-categories.png and /dev/null differ diff --git a/docs/media/banner-main.svg b/docs/media/banner-main.svg deleted file mode 100644 index 2160a0b..0000000 --- a/docs/media/banner-main.svg +++ /dev/null @@ -1,202 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - 1 - - - - - - 2 - - - - - - 3 - - - - - - 4 - - - - - - 5 - - - Local AI - Foundry Models - RAG - Agent Builder - Agent Orchestration - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - Microsoft - - - - - - - JS - - - TS - - - - - - - - JavaScript AI - - - Build-a-thon - - - - - Learn. Build. Ship. β€” From quests to working AI prototypes. - - - - - - - Phase 1: Learn & Skill Up - - - Phase 2: Hack! - - - - - March 2 – March 31, 2026 - - - - - #JSAIBuildathon - β€’ aka.ms/JSAIBuildathon - diff --git a/docs/media/hack-roadmap.svg b/docs/media/hack-roadmap.svg deleted file mode 100644 index 1b1318a..0000000 --- a/docs/media/hack-roadmap.svg +++ /dev/null @@ -1,350 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - Microsoft - - - - - THE JAVASCRIPT AI BUILD-A-THON - - - - - - Hack - - - Roadmap - - - - - Agents for Impact - - - — March 13 – April 15, 2026 - - - - - - - - - - - - - JS - - TS - - - - - - - - - - - - - - { - } - - - - - - - - HACK PHASE: BUILD - - - - POST-HACK - - - - - - - - - - - - - - - - - - - - - - - - Mar 13 - Hack Launch - - Mar 31 - Deadline 11:59 PM - - Apr 6–10 - Judging - - Apr 15 - Winners! - - - - - - - - - - - - AZURE DEMOS - on Discord - - - - ☁ - - - - - Mar 16 - Azure MCP & Foundry MCP - - - MCP servers for Azure & AI Foundry - - - - - - Mar 18 - Azure Developer CLI (azd) - - - Templates, deploy & manage apps - - - - - - Mar 20 - Azure Document DB - - - NoSQL database for AI applications - - - - - - - - - AZURE - - FOUNDRY - - MCP - - - - - Mon / Wed / Fri • Live on Discord - - - - - - - - - - GITHUB DEMOS - on Discord - - - - - - - - - - - Mar 23 - GitHub Copilot CLI & SDK - - - CLI tools & SDK integration - - - - - - Mar 25 - GitHub Agentic Workflows - - - Orchestrate AI agent pipelines - - - - - - Mar 27 - Copilot App Modernization - - - Modernize legacy codebases with AI - - - - - - - - - COPILOT - - AGENTS - - WORKFLOWS - - - - - Mon / Wed / Fri • Live on Discord - - - - - - - - - - KEY MILESTONES - - - - - - Mar 13 - Registration Opens - Hack launches — start building! - - - - - - - Mar 31 - Submission Deadline - 11:59 PM PST — final submissions - - - - - - - - - - Apr 6 – 10 - Judging Period - Expert panel reviews submissions - - - - - - - Apr 15 - Winners Announced 🏆 - Prizes & recognition - - - - - #JSAIBuildathon - • aka.ms/JSAIBuildathon • Free & Open Source - \ No newline at end of file diff --git a/docs/media/hero/learning-path-poster.png b/docs/media/hero/learning-path-poster.png new file mode 100644 index 0000000..a913a33 Binary files /dev/null and b/docs/media/hero/learning-path-poster.png differ diff --git a/docs/media/hero/learning-path.mp4 b/docs/media/hero/learning-path.mp4 new file mode 100644 index 0000000..c50cb85 Binary files /dev/null and b/docs/media/hero/learning-path.mp4 differ diff --git a/docs/media/hero/learning-path.webm b/docs/media/hero/learning-path.webm new file mode 100644 index 0000000..4da7cb5 Binary files /dev/null and b/docs/media/hero/learning-path.webm differ diff --git a/docs/quests.md b/docs/quests.md index 71af7f0..40021a0 100644 --- a/docs/quests.md +++ b/docs/quests.md @@ -1,103 +1,89 @@ -# Quests +# Choose a Quest -Each quest teaches a core AI development pattern with JavaScript/TypeScript. +Each Quest teaches a practical AI development pattern with JavaScript or +TypeScript. Follow them in order for a complete path, or choose the outcome +that matches what you want to learn next. -
+
-
+
-## πŸ’» Quest 1: Local AI Development with Foundry Local +## Quest 1: Local AI Development with Foundry Local -**Run AI models on-device** for privacy, speed, and offline access using Microsoft Foundry Local. +Run AI models on-device for privacy, low latency, and offline access. -You'll learn to: +**You will explore:** model management with the Foundry Local CLI, LangChain.js +integration, structured extraction from unstructured text, and private coding +assistance with local models. -- Install and manage local AI models with Foundry Local CLI -- Use the Foundry Local SDK with LangChain.js -- Build an AI Insight Mapper that extracts structured data from unstructured text -- Power GitHub Copilot with local models for private coding assistance +**Environment:** Local -!!! info "Award Recognition: Offline-Ready AI Award" - This quest mapped to the **Offline-Ready AI Award** category. Participants who built apps processing sensitive data entirely on-device earned recognition for privacy + latency optimizations. +[Start Quest 1](https://github.com/Azure-Samples/JavaScript-AI-Buildathon/tree/main/01-Local-AI-Development){ .md-button .md-button--primary } -[**Start Quest 1 β†’**](https://github.com/Azure-Samples/JavaScript-AI-Buildathon/tree/main/01-Local-AI-Development) +
-
+
-
+## Quest 2: End-to-End Model Development on Microsoft Foundry -## ☁️ Quest 2: End-to-End Model Development on Microsoft Foundry +Work through the lifecycle of a cloud AI solution, from choosing a model to +evaluating and protecting an agent. -**Build AI solutions end-to-end in the cloud** with Microsoft Foundry models and workflows. +**You will explore:** the model catalog and playgrounds, customization, +evaluation, tracing, safety, and cloud-scale development patterns. -You'll learn to: +**Environment:** Cloud -- Explore model selection workflows using catalog, leaderboards, and playgrounds -- Understand customization options like fine-tuning -- Evaluate model quality, safety, and trustworthiness -- Apply cloud-scale AI development patterns for real-world scenarios +[Start Quest 2](https://github.com/Azure-Samples/JavaScript-AI-Buildathon/tree/main/02-E2E-Model-Development-on-Foundry){ .md-button .md-button--primary } -[**Start Quest 2 β†’**](https://github.com/Azure-Samples/JavaScript-AI-Buildathon/tree/main/02-E2E-Model-Development-on-Foundry) +
-
+
-
+## Quest 3: Run a Serverless RAG Support System -## πŸ” Quest 3: Run a Serverless RAG Support System +Build a retrieval-augmented generation pipeline with LangChain.js and local +models. -**Build a retrieval-augmented generation pipeline** with LangChain.js and local models. +**You will explore:** document ingestion, vector storage, semantic retrieval, +grounded responses with citations, streaming, and chat history. -You'll learn to: +**Environment:** Local & Cloud -- Set up a serverless RAG system with document ingestion -- Implement vector storage and semantic retrieval -- Generate grounded responses with citations -- Handle streaming and chat history +[Start Quest 3](https://github.com/Azure-Samples/JavaScript-AI-Buildathon/tree/main/03-Run-Serverless-RAG-Support-System){ .md-button .md-button--primary } -[**Start Quest 3 β†’**](https://github.com/Azure-Samples/JavaScript-AI-Buildathon/tree/main/03-Run-Serverless-RAG-Support-System) +
-
+
-
+## Quest 4: Build Agents with AI Toolkit -## πŸ€– Quest 4: Build Agents with AI Toolkit +Create and evaluate an agent with the AI Toolkit for Visual Studio Code. -**Create AI agents** with the AI Toolkit for VS Code β€” from model discovery to evaluation. +**You will explore:** model comparison, Agent Builder, dynamic variables, MCP +server integration, response evaluation, and code export. -You'll learn to: +**Environment:** Local & Cloud -- Explore and compare models in the Model Catalog -- Build agents with Agent Builder and dynamic variables -- Integrate MCP servers for tool use -- Evaluate agent performance with built-in and custom metrics -- Export production-ready code +[Start Quest 4](https://github.com/Azure-Samples/JavaScript-AI-Buildathon/tree/main/04-Build-Agents-with-AIToolKit){ .md-button .md-button--primary } -!!! info "Award Recognition: Agentic System Architecture Award" - This quest taught the patterns needed for the **Agentic System Architecture Award** β€” innovative agent design with MCP tool integration. +
-[**Start Quest 4 β†’**](https://github.com/Azure-Samples/JavaScript-AI-Buildathon/tree/main/04-Build-Agents-with-AIToolKit) +
- +## Quest 5: Run an End-to-End Burger Ordering Agent System -
+Explore a complete agentic system with LangChain.js and MCP integrations. -## πŸ” Quest 5: Run an E2E Burger Ordering Agent System +**You will explore:** agent architecture, multi-service workflows, MCP tools, +agent APIs, backend services, and an Azure scaling path. -**Design and run a full agentic system** with MCP server integration using LangChain.js. +**Environment:** Local & Cloud -You'll learn to: +[Start Quest 5](https://github.com/Azure-Samples/JavaScript-AI-Buildathon/tree/main/05-Run-Burger-Ordering-Agent-System){ .md-button .md-button--primary } -- Understand AI agent architecture patterns -- Design multi-service agent workflows -- Build MCP tools for external system integration -- Create agent APIs and backend services -- Plan for production scaling with Azure - -!!! info "Award Recognition: Agentic System Architecture Award" - This quest demonstrated foundational patterns for **useful, reliable, and secure** agent systems. - -[**Start Quest 5 β†’**](https://github.com/Azure-Samples/JavaScript-AI-Buildathon/tree/main/05-Run-Burger-Ordering-Agent-System) +
- +Not sure where to begin? [Read the start guide](start-here.md). diff --git a/docs/start-here.md b/docs/start-here.md new file mode 100644 index 0000000..df5e62a --- /dev/null +++ b/docs/start-here.md @@ -0,0 +1,54 @@ +# Start here + +The JavaScript AI Build-a-thon is a self-paced learning resource for +JavaScript and TypeScript developers. Each Quest focuses on a practical AI +development pattern and links to the code, tools, and walkthrough needed to +explore it. + +## Choose a path + +### Follow the full journey + +Start with local AI and complete the Quests in order: + +1. Run a model on your own device. +2. Explore an end-to-end model development workflow. +3. Build a retrieval-augmented generation system. +4. Create and evaluate an agent with MCP tools. +5. Explore a complete multi-service agent system. + +This path is the best fit when the concepts are new or you want to understand +how the patterns relate. + +### Focus on one skill + +Use the [Quest directory](quests.md) to compare outcomes and environments. +You can complete any Quest independently when its prerequisites match your +experience and setup. + +## Before you begin + +- Use a current development environment that can run the tools named in your chosen Quest. +- Review the Quest-specific prerequisites before installing or deploying anything. +- Use a personal GitHub account when a Quest asks you to fork or open a Codespace. +- Check cost notes before creating cloud resources. +- Remove cloud resources when a Quest tells you to clean up. + +The individual Quest remains the source of truth for its setup and technical +instructions. + +## Written guides and recordings + +Every Quest is designed to work from its written README. Most Quests also link +to an optional recording at the top of the page. Use the recording as a +companion walkthrough, not as a prerequisite or scheduled session. + +## When you finish + +Try one small adaptation before moving on: change the scenario, use different +data, compare another model, add an evaluator, or inspect a different tool +boundary. Applying the pattern in a new context helps turn the walkthrough into +a reusable skill. + +[Browse all Quests](quests.md){ .md-button .md-button--primary } +[Start Quest 1](https://github.com/Azure-Samples/JavaScript-AI-Buildathon/tree/main/01-Local-AI-Development){ .md-button } diff --git a/docs/stylesheets/extra.css b/docs/stylesheets/extra.css index fa669c6..100caa8 100644 --- a/docs/stylesheets/extra.css +++ b/docs/stylesheets/extra.css @@ -1,678 +1,485 @@ :root { - --js-yellow: #F7DF1E; - --ai-blue: #3b82f6; - --ai-purple: #8b5cf6; - --ai-pink: #ec4899; - --gradient-primary: linear-gradient(135deg, var(--ai-blue), var(--ai-purple)); - --gradient-accent: linear-gradient(135deg, var(--ai-purple), var(--ai-pink)); - --gradient-hero: linear-gradient(135deg, #0f172a 0%, #1e1b4b 50%, #0f172a 100%); - --card-radius: 12px; - --card-shadow: 0 2px 12px rgba(0,0,0,.08); - --card-shadow-hover: 0 8px 30px rgba(59,130,246,.15); - --transition-smooth: .25s cubic-bezier(.4,0,.2,1); + --ink: #101315; + --canvas: #f5f6f3; + --paper: #ffffff; + --muted: #515a60; + --line: #c8cdcf; + --js-yellow: #f7df1e; + --ts-blue: #3178c6; + --ai-violet: #6656d9; + --pale-yellow: #fff8b5; + --pale-blue: #ddebfa; + --focus: #005fcc; + --font-display: "Segoe UI Variable Display", "Segoe UI", system-ui, sans-serif; + --font-body: "Segoe UI Variable Text", "Segoe UI", system-ui, sans-serif; + --font-code: "Cascadia Code", "SFMono-Regular", Consolas, monospace; + --md-primary-fg-color: var(--ink); + --md-primary-fg-color--light: #303638; + --md-primary-fg-color--dark: #000000; + --md-accent-fg-color: #1d64a7; + --md-typeset-a-color: #1d64a7; +} + +[data-md-color-scheme="default"] { + --md-default-bg-color: var(--canvas); + --md-default-fg-color: var(--ink); + --md-default-fg-color--light: var(--muted); + --md-code-bg-color: #ebedeb; } [data-md-color-scheme="slate"] { - --card-shadow: 0 2px 12px rgba(0,0,0,.3); - --card-shadow-hover: 0 8px 30px rgba(139,92,246,.25); + --ink: #f6f7f5; + --canvas: #111516; + --paper: #191e20; + --muted: #c0c6c8; + --line: #465053; + --pale-yellow: #3f3a10; + --pale-blue: #17324b; + --focus: #8fc7ff; + --md-default-bg-color: var(--canvas); + --md-default-fg-color: var(--ink); + --md-default-fg-color--light: var(--muted); + --md-code-bg-color: #202628; + --md-typeset-a-color: #8fc7ff; + --md-accent-fg-color: #8fc7ff; } -/* ---------- Header / Nav Bar ---------- */ -.md-header { - background: var(--gradient-primary) !important; - box-shadow: 0 2px 20px rgba(59,130,246,.3); +html { + scroll-behavior: smooth; } -.md-tabs { - background: rgba(15,23,42,.6) !important; - backdrop-filter: blur(10px); +body, +button, +input { + font-family: var(--font-body); } -.md-tabs__link { - font-weight: 600; - letter-spacing: .02em; - opacity: .8; - transition: opacity var(--transition-smooth), transform var(--transition-smooth); +.md-typeset code, +.md-typeset pre, +.md-typeset kbd { + font-family: var(--font-code); } -.md-tabs__link:hover, -.md-tabs__link--active { - opacity: 1; +.md-header { + background: #101315; + border-bottom: 4px solid var(--js-yellow); + box-shadow: none; } -/* ---------- Hero Title (h1) ---------- */ -.md-typeset h1 { - font-weight: 800; - letter-spacing: -.02em; - background: var(--gradient-primary); - -webkit-background-clip: text; - -webkit-text-fill-color: transparent; - background-clip: text; +.md-tabs { + background: #101315; + border-bottom: 1px solid #343a3d; } -[data-md-color-scheme="slate"] .md-typeset h1 { - background: linear-gradient(135deg, #60a5fa, #c084fc); - -webkit-background-clip: text; - background-clip: text; +.md-tabs__link { + min-height: 44px; + display: inline-flex; + align-items: center; + font-weight: 650; + opacity: 0.76; } -/* ---------- Section Headings ---------- */ -.md-typeset h2 { - font-weight: 700; - padding-bottom: .4em; - border-bottom: 3px solid transparent; - border-image: var(--gradient-primary) 1; - margin-top: 2em; +.md-tabs__link:hover, +.md-tabs__link--active { + opacity: 1; } -.md-typeset h3 { - font-weight: 600; - color: var(--ai-blue); +.md-main__inner { + margin-top: clamp(1rem, 3vw, 2.25rem); } -[data-md-color-scheme="slate"] .md-typeset h3 { - color: #93c5fd; +.md-content__inner { + max-width: 70rem; + margin-inline: auto; } -/* ---------- Links & Buttons ---------- */ -.md-typeset a:not(.md-button):not(.md-nav__link):not(.md-header__button):not(.md-tabs__link):not(.md-footer__link):not(.headerlink) { - color: var(--ai-blue); - text-decoration: none; - background-image: linear-gradient(var(--ai-purple), var(--ai-purple)); - background-position: 0% 100%; - background-repeat: no-repeat; - background-size: 0% 2px; - transition: background-size var(--transition-smooth), color var(--transition-smooth); +.md-typeset { + font-size: 0.88rem; + line-height: 1.7; } -.md-typeset a:not(.md-button):not(.md-nav__link):not(.md-header__button):not(.md-tabs__link):not(.md-footer__link):not(.headerlink):hover { - color: var(--ai-purple); +.md-typeset p, +.md-typeset li { + text-wrap: pretty; } -/* CTA-style strong links β€” "Register now!", "Start Quest β†’" etc. */ -.md-typeset a strong, -.md-typeset strong a { - display: inline-block; - padding: .5em 1.2em; - border-radius: 8px; - background: var(--gradient-primary); - color: #fff !important; - -webkit-text-fill-color: #fff; - font-weight: 700; - text-decoration: none !important; - background-size: 100% 100% !important; - transition: transform var(--transition-smooth), box-shadow var(--transition-smooth); - box-shadow: 0 2px 10px rgba(59,130,246,.3); +.md-typeset > p, +.md-typeset > ul, +.md-typeset > ol { + max-width: 72ch; } -.md-typeset a strong:hover, -.md-typeset strong a:hover { - transform: none; - box-shadow: 0 2px 10px rgba(59,130,246,.3); +.md-typeset h1, +.md-typeset h2, +.md-typeset h3 { + color: var(--ink); + font-family: var(--font-display); + font-weight: 760; + letter-spacing: -0.03em; + line-height: 1.05; + text-wrap: balance; } -/* ---------- Admonitions ---------- */ -.md-typeset .admonition, -.md-typeset details { - border-radius: var(--card-radius) !important; - border-left: 4px solid; - box-shadow: var(--card-shadow); - overflow: hidden; - transition: box-shadow var(--transition-smooth); +.md-typeset h1 { + max-width: 16ch; + margin: 0 0 1.25rem; + font-size: clamp(2.5rem, 6vw, 4.75rem); } -.md-typeset .admonition:hover, -.md-typeset details:hover { - box-shadow: var(--card-shadow); +.md-typeset h2 { + margin: clamp(3.5rem, 8vw, 6.5rem) 0 1.2rem; + font-size: clamp(1.8rem, 4vw, 2.65rem); } -.md-typeset .admonition-title, -.md-typeset summary { - font-weight: 700; - letter-spacing: .01em; +.md-typeset h3 { + margin-top: 2.2rem; + font-size: clamp(1.25rem, 2.5vw, 1.65rem); } -/* Tip β€” JS yellow accent */ -.md-typeset .admonition.tip, -.md-typeset details.tip { - border-left-color: var(--js-yellow); +.md-typeset a:not(.md-button) { + color: var(--md-typeset-a-color); + text-decoration: underline; + text-decoration-thickness: 0.08em; + text-underline-offset: 0.18em; } -.md-typeset .tip > .admonition-title, -.md-typeset .tip > summary { - background-color: rgba(247, 223, 30, .08); +.md-typeset a:not(.md-button):hover { + text-decoration-thickness: 0.14em; } -/* Info β€” blue gradient accent */ -.md-typeset .admonition.info, -.md-typeset details.info { - border-left-color: var(--ai-blue); +:where(a, button, summary, input, [tabindex]):focus-visible { + outline: 3px solid var(--focus); + outline-offset: 3px; } -.md-typeset .info > .admonition-title, -.md-typeset .info > summary { - background-color: rgba(59,130,246,.08); +.md-typeset .md-button { + min-height: 44px; + display: inline-flex; + align-items: center; + justify-content: center; + margin: 0.35rem 0.5rem 0.35rem 0; + padding: 0.6rem 1rem; + border: 2px solid var(--ink); + border-radius: 3px; + color: var(--ink); + font-weight: 720; + line-height: 1.2; } -/* Note β€” purple accent */ -.md-typeset .admonition.note, -.md-typeset details.note { - border-left-color: var(--ai-purple); +.md-typeset .md-button:hover { + background: var(--pale-blue); + border-color: var(--ink); + color: var(--ink); } -.md-typeset .note > .admonition-title, -.md-typeset .note > summary { - background-color: rgba(139,92,246,.08); +.md-typeset .md-button--primary { + background: var(--ink); + border-color: var(--ink); + color: var(--paper); } -/* ---------- Tables ---------- */ -.md-typeset table:not([class]) { - border-radius: var(--card-radius); - overflow: hidden; - box-shadow: var(--card-shadow); - border-collapse: separate; - border-spacing: 0; - width: 100%; +.md-typeset .md-button--primary:hover { + background: var(--ts-blue); + border-color: var(--ts-blue); + color: #ffffff; } -.md-typeset table:not([class]) th { - background: var(--gradient-primary); - color: #fff; - font-weight: 700; - letter-spacing: .02em; - padding: .9em 1em; - text-align: left; +.visually-hidden { + position: absolute !important; + width: 1px !important; + height: 1px !important; + padding: 0 !important; + margin: -1px !important; + overflow: hidden !important; + clip: rect(0, 0, 0, 0) !important; + white-space: nowrap !important; + border: 0 !important; } -.md-typeset table:not([class]) td { - padding: .8em 1em; - border-bottom: 1px solid rgba(139,92,246,.1); - transition: background-color var(--transition-smooth); +.learning-hero { + margin: 0 0 clamp(4rem, 9vw, 7rem); } -.md-typeset table:not([class]) tr:last-child td { - border-bottom: none; +.hero-media { + position: relative; + margin: 0 0 1.8rem; + background: #f5f6f3; + outline: 2px solid var(--ink); + box-shadow: 14px 14px 0 var(--pale-yellow); } -.md-typeset table:not([class]) tbody tr:hover td { - background-color: rgba(59,130,246,.04); +.hero-media video, +.hero-poster { + width: 100%; + height: auto; + display: block; + aspect-ratio: 20 / 9; + object-fit: cover; } -[data-md-color-scheme="slate"] .md-typeset table:not([class]) tbody tr:hover td { - background-color: rgba(59,130,246,.08); +.hero-poster { + display: none; } -/* ---------- Horizontal Rules ---------- */ -.md-typeset hr { - border: none; - height: 3px; - background: var(--gradient-primary); +.hero-motion-toggle { + position: absolute; + right: 0.8rem; + bottom: 0.8rem; + min-height: 44px; + padding: 0.55rem 0.8rem; + border: 2px solid #ffffff; border-radius: 2px; - opacity: .3; - margin: 2.5em 0; -} - -/* ---------- Code Blocks ---------- */ -.md-typeset code { - border-radius: 6px; - font-size: .85em; -} - -.md-typeset pre { - border-radius: var(--card-radius) !important; - box-shadow: var(--card-shadow); -} - -.md-typeset pre > code { - border-radius: var(--card-radius) !important; -} - -/* ---------- Quest Cards (quests.md) ---------- */ -/* Each quest is separated by an hr β€” style the h2 + content sections */ -.md-typeset h2 + p, -.md-typeset h2 + p + p, -.md-typeset h2 + p + p + ul { - /* ensure content flows well under card-style headings */ -} - -/* ---------- Content Cards (index.md sections) ---------- */ -.md-content__inner { - max-width: 960px; -} - -/* ---------- Footer ---------- */ -.md-footer { - background: var(--gradient-hero) !important; -} - -.md-footer-meta { - background: transparent !important; -} - -/* ---------- Scrollbar ---------- */ -::-webkit-scrollbar { - width: 8px; -} - -::-webkit-scrollbar-track { - background: transparent; -} - -::-webkit-scrollbar-thumb { - background: var(--gradient-primary); - border-radius: 4px; -} - -::-webkit-scrollbar-thumb:hover { - background: var(--gradient-accent); -} - -/* ---------- Selection ---------- */ -::selection { - background: rgba(139,92,246,.25); - color: inherit; -} - -/* ---------- Smooth Entry Animations ---------- */ -@keyframes fadeSlideUp { - from { opacity: 0; transform: translateY(16px); } - to { opacity: 1; transform: translateY(0); } -} - -.md-content__inner > * { - animation: fadeSlideUp .4s ease-out both; + background: #101315; + color: #ffffff; + font-family: var(--font-code); + font-size: 0.72rem; + font-weight: 700; + cursor: pointer; } -.md-content__inner > *:nth-child(1) { animation-delay: .05s; } -.md-content__inner > *:nth-child(2) { animation-delay: .1s; } -.md-content__inner > *:nth-child(3) { animation-delay: .15s; } -.md-content__inner > *:nth-child(4) { animation-delay: .2s; } -.md-content__inner > *:nth-child(5) { animation-delay: .25s; } -.md-content__inner > *:nth-child(6) { animation-delay: .3s; } -.md-content__inner > *:nth-child(7) { animation-delay: .35s; } - -/* ---------- Banner Image ---------- */ -.md-typeset img[alt="JavaScript AI Build-a-thon"] { - border-radius: var(--card-radius); - box-shadow: 0 4px 30px rgba(59,130,246,.2); +.hero-motion-toggle:hover { + background: var(--ts-blue); } -.md-typeset img[alt="JavaScript AI Build-a-thon"]:hover { - box-shadow: 0 4px 30px rgba(59,130,246,.2); +.hero-actions { + display: flex; + align-items: center; + flex-wrap: wrap; + gap: 0.5rem 0; } -/* ---------- Responsive Tweaks ---------- */ -@media (max-width: 768px) { - .md-typeset h1 { - font-size: 1.6rem; - } - - .md-typeset a strong, - .md-typeset strong a { - padding: .4em .9em; - font-size: .9em; - } +.hero-actions > p { + width: 100%; + max-width: none; + margin: 0 0 0.45rem; + color: var(--muted); + font-size: 1.05rem; } -/* ---------- Grid Cards (Community section) ---------- */ -.grid.cards { - display: grid; - grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); - gap: 1.2em; - padding: 0; - margin: 1.5em 0; +.learning-path { + max-width: none !important; + margin: 2rem 0 0 !important; + padding: 0 !important; list-style: none; + counter-reset: learning-path; } -.grid.cards > * { - border-radius: var(--card-radius); - border: 1px solid rgba(139,92,246,.15); - padding: 1.4em; - box-shadow: var(--card-shadow); - background: var(--md-default-bg-color); -} - -/* Override Material theme hover on grid cards */ -.md-typeset .grid.cards > ul > li:hover, -.md-typeset .grid.cards > ol > li:hover, -.md-typeset .grid > .card:hover { - border-color: rgba(139,92,246,.15) !important; - box-shadow: var(--card-shadow) !important; - transform: none !important; -} - -.grid.cards hr { - margin: .8em 0; - opacity: .15; - height: 1px; - background: var(--gradient-primary); -} - -.grid.cards .twemoji, -.grid.cards .fontawesome { - color: var(--ai-blue); +.learning-path li { + counter-increment: learning-path; + display: grid; + grid-template-columns: minmax(3rem, 0.15fr) minmax(12rem, 0.72fr) minmax(16rem, 1.2fr); + gap: 1rem; + align-items: baseline; + padding: 1.25rem 0; + border-top: 2px solid var(--line); } -[data-md-color-scheme="slate"] .grid.cards .twemoji, -[data-md-color-scheme="slate"] .grid.cards .fontawesome { - color: #93c5fd; +.learning-path li::before { + content: "0" counter(learning-path); + color: var(--ts-blue); + font-family: var(--font-code); + font-weight: 800; } -/* ---------- Quest Cards ---------- */ -.quest-grid { - display: flex; - flex-direction: column; - gap: 1.5em; +.learning-path strong { + color: var(--ink); + font-family: var(--font-display); + font-size: 1.15rem; + line-height: 1.25; } -.quest-card { - border: 1px solid rgba(139,92,246,.12); - border-left: 5px solid; - border-image: var(--gradient-primary) 1; - border-image-slice: 0 0 0 1; - border-radius: var(--card-radius); - padding: 1.5em 1.8em; - box-shadow: var(--card-shadow); - transition: box-shadow var(--transition-smooth), transform var(--transition-smooth); - background: var(--md-default-bg-color); - overflow: hidden; +.learning-path span { + color: var(--muted); } -.quest-card:hover { - box-shadow: var(--card-shadow-hover); - transform: translateX(4px); +.archive-link { + margin: clamp(4rem, 8vw, 7rem) 0 0 !important; + padding-top: 1.25rem; + border-top: 1px solid var(--line); + color: var(--muted); + font-size: 0.9rem; } -.quest-card h2 { - margin-top: .2em !important; - border-bottom: none !important; - font-size: 1.3em; +.quest-directory { + margin-top: 2.4rem; } -.quest-card .quest-icon { - color: var(--ai-blue); - margin-right: .2em; +.quest-entry { + display: grid; + grid-template-columns: minmax(13rem, 0.85fr) minmax(18rem, 1.15fr); + gap: 1rem 3rem; + padding: clamp(1.8rem, 5vw, 3.2rem) 0; + border-top: 2px solid var(--line); } -[data-md-color-scheme="slate"] .quest-card .quest-icon { - color: #93c5fd; +.quest-entry:last-child { + border-bottom: 2px solid var(--line); } -/* Alternate quest card left border colors */ -.quest-card:nth-child(1) { border-image: linear-gradient(180deg, #3b82f6, #60a5fa) 1; border-image-slice: 0 0 0 1; } -.quest-card:nth-child(2) { border-image: linear-gradient(180deg, #8b5cf6, #a78bfa) 1; border-image-slice: 0 0 0 1; } -.quest-card:nth-child(3) { border-image: linear-gradient(180deg, #ec4899, #f472b6) 1; border-image-slice: 0 0 0 1; } -.quest-card:nth-child(4) { border-image: linear-gradient(180deg, #f59e0b, #fbbf24) 1; border-image-slice: 0 0 0 1; } -.quest-card:nth-child(5) { border-image: linear-gradient(180deg, #10b981, #34d399) 1; border-image-slice: 0 0 0 1; } - -/* ========== Winners Announcement Page ========== */ - -/* ---------- Celebration Hero ---------- */ -/* ---------- Hero trophy + text (no box) ---------- */ -.hero-trophy { - font-size: 3em; - display: block; - margin-bottom: .1em; - animation: trophyBounce 2s ease-in-out infinite; +.quest-entry h2 { + grid-row: 1 / 6; + margin: 0; + font-size: clamp(1.55rem, 3vw, 2.2rem); } -@keyframes trophyBounce { - 0%, 100% { transform: translateY(0); } - 50% { transform: translateY(-8px); } +.quest-entry p { + max-width: 60ch; + margin: 0; } -.hero-subtitle { - color: #64748b; - font-size: 1.05em; - max-width: 560px; - margin: .4em auto 0; - line-height: 1.5; +.quest-entry .md-button { + justify-self: start; } -[data-md-color-scheme="slate"] .hero-subtitle { - color: #94a3b8; +.md-typeset details { + margin: 1.2rem 0; + border: 1px solid var(--line); + border-radius: 3px; + background: var(--paper); + box-shadow: none; } -/* ---------- Winner Cards ---------- */ -.winners-grid { +.md-typeset details summary { + min-height: 44px; display: flex; - flex-direction: column; - gap: 1.5em; - margin: 1.5em 0; -} - -.winner-card { - text-align: center; - padding: 2.2em 2em; - border-radius: 16px; - position: relative; - overflow: hidden; -} - - - -/* Grand Prize β€” dark card with gold border */ -.winner-card.grand { - background: var(--gradient-hero); - border: 2px solid; - border-image: linear-gradient(135deg, #F7DF1E, #f59e0b, #F7DF1E) 1; - box-shadow: 0 4px 30px rgba(247,223,30,.15); - color: #fff; + align-items: center; + padding: 0.7rem 1rem; + color: var(--ink); + font-weight: 720; } - - -.winner-card.grand .winner-trophy { font-size: 3.2em; } -.winner-card.grand .winner-label { - color: #F7DF1E; - font-size: .8em; - font-weight: 700; - letter-spacing: .2em; - text-transform: uppercase; - margin: .3em 0; -} -.winner-card.grand .winner-prize { - font-size: 2.6em; - font-weight: 800; - color: #F7DF1E; - letter-spacing: -.02em; - margin: .1em 0; -} -.winner-card.grand .winner-project { - font-size: 1.6em; - font-weight: 700; - color: #fff; - margin: .2em 0; -} -.winner-card.grand .winner-desc { - color: #94a3b8; - font-size: .95em; - max-width: 550px; - margin: .3em auto .8em; - line-height: 1.5; +.md-typeset details[open] summary { + border-bottom: 1px solid var(--line); } -/* Category awards β€” light cards with gradient border */ -.winner-cards-row { - display: grid; - grid-template-columns: 1fr 1fr; - gap: 1.5em; +.md-typeset details > :not(summary) { + margin-inline: 1rem; } -.winner-card.category { - background: var(--md-default-bg-color); - border: 2px solid transparent; - box-shadow: var(--card-shadow); +.md-typeset .admonition { + border: 1px solid var(--line); + border-radius: 3px; + box-shadow: none; } - - -.winner-card.category.blue { - border-image: linear-gradient(180deg, #3b82f6, #60a5fa) 1; +.md-typeset .admonition-title { + font-weight: 720; } -.winner-card.category.purple { - border-image: linear-gradient(180deg, #8b5cf6, #ec4899) 1; +.md-typeset table:not([class]) { + width: 100%; + border: 1px solid var(--line); + border-radius: 0; + box-shadow: none; } -.winner-card.category .winner-trophy { font-size: 2.6em; } -.winner-card.category .winner-label { - font-size: .75em; - font-weight: 700; - letter-spacing: .18em; - text-transform: uppercase; - margin: .3em 0; +.md-typeset table:not([class]) th { + background: var(--ink); + color: var(--paper); + font-family: var(--font-body); + font-weight: 720; } -.winner-card.category.blue .winner-label { color: var(--ai-blue); } -.winner-card.category.purple .winner-label { color: var(--ai-purple); } -.winner-card.category .winner-prize { - font-size: 2em; - font-weight: 800; - color: var(--md-typeset-color); - margin: .1em 0; -} -.winner-card.category .winner-project { - font-size: 1.4em; - font-weight: 700; - color: var(--md-typeset-color); - margin: .2em 0; -} -.winner-card.category .winner-desc { - color: var(--md-typeset-fg-color--light); - font-size: .9em; - max-width: 400px; - margin: .3em auto .8em; - line-height: 1.5; +.md-typeset table:not([class]) td { + border-top: 1px solid var(--line); + vertical-align: top; } -/* Winner link buttons */ -.winner-links { - display: flex; - justify-content: center; - gap: .4em 1.2em; - flex-wrap: wrap; - margin-top: .5em; +.md-typeset pre { + border: 1px solid var(--line); + border-radius: 3px; + box-shadow: none; } -.winner-links a { - display: inline-flex; - align-items: center; - gap: .3em; - padding: .2em 0; - font-size: .82em; - font-weight: 600; - text-decoration: none !important; - color: #64748b !important; - -webkit-text-fill-color: #64748b; - background: transparent !important; +.md-typeset hr { + height: 1px; + margin: 3rem 0; + border: 0; + background: var(--line); } -/* Links on grand (dark) card */ -.winner-card.grand .winner-links a { - color: #94a3b8 !important; - -webkit-text-fill-color: #94a3b8; +.md-footer { + background: #101315; + border-top: 4px solid var(--js-yellow); } - -/* Links on category (light) cards β€” same as base */ -.winner-card.category .winner-links a.primary, -.winner-card.category .winner-links a.secondary { - color: #64748b !important; - -webkit-text-fill-color: #64748b; - background: transparent !important; +.md-footer-meta { + background: transparent; } - -[data-md-color-scheme="slate"] .winner-card.category .winner-links a { - color: #94a3b8 !important; - -webkit-text-fill-color: #94a3b8; +::selection { + background: var(--pale-yellow); + color: #101315; } +@media (max-width: 760px) { + .md-content__inner { + padding-inline: 0.9rem; + } -/* ---------- Submissions Gallery ---------- */ -.submissions-section { - background: rgba(59,130,246,.02); - border-radius: var(--card-radius); - padding: 2em 0; - margin-top: 1em; -} - -[data-md-color-scheme="slate"] .submissions-section { - background: rgba(59,130,246,.04); -} + .md-typeset { + font-size: 0.82rem; + } -.submissions-grid { - display: grid; - grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); - gap: 1.2em; - margin: 1.5em 0; -} + .learning-hero { + margin-top: 0.5rem; + } -.submission-card { - border-radius: var(--card-radius); - border: 1px solid rgba(139,92,246,.1); - padding: 1.3em 1.5em; - box-shadow: var(--card-shadow); - background: var(--md-default-bg-color); -} + .hero-media { + box-shadow: 8px 8px 0 var(--pale-yellow); + } -.submission-card .sub-name { - font-size: 1.05em; - font-weight: 700; - color: var(--md-typeset-color); - margin: 0 0 .2em; -} + .hero-actions { + align-items: stretch; + } -.submission-card .sub-desc { - font-size: .85em; - color: var(--md-typeset-fg-color--light); - line-height: 1.5; - margin: 0 0 .7em; -} + .hero-actions .md-button { + width: 100%; + margin-right: 0; + } -.submission-card .sub-links { - display: flex; - gap: .4em 1em; - flex-wrap: wrap; -} + .learning-path li { + grid-template-columns: 2.6rem 1fr; + gap: 0.25rem 0.75rem; + } -.submission-card .sub-links a { - display: inline-flex; - align-items: center; - gap: .3em; - padding: .2em 0; - font-size: .78em; - font-weight: 600; - text-decoration: none !important; - background: transparent !important; - color: #64748b !important; - -webkit-text-fill-color: #64748b; -} + .learning-path span { + grid-column: 2; + } + .quest-entry { + grid-template-columns: 1fr; + gap: 0.8rem; + } + .quest-entry h2 { + grid-row: auto; + } -[data-md-color-scheme="slate"] .submission-card .sub-links a { - color: #94a3b8 !important; - -webkit-text-fill-color: #94a3b8; + .md-typeset table:not([class]) { + font-size: 0.72rem; + } } - -/* ---------- Responsive Winners ---------- */ -@media (max-width: 768px) { - .hero-trophy { - font-size: 2.5em; - } - .winner-cards-row { - grid-template-columns: 1fr; +@media (prefers-reduced-motion: reduce) { + html { + scroll-behavior: auto; } - .submissions-grid { - grid-template-columns: 1fr; + + *, + *::before, + *::after { + animation-duration: 0.01ms !important; + animation-iteration-count: 1 !important; + transition-duration: 0.01ms !important; } - .winner-card.grand .winner-prize { - font-size: 2em; + + .hero-media video, + .hero-motion-toggle { + display: none; } - .winner-card.grand .winner-project { - font-size: 1.3em; + + .hero-poster { + display: block; } } diff --git a/mkdocs.yml b/mkdocs.yml index fe034f5..5061863 100644 --- a/mkdocs.yml +++ b/mkdocs.yml @@ -1,11 +1,12 @@ # Project information ......................................... site_name: "JavaScript AI Build-a-thon" site_url: https://Azure-Samples.github.io/JavaScript-AI-Buildathon +site_description: "Self-paced JavaScript and TypeScript Quests for learning practical AI development patterns." repo_url: https://github.com/Azure-Samples/JavaScript-AI-Buildathon # Copyright ................................................... copyright: > - © 2026 Microsoft  |  + © Microsoft  |  Privacy  |  Consumer Health Privacy  |  Cookies  |  @@ -26,9 +27,7 @@ theme: warning: fontawesome/solid/triangle-exclamation example: fontawesome/solid/flask quote: fontawesome/solid/quote-left - font: - code: JetBrains Mono - text: Inter + font: false logo: media/logo.svg language: en @@ -72,9 +71,14 @@ extra: # Navigation ............................................... nav: - - Overview: index.md + - Home: index.md + - Start here: start-here.md - Quests: quests.md +validation: + nav: + omitted_files: info + # Extensions ............................................... markdown_extensions: - admonition @@ -90,3 +94,6 @@ markdown_extensions: extra_css: - stylesheets/extra.css + +extra_javascript: + - javascripts/hero-video.js diff --git a/requirements.txt b/requirements.txt index 21f876b..a0701c6 100644 --- a/requirements.txt +++ b/requirements.txt @@ -1,2 +1,2 @@ -mkdocs -mkdocs-material \ No newline at end of file +mkdocs==1.6.1 +mkdocs-material==9.7.1 \ No newline at end of file