Hackatonsite

AI-Driven Development Hackathon - Case Study Website

Overview

Hackatonsite is a static website that presents 4 case studies for an AI-driven development hackathon. Participants can browse and select cases to work on during the event.

Case Studies

1. MCP DOMO - Industrial KPIs integration
2. MCP Canary - Process Historical Data retrieval
3. Procurement - Order Tracking via Email automation
4. SAP Profile Management - Profile Creation Workflow

Technology Stack

• HTML5 - Semantic markup
• Tailwind CSS v3.4.1 - Styling (via CDN)
• Vanilla JavaScript - Minimal interactivity
• GitHub Pages - Hosting

Project Structure

hackatonsite/
├── index.html          # Homepage with case study overview
├── case1.html          # Case 1: MCP DOMO
├── case2.html          # Case 2: MCP Canary
├── case3.html          # Case 3: Procurement
├── case4.html          # Case 4: SAP Profile Management
├── assets/
│   ├── css/
│   │   └── styles.css  # Custom CSS (minimal)
│   └── images/         # Optional images
├── README.md           # This file
└── .gitignore          # Git ignore rules

Local Development

Option 1: Open directly in browser

Simply double-click index.html to open in your default browser.

Option 2: Use Python HTTP server

python3 -m http.server 8000
# Open browser to http://localhost:8000

Option 3: VS Code Live Server

1. Install "Live Server" extension in VS Code
2. Right-click index.html → "Open with Live Server"

Deployment to GitHub Pages

Step 1: Create GitHub Repository

# Initialize git (if not already done)
git init

# Add all files
git add .

# Commit
git commit -m "Initial commit - Hackatonsite"

# Add remote (replace with your GitHub username)
git remote add origin https://github.com/[your-username]/hackatonsite.git

# Push to GitHub
git push -u origin main

Step 2: Enable GitHub Pages

1. Go to your repository on GitHub
2. Click Settings → Pages
3. Under "Source", select:
   • Branch: main
   • Folder: / (root)
4. Click Save
5. Wait 1-2 minutes for deployment

Step 3: Access Your Site

Your site will be available at:

https://[your-username].github.io/hackatonsite

Deployment Checklist

Before deploying, verify:

• ✅ All HTML files are valid HTML5
• ✅ All links work (no 404s)
• ✅ Mobile responsiveness tested
• ✅ Content accuracy checked
• ✅ Navigation works across all pages

Testing

HTML Validation

Visit https://validator.w3.org/ and validate each HTML file.

Link Testing

Manually click through all navigation and internal links to ensure no broken links.

Responsive Testing

Use browser DevTools (F12) → Toggle device toolbar to test on various screen sizes.

Updating Content

To update the website:

# Make your changes to HTML files
# ...

# Commit changes
git add .
git commit -m "Update case study content"

# Push to GitHub
git push origin main

# GitHub Pages will auto-deploy within 1-2 minutes

Performance

• Page Load Time: <2 seconds
• Mobile-Friendly: Yes
• Accessibility: WCAG 2.1 AA compliant

Browser Support

• Chrome (latest 2 versions)
• Firefox (latest 2 versions)
• Safari (latest 2 versions)
• Edge (latest 2 versions)

License

© 2025 Hackatonsite - AI-Driven Development Hackathon

Support

For issues or questions during the hackathon, contact the event organizers.