Safe html: convert html tags into markdown format inside yaml syntax

README.md

@@ -118,12 +118,12 @@ github: your-github-username
 website: https://yourwebsite.com
 email: your.email@example.com
 instagram: https://instagram.com/yourusername
-twitter: https://twitter.com/yourhandle
+x: https://x.com/yourhandle
 linkedin: https://linkedin.com/in/yourprofile
 country: Your Country
 location: Your City
 role: Your Professional Title
-languages: JavaScript Python Go Rust
+languages: js py go rust
 bio: |
   Write your professional bio here.
   You can use multiple lines.
@@ -206,7 +206,8 @@ git push origin my-feature-branch
 | `email`     | Your email address         | `you@example.com`                  |
 | `instagram` | Full Instagram profile URL | `https://instagram.com/username`   |
 | `linkedin`  | Full LinkedIn profile URL  | `https://linkedin.com/in/username` |
-| `twitter`   | Full Twitter/X profile URL | `https://twitter.com/username`     |
+| `x`   | Full X profile URL | `https://x.com/username`     |
+| `facebook`   | Full Facebook profile URL | `https://facebook.com/username`     |
 | `website`   | Your personal website URL  | `https://yoursite.com`             |
 
 ### Field Guidelines
@@ -240,12 +241,12 @@ name: Carlos Rodriguez
 github: carlosr
 website: https://carlos.dev
 email: carlos@example.com
-twitter: https://twitter.com/carlos_codes
+x: https://x.com/carlos_codes
 linkedin: https://linkedin.com/in/carlosrodriguez
 country: Spain
 location: Barcelona
 role: Full Stack Engineer
-languages: TypeScript React Node.js AWS
+languages: ts react.js node.js aws
 bio: |
   Full-stack engineer specializing in modern web technologies.
 
@@ -700,7 +701,7 @@ If checks fail, you'll see error messages in the PR. Fix the issues and push aga
 - Check for proper indentation (use spaces, not tabs)
 - Ensure colons have a space after them (`name: John`, not `name:John`)
 - Use `|` for multi-line bio text
