bio section (#286)

* Add bio section in profile cards

* no text if no bio

---------

Co-authored-by: Priyansh Prajapat <[email protected]>

Author: mayurrogheliya

data.json

@@ -1139,6 +1139,7 @@
     "github": "https://github.com/mayurrogheliya",
     "twitter": "https://x.com/MayurRogheliya",
     "linkedin": "https://www.linkedin.com/in/mayur-rogheliya/",
-    "skills": ["MERN", "NextJS", "MySQL"]
+    "skills": ["MERN", "NextJS", "MySQL"],
+    "bio":"Aspiring MERN developer who loves building impactful web applications."
   }
 ]

scripts/app.js

@@ -39,6 +39,17 @@ const displayProfiles = async (profiles) => {
     // Skills
     const skills = profile.skills.map(skill => `<span class="skill">${skill}</span>`).join('');
 
+    // Bio
+    let bio = "";
+
+    if (profile.bio && profile.bio.trim() !== "") {
+      const maxLength = 60;
+      const bioText = profile.bio.length > maxLength
+        ? profile.bio.substring(0, maxLength) + "..."
+        : profile.bio;
+      bio = `<div class="bio"><p>${bioText}</p></div>`;
+    }
+
     // Social links with improved accessibility
     const social = `
       ${profile.github ? `<a href="${profile.github}" target="_blank" aria-label="${profile.name}'s GitHub Profile"><i class="fa-brands fa-github"></i></a>` : ''}
@@ -53,6 +64,7 @@ const displayProfiles = async (profiles) => {
       </div>
       <h2 class="name">${profile.name}</h2>
       <div class="skills">${skills}</div>
+      ${bio}
       <div class="social">${social}</div>
     `;
 

styles/style.css

@@ -71,7 +71,7 @@ h1 {
   display: flex;
   flex-direction: column;
   justify-content: space-between;
-  min-height: 350px;
+  gap: 15px;
 }
 .profile:hover {
   background-color: #333333;
@@ -89,27 +89,30 @@ h1 {
 .name {
   font-weight: 400;
   font-size: 20px;
-  margin-bottom: 10px;
 }
 
 .skills {
-  margin-bottom: 10px;
   display: flex;
   flex-wrap: wrap;
   justify-content: center;
-  row-gap: 7px;
+  gap: 7px;
 }
 
 .skill {
   background-color: #444444;
   padding: 5px 10px;
   border-radius: 5px;
-  margin: 0 5px 10px 0;
   font-size: 14px;
 }
 
+.profile .bio {
+  color: #999;
+  text-align: center;
+  line-height: 1.4em;
+  padding: 0 10px;
+}
+
 .social {
-  margin-top: 13px;
   display: flex;
   justify-content: center;
   background-color: #444444;
@@ -328,4 +331,4 @@ footer {
   .fbtn {
     margin-top: 0;
   }
-}
+}