New JSON format rendering

404.html

@@ -9,16 +9,16 @@
     <meta name="author" content="Priyansh Prajapat">
     <meta property="og:title" content="DevProfiles - 404 Not-Found">
     <meta property="og:description" content="DevProfiles is a platform for developers to easily share their profiles, spotlight your skills, and connect with fellow developers in the community.">
-    <meta property="og:image" content="https://profile.is-a.dev/assets/devprofiles.jpg">
-    <meta property="og:url" content="https://profile.is-a.dev">
+    <meta property="og:image" content="https://devtweet.is-an.app/assets/devprofiles.jpg">
+    <meta property="og:url" content="https://devtweet.is-an.app">
     <meta name="twitter:card" content="summary_large_image">
     <meta name="twitter:title" content="DevProfiles - 404 Not-Found">
     <meta name="twitter:description" content="DevProfiles is a platform for developers to easily share their profiles, spotlight your skills, and connect with fellow developers in the community.">
-    <meta name="twitter:image" content="https://profile.is-a.dev/assets/devprofiles.jpg">
+    <meta name="twitter:image" content="https://devtweet.is-an.app/assets/devprofiles.jpg">
     <meta name="github" content="https://github.com/oyepriyansh/DevProfiles">
-    <link rel="canonical" href="https://profile.is-a.dev">
+    <link rel="canonical" href="https://devtweet.is-an.app">
     <link rel="shortcut icon" href="/assets/favicon.ico" type="image/x-icon">
-    <link rel="stylesheet" href="/css/404.css">
+    <link rel="stylesheet" href="/styles/404.css">
     <script async src="https://www.googletagmanager.com/gtag/js?id=G-GTFGBS8HG8"></script>
     <script type="text/javascript" src="https://oyepriyansh.pages.dev/cdnjs/analytics/devprofiles.js"></script>
   </head>
@@ -30,6 +30,6 @@
            <center><button onclick='location.href="/"'>Back to Home</button></center>
         </div>
     </div>
-    <script src="/js/404.js"></script>
+    <script src="/scripts/404.js"></script>
   </body>
 </html>

js/404.js → scripts/404.js

@@ -1,3 +1,4 @@
+
 'use strict';
 var e, t;
 new function(e) {

scripts/app.js

@@ -0,0 +1,148 @@
+const container = document.querySelector('.container');
+const defaultImage = "https://oyepriyansh.pages.dev/i/5nf5fd.png";
+
+const loadProfiles = async () => {
+  let data = await fetch('/data.json');
+  let profiles = await data.json();
+
+  profiles = shuffleArray(profiles);
+
+  profiles.forEach((profile) => {
+    let profileDiv = document.createElement('div');
+    profileDiv.classList.add('profile');
+
+    let skills = profile.skills.map(skill => `<span class="skill">${skill}</span>`).join('');
+
+    let social = '';
+
+    if (profile.github) {
+      social += `
+        <a href="${profile.github}" target="_blank"><i class="fa-brands fa-github"></i></a>
+      `;
+    }
+
+    if (profile.twitter) {
+      social += `
+        <a href="${profile.twitter}" target="_blank"><i class="fa-brands fa-x-twitter"></i></a>
+      `;
+    }
+
+    if (profile.linkedin) {
+      social += `
+        <a href="${profile.linkedin}" target="_blank"><i class="fa-brands fa-linkedin-in"></i></a>
+      `;
+    }
+
+    profileDiv.innerHTML = `
+      <div class="pfp">
+        <img src="${profile.image}" alt="User Image" onerror="this.onerror=null; this.src='${defaultImage}';">
+      </div>
+      <h3 class="name">${profile.name}</h3>
+      <div class="skills">${skills}</div>
+      <div class="social">${social}</div>
+    `;
+
+    container.append(profileDiv);
+  });
+};
+
+const shuffleArray = (array) => {
+  for (let i = array.length - 1; i > 0; i--) {
+    const j = Math.floor(Math.random() * (i + 1));
+    [array[i], array[j]] = [array[j], array[i]];
+  }
+  return array;
+};
+
+loadProfiles();
+
+
+// dark light mode 
+
+const colorSwitch = document.getElementById("input-toggle-button");
+colorSwitch.addEventListener("click", checkMode);
+
+const btn = document.querySelector('.add-col');
+
+function checkMode() {
+  console.log("checking...");
+  if (colorSwitch.checked) {
+    console.log("dark on");
+    darkModeOn();
+    btn.style.color = "black";
+    btn.addEventListener('mouseover', () => {
+      btn.style.color = "white";
+    })
+    btn.addEventListener('mouseout', () => {
+      btn.style.color = "black";
+    })
+  } else {
+    console.log("dark off");
+    darkModeOff();
+    btn.style.color = "white";
+    btn.addEventListener('mouseout', () => {
+      btn.style.color = "white";
+    })
+
+    btn.addEventListener('mouseover', () => {
+      btn.style.color = "white";
+    })
+  }
+}
+
+function darkModeOn() {
+  document.body.classList.add("dark-mode");
+}
+
+function darkModeOff() {
+  document.body.classList.remove("dark-mode");
+}
+
+
+//search 
+
+searchInput.addEventListener('keyup', () => {
+  const searchTerm = searchInput.value.trim().toLowerCase();
+
+  const profiles = document.querySelectorAll('.profile');
+
+  let visibleProfiles = 0;
+
+  profiles.forEach((profile) => {
+    const profileName = profile.querySelector('.name').innerText.trim().toLowerCase();
+
+    if (profileName.includes(searchTerm)) {
+      profile.style.display = 'flex'; 
+      visibleProfiles++;
+    } else {
+      profile.style.display = 'none'; 
+    }
+  });
+
+  const noProfileMessage = document.querySelector('.no-profile');
+  if (visibleProfiles > 0) {
+    noProfileMessage.style.display = 'none'; 
+  } else {
+    noProfileMessage.style.display = 'block'; 
+  }
+});
+
+// scroll top button 
+
+var fabButton = document.getElementById("backToTopBtn");
+
+window.onscroll = function () {
+    if (window.scrollY > 20) {
+        fabButton.style.display = "block";
+    } else {
+        fabButton.style.display = "none";
+    }
+};
+
+fabButton.addEventListener("click", function () {
+    window.scrollTo({ top: 0, behavior: "smooth" });
+});
+
+// copyright year 
+document.getElementById("currentYear").textContent = new Date().getFullYear();
+

css/style.css → styles/style.css

@@ -76,7 +76,7 @@ h1 {
   padding: 5px;
 }
 
-#no-profile {
+.no-profile {
   text-align: center;
   padding: 20px;
   font-family: "PT Serif", serif;
@@ -209,6 +209,10 @@ button {
   box-shadow: 0px 0px 5px var(--clr-search-focus);
 }
 
+.addprofilebutton {
+    display: inline-block;
+}
+
 .dark-mode {
   --clr-background: #ffffff;
   --clr-secondary: #f0f0f0;
@@ -371,4 +375,11 @@ footer {
 }
 .top-btn{
   background-color: var(--clr-secondary)
-}
+}
+
+.flinks a {
+    align-self: center;
+    color: #3498db;
+    text-decoration: none;
+    margin: 5px 0;
+  }