# 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
```
### 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.
Quick Access
Our strategic direction and vision
Meet our personas and team members
Current updates and progress
```
### 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.