diff --git a/src/css/style.css b/src/css/style.css
index 5b5b01e..7f7bfa0 100644
--- a/src/css/style.css
+++ b/src/css/style.css
@@ -1052,4 +1052,81 @@ a:focus {
   font-style: normal;
   font-weight: 400;
   text-shadow: 2px 2px 4px orange;
+}
+
+.about-us-btn{
+  background-color: var(--accent-light);
+  color: #fff;
+  border: none;
+  padding: .5rem 1rem;
+  border-radius: 20px;
+  cursor: pointer;
+  font-size: .9rem;
+  transition: .3s;
+  margin-top: .5rem;
+  margin-right: 0;
+}
+.about-us-btn>a {
+  color: #fff;
+  text-decoration: none;
+}
+
+.about-us-btn:hover,
+.about-us-btn:focus {
+  background-color: #0056b3;
+  outline: 2px solid #ffffff;
+}
+
+.about-us {
+  padding: 20px;
+  text-align: center; 
+}
+
+.about-us {
+  background-color: transparent; /* Transparent background */
+  padding: 2rem;
+}
+
+.about-us {
+  background-color: transparent;
+  padding: 2rem;
+}
+
+.owners {
+  display: flex;
+  justify-content: space-between; /* Space between the owner cards */
+  flex-wrap: wrap; /* Wrap the items if the screen is too small */
+}
+
+.owner-card {
+  display: flex;
+  flex-direction: column; /* Stack image on top of the text */
+  align-items: center;
+  background-color: transparent; /* Transparent background */
+  border: 1px solid #ccc;
+  border-radius: 10px;
+  padding: 1rem;
+  width: 48%; /* Adjust the width to make the cards fit side by side */
+  margin-bottom: 1rem;
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Soft shadow for some depth */
+  text-align: center; /* Center the content inside */
+}
+
+.owner-card img.profile-picture {
+  width: 100px;
+  height: 100px;
+  border-radius: 50%;
+  object-fit: cover;
+  margin-bottom: 1rem;
+}
+
+.owner-card .owner-info {
+  padding: 0.5rem;
+}
+
+
+@media (min-width: 600px) {
+  .owners {
+    flex-direction: row; 
+  }
 }
