#328 Done, A Complete Revamp Of The UI (#335)

## Related Issue CLOSES #328 ## Description As Mentioned in the Issue, This is a complete revamp of the Landing Page UI, I have developed it to a more modern look. Here's Everything I have done: 1. Made the site fully responsive on all devices and viewports 2. Added a New NavBar: - Removed The Previous One and Made This One - Fixed the Logo - Added Buttons Instead Of Direct Links - Responsive - Supports Login and Display Of Prompt after Login 3. Changed the background to give it a more professional look 4. Removed code related to background animations. 5. Added Bulma Framework CSS to uniformly style elements 6. Moved Much JavaScript and CSS from `index.html` to newly created `index.js` and `index.js` 7. Removed Loader. (And the JS Code associated with it) 8. Improved the Headings and The SearchBox, they now use Bulma Framework stylings 9. Implemented the already present Fonts, that were previously not being used. 10. Implemented an actual Table instead of the divs 11. Made the table dynamic, now a function `fillTable()` creates the table taking the data from a JS Array. 12. Implemented a New Footer. 13. Implemented Login in the New NavBar. ## Type of PR - [ X] Feature enhancement ## Screenshots / Videos (if applicable) Now It Looks Like This: ![image](https://github.com/user-attachments/assets/a40c7ab0-40c4-4576-83cd-bd8807ae4d1b) ![image](https://github.com/user-attachments/assets/45523d96-dcb0-40d0-99a5-855311f813d2) ![image](https://github.com/user-attachments/assets/b61bcf2e-ecec-4a5e-8770-cea49b269d8b) ## Checklist - [X] I have performed a self-review of my code. - [X ] I have read and followed the Contribution Guidelines. - [X] I have tested the changes thoroughly before submitting this pull request. - [X] I have provided relevant issue numbers, screenshots, and videos after making the changes. - [X] I have commented my code, particularly in hard-to-understand areas. - [X] I have followed the code style guidelines of this project. - [X] I have checked for any existing open issues that my pull request may address. - [X] I have ensured that my changes do not break any existing functionality. - [X] Each contributor is allowed to create a maximum of 4 issues per day. This helps us manage and address issues efficiently. - [X] I have read the resources for guidance listed below. - [X] I have followed security best practices in my code changes. ## Additional Context phew, this took some time but I'm glad I could revamp your page, it's a good project, happy to contribute ;).
dhairyagothi · Jan 3, 2025 · 83e2f53 · 83e2f53
2 parents 33beda6 + 7c93652
commit 83e2f53
Show file tree

Hide file tree

Showing 6 changed files with 219 additions and 1,323 deletions.
diff --git a/bulma.js b/bulma.js
@@ -0,0 +1,20 @@
+document.addEventListener('DOMContentLoaded', () => {
+
+    // Get all "navbar-burger" elements
+    const $navbarBurgers = Array.prototype.slice.call(document.querySelectorAll('.navbar-burger'), 0);
+
+    // Add a click event on each of them
+    $navbarBurgers.forEach( el => {
+      el.addEventListener('click', () => {
+        // Get the target from the "data-target" attribute
+        const target = el.dataset.target;
+        const $target = document.getElementById("navbar-menu");
+
+        // Toggle the "is-active" class on both the "navbar-burger" and the "navbar-menu"
+        el.classList.toggle('is-active');
+        $target.classList.toggle('is-active');
+
+      });
+    });
+
+  });
diff --git a/home.css b/home.css
@@ -1,19 +1,13 @@
 @import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Serif:wght@400;700&display=swap");
-@import url("https://fonts.googleapis.com/css2?family=Noto+Sans:wght@400;700&display=swap");
 
 * {
     padding: 0;
     margin: 0;
     box-sizing: border-box;
+    font-family: IBM Plex Sans;
 }
 
