# TekDek Documentation Website Architecture **Designed by:** Daedalus, Chief Architect **Date:** 2026-04-12 **Status:** Ready for Implementation (Talos + Icarus) --- ## 1. FOLDER STRUCTURE ``` /web.tekdek.dev/ ├── index.php # Landing page router ├── .htaccess # URL rewriting (if Apache) ├── config.php # Global config (colors, menus, paths) │ ├── /includes/ # PHP components │ ├── top.php # Header + navigation │ ├── bottom.php # Footer │ ├── menu.php # Menu builder (uses config) │ └── helpers.php # Utility functions │ ├── /pages/ # Content pages │ ├── landing.php # Home page │ ├── about/ │ │ ├── vision.php # Vision & Strategy │ │ └── model.php # Our Model │ ├── projects/ │ │ ├── master-plan.php # Master Project Plan │ │ ├── status.php # Project Status │ │ └── overview.php # Project Overview │ ├── tools/ │ │ ├── index.php # Tools overview │ │ └── tech-stack.php # Tech Stack info │ ├── team.php # Team page (redirect to /team.html) │ └── decisions/ │ └── checklist.php # Quick Checklist │ ├── /css/ # Stylesheets │ ├── base.css # Colors, typography, layout │ ├── components.css # Buttons, cards, sections │ ├── responsive.css # Mobile, tablet, desktop │ └── print.css # Print styles (optional) │ ├── /js/ # JavaScript (minimal) │ └── menu.js # Mobile menu toggle │ ├── /team.html # Existing employees page (static) │ └── /assets/ # Images, icons, downloads ├── /images/ │ └── tekdek-logo.svg └── /docs/ # Source markdown files (if serving originals) ├── 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 ``` --- ## 2. MENU DATA STRUCTURE **File: `/includes/config.php`** ```php 'Home', 'url' => '/', 'icon' => 'home', ], [ 'label' => 'About', 'url' => '#', 'icon' => 'info', 'children' => [ [ 'label' => 'Vision & Strategy', 'url' => '/about/vision.php', 'source' => 'TekDek-Strategy.md', ], [ 'label' => 'Our Model', 'url' => '/about/model.php', 'source' => 'TekDek-Brainstorm-Reference.md', ], ], ], [ 'label' => 'Projects', 'url' => '#', 'icon' => 'projects', 'children' => [ [ 'label' => 'Master Plan', 'url' => '/projects/master-plan.php', 'source' => 'TekDek-Master-Project-Plan.md', ], [ 'label' => 'Status', 'url' => '/projects/status.php', 'source' => 'PROJECT-STATUS.md', ], [ 'label' => 'Overview', 'url' => '/projects/overview.php', 'source' => 'PROJECT-OVERVIEW.md', ], ], ], [ 'label' => 'Tools & Tech', 'url' => '/tools/', 'icon' => 'tools', 'children' => [ [ 'label' => 'Requirements', 'url' => '/tools/index.php', 'source' => 'Tool-Requirements.md', ], [ 'label' => 'Tech Stack', 'url' => '/tools/tech-stack.php', 'source' => null, // Custom content ], ], ], [ 'label' => 'Team', 'url' => '/team.html', 'icon' => 'people', ], [ 'label' => 'Decisions', 'url' => '/decisions/checklist.php', 'icon' => 'checklist', 'source' => 'Master-Plan-Quick-Checklist.md', 'admin' => false, // Not hidden, but can be toggled ], ]; // Page metadata mapping (for breadcrumbs, titles, descriptions) $PAGE_META = [ '/' => [ 'title' => 'TekDek', 'desc' => 'Strategic Documentation & Project Portal', 'breadcrumb' => [], ], '/about/vision.php' => [ 'title' => 'Vision & Strategy', 'desc' => 'Our strategic vision for TekDek', 'breadcrumb' => ['About', 'Vision & Strategy'], ], '/about/model.php' => [ 'title' => 'Our Model', 'desc' => 'How TekDek operates', 'breadcrumb' => ['About', 'Our Model'], ], '/projects/master-plan.php' => [ 'title' => 'Master Project Plan', 'desc' => 'Complete project roadmap', 'breadcrumb' => ['Projects', 'Master Plan'], ], '/projects/status.php' => [ 'title' => 'Project Status', 'desc' => 'Current project status and updates', 'breadcrumb' => ['Projects', 'Status'], ], '/projects/overview.php' => [ 'title' => 'Project Overview', 'desc' => 'High-level project overview', 'breadcrumb' => ['Projects', 'Overview'], ], '/tools/' => [ 'title' => 'Tools & Tech', 'desc' => 'Tools and technology requirements', 'breadcrumb' => ['Tools & Tech'], ], '/tools/tech-stack.php' => [ 'title' => 'Tech Stack', 'desc' => 'Technology stack overview', 'breadcrumb' => ['Tools & Tech', 'Tech Stack'], ], '/team.html' => [ 'title' => 'Team', 'desc' => 'Meet the TekDek team', 'breadcrumb' => ['Team'], ], '/decisions/checklist.php' => [ 'title' => 'Quick Checklist', 'desc' => 'Decision checklist and quick reference', 'breadcrumb' => ['Decisions', 'Checklist'], ], ]; ?> ``` --- ## 3. PAGE LAYOUT SPECIFICATION ### 3.1 Header Component (`includes/top.php`) ```php <?php echo isset($PAGE_TITLE) ? $PAGE_TITLE . ' | ' . SITE_NAME : SITE_NAME; ?>
``` ### 3.2 Navigation Component (`includes/menu.php`) ```php '; foreach ($menuArray as $item) { $hasChildren = !empty($item['children']); $activeClass = (isset($_SERVER['REQUEST_URI']) && $_SERVER['REQUEST_URI'] === $item['url']) ? 'active' : ''; $html .= ''; } $html .= ''; return $html; } echo renderMenu($MENU); ?> ``` ### 3.3 Footer Component (`includes/bottom.php`) ```php
``` ### 3.4 Landing Page (`pages/landing.php`) ```php