\ No newline at end of file
diff --git a/src/css/style.min.css b/src/css/style.min.css
index 662c6cc..799622d 100644
--- a/src/css/style.min.css
+++ b/src/css/style.min.css
@@ -1,951 +1 @@
-@import url(https://fonts.googleapis.com/css2?family=Sedgwick+Ave&display=swap);
-
-#searchInput,
-body {
-    color: var(--text-light)
-}
-
-.dark-mode #searchInput,
-body.dark-mode {
-    color: var(--text-dark)
-}
-
-#searchButton,
-h1 {
-    color: var(--accent-light)
-}
-
-#loading-screen,
-.modal,
-.participant::before {
-    width: 100%;
-    height: 100%
-}
-
-.contact-btn>a,
-.contributors-link,
-.header-title,
-footer a {
-    text-decoration: none
-}
-
-a:focus,
-button:focus,
-button:hover {
-    outline: #ffffff solid 2px
-}
-
-#caption,
-.participant {
-    text-align: center;
-    font-style: normal
-}
-
-:root {
-    --bg-light: #fefdf8;
-    --text-light: #1c1c1c;
-    --accent-light: #50da4c;
-    --bg-dark: #183717;
-    --text-dark: #fefdf8;
-    --accent-dark: #ff8bff;
-    --bg-halloween: #1c1c1c;
-    --text-halloween: #f9a825;
-    --accent-halloween: #d32f2f
-}
-
-* {
-    box-sizing: border-box;
-    margin: 0;
-    padding: 0;
-    scrollbar-width: thin;
-    scrollbar-color: #555 #1c1c1c;
-    cursor: url('../img/icons8-ghost-16.webp'), pointer
-}
-
-body {
-    font-family: Poppins, sans-serif;
-    background-color: var(--bg-light);
-    line-height: 1.6;
-    transition: background-color .3s, color .3s, background-image .3s;
-    background-image: url('../img/bgm.webp');
-    background-repeat: no-repeat;
-    background-attachment: fixed;
-    background-size: cover;
-    overflow-x: hidden;
-    background-color: #121212;
-    color: #fff
-}
-
-body.dark-mode {
-    background-color: var(--bg-dark);
-    background-image: url('../img/dark.webp')
-}
-
-body.halloween-mode {
-    background-color: var(--bg-halloween);
-    color: var(--text-halloween);
-    background-image: url('../img/halloween-bg.webp')
-}
-
-.halloween-mode button {
-    background-color: var(--accent-halloween);
-    color: #fff
-}
-
-.halloween-mode header,
-header {
-    background-color: rgba(255, 165, 0, .8)
-}
-
-.container {
-    max-width: 1200px;
-    margin: 0 auto;
-    padding: 2rem;
-    width: 100%
-}
-
-header {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    padding: 1rem 2rem;
-    position: sticky;
-    top: 0;
-    z-index: 1000
-}
-
-.header-title {
-    text-align: center;
-    margin: 0
-}
-
-.header-controls {
-    margin-left: auto;
-    display: flex;
-    align-items: center;
-    gap: 1.5rem;
-    padding-right: 1rem
-}
-
-#toggleButton {
-    margin-right: 1rem
-}
-
-.search-container {
-    display: flex;
-    align-items: center;
-    border-radius: 30px;
-    padding: .4rem 1rem;
-    transition: .3s;
-    width: 100%;
-    max-width: 500px;
-    margin: 1rem 0;
-    box-shadow: 0 4px 10px rgba(0, 0, 0, .1);
-    background: rgba(255, 255, 255, .267);
-    backdrop-filter: blur(4.5px);
-    -webkit-backdrop-filter: blur(4.5px)
-}
-
-#searchButton,
-#searchInput {
-    background: 0 0;
-    border: none
-}
-
-.main-search-container {
-    display: flex;
-    gap: 5px;
-    width: 100%;
-    align-items: center;
-    justify-content: center
-}
-
-.total-contributors {
-    color: #000;
-    font-size: 1.2rem
-}
-
-.dark-mode .search-container {
-    background-color: rgba(255, 139, 255, .1);
-    box-shadow: 0 4px 10px rgba(255, 255, 255, .1)
-}
-
-#searchInput {
-    padding: .4rem;
-    font-size: 1rem;
-    width: 100%;
-    outline: 0;
-}
-
-#searchInput::placeholder {
-    color: #f500f5;
-    opacity: .7
-}
-
-.dark-mode #searchInput::placeholder {
-    color: #c401c4
-}
-
-#searchButton {
-    cursor: pointer;
-    font-size: 1.2rem;
-    transition: transform .3s, color .3s;
-    outline: none;
-}
-
-#searchButton:hover {
-    color: var(--text-light)
-}
-
-.dark-mode #searchButton,
-.dark-mode .header-title,
-.dark-mode footer a,
-.dark-mode h1 {
-    color: var(--accent-dark)
-}
-
-.dark-mode #searchButton:hover,
-.dark-mode .toggle-btn i {
-    color: #fff
-}
-
-h1 {
-    font-size: 2.5rem;
-    font-weight: 600;
-    text-align: center;
-    margin-bottom: 1rem
-}
-
-.carousel {
-    background-color: #1c1c1c;
-    padding: .5rem;
-    overflow: hidden;
-    white-space: nowrap
-}
-
-.carousel-slide {
-    display: inline-block;
-    color: #fff;
-    font-size: 1.2rem;
-    font-family: monospace;
-    animation: 20s linear infinite carousel
-}
-
-.carousel:hover .carousel-slide {
-    animation-play-state: paused
-}
-
-@keyframes carousel {
-    from {
-        transform: translateX(100vw)
-    }
-
-    to {
-        transform: translateX(-90vw)
-    }
-}
-
-.wall-section {
-    padding: 2rem;
-    background-color: #f4f4f9;
-    border-radius: 10px;
-    box-shadow: 0 5px 15px rgba(0, 0, 0, .1);
-    background: rgba(255, 255, 255, .45);
-    box-shadow: 0 8px 32px 0 rgba(31, 38, 135, .37);
-    backdrop-filter: blur(4px);
-    -webkit-backdrop-filter: blur(4px);
-    border: 1px solid rgba(255, 255, 255, .18)
-}
-
-.contributors-section h2,
-.wall-section h2 {
-    text-align: center;
-    font-size: 2rem;
-    margin-bottom: 1.5rem;
-    color: #6b6b6b
-}
-
-.search-container {
-    display: flex;
-    justify-content: center;
-    margin-bottom: 1.5rem
-}
-
-.participant,
-.search-container button {
-    color: #fff;
-    align-items: center;
-    cursor: pointer
-}
-
-.search-container input {
-    padding: .75rem;
-    width: 300px;
-    border: 2px solid #ddd;
-    border-radius: 8px;
-    font-size: 1rem;
-    transition: border-color .3s ease-in-out
-}
-
-.search-container input:focus {
-    border-color: #888;
-    outline: 0
-}
-
-.search-container button {
-    background-color: #ff5722;
-    border: none;
-    padding: .75rem 1rem;
-    border-radius: 8px;
-    margin-left: .5rem;
-    font-size: 1.2rem;
-    display: flex;
-    justify-content: center;
-    transition: background-color .3s ease-in-out
-}
-
-.participant,
-.toggle-btn,
-.toggle-btn i {
-    font-size: 1.5rem
-}
-
-.toggle-btn i,
-footer a {
-    color: var(--accent-light);
-    transition: color .3s
-}
-
-.search-container button:hover {
-    background-color: #e64a19
-}
-
-.search-container button i {
-    margin-right: .3rem
-}
-
-.wall {
-    display: grid;
-    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
-    gap: 1.5rem;
-    padding: 0 2rem
-}
-
-.participant {
-    background-image: url('../img/brick_wall.webp');
-    background-size: cover;
-    background-repeat: no-repeat;
-    padding: 1.5rem;
-    border-radius: 10px;
-    display: flex;
-    justify-content: center;
-    font-family: 'Sedgwick Ave', cursive;
-    font-weight: 400;
-    position: relative;
-    transition: transform .3s, box-shadow .3s, border-color .3s ease-in-out;
-    border: 2px solid transparent;
-    text-shadow: 2px 5px 2px #000
-}
-
-#loading-screen,
-.modal {
-    position: fixed;
-    display: flex
-}
-
-.participant::before {
-    content: '';
-    position: absolute;
-    top: 0;
-    left: 0;
-    border-radius: 10px;
-    background-color: rgba(255, 255, 255, .1);
-    opacity: 0;
-    transition: opacity .3s
-}
-
-.participant:hover::before {
-    opacity: 1
-}
-
-.participant:hover {
-    transform: translateY(-10px) scale(1.05);
-    border-color: rgba(255, 255, 255, .6);
-    box-shadow: 0 0 5px rgba(255, 255, 255, .5), 0 0 5px rgba(255, 255, 255, .4), 0 0 30px rgba(66, 205, 47, .6);
-    scale: 1.1
-}
-
-#backToTopBtn:hover,
-.cookies-btn:hover,
-.toggle-btn:hover {
-    transform: scale(1.1)
-}
-
-.wall-section .wall .participant {
-    opacity: 0;
-    animation: .5s ease-out forwards fadeIn
-}
-
-@keyframes fadeIn {
-    0% {
-        opacity: 0;
-        transform: translateY(10px)
-    }
-
-    100% {
-        opacity: 1;
-        transform: translateY(0)
-    }
-}
-
-footer {
-    text-align: center;
-    padding: 1rem 0;
-    font-size: 1.5rem
-}
-
-footer a:hover {
-    text-decoration: underline
-}
-
-.toggle-btn {
-    background: 0 0;
-    border: none;
-    cursor: pointer;
-    transition: transform .3s
-}
-
-.contact-btn,
-.surprise-btn {
-    background-color: var(--accent-light);
-    color: #fff;
-    border: none;
-    padding: .5rem 1rem;
-    border-radius: 20px;
-    cursor: pointer;
-    font-size: 1.1rem;
-    transition: .3s;
-    margin-top: .5rem;
-    margin-right: 0
-}
-
-.dark-mode .contact-btn,
-.dark-mode .surprise-btn,
-.modal-dark-mode {
-    background-color: var(--accent-dark)
-}
-
-.contact-btn>a {
-    color: #fff
-}
-
-.header-title {
-    color: inherit;
-    font-size: 2.5rem;
-    font-weight: 400;
-    font-family: DynaPuff;
-    color: var(--accent-light);
-    transition: color .3s
-}
-
-.header-title:hover {
-    cursor: pointer
-}
-
-#halloweenIcon {
-    color: #fff;
-    display: none;
-    transition: opacity 1s;
-    margin-left: 2px;
-    font-size: 2.5rem
-}
-
-#loading-screen {
-    backdrop-filter: blur(10px);
-    align-items: center;
-    justify-content: center;
-    flex-direction: column;
-    z-index: 9999;
-    background-color: #333;
-    color: #fff
-}
-
-#backToTopBtn,
-.feebback-Btn {
-    background-color: var(--accent-light);
-    cursor: pointer
-}
-
-#spinner {
-    width: 100px;
-    height: 100px;
-    border: 12px solid #c401c4;
-    border-top: 12px solid #ff8bff;
-    border-radius: 50%;
-    animation: 1s linear infinite spin
-}
-
-#loading-text {
-    font-weight: 700;
-    margin-top: 1rem
-}
-
-#backToTopBtn {
-    position: fixed;
-    bottom: 40px;
-    right: 40px;
-    color: var(--text-light);
-    border: none;
-    border-radius: 50px;
-    padding: 15px 25px;
-    font-size: 2rem;
-    display: none;
-    z-index: 1000;
-    transition: background-color .3s, color .3s, transform .3s;
-    box-shadow: 0 4px 12px rgba(0, 0, 0, .1)
-}
-
-#backToTopBtn:hover {
-    background-color: var(--bg-dark);
-    color: var(--text-dark)
-}
-
-body.dark-mode #backToTopBtn,
-body.dark-mode .feebback-Btn {
-    background-color: var(--accent-dark);
-    color: var(--text-dark)
-}
-
-body.dark-mode #backToTopBtn:hover {
-    background-color: var(--bg-light);
-    color: var(--text-light)
-}
-
-.feebback-Btn {
-    color: var(--text-light);
-    border: none;
-    padding: 10px 20px;
-    margin-top: 10px;
-    border-radius: 5px
-}
-
-.modal {
-    top: 0;
-    left: 0;
-    background-color: rgba(0, 0, 0, .5);
-    justify-content: center;
-    align-items: center;
-    z-index: 10
-}
-
-.modal-wrapper {
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    align-items: center;
-    gap: 20px;
-    max-width: 630px;
-    overflow: auto;
-    padding: 1rem 2rem;
-    border-radius: 10px;
-    position: relative;
-    background-color: var(--accent-light);
-    color: #fff
-}
-
-.close-modal-button {
-    position: absolute;
-    top: 10px;
-    right: 10px;
-    font-size: 20px;
-    color: #fff
-}
-
-.hidden {
-    display: none
-}
-
-@keyframes spin {
-    0% {
-        transform: rotate(0)
-    }
-
-    100% {
-        transform: rotate(720deg)
-    }
-}
-
-@media (max-width:1024px) {
-    .container {
-        padding: 1.5rem
-    }
-
-    h1 {
-        font-size: 2.2rem
-    }
-
-    .wall {
-        grid-template-columns: repeat(auto-fill, minmax(120px, 1fr))
-    }
-
-    .search-container {
-        max-width: 100%;
-        margin: 1rem auto
-    }
-
-    .participant {
-        font-size: 1rem
-    }
-
-    .carousel-slide {
-        font-size: .8rem
-    }
-}
-
-@media (max-width:768px) {
-    .container {
-        padding: 1rem
-    }
-
-    h1 {
-        font-size: 2rem
-    }
-
-    .header-controls {
-        flex-direction: column;
-        align-items: flex-end
-    }
-
-    .main-search-container {
-        flex-direction: column
-    }
-
-    .search-sort-container {
-        flex-direction: column-reverse
-    }
-
-    .wall {
-        grid-template-columns: repeat(auto-fill, minmax(100px, 1fr))
-    }
-
-    .modal-wrapper {
-        max-width: 300px
-    }
-
-    .participant,
-    footer {
-        font-size: .8rem
-    }
-}
-
-@media (max-width:480px) {
-    header {
-        flex-direction: column;
-        text-align: center
-    }
-
-    .header-controls {
-        width: 100%;
-        flex-direction: column;
-        align-items: center;
-        gap: .5rem
-    }
-
-    .search-container {
-        height: 40px
-    }
-
-    .wall {
-        grid-template-columns: repeat(auto-fill, minmax(80px, 1fr))
-    }
-}
-
-.search-sort-container {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    gap: 1.5rem;
-    padding: 10px;
-    border-radius: 8px
-}
-
-.sort-container {
-    margin: 15px 0
-}
-
-.cookies-btn,
-.cookies-text {
-    margin-right: 10px;
-    font-weight: 700
-}
-
-.sort-select {
-    padding: 10px;
-    font-size: 16px;
-    border: 1px solid #ccc;
-    outline: 0;
-    border-radius: 8px;
-    cursor: pointer;
-    transition: border-color .3s, box-shadow .3s
-}
-
-.sort-select:hover {
-    border-color: #888;
-    box-shadow: 0 0 5px rgba(0, 0, 0, .2)
-}
-
-.sort-select:focus {
-    border-color: #0056b3;
-    box-shadow: 0 0 5px rgba(0, 86, 179, .5)
-}
-
-.contributors-container {
-    display: flex;
-    flex-direction: row;
-    flex-wrap: wrap;
-    justify-content: center;
-    gap: 40px;
-    align-items: center
-}
-
-@media screen and (max-width:1024px) {
-    .contributors-container h4 {
-        font-size: 20px
-    }
-}
-
-.contributors-card {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    border: none;
-    width: 300px;
-    height: 150px
-}
-
-.contributors-avatar-container {
-    display: flex;
-    flex-direction: row-reverse;
-    justify-content: space-between;
-    align-items: center;
-    gap: 1rem
-}
-
-.contributors-avatar {
-    width: 50px;
-    height: 50px;
-    border-radius: 50%;
-    object-fit: cover
-}
-
-.contributors-contributions {
-    font-weight: 600;
-    font-size: 22px
-}
-
-.contributors-link {
-    color: #fff;
-    font-weight: 600;
-    font-size: 18px;
-    transition: color .3s
-}
-
-.contributors-section {
-    background: rgba(255, 255, 255, .45);
-    box-shadow: 0 8px 32px 0 rgba(31, 38, 135, .37);
-    backdrop-filter: blur(4px);
-    border-radius: 10px;
-    border: 1px solid rgba(255, 255, 255, .18);
-    padding: 32px;
-    margin-top: 4rem
-}
-
-.cookies-btn,
-button {
-    padding: 10px;
-    color: #fff;
-    cursor: pointer
-}
-
-button {
-    background-color: #007bff;
-    border: none;
-    border-radius: 5px
-}
-
-button:focus,
-button:hover {
-    background-color: #0056b3
-}
-
-#flyingGhost {
-    display: block;
-    width: 100px;
-    position: fixed;
-    top: 20%;
-    right: -150px;
-    transition: right 3s ease-in-out
-}
-
-@keyframes ghostFly {
-    0% {
-        right: -150px
-    }
-
-    50% {
-        right: 50%
-    }
-
-    100% {
-        right: 100%
-    }
-}
-
-#mascotContainer {
-    display: none;
-    position: fixed;
-    bottom: 50px;
-    left: -150px;
-    width: 150px;
-    height: auto;
-    z-index: 9999;
-    animation: 5s linear forwards mascotMove
-}
-
-@keyframes mascotMove {
-    0% {
-        left: -150px
-    }
-
-    50% {
-        left: 50%
-    }
-
-    100% {
-        left: 110%
-    }
-}
-
-#cookies-container {
-    position: fixed;
-    bottom: 0;
-    left: 0;
-    right: 0;
-    z-index: 9999
-}
-
-#cookies-sub-container {
-    background-color: #fff;
-    padding: 20px;
-    border-radius: 5px;
-    box-shadow: 0 0 5px rgba(0, 0, 0, .2);
-    color: #000
-}
-
-.cookies {
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    margin-bottom: 10px;
-    text-align: center;
-    gap: 2rem
-}
-
-@media screen and (max-width:480px) {
-    .cookies {
-        flex-direction: column
-    }
-}
-
-.cookies-text {
-    font-size: 14px;
-    line-height: 1.5;
-    text-align: left
-}
-
-.cookies-buttons {
-    display: flex;
-    justify-content: flex-end;
-    margin-top: 10px
-}
-
-.cookies-btn {
-    border: none;
-    border-radius: 5px;
-    transition: transform .3s ease-in-out
-}
-
-.accept-cookies {
-    background-color: #13c825
-}
-
-.accept-cookies:hover {
-    background-color: #0ca01c
-}
-
-.decline-cookies {
-    background-color: #df2424
-}
-
-.decline-cookies:hover {
-    background-color: #b81e1e
-}
-
-.pumpkin {
-    height: 18px;
-    width: 18px;
-    justify-content: center;
-    justify-items: center;
-    cursor: pointer;
-    transition: .3s
-}
-
-.pumpkin:hover {
-    transform: scale(1.05)
-}
-
-.popup {
-    display: none;
-    position: fixed;
-    z-index: 1;
-    left: 0;
-    top: 0;
-    width: 100%;
-    height: 100%;
-    background-color: rgba(0, 0, 0, .7);
-    justify-content: center;
-    align-items: center
-}
-
-.popup-content {
-    margin: auto;
-    display: block;
-    width: 100%;
-    max-width: 800px;
-    animation: 3s linear infinite spin
-}
-
-.close-btn {
-    position: absolute;
-    top: 60px;
-    right: 35px;
-    color: #fff;
-    font-size: 80px;
-    font-weight: 700;
-    cursor: pointer
-}
-
-.close-btn:focus,
-.close-btn:hover {
-    color: #bbb
-}
-
-#caption {
-    color: #ccc;
-    font-size: 50px;
-    padding: 10px 0;
-    font-family: Creepster, system-ui;
-    font-weight: 400;
-    text-shadow: 2px 2px 4px orange
-}
\ No newline at end of file
+@import url(https://fonts.googleapis.com/css2?family=Sedgwick+Ave&display=swap);#searchInput,body{color:var(--text-light)}.dark-mode #searchInput,body.dark-mode{color:var(--text-dark)}#searchButton,h1{color:var(--accent-light)}#loading-screen,.modal,.participant::before{width:100%;height:100%}.cookies,.header-title,.participant,footer,h1{text-align:center}.about-us-btn>a,.contact-btn>a,.contributors-link,.header-title,footer a{text-decoration:none}:root{--bg-light:#fefdf8;--text-light:#1c1c1c;--accent-light:#50da4c;--bg-dark:#183717;--text-dark:#fefdf8;--accent-dark:#ff8bff;--bg-halloween:#1c1c1c;--text-halloween:#f9a825;--accent-halloween:#d32f2f}*{box-sizing:border-box;margin:0;padding:0;scrollbar-width:thin;scrollbar-color:#555 #1c1c1c;cursor:url('../img/icons8-ghost-16.webp'),pointer}body{font-family:Poppins,sans-serif;background-color:var(--bg-light);line-height:1.6;transition:background-color .3s,color .3s,background-image .3s;background-image:url('../img/bgm.webp');background-repeat:no-repeat;background-attachment:fixed;background-size:cover;overflow-x:hidden;background-color:#121212;color:#fff}body.dark-mode{background-color:var(--bg-dark);background-image:url('../img/dark.webp')}body.halloween-mode{background-color:var(--bg-halloween);color:var(--text-halloween);background-image:url('../img/halloween-bg.webp')}.halloween-mode button{background-color:var(--accent-halloween);color:#fff}.halloween-mode header,header{background-color:rgba(255,165,0,.8)}.container{max-width:1200px;margin:0 auto;padding:2rem;width:100%}header{display:flex;justify-content:center;align-items:center;padding:1rem 2rem;position:sticky;top:0;z-index:1000}.header-title{margin:0}.header-controls{margin-left:auto;display:flex;align-items:center;gap:1.5rem;padding-right:1rem}#toggleButton{margin-right:1rem}.search-container{display:flex;align-items:center;border-radius:30px;padding:.4rem 1rem;transition:.3s;width:100%;max-width:500px;margin:1rem 0;box-shadow:0 4px 10px rgba(0,0,0,.1);background:rgba(255,255,255,.267);backdrop-filter:blur(4.5px);-webkit-backdrop-filter:blur(4.5px)}#searchButton,#searchInput{background:0 0;border:none}.carousel,.owner-card .owner-info{padding:.5rem}.main-search-container{display:flex;gap:5px;width:100%;align-items:center;justify-content:center}.total-contributors{color:#000;font-size:1.2rem}.dark-mode .search-container{background-color:rgba(255,139,255,.1);box-shadow:0 4px 10px rgba(255,255,255,.1)}#searchInput{padding:.4rem;font-size:1rem;width:100%;outline:0}#searchInput::placeholder{color:#f500f5;opacity:.7}.dark-mode #searchInput::placeholder{color:#c401c4}#searchButton{cursor:pointer;font-size:1.2rem;transition:transform .3s,color .3s}#searchButton:hover{transform:scale(1.1);color:var(--text-light)}.dark-mode #searchButton,.dark-mode .header-title,.dark-mode footer a,.dark-mode h1{color:var(--accent-dark)}.dark-mode #searchButton:hover,.dark-mode .toggle-btn i{color:#fff}h1{font-size:2.5rem;font-weight:600;margin-bottom:1rem}.carousel{background-color:#1c1c1c;overflow:hidden;white-space:nowrap}.carousel-slide{display:inline-block;color:#fff;font-size:1.2rem;font-family:monospace;animation:20s linear infinite carousel}.carousel:hover .carousel-slide{animation-play-state:paused}@keyframes carousel{from{transform:translateX(100vw)}to{transform:translateX(-90vw)}}.wall-section{padding:2rem;background-color:#f4f4f9;border-radius:10px;box-shadow:0 5px 15px rgba(0,0,0,.1);background:rgba(255,255,255,.45);box-shadow:0 8px 32px 0 rgba(31,38,135,.37);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);border:1px solid rgba(255,255,255,.18)}.contributors-section h2,.wall-section h2{text-align:center;font-size:2rem;margin-bottom:1.5rem;color:#6b6b6b}.search-container{display:flex;justify-content:center;margin-bottom:1.5rem}.participant,.search-container button{color:#fff;align-items:center;cursor:pointer}.search-container input{padding:.75rem;width:300px;border:2px solid #ddd;border-radius:8px;font-size:1rem;transition:border-color .3s ease-in-out}.search-container input:focus{border-color:#888;outline:0}.search-container button{background-color:#ff5722;border:none;padding:.75rem 1rem;border-radius:8px;margin-left:.5rem;font-size:1.2rem;display:flex;justify-content:center;transition:background-color .3s ease-in-out}.participant,.toggle-btn,.toggle-btn i{font-size:1.5rem}.toggle-btn i,footer a{color:var(--accent-light);transition:color .3s}.search-container button:hover{background-color:#e64a19}.search-container button i{margin-right:.3rem}.wall{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:1.5rem;padding:0 2rem}.participant{background-image:url('../img/brick_wall.webp');background-size:cover;background-repeat:no-repeat;padding:1.5rem;border-radius:10px;display:flex;justify-content:center;font-family:'Sedgwick Ave',cursive;font-weight:400;font-style:normal;position:relative;transition:transform .3s,box-shadow .3s,border-color .3s ease-in-out;border:2px solid transparent;text-shadow:2px 5px 2px #000}#loading-screen,.modal{position:fixed;display:flex}.participant::before{content:'';position:absolute;top:0;left:0;border-radius:10px;background-color:rgba(255,255,255,.1);opacity:0;transition:opacity .3s}.participant:hover::before{opacity:1}.participant:hover{transform:translateY(-10px) scale(1.05);border-color:rgba(255,255,255,.6);box-shadow:0 0 5px rgba(255,255,255,.5),0 0 5px rgba(255,255,255,.4),0 0 30px rgba(66,205,47,.6)}#backToTopBtn:hover,.cookies-btn:hover,.toggle-btn:hover{transform:scale(1.1)}.wall-section .wall .participant{opacity:0;animation:.5s ease-out forwards fadeIn}@keyframes fadeIn{0%{opacity:0;transform:translateY(10px)}100%{opacity:1;transform:translateY(0)}}footer{padding:1rem 0;margin-top:2rem;font-size:.9rem}footer a:hover{text-decoration:underline}.toggle-btn{background:0 0;border:none;cursor:pointer;transition:transform .3s}.about-us-btn,.contact-btn,.surprise-btn{background-color:var(--accent-light);color:#fff;border:none;padding:.5rem 1rem;border-radius:20px;cursor:pointer;font-size:.9rem;transition:.3s;margin-top:.5rem;margin-right:0}.dark-mode .contact-btn,.dark-mode .surprise-btn,.modal-dark-mode{background-color:var(--accent-dark)}.contact-btn>a{color:#fff}.header-title{color:inherit;font-size:2.5rem;font-weight:400;font-family:DynaPuff;color:var(--accent-light);transition:color .3s}.header-title:hover{cursor:pointer}#halloweenIcon{color:#fff;display:none;transition:opacity 1s;margin-left:2px;font-size:2.5rem}#loading-screen{backdrop-filter:blur(10px);align-items:center;justify-content:center;flex-direction:column;z-index:9999;background-color:#333;color:#fff}#backToTopBtn,.feebback-Btn{background-color:var(--accent-light);cursor:pointer}#spinner{width:100px;height:100px;border:12px solid #c401c4;border-top:12px solid #ff8bff;border-radius:50%;animation:1s linear infinite spin}#loading-text{font-weight:700;margin-top:1rem}#backToTopBtn{position:fixed;bottom:40px;right:40px;color:var(--text-light);border:none;border-radius:50px;padding:15px 25px;font-size:2rem;display:none;z-index:1000;transition:background-color .3s,color .3s,transform .3s;box-shadow:0 4px 12px rgba(0,0,0,.1)}#backToTopBtn:hover{background-color:var(--bg-dark);color:var(--text-dark)}body.dark-mode #backToTopBtn,body.dark-mode .feebback-Btn{background-color:var(--accent-dark);color:var(--text-dark)}body.dark-mode #backToTopBtn:hover{background-color:var(--bg-light);color:var(--text-light)}.feebback-Btn{color:var(--text-light);border:none;padding:10px 20px;margin-top:10px;border-radius:5px}.modal{top:0;left:0;background-color:rgba(0,0,0,.5);justify-content:center;align-items:center;z-index:10}.modal-wrapper{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:20px;max-width:630px;overflow:auto;padding:1rem 2rem;border-radius:10px;position:relative;background-color:var(--accent-light);color:#fff}.close-modal-button{position:absolute;top:10px;right:10px;font-size:20px;color:#fff}.hidden{display:none}@keyframes spin{0%{transform:rotate(0)}100%{transform:rotate(720deg)}}@media (max-width:1024px){.container{padding:1.5rem}h1{font-size:2.2rem}.wall{grid-template-columns:repeat(auto-fill,minmax(120px,1fr))}.search-container{max-width:100%;margin:1rem auto}.participant{font-size:1rem}.carousel-slide{font-size:.8rem}}@media (max-width:768px){.container{padding:1rem}h1{font-size:2rem}.header-controls{flex-direction:column;align-items:flex-end}.main-search-container{flex-direction:column}.search-sort-container{flex-direction:column-reverse}.wall{grid-template-columns:repeat(auto-fill,minmax(100px,1fr))}.modal-wrapper{max-width:300px}.participant,footer{font-size:.8rem}}@media (max-width:480px){header{flex-direction:column;text-align:center}.header-controls{width:100%;flex-direction:column;align-items:center;gap:.5rem}.search-container{height:40px}.wall{grid-template-columns:repeat(auto-fill,minmax(80px,1fr))}}.search-sort-container{display:flex;justify-content:center;align-items:center;gap:1.5rem;padding:10px;border-radius:8px}.sort-container{margin:15px 0}.cookies-btn,.cookies-text{margin-right:10px;font-weight:700}.sort-select{padding:8px;font-size:16px;border:1px solid #ccc;outline:0;border-radius:5px;cursor:pointer;transition:border-color .3s,box-shadow .3s}.sort-select:hover{border-color:#888;box-shadow:0 0 5px rgba(0,0,0,.2)}.sort-select:focus{border-color:#0056b3;box-shadow:0 0 5px rgba(0,86,179,.5)}.contributors-container{display:flex;flex-direction:row;flex-wrap:wrap;justify-content:center;gap:40px;align-items:center}@media screen and (max-width:1024px){.contributors-container h4{font-size:20px}}.contributors-card{display:flex;flex-direction:column;align-items:center;justify-content:center;border:none;width:300px;height:150px}.contributors-avatar-container{display:flex;flex-direction:row-reverse;justify-content:space-between;align-items:center;gap:1rem}.contributors-avatar{width:50px;height:50px;border-radius:50%;object-fit:cover}.contributors-contributions{font-weight:600;font-size:22px}.contributors-link{color:#fff;font-weight:600;font-size:18px;transition:color .3s}.contributors-section{background:rgba(255,255,255,.45);box-shadow:0 8px 32px 0 rgba(31,38,135,.37);backdrop-filter:blur(4px);border-radius:10px;border:1px solid rgba(255,255,255,.18);padding:32px;margin-top:4rem}.cookies-btn,button{padding:10px;cursor:pointer;color:#fff}button{background-color:#007bff;border:none;border-radius:5px}.about-us-btn:focus,.about-us-btn:hover,button:focus,button:hover{background-color:#0056b3;outline:#ffffff solid 2px}a:focus{outline:#ffffff solid 2px}#flyingGhost{display:block;width:100px;position:fixed;top:20%;right:-150px;transition:right 3s ease-in-out}@keyframes ghostFly{0%{right:-150px}50%{right:50%}100%{right:100%}}#mascotContainer{display:none;position:fixed;bottom:50px;left:-150px;width:150px;height:auto;z-index:9999;animation:5s linear forwards mascotMove}@keyframes mascotMove{0%{left:-150px}50%{left:50%}100%{left:110%}}#cookies-container{position:fixed;bottom:0;left:0;right:0;z-index:9999}#cookies-sub-container{background-color:#fff;padding:20px;border-radius:5px;box-shadow:0 0 5px rgba(0,0,0,.2);color:#000}.cookies{display:flex;flex-direction:row;align-items:center;margin-bottom:10px;gap:2rem}@media screen and (max-width:480px){.cookies{flex-direction:column}}.cookies-text{font-size:14px;line-height:1.5;text-align:left}.cookies-buttons{display:flex;justify-content:flex-end;margin-top:10px}.cookies-btn{border:none;border-radius:5px;transition:transform .3s ease-in-out}.accept-cookies{background-color:#13c825}.accept-cookies:hover{background-color:#0ca01c}.decline-cookies{background-color:#df2424}.decline-cookies:hover{background-color:#b81e1e}.pumpkin{height:18px;width:18px;justify-content:center;justify-items:center;cursor:pointer;transition:.3s}.pumpkin:hover{transform:scale(1.05)}.popup{display:none;position:fixed;z-index:1;left:0;top:0;width:100%;height:100%;background-color:rgba(0,0,0,.7);justify-content:center;align-items:center}.about-us,.owner-card{background-color:transparent;text-align:center}.popup-content{margin:auto;display:block;width:100%;max-width:800px;animation:3s linear infinite spin}.close-btn{position:absolute;top:60px;right:35px;color:#fff;font-size:80px;font-weight:700;cursor:pointer}.close-btn:focus,.close-btn:hover{color:#bbb}#caption{text-align:center;color:#ccc;font-size:50px;padding:10px 0;font-family:Creepster,system-ui;font-style:normal;font-weight:400;text-shadow:2px 2px 4px orange}.about-us-btn>a{color:#fff}.about-us{padding:2rem}.owners{display:flex;justify-content:space-between;flex-wrap:wrap}.owner-card{display:flex;flex-direction:column;align-items:center;border:1px solid #ccc;border-radius:10px;padding:1rem;width:48%;margin-bottom:1rem;box-shadow:0 4px 8px rgba(0,0,0,.1)}.owner-card img.profile-picture{width:100px;height:100px;border-radius:50%;object-fit:cover;margin-bottom:1rem}@media (min-width:600px){.owners{flex-direction:row}}
\ No newline at end of file
diff --git a/src/index.html b/src/index.html
index 01f7dc3..d8ddc87 100644
--- a/src/index.html
+++ b/src/index.html
@@ -67,6 +67,9 @@
     </div>
 
     <div class="header-controls">
+      <button id="aboutUsButton" class="about-us-btn" aria-label="About Us">
+        <a href="#about-us-section">About Us</a>
+      </button>
       <button id="surpriseButton" class="surprise-btn" aria-label="Surprise Me!" tabindex="0">
         Surprise Me!
       </button>
@@ -175,6 +178,30 @@ <h2 class="modal-title">Fun Facts</h2>
         <blockquote class="modal-content"></blockquote>
       </div>
     </div>
+
+    <section id="about-us-section" class="about-us">
+      <h2>About Us</h2>
+      <p>HacktoberWall was created to help beginner contributors in the open-source community participate in the Hacktoberfest event.</p>
+    
+      <div class="owners">
+        <div id="owner-jolly" class="owner-card">
+          <img src="" alt="Jolly's Profile Picture" class="profile-picture" />
+          <div class="owner-info">
+            <h3>Jolly (Owner)</h3>
+            <p>Jolly is the creator of HacktoberWall and is passionate about open-source contributions. This project marks his first participation in Hacktoberfest!</p>
+          </div>
+        </div>
+    
+        <div id="owner-phanty" class="owner-card">
+          <img src="" alt="Phanty78's Profile Picture" class="profile-picture" />
+          <div class="owner-info">
+            <h3>Phanty78 (Co-Owner)</h3>
+            <p>Phanty78 joined Jolly to co-manage HacktoberWall and has made significant contributions to the project.</p>
+          </div>
+        </div>
+      </div>
+    </section>
+    
   </main>
 
   <footer>
diff --git a/src/js/app.js b/src/js/app.js
index 63c68b4..bfaac40 100644
--- a/src/js/app.js
+++ b/src/js/app.js
@@ -365,4 +365,28 @@ var closeBtn = document.getElementsByClassName('close-btn')[0]
 // When the user clicks on <span> (x), close the popup
 closeBtn.onclick = function () {
   popup.style.display = 'none' // Hide the popup
-}
\ No newline at end of file
+}
+
+const owners = [
+  { name: "Jolly", username: "JollyJolli", elementId: "owner-jolly" },
+  { name: "Phanty78", username: "Phanty78", elementId: "owner-phanty" },
+];
+
+async function fetchGitHubProfiles() {
+  for (const owner of owners) {
+      try {
+          const response = await fetch(`https://api.github.com/users/${owner.username}`);
+          if (!response.ok) {
+              throw new Error(`Error fetching data: ${response.statusText}`);
+          }
+          const data = await response.json();
+          const ownerElement = document.getElementById(owner.elementId);
+          const profilePicture = ownerElement.querySelector(".profile-picture");
+          profilePicture.src = data.avatar_url;
+      } catch (error) {
+          console.error("Failed to fetch profile:", error);
+      }
+  }
+}
+
+document.addEventListener("DOMContentLoaded", fetchGitHubProfiles);
diff --git a/src/js/app.min.js b/src/js/app.min.js
index 27f989e..7eedba1 100644
--- a/src/js/app.min.js
+++ b/src/js/app.min.js
@@ -1 +1 @@
-const MOON = '<i class="fas fa-moon"></i>', SUN = '<i class="fas fa-sun"></i>', GHOST = '<i class="fas fa-ghost"></i>'; let toggleCount = 0, cachedContributors = null; const modal = document.querySelector(".modal"), modalWrapper = document.querySelector(".modal-wrapper"), modalContent = document.querySelector(".modal-content"), modalClose = document.querySelector(".close-modal-button"), contributerCount = document.querySelector(".total-contributors"); function initializeThemeSwitching() { let e = document.getElementById("toggleButton"), t = document.body, o = localStorage.getItem("theme") || "light-mode"; t.classList.add(o), updateIcon(o, e), e.addEventListener("click", () => { 1 == ++toggleCount ? (t.classList.remove("light-mode", "halloween-mode"), t.classList.add("dark-mode"), localStorage.setItem("theme", "dark-mode"), updateIcon("dark-mode", e)) : 2 === toggleCount ? (t.classList.remove("dark-mode", "light-mode"), t.classList.add("halloween-mode"), localStorage.setItem("theme", "halloween-mode"), updateIcon("halloween-mode", e)) : (t.classList.remove("dark-mode", "halloween-mode"), t.classList.add("light-mode"), localStorage.setItem("theme", "light-mode"), updateIcon("light-mode", e), toggleCount = 0) }) } function flyInGhost() { let e = document.getElementById("flyingGhost"); e.style.right = "100px" } function updateIcon(e, t) { "dark-mode" === e ? t.innerHTML = MOON : "halloween-mode" === e ? t.innerHTML = '<i class="fas fa-ghost"></i>' : t.innerHTML = SUN } function checkHalloweenDate() { let e = new Date; 9 === e.getMonth() && 31 === e.getDate() && (document.body.classList.remove("light-mode", "dark-mode"), document.body.classList.add("halloween-mode"), localStorage.setItem("theme", "halloween-mode")) } async function loadContributors() { if (null !== cachedContributors) return cachedContributors; let e = null; showLoadingScreen(); try { let t = await fetch("data/contributors.json"); if (!t.ok) throw Error(`Failed to load contributors: HTTP status ${t.status} (${t.statusText})`); e = await t.json(); let o = countItems(e); contributerCount.textContent = `Total: ${o}`, cachedContributors = e } catch (n) { console.error("Error loading contributors:", n), alert("Oops! Something went wrong while loading the contributors. Please try again later.\n\nError details: " + n.message) } finally { hideLoadingScreen() } return e } function countItems(e) { return Array.isArray(e) ? e.length : Object.keys(e).length } function shuffle(e) { for (let t = e.length - 1; t > 0; t--) { let o = Math.floor(Math.random() * (t + 1));[e[t], e[o]] = [e[o], e[t]] } } async function displayContributors(e = "", t = "default") { let o = document.getElementById("wall"), n = await loadContributors(); o.innerHTML = "", shuffle(n), "asc" === t ? n.sort((e, t) => e.name.localeCompare(t.name)) : "desc" === t && n.sort((e, t) => t.name.localeCompare(e.name)), n.forEach((t, n) => { if (t.name.toLowerCase().includes(e.toLowerCase())) { let a = document.createElement("div"); a.classList.add("participant"), a.textContent = t.name, a.style.animationDelay = `${.1 * n}s`, o.appendChild(a) } }) } function initializeSearchAndSort() { let e = document.getElementById("searchInput"), t = document.getElementById("searchButton"), o = document.getElementById("sortSelect"); e.addEventListener("input", () => { displayContributors(e.value, o.value) }), t.addEventListener("click", () => { displayContributors(e.value, o.value) }), o.addEventListener("change", () => { displayContributors(e.value, o.value) }) } function initializeDarkMode() { let e = document.getElementById("toggleButton"), t = document.body, o = "enabled" === localStorage.getItem("dark-mode"); t.classList.toggle("dark-mode", o), e.innerHTML = o ? MOON : SUN, e.addEventListener("click", () => { t.classList.toggle("dark-mode"); let o = t.classList.contains("dark-mode"); localStorage.setItem("dark-mode", o ? "enabled" : "disabled"), e.innerHTML = o ? MOON : SUN, 2 == ++toggleCount && (activateRainbowMode(), toggleCount = 0) }) } function activateRainbowMode() { let e = document.body; e.classList.add("rainbow-mode"), setTimeout(() => { e.classList.remove("rainbow-mode") }, 5e3) } function addParticipantHoverEffect() { let e = document.getElementById("wall"); e.addEventListener("mouseover", e => { e.target.classList.contains("participant") && (e.target.style.transform = "translateY(-5px)") }), e.addEventListener("mouseout", e => { e.target.classList.contains("participant") && (e.target.style.transform = "translateY(0)") }) } modalClose.addEventListener("click", closeModal); const funFacts = ["The first Hacktoberfest event was held in 2014.", "Hacktoberfest was created by DigitalOcean and GitHub.", "Open source software powers much of the internet's infrastructure.", "The term 'open source' was coined in 1998.", "Linux, the most famous open source project, was created in 1991.", "The Hacktoberfest Challenge is to have 4 open source contrubutions accepted, but you can do more.", "Particpating in Hacktoberfest is a great way to gain skills",], sections = Array.from(document.querySelectorAll("section")); let sectionsName = sections.map(e => e.className); for (let i = 0; i < sectionsName.length; i++)sectionsName[i] = sectionsName[i].replace("section.", ""); function getRandomItem(e) { return e[Math.floor(Math.random() * e.length)] } function showFunFact() { let e = getRandomItem(funFacts); modal.setAttribute("aria-hidden", !1), modal.setAttribute("aria-modal", !0), modal.classList.remove("hidden"), modalContent.textContent = e } function closeModal() { modal.classList.add("hidden"), modal.setAttribute("aria-hidden", !0), modal.removeAttribute("aria-modal"), modalContent.textContent = "" } function scrollToRandomSection() { let e = getRandomItem(sectionsName), t = document.querySelector(`.${e}`); t.scrollIntoView({ behavior: "smooth", block: "start" }) } function handleSurprise() { .5 > Math.random() ? showFunFact() : scrollToRandomSection() } function initializeSurpriseButton() { let e = document.getElementById("surpriseButton"); e.addEventListener("click", handleSurprise) } function showLoadingScreen() { let e = document.getElementById("loading-screen"); e.style.display = "flex" } function hideLoadingScreen() { let e = document.getElementById("loading-screen"); e.style.display = "none" } window.onclick = function (e) { e.target === modal && closeModal() }, window.onload = function () { displayContributors(), initializeDarkMode(), addParticipantHoverEffect(), initializeSearchAndSort(), initializeSurpriseButton(), initializeThemeSwitching(), checkHalloweenDate(), document.body.classList.contains("halloween-mode") && flyInGhost() }; const backToTopBtn = document.getElementById("backToTopBtn"); window.onscroll = function () { document.body.scrollTop > 100 || document.documentElement.scrollTop > 100 ? backToTopBtn.style.display = "block" : backToTopBtn.style.display = "none" }, backToTopBtn.addEventListener("click", function () { window.scrollTo({ top: 0, behavior: "smooth" }) }), document.getElementById("titleLink").addEventListener("click", e => { e.preventDefault(); let t = document.body; t.classList.contains("dark-mode") && (playSpookySound(), showHalloweenIcon()) }), SmoothScroll({ animationTime: 800, stepSize: 75, accelerationDelta: 30, accelerationMax: 2, keyboardSupport: !0, arrowScroll: 50, pulseAlgorithm: !0, pulseScale: 4, pulseNormalize: 1, touchpadSupport: !0 }); var popup = document.getElementById("imagePopup"), triggerImg = document.getElementById("triggerImage"), popupImage = document.getElementById("popupImage"), captionText = document.getElementById("caption"); triggerImg.onclick = function () { console.log("Trigger image clicked!"), popup.style.display = "flex", captionText.innerHTML = "Halloween is Coming!!!" }; var closeBtn = document.getElementsByClassName("close-btn")[0]; closeBtn.onclick = function () { popup.style.display = "none" };
\ No newline at end of file
+const MOON='<i class="fas fa-moon"></i>',SUN='<i class="fas fa-sun"></i>',GHOST='<i class="fas fa-ghost"></i>';let toggleCount=0,cachedContributors=null;const modal=document.querySelector(".modal"),modalWrapper=document.querySelector(".modal-wrapper"),modalContent=document.querySelector(".modal-content"),modalClose=document.querySelector(".close-modal-button"),contributerCount=document.querySelector(".total-contributors");function initializeThemeSwitching(){let e=document.getElementById("toggleButton"),t=document.body,o=localStorage.getItem("theme")||"light-mode";t.classList.add(o),updateIcon(o,e),e.addEventListener("click",()=>{1==++toggleCount?(t.classList.remove("light-mode","halloween-mode"),t.classList.add("dark-mode"),localStorage.setItem("theme","dark-mode"),updateIcon("dark-mode",e)):2===toggleCount?(t.classList.remove("dark-mode","light-mode"),t.classList.add("halloween-mode"),localStorage.setItem("theme","halloween-mode"),updateIcon("halloween-mode",e)):(t.classList.remove("dark-mode","halloween-mode"),t.classList.add("light-mode"),localStorage.setItem("theme","light-mode"),updateIcon("light-mode",e),toggleCount=0)})}function flyInGhost(){let e=document.getElementById("flyingGhost");e.style.right="100px"}function updateIcon(e,t){"dark-mode"===e?t.innerHTML=MOON:"halloween-mode"===e?t.innerHTML='<i class="fas fa-ghost"></i>':t.innerHTML=SUN}function checkHalloweenDate(){let e=new Date;9===e.getMonth()&&31===e.getDate()&&(document.body.classList.remove("light-mode","dark-mode"),document.body.classList.add("halloween-mode"),localStorage.setItem("theme","halloween-mode"))}async function loadContributors(){if(null!==cachedContributors)return cachedContributors;let e=null;showLoadingScreen();try{let t=await fetch("data/contributors.json");if(!t.ok)throw Error(`Failed to load contributors: HTTP status ${t.status} (${t.statusText})`);e=await t.json();let o=countItems(e);contributerCount.textContent=`Total: ${o}`,cachedContributors=e}catch(n){console.error("Error loading contributors:",n),alert("Oops! Something went wrong while loading the contributors. Please try again later.\n\nError details: "+n.message)}finally{hideLoadingScreen()}return e}function countItems(e){return Array.isArray(e)?e.length:Object.keys(e).length}function shuffle(e){for(let t=e.length-1;t>0;t--){let o=Math.floor(Math.random()*(t+1));[e[t],e[o]]=[e[o],e[t]]}}async function displayContributors(e="",t="default"){let o=document.getElementById("wall"),n=await loadContributors();o.innerHTML="",shuffle(n),"asc"===t?n.sort((e,t)=>e.name.localeCompare(t.name)):"desc"===t&&n.sort((e,t)=>t.name.localeCompare(e.name)),n.forEach((t,n)=>{if(t.name.toLowerCase().includes(e.toLowerCase())){let a=document.createElement("div");a.classList.add("participant"),a.textContent=t.name,a.style.animationDelay=`${.1*n}s`,o.appendChild(a)}})}function initializeSearchAndSort(){let e=document.getElementById("searchInput"),t=document.getElementById("searchButton"),o=document.getElementById("sortSelect");e.addEventListener("input",()=>{displayContributors(e.value,o.value)}),t.addEventListener("click",()=>{displayContributors(e.value,o.value)}),o.addEventListener("change",()=>{displayContributors(e.value,o.value)})}function initializeDarkMode(){let e=document.getElementById("toggleButton"),t=document.body,o="enabled"===localStorage.getItem("dark-mode");t.classList.toggle("dark-mode",o),e.innerHTML=o?MOON:SUN,e.addEventListener("click",()=>{t.classList.toggle("dark-mode");let o=t.classList.contains("dark-mode");localStorage.setItem("dark-mode",o?"enabled":"disabled"),e.innerHTML=o?MOON:SUN,2==++toggleCount&&(activateRainbowMode(),toggleCount=0)})}function activateRainbowMode(){let e=document.body;e.classList.add("rainbow-mode"),setTimeout(()=>{e.classList.remove("rainbow-mode")},5e3)}function addParticipantHoverEffect(){let e=document.getElementById("wall");e.addEventListener("mouseover",e=>{e.target.classList.contains("participant")&&(e.target.style.transform="translateY(-5px)")}),e.addEventListener("mouseout",e=>{e.target.classList.contains("participant")&&(e.target.style.transform="translateY(0)")})}modalClose.addEventListener("click",closeModal);const funFacts=["The first Hacktoberfest event was held in 2014.","Hacktoberfest was created by DigitalOcean and GitHub.","Open source software powers much of the internet's infrastructure.","The term 'open source' was coined in 1998.","Linux, the most famous open source project, was created in 1991.","The Hacktoberfest Challenge is to have 4 open source contrubutions accepted, but you can do more.","Particpating in Hacktoberfest is a great way to gain skills",],sections=Array.from(document.querySelectorAll("section"));let sectionsName=sections.map(e=>e.className);for(let i=0;i<sectionsName.length;i++)sectionsName[i]=sectionsName[i].replace("section.","");function getRandomItem(e){return e[Math.floor(Math.random()*e.length)]}function showFunFact(){let e=getRandomItem(funFacts);modal.setAttribute("aria-hidden",!1),modal.setAttribute("aria-modal",!0),modal.classList.remove("hidden"),modalContent.textContent=e}function closeModal(){modal.classList.add("hidden"),modal.setAttribute("aria-hidden",!0),modal.removeAttribute("aria-modal"),modalContent.textContent=""}function scrollToRandomSection(){let e=getRandomItem(sectionsName),t=document.querySelector(`.${e}`);t.scrollIntoView({behavior:"smooth",block:"start"})}function handleSurprise(){.5>Math.random()?showFunFact():scrollToRandomSection()}function initializeSurpriseButton(){let e=document.getElementById("surpriseButton");e.addEventListener("click",handleSurprise)}function showLoadingScreen(){let e=document.getElementById("loading-screen");e.style.display="flex"}function hideLoadingScreen(){let e=document.getElementById("loading-screen");e.style.display="none"}window.onclick=function(e){e.target===modal&&closeModal()},window.onload=function(){displayContributors(),initializeDarkMode(),addParticipantHoverEffect(),initializeSearchAndSort(),initializeSurpriseButton(),initializeThemeSwitching(),checkHalloweenDate(),document.body.classList.contains("halloween-mode")&&flyInGhost()};const backToTopBtn=document.getElementById("backToTopBtn");window.onscroll=function(){document.body.scrollTop>100||document.documentElement.scrollTop>100?backToTopBtn.style.display="block":backToTopBtn.style.display="none"},backToTopBtn.addEventListener("click",function(){window.scrollTo({top:0,behavior:"smooth"})}),document.getElementById("titleLink").addEventListener("click",e=>{e.preventDefault();let t=document.body;t.classList.contains("dark-mode")&&(playSpookySound(),showHalloweenIcon())}),SmoothScroll({animationTime:800,stepSize:75,accelerationDelta:30,accelerationMax:2,keyboardSupport:!0,arrowScroll:50,pulseAlgorithm:!0,pulseScale:4,pulseNormalize:1,touchpadSupport:!0});var popup=document.getElementById("imagePopup"),triggerImg=document.getElementById("triggerImage"),popupImage=document.getElementById("popupImage"),captionText=document.getElementById("caption");triggerImg.onclick=function(){console.log("Trigger image clicked!"),popup.style.display="flex",captionText.innerHTML="Halloween is Coming!!!"};var closeBtn=document.getElementsByClassName("close-btn")[0];closeBtn.onclick=function(){popup.style.display="none"};const owners=[{name:"Jolly",username:"JollyJolli",elementId:"owner-jolly"},{name:"Phanty78",username:"Phanty78",elementId:"owner-phanty"},];async function fetchGitHubProfiles(){for(let e of owners)try{let t=await fetch(`https://api.github.com/users/${e.username}`);if(!t.ok)throw Error(`Error fetching data: ${t.statusText}`);let o=await t.json(),n=document.getElementById(e.elementId),a=n.querySelector(".profile-picture");a.src=o.avatar_url}catch(l){console.error("Failed to fetch profile:",l)}}document.addEventListener("DOMContentLoaded",fetchGitHubProfiles);
\ No newline at end of file