Skip to content
View roced-spec's full-sized avatar
😎
😎
  • Ranchi

Block or report roced-spec

Block user

Prevent this user from interacting with your repositories and sending you notifications. Learn more about blocking users.

You must be logged in to block users.

Please don't include any personal information such as legal names or email addresses. Maximum 250 characters, markdown supported. This note will be visible to only you.
Report abuse

Contact GitHub support about this user’s behavior. Learn more about reporting abuse.

Report abuse
roced-spec/README.md

Portfolio Website - Minimal Configuration

This portfolio website is now managed entirely through a single JSON configuration file with minimal JavaScript code.

Structure

β”œβ”€β”€ 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

Key Features

  • 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

Configuration

Adding/Removing Sections

Edit the navigation array in config.json:

"navigation": [
  { "id": "home", "label": "Home" },
  { "id": "about", "label": "About" }
]

Reordering Sections

Simply reorder items in the navigation array - both menu and page sections will update automatically.

Updating Content

Modify the corresponding section data in the sections object:

"sections": {
  "home": {
    "type": "hero",
    "data": { ... }
  }
}

Adding Themes

Add theme names to the themes array:

"themes": ["github", "dracula", "custom-theme"]

Section Types

  • hero: Landing section with name, title, and code block
  • about: Bio text with stats
  • timeline: Experience/timeline items
  • grid: Projects or skills in grid layout
  • contact: Contact information with social links

Benefits

  1. Maintainability: Single file to update all content
  2. Consistency: Navigation and sections always synchronized
  3. Performance: Minimal JavaScript footprint
  4. Simplicity: No complex component loading or state management
  5. Flexibility: Easy to add new section types or modify existing ones

Pinned Loading

  1. Dragneel Dragneel Public

    This is a custom Operating System largely for learning to develop one

  2. Gray Gray Public

    C++

  3. REquip REquip Public

    My portfolio

    JavaScript

  4. Skiadrum Skiadrum Public

    This is a API development based learning project

    JavaScript

  5. chapel chapel Public

    Forked from chapel-lang/chapel

    a Productive Parallel Programming Language

    Chapel 1