universalUsername

card.html

@@ -93,10 +93,12 @@
     }
     #card #name {
         margin:10px;
+        margin-bottom:0;
         font-size: 14pt;
         font-weight: bold;
     }
     #card #headline {
+        margin-top:10px;
         margin-bottom:4px;
         font-size: 12pt;
         font-weight: normal;
@@ -198,6 +200,7 @@
             <img id="picture" src="cardAssets/profile.jpg"/>
         </div>
         <h1 id="name">Daniel ████</h1>
+        <p id="universalUsername"></p>
         <h2 id="headline">Let's connect</h2>
 <pre id="bio"></pre>
         <div id="interests">
@@ -228,6 +231,7 @@ <h1>Phone</h1>
 
     <script>
         const fullName = document.getElementById("name");
+        const universalUsername = document.getElementById("universalUsername");
         const headline = document.getElementById("headline");
         const bio = document.getElementById("bio");
 
@@ -245,13 +249,14 @@ <h1>Phone</h1>
         // Function to fetch contact data from contacts.json and render it on the webpage
         async function fetchAndRenderContacts() {
             try {
-                const response = await fetch('cardAssets/contacts.json');  // Fetch the JSON file
+                const response = await fetch('cardAssets/contacts.json');   // Fetch the JSON file
                 const contactData = await response.json();                  // Parse the JSON data  
                 const contactList = document.querySelector('body');         // Get the HTML element to display contact info
 
                 for (const details of contactData.details) {
                     fullName.innerHTML = details.name;
                     document.title = details.name;
+                    universalUsername.innerHTML = details.universalUsername;
                     headline.innerHTML = details.headline;
                     bio.innerHTML = details.bio;
                 }

cardAssets/contacts.json

@@ -1,6 +1,7 @@
 {   
     "details": [{
       "name": "Firstname Lastname",
+      "universalUsername": "@Username",
       "headline": "Headline",
       "bio": "Your bio.",
       "interests": ""