-body {
-    background: black;
-    color: grey;
-    padding-left: 25px;
-    padding-right: 25px;
-    margin: 0;
-}
+
 
 @media screen and (min-width: 600px) and (max-width: 899px) {
     body {
@@ -36,129 +30,12 @@ body {
     }
 }
 
-a {
-    color: white;
-    text-decoration: none;
-}
-
-.header {
-    text-align: center;
-    padding: 80px 0px 40px 0px;  
-    margin-bottom: 0px;
-    background: linear-gradient(90deg, #ff8a00, #da1b60);
-    -webkit-background-clip: text;
-    background-clip: text;
-    color: transparent;
-    font-family: "IBM Plex Serif", serif;
-    font-weight: 700;
-    font-size: xx-large;
-}
-
-.subheader {
-    text-align: center;
-    padding: 10px;
-    margin-bottom: 20px;
-    background: linear-gradient(90deg, #a7ed5d, #30ccf7);
-    -webkit-background-clip: text;
-    background-clip: text;
-    color: transparent;
-    font-family: "IBM Plex Serif", serif;
-    font-weight: 400;
-    font-size: x-large;
-}
-
-.navbar {
-    width: 100%;
-    background: #333;
-    padding: 15px 0;
-    position: fixed;
-    top: 0;
-    left: 0;
-    z-index: 1000;
-    box-shadow: 0 4px 8px rgba(255,255,255,0.5);
-}
-
-.navbar-container {
-    max-width: 1200px;
-    margin: 0 auto;
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    padding: 0 20px;
-    margin-left: 100px;   
-}
-
-
-.navbar-logo img {
-  height: 40px;
-  width: auto;
-  transition: transform 0.3s;
-}
-
-.navbar-logo img:hover {
-  transform: scale(1.1);
-}
-
-.navbar-menu {
-    list-style: none;
-    display: flex;
-    margin-left: 767px;
-}
-
-.navbar-item {
-    margin-left: 20px;
-}
-
-.navbar-link {
-    color: #fff;
-    font-family: "Noto Sans", sans-serif;
-    font-weight: 400;
-    font-size: 16px;
-    text-decoration: none;
-    position: relative;
-    transition: color 0.3s;
-}
 
-.navbar-link::after {
-    content: '';
-    display: block;
-    width: 0;
-    height: 2px;
-    background: #ff8a00;
-    transition: width 0.3s;
-    position: absolute;
-    bottom: -5px;
-    left: 0;
-}
 
-.navbar-link:hover {
-    color: #ff8a00;
-}
 
-.navbar-link:hover::after {
-    width: 100%;
-}
 
-.navbar-link::before {
-    content: '';
-    display: block;
-    width: 0;
-    height: 2px;
-    background: #da1b60;
-    transition: width 0.3s;
-    position: absolute;
-    top: -5px;
-    left: 0;
-}
 
-.navbar-link:hover::before {
-    width: 100%;
-}
 
-#brand {
-  font-size: 24px;
-  font-weight: bold;
-}
 
 #search-bar {
   display: flex;
@@ -170,80 +47,14 @@ a {
 #searchInput {
   padding: 10px;
   font-size: 16px;
-  border: 2px solid #ccc;
+
   border-radius: 5px;
   width: 300px;
   box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
   transition: border-color 0.3s;
 }
 
-#searchInput:focus {
-  border-color: #666;
-  outline: none;
-}
-
-#searchButton {
-  padding: 10px 15px;
-  margin-left: 10px;
-  font-size: 16px;
-  background-color: #4A90E2;
-  color: white;
-  border: none;
-  border-radius: 5px;
-  cursor: pointer;
-  transition: background-color 0.3s;
-}
-
-#searchButton:hover {
-  background-color: #007BFF;
-}
 
-#github-logo img {
-  width: 30px;
-  height: 30px;
-  margin-left: 60px;
-  background-color: white;
-  border-radius: 50%;
-}
-
-#github-logo img:hover{
-  transform: scale(1.1);
-}
-
-#twitter-icon{
-  transform: scale(1.5);
-}
-.table {
-  display: flex;
-  flex-direction: row;
-  justify-content: space-between;
-  align-items: center;
-  background: #1e1e1e;
-  padding: 10px;
-  border-radius: 8px;
-  margin-bottom: 10px;
-  font-family: "Noto Sans", sans-serif;
-  font-optical-sizing: auto;
-  font-weight: 400;
-  font-style: normal;
-  color: white;
-}
-
-.day-number,
-.project-name,
-.demo-link {
-  flex: 1;
-  text-align: center;
-}
-
-.demo-link {
-  color: #00d4ff;
-  text-decoration: none;
-}
-
-.demo-link:hover {
-  text-decoration: underline;
-}
 
 #no-projects {
   text-align: center;
@@ -256,15 +67,6 @@ a {
   color: white;
 }
 
-#loader {
-  position: fixed;
-  top: 0;
-  left: 0;
-  height: 100vh;
-  width: 100%;
-  background: black url('./images/imageloader.gif') no-repeat center center;
-  z-index: 100000;
-}
 
 body::-webkit-scrollbar {
   width: 1em;
@@ -288,71 +90,6 @@ body::-webkit-scrollbar-thumb {
   );
 }
 
-footer {
-  position: absolute;
-  left: 50%;
-  width: 100vw;
-  background: #1e1e1e;
-  padding: 20px 0;
-  margin-top: 50px;
-  transform: translateX(-50%);
-  border-radius: 5px 5px 0 0;
-  color: #fff;
-  font-family: "Noto Sans", sans-serif;
-}
-
-.footer-container{
-  position: relative;
-  width: 100%;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  max-width: 100%;
-  margin: 0 auto;
-  padding: 0 20px;
-}
-
-.footer-left {
-  width: 1200%;
-  font-size: 14px;
-  color: #fff;
-  letter-spacing: 1px;
-  font-weight: 400;
-}
-
-.footer-left p {
-  text-align: center;
-}
-
-.footer-right {
-  display: flex;
-  align-items: center;
-  justify-content: flex-end;
-}
-
-.footer-right a {
-  color: #fff;
-  text-decoration: none;
-  margin: 0 10px;
-  letter-spacing: 1px;
-  transition: color 0.3s ease;
-}
-
-.footer-right a:hover {
-  color: #ddd;
-}
-
-.footer-container .icons {
-  width: 30px;
-  height: 30px;
-  filter: invert();
-  transition: opacity 0.3s ease;
-}
-
-.footer-container .icons:hover {
-  opacity: 0.7;
-}
-
 
 @media screen and (max-width: 600px) {
   ::-webkit-scrollbar {
@@ -376,9 +113,5 @@ footer {
       rgba(0, 212, 255, 1) 100%
     );
   }
-  footer{
-    width: 100%;
-      padding:20px
-
-  }
+
 }