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