-- Validate your YAML at [yamllint.com](http://www.yamllint.com/)
+- Validate your YAML at [yamllint.com](https://www.yamllint.com/)
 
 #### ❌ "GitHub username not found"
 
@@ -745,7 +746,7 @@ A: Yes! Just create a new PR with updates to your YAML file.
 A: Usually within 24-48 hours, depending on maintainer availability.
 
 **Q: Can I add multiple social links?**
-A: Yes, all social fields (twitter, linkedin, instagram) are optional and independent.
+A: Yes, all social fields (x, linkedin, instagram) are optional and independent.
 
 **Q: What if I don't have a personal website?**
 A: No problem! Just omit the `website` field or set it to your GitHub profile.

src/_includes/bio.njk

@@ -56,9 +56,9 @@
                 <span class="font-bold text-xs text-[#0077b5]">LinkedIn</span>
               </a>
               {% endif %}
-              {% if twitter %}
-              <a href="{{ twitter }}" target="_blank" class="flex items-center justify-center p-3 rounded-xl bg-[var(--bg-footer)] border border-[var(--border-color)] hover:border-accent transition-colors">
-                <span class="font-bold text-xs">Twitter</span>
+              {% if x %}
+              <a href="{{ x }}" target="_blank" class="flex items-center justify-center p-3 rounded-xl bg-[var(--bg-footer)] border border-[var(--border-color)] hover:border-accent transition-colors">
+                <span class="font-bold text-xs">X</span>
               </a>
               {% endif %}
               {% if instagram %}

src/_includes/system-log.njk

@@ -1,5 +1,5 @@
 <button id="reopen-console-btn" onclick="reopenConsole()" class="fixed bottom-6 right-6 p-3 bg-black/80 border border-green-500/30 rounded-full text-green-500 hover:scale-110 transition-all z-[999]" title="Open System Log">
-    <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="4 17 10 11 4 5"></polyline><line x1="12" y1="19" x2="20" y2="19"></line></svg>
+    <svg xmlns="https://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="4 17 10 11 4 5"></polyline><line x1="12" y1="19" x2="20" y2="19"></line></svg>
 </button>
 <div id="matrix-console-container" class="fixed bottom-6 right-6 w-80 z-[1000] transition-all duration-300 ease-in-out hidden" style="opacity: 0; transform: translateY(20px);">
     <div class="bg-black/90 backdrop-blur-xl border border-green-500/30 rounded-t-lg overflow-hidden shadow-2xl">

src/assets/js/script.js

@@ -948,8 +948,7 @@ function scrollToRandomUser() {
     playSound("levelUp");
     randomCard.classList.add("selected-fancy");
 
-    // Inject the Tracing SVG
-    const svgNamespace = "http://www.w3.org/2000/svg";
+    const svgNamespace = "https://www.w3.org/2000/svg";
     const svg = document.createElementNS(svgNamespace, "svg");
     const rect = document.createElementNS(svgNamespace, "rect");
 
@@ -961,7 +960,6 @@ function scrollToRandomUser() {
     svg.appendChild(rect);
     randomCard.appendChild(svg);
 
-    // Remove trace and fancy class after the 7.5s animation ends
     setTimeout(() => {
       randomCard.classList.remove("selected-fancy");
       svg.remove();
@@ -978,13 +976,11 @@ window.toggleScreenshotMode = () => {
   const footer = document.querySelector("footer");
   const gameStats = document.getElementById("game-stats");
 
-  // Hide everything
   [devPanel, header, footer, gameStats].forEach((el) => {
     if (el) el.style.opacity = "0";
     if (el) el.style.pointerEvents = "none";
   });
 
-  // Show a tiny notification that it's active
   const toast = document.createElement("div");
   toast.style.cssText =
     "position:fixed; bottom:20px; left:50%; transform:translateX(-50%); color:var(--text-muted); font-family:monospace; font-size:10px; z-index:9999;";
@@ -1007,26 +1003,17 @@ function renderXP(value) {
   const pb = document.getElementById("level-progress");
   if (!pb) return;
 
-  // 1. Ensure 'value' is a clean number
   const currentXPNum = Number(value) || 0;
 
-  // 2. Calculate percentage (current / 45 * 100)
   const percentage = Math.min((currentXPNum / 45) * 100, 100);
 
-  // 3. Apply to style
   pb.style.width = `${percentage}%`;
-
-  // Debugging: uncomment this to see the math in your console
-  // console.log(`XP: ${currentXPNum}, Percent: ${percentage}%`);
 }
 
 function showLevelUpToast(rank) {
-  // 1. Create the container
   const toast = document.createElement("div");
   toast.className = "level-up-toast";
 
-  // 2. Build the inner content
-  // We use the rank color for the name and emoji to make it feel custom
   toast.innerHTML = `
         <div class="toast-content">
             <span class="toast-emoji">${rank.emoji}</span>
@@ -1039,7 +1026,6 @@ function showLevelUpToast(rank) {
 
   document.body.appendChild(toast);
 
-  // 3. Auto-remove after animation
   setTimeout(() => {
     toast.classList.add("fade-out");
     setTimeout(() => toast.remove(), 500);
@@ -1049,7 +1035,6 @@ function showLevelUpToast(rank) {
 function matrixConsoleLog(level) {
   const rank = getRank(level);
 
-  // This looks awesome in the F12 Dev Console
   console.log(
     `%c [SYSTEM] %c LEVEL UP: %c ${rank.name.toUpperCase()} %c [LVL ${level}] `,
     "color: #10b981; font-weight: bold; background: #064e3b; padding: 2px;",
@@ -1058,20 +1043,17 @@ function matrixConsoleLog(level) {
     "color: #94a3b8; background: #1e293b; padding: 2px;",
   );
 
-  // 3. If you have an on-screen Matrix Console element, push there too:
   const matrixConsole = document.getElementById("matrix-console-output");
   if (matrixConsole) {
     const line = document.createElement("p");
     line.className = "matrix-line text-xs font-mono mb-1";
     line.innerHTML = `<span class="text-green-500">>></span> Rank Updated: <span style="color: ${rank.color}">${rank.name}</span>`;
     matrixConsole.appendChild(line);
-    // Auto-scroll to bottom
     matrixConsole.scrollTop = matrixConsole.scrollHeight;
   }
 }
 
 document.addEventListener("keydown", (e) => {
-  // Check if user pressed 'L' (for Log) and isn't typing in an input field
   if (
     e.key.toLowerCase() === "l" &&
     e.target.tagName !== "INPUT" &&
@@ -1087,53 +1069,38 @@ document.addEventListener("keydown", (e) => {
 });
 
 async function addExperience(amount) {
-  // 1. Force strict numeric types to prevent "1" + "1" = "11"
   const xpToAdd = Number(amount) || 0;
   currentXP = Number(currentXP) || 0;
   currentLevel = Number(currentLevel) || 0;
   const XP_THRESHOLD = 45;
 
-  // 2. Add the new XP
   currentXP += xpToAdd;
 
-  // 3. Process Level Ups one by one
-  // Using a while loop ensures that if you gain 100 XP,
-  // it processes Level 1, then Level 2, with the remainder left over.
   while (currentXP >= XP_THRESHOLD && currentLevel < NUM_LEVELS) {
     currentXP -= XP_THRESHOLD;
     currentLevel++;
-    // 1. Trigger the Visual Toast (Top of screen)
     if (typeof showLevelUpToast === "function") {
       showLevelUpToast(getRank(currentLevel));
     }
 
-    // 2. Trigger the "Matrix" Console Log
     matrixConsoleLog(currentLevel);
 
-    // --- THE POPUP TRIGGER ---
     const badge = document.getElementById("level-badge");
     if (badge) {
-      // Remove the class if it exists (to reset animation)
       badge.classList.remove("animate-badge-pop");
-      // Trigger a "reflow" (magic trick to allow re-animation)
       void badge.offsetWidth;
-      // Re-add the class
       badge.classList.add("animate-badge-pop");
     }
-    // --------------------------
 
     console.log(`Leveled Up to ${currentLevel}!`);
   }
-  // 4. Persistence: Save clean numbers
   localStorage.setItem("userLevel", currentLevel.toString());
   localStorage.setItem("userXP", currentXP.toString());
 
-  // 5. Update UI
   updateGameUI();
 }
 
 function updateInventoryCounts(lvl) {
-  // Initialize counts
   const counts = {
     common: 0,
     uncommon: 0,
@@ -1144,8 +1111,6 @@ function updateInventoryCounts(lvl) {
     absolute: 0,
   };
 
-  // Loop through LEVELS array up to current unlocked level
-  // We use i <= lvl because currentLevel is the index reached
   for (let i = 0; i <= lvl; i++) {
     const levelEntry = LEVELS[i];
     if (levelEntry?.rarity) {
@@ -1156,7 +1121,6 @@ function updateInventoryCounts(lvl) {
     }
   }
 
-  // Inject counts into the Tooltip DOM
   const elements = {
     "count-common": counts.common,
     "count-uncommon": counts.uncommon,
@@ -1174,17 +1138,13 @@ function updateInventoryCounts(lvl) {
 }
 
 function updateLevelUI(levelData) {
-  // ... your existing code to update level-name and level-number ...
-
   const tooltipDesc = document.getElementById("tooltip-desc");
   const tooltipRarity = document.getElementById("tooltip-rarity");
   const tooltipCard = document.getElementById("level-tooltip");
 
-  // Update Text
   tooltipDesc.innerText = levelData.description;
   tooltipRarity.innerText = levelData.rarity;
 
-  // Optional: Dynamic Color based on rarity
   const rarityColors = {
     common: "var(--rarity-common)",
     uncommon: "var(--rarity-uncommon)",
@@ -1205,25 +1165,20 @@ function updateGameUI() {
   const lvl = Number(currentLevel) || 0;
   const rank = getRank(lvl);
 
-  // 1. Update the Description Tooltip
   updateLevelUI(rank);
 
-  // 2. Calculate and Update the Inventory Tooltip
   updateInventoryCounts(lvl);
 
-  // Update the Name and its Color
   const nameLabel = document.getElementById("level-name");
   if (nameLabel) {
     nameLabel.innerText = rank.name;
     nameLabel.style.color = rank.color;
   }
 
-  // Update the Badge
   const badge = document.getElementById("level-badge");
   if (badge) {
     badge.innerText = rank.emoji;
     badge.style.backgroundColor = rank.color;
-    // Set contrast text color for the emoji/background
     badge.style.color = getContrastYIQ(rank.color);
   }
 

src/users/0xMRTT.yaml

@@ -1,13 +1,13 @@
 name: 0xMRTT
-github: 0xMRTT
+github: 0xmrtt
 website: https://rubiin.vercel.app/
 email: roobin.bhandari@gmail.com
 instagram:
-twitter:
+x:
 linkedin:
 facebook:
 country: Universe
 location: Earth
 role: Web Developer
-languages: js golang ts css sass sh docker
+languages: js go ts css sass sh docker
 bio: I love linux, cli, web dev

src/users/Barrerson.yaml

@@ -1,13 +1,13 @@
 name: Barrett Pierson
-github: Barrerson
+github: barrerson
 website: https://Barrerson.github.io
 email: BarrettPierson@gmail.com
 instagram: https://www.instagram.com/barrerson/
-twitter: https://twitter.com/Barrerson
+x: https://x.com/Barrerson
 linkedin: https://linkedin.com/in/Barrerson
 facebook:
 country: Iran
 location: 127.0.0.1
 role: Web Developer
-languages: js css3 html5
+languages: js css html
 bio: Becoming the best version of myself...

src/users/Favourene.yaml

@@ -1,13 +1,13 @@
 name: Igbinosa Iwinosa
-github: Favourene
+github: favourene
 website:
 email: Igbinosaiwinosa01@gmail.com
-instagram: Favoureneosas
-twitter: Favourene4
-linkedin: IgbinosaIwinosa
-facebook: Favourene Osas
+instagram: https://www.instagram.com/Favoureneosas
+x: https://x.com/Favourene4
+linkedin: https://www.linkedin.com/in/IgbinosaIwinosa
+facebook: https://www.facebook.com/Favourene-Osas
 country: Nigeria
 location: Lagos
 role: Frontend Developer, Ui/Ux designer
-languages: Html javascript Css React Scss
+languages: html js css react.js scss
 bio: I have experience in building Web Apps and Designing Awesome and Beautiful UIs

src/users/GabrielTheophilo.yaml

@@ -1,14 +1,14 @@
 name: Gabriel Theophilo
-github: GabrielTheophilo
+github: gabrieltheophilo
 website: https://github.com/GabrielTheophilo
 email: gabrieltsf10@gmail.com
 instagram:
-twitter: twitter.com/theoph1lo
+x: https://x.com/theoph1lo
 linkedin: https://www.linkedin.com/in/gabriel-theophilo-32053a110/
 facebook:
 country: Brazil
 location: Rio de Janeiro
 role: Web Developer
-languages: c c++ java python postgresql js css3 html5
+languages: c cpp java py postgresql js css html
 bio: |
   Web developer learning Java/Js and postgresql for the web, C++ in software development and automation with Python

src/users/HammedBabatunde.yaml

@@ -1,13 +1,13 @@
 name: Hammed Babatunde
-github: HammedBabatunde
+github: hammedbabatunde
 website:
 email: olawale6708@gmail.com
 instagram:
-twitter:
+x:
 linkedin:
 facebook:
 country: Nigeria
 location: Lagos
 role: Project Manager, Data Analyst
-languages: python javascript
+languages: py js
 bio: I have experience in building visualizations and cleaning data with excel, python and powerbi.

src/users/HunainAnis.yaml

@@ -1,15 +1,15 @@
 name: Muhammad Hunain
-github: HunainAnis
+github: hunainanis
 website: https://github.com/HunainAnis
 email: hunainmuhammad@rocketmail.com
 instagram:
-twitter:
+x:
 linkedin: https://linkedin.com/in/hunainanis
 facebook:
 country: Pakistan
 location: Karachi
 role: React Frontend Developer
-languages: HTML CSS JavaScript Python
+languages: html css js py
 bio: |
   A Frontend ReactJS developer, who is pationate about Mastering Javascript.
   I am a Freelancer making Dynamic webapps using ReactJS.