DEV Community

박준희
박준희

Posted on • Originally published at aicoreutility.com

Improving Frontend Portfolio UI/UX and Enhancing User Experience Through Architectural Refactoring

#uiux

Improving Frontend Portfolio UI/UX, Enhancing User Experience Through Architectural Refactoring

There are times when you feel the UI/UX or architecture of your portfolio page is a bit lacking. I felt that way too, so I completely redesigned my portfolio page and improved its architecture, significantly boosting the user experience.

Attempts and Pitfalls

I undertook a complete UI/UX redesign and a major refactoring effort. I revised it to accurately reflect the original content and emphasize the Riel flagship. I also enhanced it by adding details like the "Code Click 2-Stage Career" and the "Card Company AICC LangGraph Case." Concurrently, I migrated and updated it to github.io.

Honestly, at first, I attempted some bold refactoring, like removing the architecture button, but that turned out to create more complex issues than I expected.

// Example: Old architecture button related code (hypothetical)
function renderArchitectureButton() {
  const button = document.createElement('button');
  button.textContent = 'View Architecture';
  button.onclick = () => showArchitectureDetails();
  document.getElementById('header').appendChild(button);
}

// Unexpected problems after removal
// renderArchitectureButton(); // This code disappeared, leading to...
Enter fullscreen mode Exit fullscreen mode

Parts that depended on the existing structure like this caused unexpected errors.

The Cause

Ultimately, the problem was the dependency issue that arose from removing the old architecture button. I thought I was just removing a UI element, but that button was tightly coupled with other functionalities and data loading logic.

The Solution

I meticulously re-executed the complete redesign of the portfolio page's UI/UX and architectural improvements. I revised it to accurately reflect the original content and emphasize the Riel flagship. I also enriched the content by adding the "Code Click 2-Stage Career" and the "Card Company AICC LangGraph Case." The migration and update to github.io were also successfully completed.

// Improved code example (hypothetical)
// Architecture-related functions are separated into distinct modules,
// or dynamically loaded when needed to minimize dependencies.

function initializePortfolioPage() {
  loadContent('portfolio-data.json');
  renderUIElements();
  updateLatestProjects([
    { name: 'Riel Flagship', type: 'Frontend' },
    { name: 'Card AICC LangGraph', type: 'Backend' }
  ]);
  // ... other initialization logic
}

function renderUIElements() {
  // UI element rendering logic
  // No longer directly dependent on the architecture button
}

initializePortfolioPage();
Enter fullscreen mode Exit fullscreen mode

With these modifications, the dependencies on the previous structure were eliminated, and the UI/UX improvement work could proceed stably.

Results

  • Completed UI/UX and architectural improvements for the portfolio page
  • Completed content enrichment and update tasks
  • Enhanced user experience and improved page loading speed

Takeaways — How to Avoid the Same Pitfalls

  • [ ] When improving UI/UX, always identify and document dependencies with existing architecture or functionality.
  • [ ] Before undertaking major refactoring, clearly define the affected areas and create a testing plan.
  • [ ] When changing code, meticulously check how related logic might be impacted.

Top comments (0)