# TekDek Documentation Website - Implementation Checklist

**For:** Talos (PHP) & Icarus (CSS)  
**Project:** Documentation Website Build  
**Status:** Ready for Implementation

---

## TALOS - PHP IMPLEMENTATION CHECKLIST

### Phase 1: Foundation Setup

- [ ] Create folder structure:
  ```
  /web.tekdek.dev/
  ├── /includes/
  ├── /pages/
  ├── /css/
  ├── /js/
  ├── /assets/
  └── index.php
  ```

- [ ] Create `/includes/config.php`
  - [ ] Define color constants
  - [ ] Define font constants
  - [ ] Define site meta (name, URL, description)
  - [ ] Define $MENU array (navigation structure)
  - [ ] Define $PAGE_META array (page titles & breadcrumbs)

- [ ] Create `/includes/helpers.php`
  - [ ] getCurrentPage()
  - [ ] getPageMeta()
  - [ ] renderMarkdown()
  - [ ] Other utility functions

- [ ] Install Markdown Parser
  - [ ] Download Parsedown or equivalent to `/includes/`
  - [ ] Test markdown rendering

### Phase 2: Templates

- [ ] Create `/includes/top.php`
  - [ ] DOCTYPE and head section
  - [ ] Google Fonts import
  - [ ] CSS includes
  - [ ] Header with logo
  - [ ] Navigation toggle button (mobile)
  - [ ] Include menu.php
  - [ ] Breadcrumb section (conditional)
  - [ ] Open main tag

- [ ] Create `/includes/menu.php`
  - [ ] Recursive menu builder function
  - [ ] Multi-level dropdown support
  - [ ] Active page detection
  - [ ] Mobile-friendly structure

- [ ] Create `/includes/bottom.php`
  - [ ] Close main tag
  - [ ] Footer with links
  - [ ] Script includes (menu.js)
  - [ ] Close HTML

### Phase 3: Pages - Landing

- [ ] Create `/pages/landing.php`
  - [ ] Page meta setup
  - [ ] Hero section with title, subtitle, description
  - [ ] CTA buttons to Vision & Projects
  - [ ] Quick links grid (4 cards)
  - [ ] Test: All links work, responsive

### Phase 4: Pages - About Section

- [ ] Create `/pages/about/vision.php`
  - [ ] Load TekDek-Strategy.md via renderMarkdown()
  - [ ] Set page title and breadcrumb
  - [ ] Sidebar with section links
  - [ ] Test: Markdown renders correctly

- [ ] Create `/pages/about/model.php`
  - [ ] Load TekDek-Brainstorm-Reference.md
  - [ ] Set page title and breadcrumb
  - [ ] Sidebar with section links
  - [ ] Test: Markdown renders correctly

### Phase 5: Pages - Projects Section

- [ ] Create `/pages/projects/master-plan.php`
  - [ ] Load TekDek-Master-Project-Plan.md
  - [ ] Set breadcrumb: Projects > Master Plan
  - [ ] Test: Renders correctly

- [ ] Create `/pages/projects/status.php`
  - [ ] Load PROJECT-STATUS.md
  - [ ] Set breadcrumb: Projects > Status
  - [ ] Test: Renders correctly

- [ ] Create `/pages/projects/overview.php`
  - [ ] Load PROJECT-OVERVIEW.md
  - [ ] Set breadcrumb: Projects > Overview
  - [ ] Test: Renders correctly

### Phase 6: Pages - Tools Section

- [ ] Create `/pages/tools/index.php`
  - [ ] Load Tool-Requirements.md
  - [ ] Set page title: Tools & Tech
  - [ ] Create sidebar with links to tech-stack
  - [ ] Test: Renders correctly

- [ ] Create `/pages/tools/tech-stack.php`
  - [ ] Custom content or additional markdown
  - [ ] Set breadcrumb: Tools & Tech > Tech Stack
  - [ ] Test: Renders correctly

### Phase 7: Pages - Other Sections

- [ ] Create `/pages/team.php`
  - [ ] Redirect to /team.html (existing employees page)
  - [ ] Or embed /team.html via iframe if simpler

- [ ] Create `/pages/decisions/checklist.php`
  - [ ] Load Master-Plan-Quick-Checklist.md
  - [ ] Set breadcrumb: Decisions > Checklist
  - [ ] Test: Renders correctly

- [ ] Create `/pages/404.php`
  - [ ] 404 error page with link back to home
  - [ ] Use consistent styling

### Phase 8: Routing

- [ ] Create `/index.php` (main router)
  - [ ] Parse request URI
  - [ ] Match to routes array
  - [ ] Include appropriate page file
  - [ ] Handle 404s

- [ ] Create `/assets/docs/` folder
  - [ ] Verify all markdown files exist:
    - [ ] TekDek-Strategy.md
    - [ ] TekDek-Brainstorm-Reference.md
    - [ ] TekDek-Master-Project-Plan.md
    - [ ] PROJECT-STATUS.md
    - [ ] PROJECT-OVERVIEW.md
    - [ ] Tool-Requirements.md
    - [ ] Master-Plan-Quick-Checklist.md

- [ ] Configure `.htaccess` (if using Apache)
  - [ ] Enable mod_rewrite
  - [ ] Set up clean URL rewriting
  - [ ] Test: /about/vision loads vision.php

### Phase 9: JavaScript

- [ ] Create `/js/menu.js`
  - [ ] Menu toggle function
  - [ ] Close menu on link click
  - [ ] Close menu on outside click
  - [ ] Test: Mobile menu toggle works

### Phase 10: Testing & Optimization

