From 12c192d7808b048efc3db88d68c1d174950845b1 Mon Sep 17 00:00:00 2001 From: juliamuiruri4 <40116776+juliamuiruri4@users.noreply.github.com> Date: Thu, 23 Apr 2026 10:08:45 +0300 Subject: [PATCH] Buildathon Hack winner announcement --- 01-Local-AI-Development/README.md | 16 +- 02-E2E-Model-Development-on-Foundry/README.md | 2 +- .../README.md | 2 +- 04-Build-Agents-with-AIToolKit/README.md | 20 +- 05-Run-Burger-Ordering-Agent-System/README.md | 8 +- README.md | 42 ++- docs/index.md | 269 ++++++++++++---- docs/quests.md | 14 +- docs/stylesheets/extra.css | 295 +++++++++++++++++- 9 files changed, 544 insertions(+), 124 deletions(-) diff --git a/01-Local-AI-Development/README.md b/01-Local-AI-Development/README.md index c37ecaa..b6e6400 100644 --- a/01-Local-AI-Development/README.md +++ b/01-Local-AI-Development/README.md @@ -1,6 +1,6 @@ ![Foundry Local](./assets/foundry-local-logo.png) -Livestream starting soon! **Click the image below to watch the recording.** +**Click the image below to watch the recording.** [![Reactor Livestream](./assets/poster-quest1.png)](https://www.youtube.com/live/GHH50rDlLn0?si=-i3hPYq1o6H271_z) @@ -19,17 +19,17 @@ With Foundry Local, you gain: > > **Hackathon Award Category: Offline-Ready AI Award** > -> As part of the Build-a-thon Hack!, we have a special award category that will recognize the best performing AI solution with standout offline capabilities (local inference). +> This quest mapped to our Offline-Ready AI Award category, which recognized the best performing AI solutions with standout offline capabilities (local inference). > -> Consider building an app that: +> Winning solutions featured apps that: > -> - Processes sensitive data entirely on-device. -> - Uses Foundry Local for reasoning and a cloud storage service for optional sync or analytics. +> - Processed sensitive data entirely on-device. +> - Used Foundry Local for reasoning and cloud storage services for optional sync or analytics. > -> Highlight in your submission how you: +> Winners demonstrated: > -> - Achieve **privacy** (no sensitive data leaving the device). -> - Optimize for **latency** using local inference. +> - **Privacy** (no sensitive data leaving the device). +> - **Latency** optimization using local inference. > > Checkout some Foundry Local + JavaScript projects: - > diff --git a/02-E2E-Model-Development-on-Foundry/README.md b/02-E2E-Model-Development-on-Foundry/README.md index cdbc5f0..b9353db 100644 --- a/02-E2E-Model-Development-on-Foundry/README.md +++ b/02-E2E-Model-Development-on-Foundry/README.md @@ -1,6 +1,6 @@ ![Foundry Local](./assets/foundry-logo.png) -Livestream starting soon! **Click the image below to watch the recording.** +**Click the image below to watch the recording.** [![Reactor Livestream](./assets/poster-quest2.png)](https://www.youtube.com/live/8ded7UAdPTA?si=UwncP4b4tIs1dwLS) diff --git a/03-Run-Serverless-RAG-Support-System/README.md b/03-Run-Serverless-RAG-Support-System/README.md index d3b60c4..e8b21b5 100644 --- a/03-Run-Serverless-RAG-Support-System/README.md +++ b/03-Run-Serverless-RAG-Support-System/README.md @@ -1,6 +1,6 @@ ![Serverless RAG](./assets/favicon.png) -Livestream starting soon! **Click the image below to watch the recording.** +**Click the image below to watch the recording.** [![Reactor Livestream](./assets/poster-quest3.png)](https://www.youtube.com/live/hfx7F7lObdg?si=vEtg3dt411oHcvJG) diff --git a/04-Build-Agents-with-AIToolKit/README.md b/04-Build-Agents-with-AIToolKit/README.md index a529f85..fbfa0a0 100644 --- a/04-Build-Agents-with-AIToolKit/README.md +++ b/04-Build-Agents-with-AIToolKit/README.md @@ -1,6 +1,6 @@ ![AI Toolkit](./assets/aitk.png) -Livestream starting soon! **Click the image below to watch the recording.** +**Click the image below to watch the recording.** [![Reactor Livestream](./assets/poster-quest4.png)](https://www.youtube.com/live/k0q5-VIGtWQ?si=yXLiyalxU6wELpxW) @@ -24,19 +24,19 @@ The **AI Toolkit** is a powerful VS Code extension that streamlines generative A > > **Hackathon Award Category: Agent Architecture Award** > -> As part of the Build-a-thon Hack!, we have a special award category that will recognize the best AI agents with innovative and well-architected designs. +> This quest mapped to our special award category that recognized the best AI agents with innovative and well-architected designs. > -> Consider building: +> Winning submissions featured: > -> - Agents that solve complex problems with multiple steps of reasoning -> - Agents that integrate with custom MCP servers to access specialized tools or data -> - Agents with sophisticated evaluation techniques that push performance boundaries +> - 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 > -> Highlight in your submission how you: +> Winners demonstrated: > -> - Demonstrate innovative agent design patterns -> - Leverage MCP servers for specialized tool integration -> - Showcase evaluation methods that validate agent performance +> - Innovative agent design patterns +> - Leverage of MCP servers for specialized tool integration +> - Evaluation methods that validated agent performance ### Install the AI Toolkit Extension diff --git a/05-Run-Burger-Ordering-Agent-System/README.md b/05-Run-Burger-Ordering-Agent-System/README.md index 06c185c..288f3e2 100644 --- a/05-Run-Burger-Ordering-Agent-System/README.md +++ b/05-Run-Burger-Ordering-Agent-System/README.md @@ -1,6 +1,6 @@ ![Burger Ordering Agent Logo](./assets/burger-logo.png) -Livestream starting soon! **Click the image below to watch the livestream/recording.** +**Click the image below to watch the livestream/recording.** [![Reactor Livestream](./assets/poster-quest5.png)](https://www.youtube.com/live/kBVsqJbM7Vc?si=hmIEfla6KOB9MsYW) @@ -14,11 +14,11 @@ In this quest, you will set up and run a **complete end-to-end Burger Ordering A > > **Hackathon Award Category: Agentic System Architecture Award** > -> As part of the Build-a-thon Hack!, we have a special award category recognizing agentic designs that are **useful, reliable, and secure**. +> This quest mapped to our special award category recognizing agentic designs that are **useful, reliable, and secure**. > -> This quest demonstrates foundational patterns: **MCP tool integration** enables agents to interact with external systems (useful), **structured agent workflows** with proper error handling ensure consistent behavior (reliable), and **API-based architectures** allow for controlled access and validation (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). > -> Consider how these patterns can help you build production-ready agent systems that users can trust. +> Winners leveraged these patterns to build production-ready agent systems that users could trust. ## Steps to Complete the Quest diff --git a/README.md b/README.md index 81d63b5..52d8083 100644 --- a/README.md +++ b/README.md @@ -2,11 +2,11 @@
-![The JavaScript AI Build-a-thon Season 2 - Coming Soon!](assets/poster.svg) +![The JavaScript AI Build-a-thon Season 2](assets/poster.svg)

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

@@ -25,24 +25,24 @@ The JavaScript AI Build-a-thon is a focused, hands-on initiative that helps **bu 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. -# Key Dates +# Program Timeline | Milestone | Date | |---|---| -| 🎬 Build-a-thon Begins | **Monday, March 2, 2026** | +| 🎬 Build-a-thon Began | **Monday, March 2, 2026** | | 📚 Quests & Livestreams | **March 2 – March 13, 2026** | -| **🔥 Hackathon Launches** | **Friday, March 13, 2026** | -| 🏁 Hackathon Ends | **Tuesday, March 31, 2026** | +| **🔥 Hackathon Phase** | **Friday, March 13 – Tuesday, March 31, 2026** | +| 🏆 Program Concluded | **Tuesday, March 31, 2026** | -# How It Works +# How It Worked -The Build-a-thon runs in two phases. +The Build-a-thon ran in two phases. -![The JavaScript AI Build-a-thon Season 2 - Coming Soon!](assets/roadmap.svg) +![The JavaScript AI Build-a-thon Season 2](assets/roadmap.svg) ## 📚 Phase 1: Learn & Skill Up (March 2 – March 13) -Complete guided quests and attend expert-led livestreams to build the skills you'll need. Each quest is hands-on, self-paced, and designed to teach you a core AI development pattern with JavaScript/TypeScript: +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: | Quest | Topic | What You'll Learn | |---|---|---| @@ -52,26 +52,24 @@ Complete guided quests and attend expert-led livestreams to build the skills you | [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: Complete at least 2 quests (including the guided project) to be eligible for the hack. +Participation Requirement: Participants were required to complete at least 2 quests (including the guided project) to be eligible for the hackathon phase. ## 🔥 Phase 2: Hack! (March 13 – March 31) -Build something that matters. Use everything you learned in the quests, and beyond, to build AI Agents that solve real problems, delight users, and push what's possible. - -[Register for the hackathon](https://aka.ms/JSBuildathon_Hack) +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. ![Hack roadmap](assets/hack-roadmap.png) -During the hack phase, attend technical demos and special Discord Office Hours (8:00 AM PDT) to learn the latest tools and best practices. +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. -| Date (8:00 AM PDT) | Demo | Link | +| Date (8:00 AM PDT) | Demo | Archive | |---|---|---| -| March 16 | Azure & Foundry MCP Server Demo | [Join event](https://discord.gg/microsoftfoundry?event=1476309470312136704) | -| March 18 | Azure Developer CLI (azd) Demo | [Join event](https://discord.gg/microsoftfoundry?event=1476310190885175296) | -| March 20 | Azure DocumentDB Demo | [Join event](https://discord.gg/microsoftfoundry?event=1473725339959033866) | -| March 23 | GitHub Copilot CLI & SDK Demo | [Join event](https://discord.gg/microsoftfoundry?event=1473726030421430272) | -| March 25 | GitHub Agentic Workflows Demo | [Join event](https://discord.gg/microsoftfoundry?event=1473781418956947566) | -| March 27 | GitHub Copilot App Modernization Demo | [Join event](https://discord.gg/microsoftfoundry?event=1473781883811795147) | +| 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) | ## 💬 Community & Support diff --git a/docs/index.md b/docs/index.md index 14502aa..522f79b 100644 --- a/docs/index.md +++ b/docs/index.md @@ -7,97 +7,248 @@ hide: --- -# 🚀 Build, Innovate, and Ship working AI! +

-**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. +🏆 -**This isn't just another hackathon. It's your launchpad into the Agentic future of JavaScript and TypeScript development.** +# 🎉 And the Winners Are... -!!! tip "📅 **Key Dates**" +

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.

- * 🎬 Build-a-thon Begins: **Monday, March 2, 2026** - * 📚 Quests & Livestreams: **March 2 – March 13, 2026** - * 🔥 **Hackathon Launches**: **Friday, March 13, 2026** - * 🏁 Hackathon Ends: **Tuesday, March 31, 2026** +
-## 🎟️ Registration +## 🏆 Award Winners -[**Register for the hackathon**](https://aka.ms/JSBuildathon_Hack) +
-Once you're registered, [introduce yourself](https://aka.ms/JSAIonDiscord) in the Build-a-thon channel and connect with other builders to find teammates. +
-## ⚙️ How It Works +🥇 +
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 +
-The Build-a-thon runs in two phases: +
-### 📚 Phase 1: Learn & Skill Up (March 2 – March 13) +
-Complete guided [quests](quests.md) and attend expert-led livestreams to build the skills you need. Each quest is hands-on, self-paced, and teaches a core AI development pattern with JavaScript/TypeScript. +
-### 🔥 Phase 2: Hack! (March 13 – March 31) +🥈 +
OFFLINE-READY AI AWARD
+
$500
+
SourcingIntel
+
AI-Powered Supply Chain Intelligence Platform with on-device inference.
+
+📂 Repo +📝 Blog +▶️ Demo +
-Build something that matters. Use everything you learned — and beyond — to build AI agents that solve real problems. +
-JavaScript AI Build-a-thon Hack +
+ +🥉 +
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 +
-## 🎥 Office Hours Schedule +
-During the hack phase, attend technical demos and special Discord Office Hours (8:00 AM PDT) to learn the latest AI tools, best practices, and get help with your project +
+ +
-| Day/Time (PT) | Topic | -|---|---| -| [Mon 3/16, 8:00 AM PDT](https://discord.gg/microsoftfoundry?event=1476309470312136704) | Azure & Foundry MCP Server Demo | -| [Mon 3/18, 8:00 AM PDT](https://discord.gg/microsoftfoundry?event=1476310190885175296) | Azure Developer CLI (azd) Demo | -| [Wed 3/20, 8:00 AM PDT](https://discord.gg/microsoftfoundry?event=1473725339959033866) | Azure DocumentDB Demo | -| [Wed 3/23, 8:00 AM PDT](https://discord.gg/microsoftfoundry?event=1473726030421430272) | GitHub Copilot CLI & SDK Demo | -| [Fri 3/25, 8:00 AM PDT](https://discord.gg/microsoftfoundry?event=1473781418956947566) | GitHub Agentic Workflows Demo | -| [Fri 3/27, 8:00 AM PDT](https://discord.gg/microsoftfoundry?event=1473781883811795147) | GitHub Copilot App Modernization Demo | +## 🚀 All Submissions -## ⚖️ Judging Criteria +Every project that participated in the JavaScript AI Build-a-thon — celebrating builders from around the world. -| Criteria | Weight | -|---|---| -| Depth of AI Integration | 25% | -| Technical Implementation & User Experience | 20% | -| Use of Responsible AI Patterns | 15% | -| Solution Value (Potential of your solution to solve real-world problems) | 15% | -| Innovation & Creativity | 10% | -| Documentation & Storytelling | 10% | -| Compliance with the Award Category | 5% | +
+ +
+
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 +
+
-## 🏆 Award Categories +
+
KrishiAI
+
AI-powered farming assistant for Indian farmers with disease detection, multi-language chat, crop recommendations, price forecasting, and fertilizer optimization.
+
+📂 Repo +📝 Blog +▶️ Video +
+
-Award categories +
+
Mauzoplus
+
Smarter Sales, Powered by AI for Africa.
+
+📝 Blog +▶️ Video +
+
-### ✨ Special Spotlight: AI-Builder Award +
+
GlobeTrotter
+
A fun, LLM-powered way to discover landmarks on a globe.
+
+📂 Repo +▶️ Video +
+
-!!! note - Did you use AI to build your AI? We want to see it! +
+
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 +
+
-This special recognition goes to builders who go beyond just building with AI — they show how they built. Share your prompts, workflows, tips, and tricks with the community. +
+
CODE2FLOW AI
+
AI-Powered Code Visualizer — see your code architecture come to life.
+
+📂 Repo +📝 Blog +▶️ Video +
+
-We will be giving away **10 GitHub Copilot Pro + licenses** for this award, and here is how you can stand out: +
+
Multi-Agent Meeting Intelligence Assistant
+
A real-time, AI-powered meeting assistant built with TypeScript and multi-agent orchestration.
+
+📂 Repo +📝 Blog +▶️ Video +
+
-1. 🪄 Share your prompts & prompt engineering strategies in your submission, blog post, and on Discord using the provided template -1. 🔧 Document your AI tools & workflows — how you used GitHub Copilot, AI Toolkit, Copilot CLI, or other AI-assisted tools -1. 💬 Be active in the community — post tips, answer questions, and share what you're learning in Discord -1. 📝 Share what worked and what didn't — your honest takeaways help everyone level up +
+
Water Quality Control
+
Healthy lives begin with safe water and sanitation.
+
+📂 Repo +▶️ Video +
+
-!!! note - We'll be watching both submissions and community contributions. This isn't about perfection — it's about transparency, generosity, and helping others learn. The best AI builders lift the whole community. +
+
InboxShield AI
+
Email Security, Fraud Detection, Cybersecurity.
+
+📂 Repo +
+
-## 🏁 Project Submission +
+
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 +
+
-Submit your project on [Innovation Studio](https://aka.ms/JSBuildathon_Hack). Your submission must include: +
+
ContextGuard AI
+
A grounded MERN study assistant with flashcards, Mermaid diagrams, and more.
+
+📂 Repo +📝 Blog +🌐 App +▶️ Video +
+
-1. **GitHub repository**: URL to your project's code for judging and testing -2. **Technical blog**: URL to a blog post with a step-by-step walkthrough of your project -3. **Project video**: 3–5 minute demo on YouTube, Vimeo, or Facebook (public) -4. **GitHub usernames**: For ALL team members +
+
Tuwon
+
Test your knowledge through interactive activities with a real-time AI proctor.
+
+📂 Repo +📝 Blog +🌐 App +▶️ Video +
+
-!!! warning - Judging time per project is strictly under 5 minutes — make your demo count! +
+
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 diff --git a/docs/quests.md b/docs/quests.md index 00c0dd8..71af7f0 100644 --- a/docs/quests.md +++ b/docs/quests.md @@ -1,6 +1,6 @@ # Quests -Complete at least **2 quests** (including the guided project) to be eligible for the hack. Each quest teaches a core AI development pattern with JavaScript/TypeScript. +Each quest teaches a core AI development pattern with JavaScript/TypeScript.
@@ -17,8 +17,8 @@ You'll learn to: - Build an AI Insight Mapper that extracts structured data from unstructured text - Power GitHub Copilot with local models for private coding assistance -!!! tip "Award Tie-in: Offline-Ready AI Award" - This quest directly maps to the **Offline-Ready AI Award** category. Build an app that processes sensitive data entirely on-device and highlights privacy + latency optimizations. +!!! 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) @@ -72,8 +72,8 @@ You'll learn to: - Evaluate agent performance with built-in and custom metrics - Export production-ready code -!!! tip "Award Tie-in: Agentic System Architecture Award" - This quest teaches the patterns you need for the **Agentic System Architecture Award** — innovative agent design with MCP tool integration. +!!! 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) @@ -93,8 +93,8 @@ You'll learn to: - Create agent APIs and backend services - Plan for production scaling with Azure -!!! tip "Award Tie-in: Agentic System Architecture Award" - This quest demonstrates foundational patterns for **useful, reliable, and secure** agent systems. +!!! 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) diff --git a/docs/stylesheets/extra.css b/docs/stylesheets/extra.css index 299c9db..fa669c6 100644 --- a/docs/stylesheets/extra.css +++ b/docs/stylesheets/extra.css @@ -87,7 +87,6 @@ .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); - background-size: 100% 2px; } /* CTA-style strong links — "Register now!", "Start Quest →" etc. */ @@ -108,8 +107,8 @@ .md-typeset a strong:hover, .md-typeset strong a:hover { - transform: translateY(-2px); - box-shadow: 0 6px 20px rgba(139,92,246,.4); + transform: none; + box-shadow: 0 2px 10px rgba(59,130,246,.3); } /* ---------- Admonitions ---------- */ @@ -124,7 +123,7 @@ .md-typeset .admonition:hover, .md-typeset details:hover { - box-shadow: var(--card-shadow-hover); + box-shadow: var(--card-shadow); } .md-typeset .admonition-title, @@ -296,12 +295,10 @@ .md-typeset img[alt="JavaScript AI Build-a-thon"] { border-radius: var(--card-radius); box-shadow: 0 4px 30px rgba(59,130,246,.2); - transition: box-shadow var(--transition-smooth), transform var(--transition-smooth); } .md-typeset img[alt="JavaScript AI Build-a-thon"]:hover { - box-shadow: 0 8px 40px rgba(139,92,246,.3); - transform: scale(1.005); + box-shadow: 0 4px 30px rgba(59,130,246,.2); } /* ---------- Responsive Tweaks ---------- */ @@ -332,14 +329,16 @@ border: 1px solid rgba(139,92,246,.15); padding: 1.4em; box-shadow: var(--card-shadow); - transition: box-shadow var(--transition-smooth), transform var(--transition-smooth), border-color var(--transition-smooth); background: var(--md-default-bg-color); } -.grid.cards > *:hover { - box-shadow: var(--card-shadow-hover); - transform: translateY(-3px); - border-color: rgba(59,130,246,.3); +/* 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 { @@ -405,3 +404,275 @@ .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; +} + +@keyframes trophyBounce { + 0%, 100% { transform: translateY(0); } + 50% { transform: translateY(-8px); } +} + +.hero-subtitle { + color: #64748b; + font-size: 1.05em; + max-width: 560px; + margin: .4em auto 0; + line-height: 1.5; +} + +[data-md-color-scheme="slate"] .hero-subtitle { + color: #94a3b8; +} + +/* ---------- Winner Cards ---------- */ +.winners-grid { + 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; +} + + + +.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; +} + +/* Category awards — light cards with gradient border */ +.winner-cards-row { + display: grid; + grid-template-columns: 1fr 1fr; + gap: 1.5em; +} + +.winner-card.category { + background: var(--md-default-bg-color); + border: 2px solid transparent; + box-shadow: var(--card-shadow); +} + + + +.winner-card.category.blue { + border-image: linear-gradient(180deg, #3b82f6, #60a5fa) 1; +} + +.winner-card.category.purple { + border-image: linear-gradient(180deg, #8b5cf6, #ec4899) 1; +} + +.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; +} +.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; +} + +/* Winner link buttons */ +.winner-links { + display: flex; + justify-content: center; + gap: .4em 1.2em; + flex-wrap: wrap; + margin-top: .5em; +} + +.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; +} + +/* Links on grand (dark) card */ +.winner-card.grand .winner-links a { + color: #94a3b8 !important; + -webkit-text-fill-color: #94a3b8; +} + + +/* 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; +} + + +[data-md-color-scheme="slate"] .winner-card.category .winner-links a { + color: #94a3b8 !important; + -webkit-text-fill-color: #94a3b8; +} + + +/* ---------- 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); +} + +.submissions-grid { + display: grid; + grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); + gap: 1.2em; + margin: 1.5em 0; +} + +.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); +} + +.submission-card .sub-name { + font-size: 1.05em; + font-weight: 700; + color: var(--md-typeset-color); + margin: 0 0 .2em; +} + +.submission-card .sub-desc { + font-size: .85em; + color: var(--md-typeset-fg-color--light); + line-height: 1.5; + margin: 0 0 .7em; +} + +.submission-card .sub-links { + display: flex; + gap: .4em 1em; + flex-wrap: wrap; +} + +.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; +} + + + +[data-md-color-scheme="slate"] .submission-card .sub-links a { + color: #94a3b8 !important; + -webkit-text-fill-color: #94a3b8; +} + + +/* ---------- Responsive Winners ---------- */ +@media (max-width: 768px) { + .hero-trophy { + font-size: 2.5em; + } + .winner-cards-row { + grid-template-columns: 1fr; + } + .submissions-grid { + grid-template-columns: 1fr; + } + .winner-card.grand .winner-prize { + font-size: 2em; + } + .winner-card.grand .winner-project { + font-size: 1.3em; + } +}