From d021fcfca07b038a512849239f501495aaf04d88 Mon Sep 17 00:00:00 2001 From: karthik Date: Mon, 8 Jan 2024 06:42:10 +0530 Subject: [PATCH] speakers section --- css/organizers.css | 4 +- css/speakers.css | 94 ++++++++++++++++++++++++++++++++++++++++++++++ data/speakers.json | 18 +++++++++ index.html | 16 +++++++- js/speakers.js | 56 +++++++++++++++++++++++++++ 5 files changed, 185 insertions(+), 3 deletions(-) create mode 100644 css/speakers.css create mode 100644 data/speakers.json create mode 100644 js/speakers.js diff --git a/css/organizers.css b/css/organizers.css index 7036101..3239211 100644 --- a/css/organizers.css +++ b/css/organizers.css @@ -74,7 +74,7 @@ font-weight: 500; } -.github a { +.socials a { display: inline-block; height: 40px; width: 40px; @@ -87,7 +87,7 @@ transition: all 0.5s ease; } -.github a:hover { +.socials a:hover { color: rgb(255, 255, 255); background-color: #00cf90; } diff --git a/css/speakers.css b/css/speakers.css new file mode 100644 index 0000000..dbb1540 --- /dev/null +++ b/css/speakers.css @@ -0,0 +1,94 @@ +#speakers { + margin-bottom: 30px; + } + #speakers-content { + justify-content: center; + align-items: center; + text-align: center; + padding-top: 50px; + } + #speakers-content h1 { + color: #00cf90; + font-family: "Kufam", sans-serif; + font-weight: 400; + font-size: 40px; + margin-top: 50px; + } + #speakers-content p { + color: white; + font-weight: 400; + line-height: 19.5px; + margin: auto; + text-align: center; + } + #speakers-container { + margin: 0 30px; + margin-top: 50px; + display: flex; + flex-wrap: wrap; + justify-content: center; + } + .wing-speaker { + font-size: 16px; + color: #00cf90; + margin-top: 15px; + font-weight: 1000; + } + .role-speaker { + font-size: 15px; + color: #00cf90; + font-weight: 100; + } + .speaker-discord { + color: #b7e7d9; + margin-top: -6px; + font-size: 12px; + } + .speaker-card { + background-color: rgba(217, 217, 217, 0.2); + backdrop-filter: blur(10px); + width: 230px; + margin: 25px; + text-align: center; + transition: 0.3s ease; + height: 21rem; + padding: 4px 10px; + border-radius: 10px; + position: relative; + } + .speaker-card:hover { + box-shadow: 0px 40px 56px rgba(8, 157, 60, 0.1); + transition: 0.3s; + } + .speaker-gitavatar { + height: 90px; + margin: 10px 10px; + padding-top: 10px; + padding-bottom: 1px; + border-radius: 50%; + } + .speaker-name { + font-size: 19px; + font-family: "Kufam", sans-serif; + color: #00cf90; + font-weight: 500; + } + + .github a { + display: inline-block; + height: 40px; + width: 40px; + background-color: rgba(79, 210, 105, 0.117); + margin: 10px; + text-align: center; + line-height: 40px; + border-radius: 50%; + color: #00cf90; + transition: all 0.5s ease; + } + + .github a:hover { + color: rgb(255, 255, 255); + background-color: #00cf90; + } + \ No newline at end of file diff --git a/data/speakers.json b/data/speakers.json new file mode 100644 index 0000000..5f39a60 --- /dev/null +++ b/data/speakers.json @@ -0,0 +1,18 @@ +[ + { + "Name": "Srilakshmi Barathi", + "Role": "Coordinator", + "At": "Naksh - NFT Marketplace & The Phoenix Guild", + "x": "https://twitter.com/srilakshmitc", + "xavatar": "https://pbs.twimg.com/profile_images/1549356807361122304/_HdbSy3n_400x400.jpg", + "linkedin":"https://www.linkedin.com/in/srilakshmi-tc/" + }, + { + "Name": "Aniket Raj", + "Role": "Community lead", + "At": "Devfolio", + "x": "https://twitter.com/AniketRaj314", + "xavatar": "https://pbs.twimg.com/profile_images/1679058188824645632/8LN9mYqO_400x400.jpg" + } + +] diff --git a/index.html b/index.html index 7177497..6387d3b 100644 --- a/index.html +++ b/index.html @@ -28,6 +28,7 @@ + + @@ -86,6 +88,7 @@
  • LEADERBOARD
  • PROJECTS
  • ORGANIZERS
    • +
  • SPEAKERS
  • EVENTS
  • MENTORS
  • CONTACT US
    • @@ -196,7 +199,18 @@

    Organizers

    -
    +
    +
    +

    Speakers

    +
    +
    + +
    +
    +

    Show More

    +
    +
    +
    diff --git a/js/speakers.js b/js/speakers.js new file mode 100644 index 0000000..cff4fa3 --- /dev/null +++ b/js/speakers.js @@ -0,0 +1,56 @@ +var speakerShowAll = false; + +const speakerShowAllButton = document.getElementById("speakers-show-more"); +document.addEventListener("DOMContentLoaded", populateSpeakers); + +speakerShowAllButton.addEventListener("click", () => { + speakerShowAll = true; + speakerShowAllButton.classList.add("no-display"); + populateSpeakers(); +}); + +function populateSpeakers() { + // Check if the screen width is more than 900px + if (window.innerWidth > 900) { + speakerShowAll = true; + speakerShowAllButton.classList.add("no-display"); + } + + fetch("data/speakers.json") + .then((response) => response.json()) + .then((data) => generateSpeakerCards(data)) + .catch((error) => console.error("Error fetching speaker data:", error)); +} + +function generateSpeakerCards(speakersData) { + const speakerSection = document.getElementById("speakers-container"); + speakerSection.innerHTML = ""; + + const numLength = speakersData.length; + const numSpeakers = speakerShowAll ? numLength : 6; + + for (let i = 0; i < numSpeakers; i++) { + const speaker = speakersData[i]; + + const card = document.createElement("div"); + card.classList.add("speaker-card"); + card.innerHTML = ` + + +
    +

    ${speaker.Name}

    +
    + +

    ${speaker.Role}

    +

    ${speaker.At}

    +
    + + ${speaker.linkedin ? `` : ''} +
    +
    + +
    + `; + speakerSection.appendChild(card); + } +}