- [ ] Test all pages load without errors
- [ ] Test navigation works (desktop & mobile)
- [ ] Test responsive design at breakpoints
- [ ] Test markdown rendering quality
- [ ] Test 404 page displays
- [ ] Test performance (page load time < 2s)
- [ ] Check for PHP errors in logs
- [ ] Verify file permissions (755 dirs, 644 files)

### Phase 11: Deployment

- [ ] Set correct file permissions
- [ ] Copy files to web.tekdek.dev
- [ ] Test on live server
- [ ] Verify SSL/HTTPS working
- [ ] Check analytics (if configured)

---

## ICARUS - CSS IMPLEMENTATION CHECKLIST

### Phase 1: Color & Variables

- [ ] Create `/css/base.css`
- [ ] Define CSS variables:
  - [ ] `--color-bg: #0d0d0f`
  - [ ] `--color-fg: #e0e0e0`
  - [ ] `--color-gold: #C4A24E`
  - [ ] `--color-steel: #7B8794`
  - [ ] `--color-amber: #E07A2F`
  - [ ] `--color-border: #2a2a2d`
  - [ ] All spacing variables
  - [ ] All typography variables
  - [ ] Z-index hierarchy

### Phase 2: Typography & Reset

- [ ] Implement CSS reset (*, body, html)
- [ ] Set base font: Inter
- [ ] Configure heading hierarchy (h1-h6)
- [ ] Style links, code, blockquotes
- [ ] Import Google Fonts (Cinzel, Inter, JetBrains Mono)
- [ ] Test: Fonts load and display correctly

### Phase 3: Layout Components

- [ ] Create `/css/base.css` (continued)
- [ ] Style header (sticky, gradient, dark)
- [ ] Style navigation menu
- [ ] Style dropdown menus
- [ ] Style main content area
- [ ] Style footer
- [ ] Style breadcrumb

### Phase 4: Components

- [ ] Create `/css/components.css`
- [ ] Button styles (primary, secondary, hover states)
- [ ] Card styles (hover, shadow, border)
- [ ] Hero section (gradient, typography hierarchy)
- [ ] Quick links grid
- [ ] Content layout (2-column with sidebar)
- [ ] Sidebar sections
- [ ] Tables (header, rows, hover)
- [ ] Blockquotes

### Phase 5: Responsive Design

- [ ] Create `/css/responsive.css`
- [ ] **Tablet (768px breakpoint)**
  - [ ] Stack menu vertically
  - [ ] Hide dropdown menus (show on click)
  - [ ] Adjust hero font sizes
  - [ ] Single-column content layout
  - [ ] Adjust spacing/padding
  
- [ ] **Mobile (480px breakpoint)**
  - [ ] Reduce all font sizes (h1-h6)
  - [ ] Adjust button sizes
  - [ ] Stack everything single column
  - [ ] Reduce spacing
  - [ ] Ensure touch targets are 44px minimum
  
- [ ] **Print styles**
  - [ ] Hide header, footer, sidebar
  - [ ] Black text on white
  - [ ] Show URLs for links

### Phase 6: Transitions & Effects

- [ ] Add smooth transitions (0.2s-0.3s)
- [ ] Hover effects:
  - [ ] Links change color
  - [ ] Buttons scale slightly (translateY)
  - [ ] Cards lift on hover (shadow + transform)
  
- [ ] Menu animations:
  - [ ] Dropdown slide-down effect
  - [ ] Mobile menu expand/collapse smoothly

### Phase 7: Color Testing

- [ ] Test contrast ratios (WCAG AA minimum)
  - [ ] Gold (#C4A24E) on dark background OK?
  - [ ] Steel (#7B8794) text readable?
  - [ ] Amber (#E07A2F) sufficient contrast?
  
- [ ] Test in light mode (if browser requests it)
- [ ] Test print mode

### Phase 8: Cross-Browser Testing

- [ ] Chrome/Edge (latest)
- [ ] Firefox (latest)
- [ ] Safari (latest, if Mac available)
- [ ] Mobile Chrome
- [ ] Mobile Safari

### Phase 9: Accessibility

- [ ] Color contrast meets WCAG AA
- [ ] Focus states visible (for keyboard navigation)
- [ ] Button sizes adequate (44px minimum)
- [ ] No reliance on color alone
- [ ] Semantic HTML (h1, nav, main, footer)

### Phase 10: Optimization

- [ ] Minify CSS (optional, for production)
- [ ] Remove unused styles
- [ ] Optimize font loading (font-display: swap)
- [ ] Test page load time
- [ ] Check CSS file sizes

---

## INTEGRATION CHECKLIST (Both)

- [ ] All pages load without errors
- [ ] Navigation works top to bottom
- [ ] Markdown renders with proper styling
- [ ] Responsive design works at all breakpoints
- [ ] Mobile menu toggle works
- [ ] Hero section looks beautiful
- [ ] Cards have proper hover effects
- [ ] Footer is sticky (or naturally positioned)
- [ ] 404 page displays correctly
- [ ] Links don't have broken references
- [ ] All team page link works
- [ ] Page load time acceptable (< 2s)

---

## KNOWN DEPENDENCIES

- **Google Fonts:** Cinzel, Inter, JetBrains Mono
- **Markdown Parser:** Parsedown (or similar)
- **PHP Version:** 7.4+
- **Web Server:** Apache (mod_rewrite) or Nginx

---

## HANDOFF SIGNALS

| Signal | Meaning |
|--------|---------|
| ✅ | Task complete and tested |
| 🔄 | In progress |
| ⏳ | Blocked, waiting on other task |
| ❌ | Not started |
| 🐛 | Bug found, needs fixing |

---

**Document Created:** 2026-04-12  
**For:** Talos & Icarus  
**Next Step:** Start Phase 1 in order