MICROBE Data Portal — Wireframes

Low-fidelity wireframes for the MICROBE project data portal. These HTML mockups define structure and layout for an innovative microbiome biobanking portal in Europe.

Contents

File	Description
index.html	Entry point — links to all wireframe pages
01-homepage.html	Homepage: hero, search, master category cards (Soil, Marine, Seed), footer
02-sample-list.html	Sample browse: table with filters (Master category, SynCom vs Environmental), pagination
03-sample-detail.html	Sample detail: metadata, BioStudies links (Biolog, 4MU), related data
05-api-docs.html	API & documentation: endpoints, code examples, BioStudies

Project structure

• Master categories (Environments): Soil, Marine, Seed
• Sub-types: SynCom (synthetic communities) and Environmental samples
• External links: ENA, Biosamples, MGnify, BioStudies (Biolog, 4MU analyses), WorkflowHub

How to view locally

1. Open in a browser:
   Open index.html directly in your browser (Chrome, Firefox, Edge, etc.). No build step or server required.

2. Or use a local server (optional, if you prefer http:// URLs):

   cd wireframes
   python -m http.server 8000

   Then visit http://localhost:8000

Deploy to GitHub Pages

Option A: Deploy from the wireframes folder (subdirectory)

If your wireframes live in a subfolder of your repo (e.g. MICROBE/wireframes/):

1. Go to your GitHub repository → Settings → Pages
2. Under Source, choose GitHub Actions
3. Create the workflow file below

Create .github/workflows/deploy-wireframes.yml in your repo root:

name: Deploy wireframes to GitHub Pages

on:
  push:
    branches: [main]
    paths:
      - 'wireframes/**'

permissions:
  contents: read
  pages: write
  id-token: write

concurrency:
  group: "pages"
  cancel-in-progress: false

jobs:
  deploy:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout
        uses: actions/checkout@v4

      - name: Setup Pages
        uses: actions/configure-pages@v4

      - name: Upload artifact
        uses: actions/upload-pages-artifact@v3
        with:
          path: wireframes

      - name: Deploy to GitHub Pages
        id: deployment
        uses: actions/deploy-pages@v4

4. Push the workflow file. After the first push, GitHub Pages will build and deploy.
5. Your wireframes will be at: https://<your-username>.github.io/<repo-name>/

Option B: Wireframes as repo root

If the wireframes are the only content (repo root = wireframes folder):

1. Go to Settings → Pages
2. Under Source, select Deploy from a branch
3. Choose branch main (or master)
4. Select / (root) as the folder
5. Save

The site will be at https://<your-username>.github.io/<repo-name>/

Option C: Static HTML action (any folder)

If you prefer a generic static site workflow:

name: Deploy to GitHub Pages

on:
  push:
    branches: [main]

jobs:
  deploy:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4

      - name: Deploy
        uses: peaceiris/actions-gh-pages@v4
        with:
          github_token: ${{ secrets.GITHUB_TOKEN }}
          publish_dir: ./wireframes

Add a CNAME file only if you use a custom domain. Otherwise, the site will be at https://<username>.github.io/<repo>/.

---

MICROBE — microbeproject.eu — Innovative microbiome biobanking in Europe