Refactoring a Portfolio Frontend from Script Tags to Build Pipeline

Refactoring a Portfolio Frontend from Script Tags to Build Pipeline

Many portfolio sites begin with raw HTML/CSS/JS and eventually hit maintainability limits. A gradual build pipeline migration can improve quality without rewriting everything at once.

Phase 1: Keep pages static, modularize JavaScript

// navbar.js
export function mountNavbar(root, items) {
  root.innerHTML = items.map(i => `<a href="${i.href}">${i.label}</a>`).join('');
}

Phase 2: Introduce bundling with explicit entrypoints

export default {
  input: {
    home: "src/home.js",
    projects: "src/projects.js"
  }
}

Phase 3: Add build checks for dead links and missing assets

npm run build && npm run check:links && npm run check:assets

Pitfalls

• Migrating all pages at once with no rollback plan.
• Implicit global variables surviving between modules.
• Build output not tested under production base paths.

Validation

• Legacy pages and bundled pages coexist safely during migration.
• Bundle entrypoints map cleanly to site sections.
• CI catches broken links before deploy.