Architecture Layers
Presentation Layer
What users see and interact with
index.html
dashboard.html
style.css
responsive.css
Logic Layer
JavaScript that controls behavior
profile-loader.js
module-loader.js
sanitize.js
Data Layer
JSON configuration files
profile.json
modules-bundle.json
Module Layer
Self-contained feature plugins
modules/
media/
Data Flow
JSON Config
JS Loader
DOM Elements
User Sees
Component Relationships
index.html
Landing page
profile-loader.js
Reads profile.json
profile.json
Personal data
dashboard.html
Project dashboard
module-loader.js
Reads modules bundle
modules-bundle.json
All module data