TekDek

Strategic Documentation & Project Portal

TekDek is a multifaceted organization building unique personas with independent development styles, brands, and roles within a living narrative ecosystem.

``` ### 3.5 Content Pages (Example: `/pages/about/vision.php`) ```php

text($markdown); } else { echo '

Content not found.

'; } ?>
``` --- ## 4. CSS FILE ORGANIZATION ### 4.1 Base Styles (`css/base.css`) ```css /* TekDek Documentation Site - Base Styles */ :root { /* Colors */ --color-bg: #0d0d0f; --color-fg: #e0e0e0; --color-gold: #C4A24E; --color-steel: #7B8794; --color-amber: #E07A2F; --color-border: #2a2a2d; /* Typography */ --font-header: 'Cinzel', serif; --font-body: 'Inter', sans-serif; --font-code: 'JetBrains Mono', monospace; /* Spacing */ --spacing-xs: 0.5rem; --spacing-sm: 1rem; --spacing-md: 1.5rem; --spacing-lg: 2rem; --spacing-xl: 3rem; --spacing-2xl: 4rem; /* Sizing */ --header-height: 80px; --max-width: 1200px; /* Z-index */ --z-base: 1; --z-dropdown: 100; --z-modal: 1000; } /* Reset */ * { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; } body { background-color: var(--color-bg); color: var(--color-fg); font-family: var(--font-body); line-height: 1.6; font-size: 16px; } /* Typography */ h1, h2, h3, h4, h5, h6 { font-family: var(--font-header); font-weight: 600; line-height: 1.2; margin-bottom: var(--spacing-md); } h1 { font-size: 3rem; } h2 { font-size: 2.25rem; } h3 { font-size: 1.75rem; } h4 { font-size: 1.5rem; } h5 { font-size: 1.25rem; } h6 { font-size: 1.1rem; } p { margin-bottom: var(--spacing-md); } a { color: var(--color-gold); text-decoration: none; transition: color 0.2s ease; } a:hover { color: var(--color-amber); } code { font-family: var(--font-code); background: rgba(255, 255, 255, 0.05); padding: 0.2em 0.4em; border-radius: 3px; } pre { background: rgba(255, 255, 255, 0.05); padding: var(--spacing-md); border-radius: 6px; overflow-x: auto; margin-bottom: var(--spacing-md); } pre code { background: none; padding: 0; } /* Header */ .site-header { background: linear-gradient(135deg, var(--color-bg) 0%, rgba(0, 0, 0, 0.5) 100%); border-bottom: 1px solid var(--color-border); height: var(--header-height); display: flex; align-items: center; position: sticky; top: 0; z-index: var(--z-base); } .header-container { display: flex; justify-content: space-between; align-items: center; max-width: var(--max-width); width: 100%; margin: 0 auto; padding: 0 var(--spacing-md); } .logo { flex-shrink: 0; } .logo-text { font-family: var(--font-header); font-size: 1.8rem; font-weight: 700; color: var(--color-gold); transition: color 0.2s ease; } .logo a:hover .logo-text { color: var(--color-amber); } .menu-toggle { display: none; flex-direction: column; background: none; border: none; cursor: pointer; padding: var(--spacing-xs); } .menu-toggle span { width: 25px; height: 3px; background-color: var(--color-gold); margin: 4px 0; transition: 0.3s; border-radius: 2px; } /* Navigation */ .site-nav { flex: 1; } .menu { display: flex; list-style: none; gap: var(--spacing-lg); margin-left: auto; } .menu-item { position: relative; } .menu-link { color: var(--color-fg); padding: var(--spacing-xs) var(--spacing-sm); transition: color 0.2s ease; } .menu-link:hover { color: var(--color-gold); } .menu-link.active { color: var(--color-gold); border-bottom: 2px solid var(--color-gold); } /* Dropdown menus */ .menu-level-1 { display: none; position: absolute; top: 100%; left: 0; background: rgba(13, 13, 15, 0.95); border: 1px solid var(--color-border); border-radius: 6px; padding: var(--spacing-sm) 0; min-width: 200px; z-index: var(--z-dropdown); } .menu-item.has-submenu:hover .menu-level-1 { display: block; } .menu-level-1 .menu-link { display: block; padding: var(--spacing-sm) var(--spacing-md); } /* Main content */ .site-main { max-width: var(--max-width); margin: 0 auto; padding: var(--spacing-2xl) var(--spacing-md); min-height: calc(100vh - var(--header-height)); } /* Footer */ .site-footer { background: rgba(0, 0, 0, 0.3); border-top: 1px solid var(--color-border); padding: var(--spacing-2xl) var(--spacing-md); margin-top: var(--spacing-2xl); } .footer-container { max-width: var(--max-width); margin: 0 auto; display: flex; justify-content: space-between; align-items: center; } .footer-content p { margin-bottom: var(--spacing-xs); } .footer-tagline { color: var(--color-steel); font-size: 0.9rem; } .footer-links { display: flex; gap: var(--spacing-md); } .footer-link { color: var(--color-steel); transition: color 0.2s ease; } .footer-link:hover { color: var(--color-gold); } /* Breadcrumb */ .breadcrumb { background: rgba(255, 255, 255, 0.02); border-bottom: 1px solid var(--color-border); padding: var(--spacing-md) 0; } .breadcrumb-container { max-width: var(--max-width); margin: 0 auto; padding: 0 var(--spacing-md); font-size: 0.95rem; color: var(--color-steel); } .breadcrumb-container a { color: var(--color-gold); } .separator { margin: 0 var(--spacing-xs); color: var(--color-steel); } ``` ### 4.2 Components (`css/components.css`) ```css /* TekDek Documentation Site - Components */ /* Buttons */ .btn { display: inline-block; padding: var(--spacing-sm) var(--spacing-md); border-radius: 6px; font-family: var(--font-header); font-weight: 600; text-decoration: none; transition: all 0.2s ease; cursor: pointer; border: none; } .btn-primary { background: var(--color-gold); color: var(--color-bg); } .btn-primary:hover { background: var(--color-amber); transform: translateY(-2px); box-shadow: 0 4px 12px rgba(196, 162, 78, 0.3); } .btn-secondary { background: transparent; color: var(--color-gold); border: 2px solid var(--color-gold); } .btn-secondary:hover { background: var(--color-gold); color: var(--color-bg); } /* Cards */ .card { background: rgba(255, 255, 255, 0.03); border: 1px solid var(--color-border); border-radius: 8px; padding: var(--spacing-lg); transition: all 0.2s ease; } .card:hover { background: rgba(255, 255, 255, 0.05); border-color: var(--color-gold); transform: translateY(-2px); } .card h3 { margin-top: 0; } /* Hero Section */ .hero-section { padding: var(--spacing-2xl) 0; text-align: center; background: linear-gradient(135deg, rgba(196, 162, 78, 0.05) 0%, rgba(224, 122, 47, 0.05) 100%); border-radius: 12px; margin-bottom: var(--spacing-2xl); } .hero-container { max-width: 800px; margin: 0 auto; padding: 0 var(--spacing-md); } .hero-title { font-size: 4rem; margin-bottom: var(--spacing-md); background: linear-gradient(135deg, var(--color-gold), var(--color-amber)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .hero-subtitle { font-size: 1.5rem; color: var(--color-steel); margin-bottom: var(--spacing-md); } .hero-desc { font-size: 1.1rem; color: var(--color-fg); margin-bottom: var(--spacing-xl); line-height: 1.8; } .hero-cta { display: flex; gap: var(--spacing-md); justify-content: center; flex-wrap: wrap; } /* Quick Links Grid */ .quick-links { margin: var(--spacing-2xl) 0; } .quick-links-container { max-width: var(--max-width); margin: 0 auto; padding: 0 var(--spacing-md); } .quick-links-container h2 { margin-bottom: var(--spacing-xl); text-align: center; } .quick-links-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: var(--spacing-lg); } .quick-link-card { background: rgba(255, 255, 255, 0.03); border: 1px solid var(--color-border); border-radius: 8px; padding: var(--spacing-lg); transition: all 0.2s ease; } .quick-link-card:hover { background: rgba(255, 255, 255, 0.05); border-color: var(--color-gold); transform: translateY(-4px); } .quick-link-card h3 { margin-top: 0; } .quick-link-card h3 a { color: var(--color-gold); } .quick-link-card p { color: var(--color-steel); margin-bottom: 0; } /* Content Layout */ .content-container { display: grid; grid-template-columns: 1fr 300px; gap: var(--spacing-2xl); margin: var(--spacing-2xl) 0; } .content-article { background: rgba(255, 255, 255, 0.02); border: 1px solid var(--color-border); padding: var(--spacing-xl); border-radius: 8px; } .content-article h1 { margin-bottom: var(--spacing-lg); } .content-body h2 { margin-top: var(--spacing-xl); } .content-body ul, .content-body ol { margin-left: var(--spacing-lg); margin-bottom: var(--spacing-md); } .content-body li { margin-bottom: var(--spacing-xs); } /* Sidebar */ .content-sidebar { position: sticky; top: calc(var(--header-height) + var(--spacing-md)); height: fit-content; } .sidebar-section { background: rgba(255, 255, 255, 0.02); border: 1px solid var(--color-border); padding: var(--spacing-md); border-radius: 8px; margin-bottom: var(--spacing-md); } .sidebar-section h4 { margin-bottom: var(--spacing-md); font-size: 1rem; } .section-nav { display: flex; flex-direction: column; gap: var(--spacing-sm); } .section-link { color: var(--color-steel); padding: var(--spacing-xs) var(--spacing-sm); border-left: 3px solid transparent; transition: all 0.2s ease; } .section-link:hover { color: var(--color-gold); border-left-color: var(--color-gold); } .section-link.active { color: var(--color-gold); border-left-color: var(--color-gold); } /* Tables */ table { width: 100%; border-collapse: collapse; margin-bottom: var(--spacing-lg); } th { background: rgba(196, 162, 78, 0.1); color: var(--color-gold); padding: var(--spacing-md); text-align: left; font-weight: 600; } td { border-bottom: 1px solid var(--color-border); padding: var(--spacing-md); } tr:hover { background: rgba(255, 255, 255, 0.02); } /* Blockquotes */ blockquote { border-left: 4px solid var(--color-gold); padding-left: var(--spacing-md); margin: var(--spacing-md) 0; color: var(--color-steel); font-style: italic; } ``` ### 4.3 Responsive Styles (`css/responsive.css`) ```css /* TekDek Documentation Site - Responsive */ /* Tablet (768px and below) */ @media (max-width: 768px) { :root { --spacing-xl: 2rem; --spacing-2xl: 3rem; } .header-container { gap: var(--spacing-md); } .menu-toggle { display: flex; } .site-nav { position: absolute; top: var(--header-height); left: 0; right: 0; background: rgba(13, 13, 15, 0.98); border-bottom: 1px solid var(--color-border); max-height: 0; overflow: hidden; transition: max-height 0.3s ease; } .site-nav.active { max-height: 500px; } .menu { flex-direction: column; gap: 0; padding: var(--spacing-md); margin: 0; } .menu-item { border-bottom: 1px solid var(--color-border); } .menu-item:last-child { border-bottom: none; } .menu-link { display: block; padding: var(--spacing-md); } .menu-level-1 { position: static; background: rgba(255, 255, 255, 0.02); border: none; border-radius: 0; margin-top: 0; display: none; padding: 0; min-width: auto; } .menu-item.has-submenu:hover .menu-level-1 { display: block; } .menu-level-1 .menu-link { padding: var(--spacing-sm) var(--spacing-md) var(--spacing-sm) calc(var(--spacing-md) * 2); } /* Hero */ .hero-title { font-size: 2.5rem; } .hero-subtitle { font-size: 1.2rem; } /* Content Layout */ .content-container { grid-template-columns: 1fr; gap: var(--spacing-lg); } .content-sidebar { position: static; } /* Quick Links Grid */ .quick-links-grid { grid-template-columns: 1fr; } /* Footer */ .footer-container { flex-direction: column; gap: var(--spacing-md); text-align: center; } h1 { font-size: 2rem; } h2 { font-size: 1.75rem; } h3 { font-size: 1.5rem; } } /* Mobile (480px and below) */ @media (max-width: 480px) { :root { font-size: 14px; --header-height: 70px; } .logo-text { font-size: 1.5rem; } .hero-section { padding: var(--spacing-lg) 0; } .hero-title { font-size: 1.75rem; } .hero-subtitle { font-size: 1rem; } .hero-cta { gap: var(--spacing-sm); } .btn { padding: var(--spacing-xs) var(--spacing-sm); font-size: 0.95rem; } .content-article { padding: var(--spacing-md); } .sidebar-section { padding: var(--spacing-sm); } h1 { font-size: 1.5rem; } h2 { font-size: 1.25rem; } h3 { font-size: 1.1rem; } .site-main { padding: var(--spacing-lg) var(--spacing-sm); } } /* Print */ @media print { .site-header, .site-footer, .breadcrumb, .content-sidebar { display: none; } body { background: white; color: black; } a { color: #0066cc; } } ``` --- ## 5. HELPER FUNCTIONS (`includes/helpers.php`) ```php 'TekDek', 'desc' => SITE_DESC, 'breadcrumb' => [], ]; } /** * Convert markdown file to HTML (requires Parsedown) */ function renderMarkdown($filePath) { if (!file_exists($filePath)) { return '

Content not found.

'; } $markdown = file_get_contents($filePath); require_once 'parsedown.php'; $pd = new Parsedown(); return $pd->text($markdown); } /** * Escape HTML output */ function esc($text) { return htmlspecialchars($text, ENT_QUOTES, 'UTF-8'); } /** * Generate a unique page ID for anchors */ function slugify($text) { $text = strtolower($text); $text = preg_replace('/[^\w\s-]/', '', $text); $text = preg_replace('/-+/', '-', $text); return trim($text, '-'); } ?> ``` --- ## 6. JAVASCRIPT (`js/menu.js`) ```javascript // TekDek Documentation Site - Menu Toggle document.addEventListener('DOMContentLoaded', function() { const menuToggle = document.getElementById('menuToggle'); const siteNav = document.getElementById('siteNav'); if (!menuToggle || !siteNav) return; // Toggle mobile menu menuToggle.addEventListener('click', function() { siteNav.classList.toggle('active'); menuToggle.classList.toggle('active'); }); // Close menu when clicking on a link const menuLinks = siteNav.querySelectorAll('a'); menuLinks.forEach(link => { link.addEventListener('click', function() { siteNav.classList.remove('active'); menuToggle.classList.remove('active'); }); }); // Close menu when clicking outside document.addEventListener('click', function(event) { if (!siteNav.contains(event.target) && !menuToggle.contains(event.target)) { siteNav.classList.remove('active'); menuToggle.classList.remove('active'); } }); }); ``` --- ## 7. ROUTING & URL PATTERNS ### 7.1 URL Structure ``` / # Landing page /about/vision.php # Vision & Strategy /about/model.php # Our Model /projects/master-plan.php # Master Plan /projects/status.php # Project Status /projects/overview.php # Project Overview /tools/ # Tools overview (index.php) /tools/tech-stack.php # Tech Stack /team.html # Team page (external link, no rewrite) /decisions/checklist.php # Quick Checklist ``` ### 7.2 Apache `.htaccess` (Optional - for clean URLs) ```apache RewriteEngine On RewriteBase / # Don't rewrite existing files or directories RewriteCond %{REQUEST_FILENAME} !-f RewriteCond %{REQUEST_FILENAME} !-d # Rewrite /vision to /about/vision.php RewriteRule ^about/vision/?$ /about/vision.php [L,QSA] RewriteRule ^about/model/?$ /about/model.php [L,QSA] RewriteRule ^projects/master-plan/?$ /projects/master-plan.php [L,QSA] RewriteRule ^projects/status/?$ /projects/status.php [L,QSA] RewriteRule ^projects/overview/?$ /projects/overview.php [L,QSA] RewriteRule ^tools/?$ /tools/index.php [L,QSA] RewriteRule ^tools/tech-stack/?$ /tools/tech-stack.php [L,QSA] RewriteRule ^decisions/checklist/?$ /decisions/checklist.php [L,QSA] ``` --- ## 8. INDEX.PHP (MAIN ROUTER) ```php 'pages/landing.php', '/about/vision.php' => 'pages/about/vision.php', '/about/model.php' => 'pages/about/model.php', '/projects/master-plan.php' => 'pages/projects/master-plan.php', '/projects/status.php' => 'pages/projects/status.php', '/projects/overview.php' => 'pages/projects/overview.php', '/tools/' => 'pages/tools/index.php', '/tools/index.php' => 'pages/tools/index.php', '/tools/tech-stack.php' => 'pages/tools/tech-stack.php', '/team.html' => 'team.html', '/decisions/checklist.php' => 'pages/decisions/checklist.php', ]; // Find matching route $filePath = $routes[$requestUri] ?? null; if ($filePath && file_exists($filePath)) { include $filePath; } else { // 404 Not Found http_response_code(404); include 'pages/404.php'; } ?> ``` --- ## 9. HANDOFF SPECIFICATIONS ### 9.1 For Talos (PHP Implementation) **Responsibilities:** 1. **Setup & Installation** - Create folder structure exactly as specified - Copy CSS files from Icarus - Implement routing in `index.php` - Install markdown parser (e.g., Parsedown) in `/includes/` 2. **Template Implementation** - Create `includes/top.php` with header and navigation - Create `includes/bottom.php` with footer - Create `includes/menu.php` with recursive menu builder - Ensure all PHP includes work correctly with relative paths 3. **Page Creation** - Create all page files in `/pages/` structure - Implement markdown rendering for content pages - Ensure breadcrumb generation works - Test all navigation links 4. **Configuration** - Update `config.php` with actual domain/paths - Set up database connection if needed (not in current spec) - Configure error handling and logging 5. **Testing Checklist** - [ ] All pages load without errors - [ ] Navigation works on desktop & mobile - [ ] Responsive design functions properly - [ ] Markdown content renders correctly - [ ] 404 page displays for missing routes - [ ] Performance acceptable (page load < 2s) --- ### 9.2 For Icarus (CSS/Design Implementation) **Responsibilities:** 1. **CSS Files Creation** - Implement `base.css` with variables and typography - Implement `components.css` with all component styles - Implement `responsive.css` with media queries - Ensure color consistency with design spec 2. **Design Elements** - Hero section visual hierarchy - Card hover effects and transitions - Button states (default, hover, active) - Form elements (if needed in future) - Icon integration (optional) 3. **Typography** - Cinzel for headers (load from Google Fonts) - Inter for body (load from Google Fonts) - JetBrains Mono for code (load from Google Fonts) - Ensure proper font scaling at different breakpoints 4. **Responsive Design** - Tablet layout (768px breakpoint) - Mobile layout (480px breakpoint) - Test on real devices/browser DevTools - Ensure touch-friendly buttons and links 5. **Dark Theme Consistency** - Maintain color scheme (#0d0d0f, #C4A24E, #7B8794, #E07A2F) - Ensure contrast ratios meet accessibility standards - Test with browser dark mode detection 6. **Testing Checklist** - [ ] All colors render correctly - [ ] Fonts load and display properly - [ ] Responsive breakpoints work - [ ] Hover states are clear - [ ] Print styles work - [ ] Accessibility: color contrast OK - [ ] Animation performance smooth --- ## 10. DEPLOYMENT & HOSTING ### 10.1 Server Requirements - **PHP:** 7.4+ (for arrow functions and match expressions) - **Web Server:** Apache (with mod_rewrite) or Nginx - **Storage:** ~500MB (includes documentation) - **SSL:** HTTPS recommended ### 10.2 File Permissions ```bash chmod 755 /web.tekdek.dev # Directory chmod 644 /web.tekdek.dev/*.php # PHP files chmod 644 /web.tekdek.dev/css/* # CSS files chmod 644 /web.tekdek.dev/js/* # JavaScript files chmod 755 /web.tekdek.dev/assets # Asset directories ``` --- ## 11. CONTENT PIPELINE ### 11.1 Markdown to Website Workflow 1. **Source Files** → `/web.tekdek.dev/assets/docs/` - `TekDek-Strategy.md` - `TekDek-Brainstorm-Reference.md` - etc. 2. **Page Template** → `/web.tekdek.dev/pages/[category]/[page].php` - Includes top.php - Calls `renderMarkdown()` to load and convert markdown - Includes bottom.php 3. **Display** → Browser - PHP processes markdown - CSS styles output - User sees formatted content ### 11.2 Future Automation If desired, a script can: - Watch `/assets/docs/` for changes - Auto-regenerate static HTML if markdown changes - Commit changes to Gitea (Brain repo) --- ## 12. SUMMARY & NEXT STEPS | Role | Task | Timeline | |------|------|----------| | **Talos** | Implement PHP templates and routing | Week 1 | | **Icarus** | Create CSS files and responsive design | Week 1 | | **Both** | Integration testing | Week 2 | | **Talos** | Deploy to web.tekdek.dev | Week 2 | | **Glytcht + ParzivalTD** | Content review and go-live | Week 2-3 | --- ## Questions for Clarification Before implementation, confirm: 1. **Markdown Parser:** Use Parsedown or another library? 2. **Caching:** Need to cache rendered HTML pages? 3. **Analytics:** Google Analytics or other tracking? 4. **Search:** Full-text search across documentation pages? 5. **Admin Panel:** Need ability to manage content via web UI? 6. **Database:** Store metadata (authors, dates, versions) in database? 7. **SSL Certificate:** Already provisioned on web.tekdek.dev? --- **Architecture Document Complete.** Ready for Talos & Icarus to implement.