This portfolio website is now managed entirely through a single JSON configuration file with minimal JavaScript code.
βββ index.html # Main HTML file (minimal)
βββ config.json # Single source of truth for all content and structure
βββ js/
β βββ app.js # Single JavaScript file handling everything
βββ css/ # Existing CSS files (unchanged)
βββ backup/ # Backup of old modular structure
- Single Configuration: Everything managed from
config.json - Synchronized Navigation: Menu items and sections automatically synchronized
- Minimal Code: One JavaScript file handles all functionality
- Static Approach: Template-based rendering with minimal dynamic behavior
- Easy Maintenance: Change content, order, or structure by editing JSON only
Edit the navigation array in config.json:
"navigation": [
{ "id": "home", "label": "Home" },
{ "id": "about", "label": "About" }
]Simply reorder items in the navigation array - both menu and page sections will update automatically.
Modify the corresponding section data in the sections object:
"sections": {
"home": {
"type": "hero",
"data": { ... }
}
}Add theme names to the themes array:
"themes": ["github", "dracula", "custom-theme"]hero: Landing section with name, title, and code blockabout: Bio text with statstimeline: Experience/timeline itemsgrid: Projects or skills in grid layoutcontact: Contact information with social links
- Maintainability: Single file to update all content
- Consistency: Navigation and sections always synchronized
- Performance: Minimal JavaScript footprint
- Simplicity: No complex component loading or state management
- Flexibility: Easy to add new section types or modify existing ones
