Refactor Browser/Skills section

[lynkos]

Details

Data Structure

Skill:
  Name (String)
  Value (Float, Range is from 0 to 10, Increments of 0.5)
  Icon (Can be inline svg, FontAwesome, or SimpleIcons)
  Color (String)
  Description (String, HTML)

Note

I should make Icon param more elegant instead of just taking in raw HTML, since it can be of 3 types so far:

• SVG (E.g. <svg viewBox="0 0 32 21" xmlns="http://www.w3.org/2000/svg"><path d="m9.9 20.1c-5.5 0-9.9-4.4-9.9-9.9s4.4-9.9 9.9-9.9h11.6c5.5 0 9.9 4.4 9.9 9.9s-4.4 9.9-9.9 9.9zm11.3-3.5c3.6 0 6.4-2.9 6.4-6.4 0-3.6-2.9-6.4-6.4-6.4h-11c-3.6 0-6.4 2.9-6.4 6.4s2.9 6.4 6.4 6.4z" /></svg>)
• FontAwesome (E.g. <i aria-hidden="true" alt="MLX logo" class="fab fa-apple"></i>)
• SimpleIcon (E.g. <img aria-hidden="true" loading="lazy" fetchpriority="low" alt="OpenSSL logo" src="https://cdn.simpleicons.org/openssl">)

Example

Input

Skill("OpenSSL",
      3.5,
      '<img aria-hidden="true" loading="lazy" fetchpriority="low" alt="OpenSSL logo" src="https://cdn.simpleicons.org/openssl">',
      "#721412",
      "Used for some of my <em>personal projects</em>."
      );

Output

<div class="skill-entry">
  <div role="button" aria-pressed="false" tabindex="0" aria-expanded="false" id="openssl" class="row" onclick="toggleContent('#openssl')">
    <div class="beginning">
      <img aria-hidden="true" loading="lazy" fetchpriority="low" alt="OpenSSL logo" src="https://cdn.simpleicons.org/openssl">
      <h3 class="heading">OpenSSL</h3>
    </div>
    <div class="stars">
      <i aria-hidden="true" alt="Filled star icon" class="fas fa-star"></i>
      <i aria-hidden="true" alt="Filled star icon" class="fas fa-star"></i>
      <i aria-hidden="true" alt="Filled star icon" class="fas fa-star"></i>
      <i aria-hidden="true" alt="Half-filled star icon" class="fas fa-star-half-stroke"></i>
      <i aria-hidden="true" alt="Empty star icon" class="far fa-star"></i>
      <i aria-hidden="true" alt="Empty star icon" class="far fa-star"></i>
      <i aria-hidden="true" alt="Empty star icon" class="far fa-star"></i>
      <i aria-hidden="true" alt="Empty star icon" class="far fa-star"></i>
      <i aria-hidden="true" alt="Empty star icon" class="far fa-star"></i>
      <i aria-hidden="true" alt="Empty star icon" class="far fa-star"></i>
    </div>
    <div id="openssl-trigger" class="arrow">
      <i aria-hidden="true" alt="Arrow icon" class="fas fa-chevron-right rotate0"></i>
    </div>
  </div>
  <div id="openssl-content" class="hidden-content item-content">
    <p>Used for some of my personal projects.</p>
  </div>
</div>

#openssl
  color: #721412