Refining the Portfolio: Iterative Polish and Modern JavaScript Patterns

A developer's portfolio is never truly finished; it is a living entity that evolves alongside new skills and project requirements. Recently, I spent time revisiting the aldhair-vera-developer-portfolio project to perform a series of iterative improvements, focusing on code maintainability and user experience.

The Need for Maintenance

When managing a portfolio that integrates diverse technologies like React, Three.js, and backend integrations with DynamoDB, technical debt can accumulate silently. The goal was not to rebuild the entire application, but to refine existing interactions and ensure that the legacy JavaScript sections—which occasionally rely on jQuery—play nicely with the newer, reactive component structure.

Refactoring for Consistency

One of the main focuses was smoothing out how the portfolio interacts with component state. In a React-based application, relying on external libraries like jQuery to manipulate the DOM directly can create "hidden state" bugs, where the virtual DOM and the actual browser DOM get out of sync.

To bridge this, I moved toward a more functional approach for UI updates. Instead of direct jQuery selectors, I encapsulated state logic into helper functions:

// Refactored logic to keep React state as the single source of truth
const updateProjectView = (projectId, isVisible) => {
  const element = document.getElementById(`project-${projectId}`);
  if (element) {
    element.style.display = isVisible ? 'block' : 'none';
  }
};

This pattern ensures that while the interaction layer remains responsive, the business logic remains predictable and easier to debug than global imperative scripts.

Optimizing Three.js Interactions

Since the portfolio uses Three.js for 3D elements, performance is a critical factor. I revisited the render loop to ensure that scene clean-up occurs correctly during route changes. Improper disposal of 3D objects is a common source of memory leaks in SPA (Single Page Application) portfolios.

// Ensure resources are released when a component unmounts
useEffect(() => {
  return () => {
    if (renderer) {
      renderer.dispose();
    }
    scene.clear();
  };
}, []);

The Lesson

Continuous improvement doesn't always mean shipping a new feature. Sometimes, the most impactful work happens by tidying up the existing architecture, decoupling legacy code, and ensuring that component lifecycles are handled correctly.

Actionable Takeaway

Audit your project for 'DOM escapes' where non-React code touches your rendered elements. Replace direct DOM manipulations with state-driven updates to prevent synchronization issues in your user interface.

Generated with Gitvlg.com