DEV Community

박준희
박준희

Posted on • Edited on • Originally published at aicoreutility.com

Developer Portfolio Reimagined as an RPG Map: Overhauling the '/journey' Page and Anonymizing Proper Nouns

#journey #rpg #ui #frontend

Developer Portfolio Reimagined as an RPG Map: Revamping the '/journey' Page and Anonymizing Proper Nouns

To streamline our service structure and enhance the user experience, I've developed a new portfolio hub page that chronicles my development journey. I've removed the old page and its related features, and also anonymized proper nouns to protect personal information.

Attempts and Pitfalls

My first priority was to visually structure the '/journey' page like an RPG map. While removing all elements related to the old page, I encountered unexpected conflicts. Specifically, the level badge kept overlapping with the hero image.

<!-- Snippet of the old journey page layout (example) -->
<div class="journey-container">
  <div class="level-badge">Lv. 10</div>
  <div class="hero-section">
    <img src="/images/hero.png" alt="Hero Image">
  </div>
  <!-- ... other content ... -->
</div>
Enter fullscreen mode Exit fullscreen mode 
/* Snippet of the old CSS (example) */
.level-badge {
  position: absolute;
  top: 20px;
  left: 20px;
  z-index: 10; /* Should be above the hero */
}

.hero-section {
  position: relative;
  z-index: 5; /* Below the level badge */
}
Enter fullscreen mode Exit fullscreen mode

Despite setting the z-index as shown above, the new layout structure and CSS conflicts caused the level badge to disappear behind the hero image. I spent three hours digging through the CSS but couldn't pinpoint the exact cause.

The Cause

Ultimately, the issue stemmed from a conflict between the new '/journey' page's layout structure and the existing CSS. Particularly, the new page utilized layouts based on flexbox or grid instead of position: absolute, which caused the z-index property to behave unexpectedly. Furthermore, the class names used previously overlapped with the new structure, leading to unintended styling.

The Solution

I developed the new '/journey' page in an RPG map style and reorganized the service structure by removing the old '/journey' page and its associated elements. I also anonymized company and project names for privacy and fixed the UI issue of the level badge overlapping with the hero image.

<!-- Snippet of the modified journey page layout (example) -->
<div class="journey-map-container">
  <div class="map-overlay"></div>
  <div class="hero-wrapper">
    <img src="/images/hero.png" alt="Hero Image" class="hero-image">
    <div class="level-badge-new">Lv. 10</div>
  </div>
  <!-- ... other content ... -->
</div>
Enter fullscreen mode Exit fullscreen mode 
/* Snippet of the modified CSS (example) */
.hero-wrapper {
  position: relative; /* Container wrapping the hero image */
  z-index: 5;
}

.level-badge-new {
  position: absolute;
  top: 15px;
  left: 15px;
  z-index: 10; /* To ensure it's clearly above the hero */
  background-color: rgba(0, 0, 0, 0.7); /* Improved readability */
  color: white;
  padding: 5px 10px;
  border-radius: 5px;
}
Enter fullscreen mode Exit fullscreen mode

To resolve the z-index conflict, I created a separate div (.hero-wrapper) to wrap the hero image and positioned the level badge inside this div using position: absolute. This ensures that z-index works correctly within the parent element's layout context. Additionally, company and project names were anonymized and replaced with notations like [Anonymous Company] or [Project A].

Results

  • Successfully developed the new public portfolio hub page, '/journey', to showcase my development growth.
  • Streamlined the service structure by removing the old page and related features.
  • Improved user experience through anonymization of proper nouns and fixing the UI overlap between the level badge and hero.

Takeaways — How to Avoid the Same Traps

  • [ ] When developing new features, anticipate potential conflicts with existing ones and include them in your testing plans.
  • [ ] Adhere to naming conventions for CSS class names or consider using unique prefixes to avoid overlaps with other parts of the codebase.
  • [ ] When encountering z-index issues, first examine the layout context of the parent elements involved.
  • [ ] Plan and implement anonymization for privacy from the early stages of development.

💬 This is part of *Riel** — a full AI product I'm building solo, in public (failures and all). Read more build logs → · See the product →*

Top comments (0)