Leadership Team — Source Code

📁 File Structure

projects/leadership-team/ ├── boardroom.html # Zoom-style 7-seat boardroom UI ├── demo.html # Same file, served as the live demo ├── team.jpg # Group photo used as seat fallback ├── user guide.md # How to run the boardroom + commands ├── company-state.md # Persistent company state (read by managers) └── branding-and-portfolio-action-plan.md # Current strategy and initiatives

🎯 Key Code Highlights

1. Seven-seat video grid (CSS Grid)

The boardroom is a 4×2 CSS grid. Each tile carries its own accent colour, cropped face region from the group photo, editable name, and a mic indicator.

.grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(2, 1fr);
  gap: 14px;
}
.tile[data-seat="1"] { background: #d1f2d1; } /* Aiman */
.tile[data-seat="4"] { background: #ffe5c2; } /* Founder */
.tile.speaking { border-color: #36d399; box-shadow: 0 0 26px rgba(54,211,153,0.5); }

2. Click-to-speak active speaker

Clicking any tile highlights it as the active speaker — a lightweight way to walk through each manager during the meeting.

tiles.forEach(tile => {
  tile.addEventListener('click', (e) => {
    if (e.target.closest('.upload-btn')) return;
    tiles.forEach(t => t.classList.remove('speaking'));
    tile.classList.add('speaking');
  });
});

3. Persistent editable agenda

The side panel renders an editable agenda backed by localStorage. Items can be added, edited, activated, or deleted — all persisted across reloads.

function saveAgenda(agenda) {
  localStorage.setItem('boardroom_agenda', JSON.stringify(agenda));
  localStorage.setItem('boardroom_agenda_updated', new Date().toISOString());
  renderLastUpdated();
}

function addAgendaItem() {
  const a = loadAgenda();
  a.push({ title: 'New item — click to edit', active: false });
  saveAgenda(a);
  renderAgenda();
}

4. Photo upload per seat with drag-to-reposition

Each seat accepts a photo upload. The image is stored in localStorage as a data URL and can be dragged to reposition the crop inside its tile.

function uploadPhoto(event, seat) {
  const file = event.target.files[0];
  const reader = new FileReader();
  reader.onload = (e) => {
    const dataUrl = e.target.result;
    localStorage.setItem('boardroom_seat_' + seat, dataUrl);
    const videoEl = document.querySelector(`.tile[data-seat="${seat}"] .video`);
    videoEl.style.backgroundImage = `url('${dataUrl}')`;
    videoEl.classList.add('custom');
  };
  reader.readAsDataURL(file);
}

5. Agent layer — the real meeting

The visual UI is only ambiance. The meeting is run by the board-meeting skill in Claude Code, which orchestrates six manager subagents. Each subagent reads company-state.md before reporting, so contributions stay grounded in actual state.

# Inside Claude Code
run board meeting

# → Ms Yap drafts agenda from last week's minutes
# → Daniel Wong (Chief Researcher) reports
# → Ryan Goh (Marketing Director) reports
# → Priya Chen (Editor-in-Chief) reports
# → Aiman Razak (AI Engineer Lead) reports
# → Cindy (Mentor) gives strategic observations
# → Ms Yap writes minutes to `what was discussed.md`

🔗 Full Source

All files live in the portfolio repo:

github.com/lyven81/ai-project/tree/main/projects/leadership-team

🌸 Leadership Team — Source Code