You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
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:
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
<divclass="skill-entry"><divrole="button" aria-pressed="false" tabindex="0" aria-expanded="false" id="openssl" class="row" onclick="toggleContent('#openssl')"><divclass="beginning"><imgaria-hidden="true" loading="lazy" fetchpriority="low" alt="OpenSSL logo" src="https://cdn.simpleicons.org/openssl"><h3class="heading">OpenSSL</h3></div><divclass="stars"><iaria-hidden="true" alt="Filled star icon" class="fas fa-star"></i><iaria-hidden="true" alt="Filled star icon" class="fas fa-star"></i><iaria-hidden="true" alt="Filled star icon" class="fas fa-star"></i><iaria-hidden="true" alt="Half-filled star icon" class="fas fa-star-half-stroke"></i><iaria-hidden="true" alt="Empty star icon" class="far fa-star"></i><iaria-hidden="true" alt="Empty star icon" class="far fa-star"></i><iaria-hidden="true" alt="Empty star icon" class="far fa-star"></i><iaria-hidden="true" alt="Empty star icon" class="far fa-star"></i><iaria-hidden="true" alt="Empty star icon" class="far fa-star"></i><iaria-hidden="true" alt="Empty star icon" class="far fa-star"></i></div><divid="openssl-trigger" class="arrow"><iaria-hidden="true" alt="Arrow icon" class="fas fa-chevron-right rotate0"></i></div></div><divid="openssl-content" class="hidden-content item-content"><p>Used for some of my personal projects.</p></div></div>
Details
Data Structure
Note
I should make
Iconparam more elegant instead of just taking in raw HTML, since it can be of 3 types so far:<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>)<i aria-hidden="true" alt="MLX logo" class="fab fa-apple"></i>)<img aria-hidden="true" loading="lazy" fetchpriority="low" alt="OpenSSL logo" src="https://cdn.simpleicons.org/openssl">)Example
Input
Output