343 lines
9.0 KiB
Markdown
343 lines
9.0 KiB
Markdown
# 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
|