projects.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <!-- Corrected path -->
    <link
      rel="icon"
      href="images/website-logos/index-logo.jpg"
      type="image/jpg"
    />

    <!-- Google font link -->
    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />

    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css"
    />

    <link
      rel="stylesheet"
      href="https://unicons.iconscout.com/release/v4.0.8/css/line.css"
    />
    <link rel="stylesheet" href="css/projects.css" />
    <title>Open Source Projects – Where Ideas Come To Life</title>
  </head>

  <body>
    <!--nav bar -->
    <!-- linear gradient -->
    <div class="header-background"></div>
    <!-- NAVIGATION BAR GOES HERE!!!! -->
    <header>
      <div class="responsiveness">
        <div class="logo">
          <img src="./images/website-logos/logo.svg" alt="" />
          <span>Algorithmia SE 🌍</span>
        </div>
        <!-- For responsiveness -->
        <div>
          <i id="menu-bar" class="fas fa-bars"></i>
        </div>
      </div>
      <nav class="nav-container">
        <ul>
          <li class="nav-list"><a href="./index.html">Home</a></li>
          <li class="nav-list">
            <a href="./index.html#About_us">About Us</a>
          </li>
          <li class="nav-list">
            <a href="./index.html#Contact_us">Contact Us</a>
          </li>
          <li class="nav-list">
            <a href="./projects.html" id="project"><span>Projects</span></a>
          </li>

          <li class="nav-list dropdown">
            <a href="./events.html">Events</a>
            <ul class="dropdown-content">
              <li>
                <a href="./events.html#upcoming-events">Upcoming Events</a>
              </li>
              <li><a href="./events.html#latest-events">Latest Events</a></li>
              <li><a href="./events.html#past-events">Past Events</a></li>
            </ul>
          </li>

          <li class="nav-list"><a href="./blogs.html">Blogs</a></li>
          <button id="join_us">Join Us</button>
        </ul>
      </nav>
    </header>
    <!-- NAVIGATION BAR ENDS HERE!!!! -->
    <!-- Main Body  -->

    <!-- Hero Section -->

    <div class="hero-section">
      <div class="text-hero">
        <h3 class="h-hero">
          The Next Big Thing comes from Africa, and guess what? Algorithmia SE
          🌍 is building it.
        </h3>
        <p class="p-hero">
          Dive into the world of Algorithmia SE 🌍 by exploring our open-source
          projects, where collaborative software engineering knows no bounds.
        </p>
      </div>
      <div class="image-hero">
        <img src="images/projects/open_source.png" alt="Card Image" />
      </div>
    </div>

    <!-- Featured Projects Section  -->

    <div class="projects">
      <h3 class>Featured Projects</h3>
      <div class="card_container" id="featured-projects">
        <i class="fa-solid fa-circle-chevron-left fa-2xl"></i>
        <div class="card">
          <div>
            <img
              src="images/projects/demo_calculator.jpg"
              alt="cmd calculator"
            />
            <div>
              <p class="card_title">
                <b>Demo Project</b>
              </p>
              <p class="card_info">
                Our first project, aimed at understanding <br />
                and implementing collaboration skills, as <br />
                a community was a success! <br />
                Want to contribute?
              </p>
              <div>
                <p class="button"><a href="#">Learn more</a></p>
              </div>
            </div>
          </div>
        </div>
        <div class="card">
          <div>
            <img src="images/projects/website.png" alt="featured project" />
            <div>
              <p class="card_title">
                <b>Static Website (GitHub)</b>
              </p>
              <p class="card_info">
                We built, together, a dynamic static website, hosted on GitHub
                and it's the one you're using now! Give us a review. Contact Us?
                Contribute to the project!
              </p>
              <div>
                <p class="button">
                  <a
                    href="https://github.com/ALX-SE-Algorithmia/alx-se-algorithmia.github.io/"
                    target="_blank"
                    >View Project</a
                  >
                </p>
              </div>
            </div>
          </div>
        </div>
        <div class="card">
          <div>
            <img src="images/projects/algosciate.jpg" alt="algosciate" />
            <div>
              <p class="card_title"><b>AlgoSciate 🌍</b></p>
              <p class="card_info">
                An app to be built by Algorithmia SE 🌍 designed to foster
                student connections and learning, featuring live discussions,
                expert interactions, and interactive Q&A sessions.
              </p>
              <div>
                <p class="button">
                  <a href="https://forms.gle/ojo9Yi3xM8mbaZ4HA" target="_blank"
                    >Join Us?</a
                  >
                </p>
              </div>
            </div>
          </div>
        </div>
        <div class="card">
          <div>
            <img src="images/projects/hackathon.jpg" alt="hackathon" />
            <div>
              <p class="card_title">
                <b>AlgoRealm 🌍</b>
              </p>
              <p class="card_info">
                AlgoRealm - Algorithmia SE's Hackathon (Coming Soon)
              </p>
              <div>
                <p class="button">
                  <a href="https://forms.gle/ojo9Yi3xM8mbaZ4HA" target="_blank"
                    >Watch Out!</a
                  >
                </p>
              </div>
            </div>
          </div>
        </div>
        <i class="fa-solid fa-circle-chevron-right fa-2xl"></i>
      </div>
    </div>

    <!-- Recent Projects Section  -->
    <div class="projects">
      <h3><span>Recent Projects</span></h3>
      <div class="card_container" id="recent-projects">
        <i class="fa-solid fa-circle-chevron-left fa-2xl"></i>
        <div class="card">
          <div>
            <img src="images/projects/website.png" alt="Recent Project" />
            <div>
              <p class="card_title"><b>Static Web</b></p>
              <p class="card_info">
                Hosted with GitHub Pages, we built the website you're currently
                using! Want a peek?
              </p>
              <div>
                <br />
                <p class="button">
                  <a
                    href="https://github.com/ALX-SE-Algorithmia/alx-se-algorithmia.github.io/"
                    target="_blank"
                    >Check it out</a
                  >
                </p>
              </div>
            </div>
          </div>
        </div>
        <div class="card">
          <div>
            <img
              src="images/projects/demo_calculator.jpg"
              alt="Recent Project"
            />
            <div>
              <p class="card_title"><b>Demo Project</b></p>
              <p class="card_info">
                A command line calculator, handling basic operations, and
                dealing with user input, and output. It was built in C, Python,
                and JS, and implemented in different ways!
              </p>
              <div>
                <p class="button">
                  <a
                    href="https://github.com/ALX-SE-Algorithmia/Demo-Project"
                    target="_blank"
                    >Check it out</a
                  >
                </p>
              </div>
            </div>
          </div>
        </div>
        <div class="card">
          <div>
            <img
              src="images/projects/community_hangout.jpg"
              alt="Recent Project"
            />
            <div>
              <p class="card_title"><b>Our Consortium</b></p>
              <p class="card_info">
                Weekly meetings are held to discuss current projects, and
                strengthen our community bonds.
              </p>
              <div>
                <p class="button">
                  <a href="https://forms.gle/ojo9Yi3xM8mbaZ4HA" target="_blank"
                    >Join Us!</a
                  >
                </p>
              </div>
            </div>
          </div>
        </div>
        <div class="card">
          <div>
            <img src="images/projects/ai.jpg" alt="Recent Project" />
            <div>
              <p class="card_title"><b>The Trend of AI</b></p>
              <p class="card_info">
                Learning the basics, advantages, disadvantages, ethics,
                and dangers of AI, we are planning to do something big,
                and revolutionary too with AI 🧘‍♂️. Want to be a part of it?
              </p>
              <div>
                <p class="button"><a href="https://forms.gle/ojo9Yi3xM8mbaZ4HA" target="_blank">View Project</a></p>
              </div>
            </div>
          </div>
        </div>
        <i class="fa-solid fa-circle-chevron-right fa-2xl"></i>
      </div>
    </div>

    <!-- Upcoming Projects Section -->
    <div class="projects">
      <h3><span>Upcoming Projects</span></h3>
      <div class="card_container" id="upcoming-projects">
        <i class="fa-solid fa-circle-chevron-left fa-2xl"></i>
        <div class="card">
          <div>
            <img src="images/projects/hackathon.jpg" alt="hackathon" />
            <div>
              <p class="card_title">
                <b>AlgoRealm 🌍</b>
              </p>
              <p class="card_info">
                Immersing creativity, teamwork, and rapid development, with us,
                we are honing our coding and design skills, to compete for a
                prize!
              </p>
              <div>
                <p class="button">
                  <a href="https://forms.gle/ojo9Yi3xM8mbaZ4HA" target="_blank"
                    >Ready?</a
                  >
                </p>
              </div>
            </div>
          </div>
        </div>
        <div class="card">
          <div>
            <img src="images/projects/meetings.jpg" alt="algosciate" />
            <div>
              <p class="card_title"><b>Algosciate 🌍</b></p>
              <p class="card_info">
                A social networking app, built with African students in mind.
                Coming soon...
              </p>
              <div>
                <p class="button">
                  <a href="https://forms.gle/ojo9Yi3xM8mbaZ4HA" target="_blank"
                    >Build With Us?</a
                  >
                </p>
              </div>
            </div>
          </div>
        </div>
        <div class="card">
          <div>
            <img src="images/projects/talks.jpg" alt="tech talk" />
            <div>
              <p class="card_title"><b>Tech Talks</b></p>
              <p class="card_info">
                On Twitter, and other social media, we will be hosting tech
                talks on pratical ways to solve Africa's biggest problems,
                surviving in the ALX SE program, tackling imposter syndrome, and
                much more!
              </p>
              <div>
                <p class="button"><a href="https://forms.gle/ojo9Yi3xM8mbaZ4HA" target="_blank">Take Part?</a></p>
              </div>
            </div>
          </div>
        </div>
        <div class="card">
          <div>
            <img src="images/projects/future.jpg" alt="hackathon" />
            <div>
              <p class="card_title"><b>Hackathons</b></p>
              <p class="card_info">
                In this upcoming period, we will be <br />
                organizing a prestigious hackathon event, <br />
                and comprehensive information will be <br />
                disseminated through this platform.
              </p>
              <div>
                <p class="button"><a href="https://forms.gle/ojo9Yi3xM8mbaZ4HA" target="_blank">Take Part?</a></p>
              </div>
            </div>
          </div>
        </div>
        <i class="fa-solid fa-circle-chevron-right fa-2xl"></i>
      </div>
    </div>

    <div class="scrolltotop" onclick="scrolltop()">
      <i class="fa fa-arrow-up"></i>
    </div>

    <!-- footer -->
    <footer>
      <!--footer style="position: fixed;bottom: 0;"-->
      <div class="top">
        <div class="left">
          <img
            src="./images/website-logos/logo.svg"
            width="50px"
            alt="Algorithmia SE logo"
          />
          <p>
            Algorithmia SE 🌍 represents an inspiring convergence of innovation,
            collaboration, and transformation impact. It illuminates the path
            for ALX Software Engineering students, and the wider tech community,
            fostering a culture of continuous learning, problem-solving, and
            positive change.
          </p>
          <br />
          <p><a href="tel:+2348139720259">+234-81-3972-0259</a></p>
          <p>
            <a href="mailto:algorithmiasecollaborators@gmail.com"
              >algorithmiasecollaborators@gmail.com</a
            >
          </p>
        </div>

        <div class="right">
          <h3>Quick Links</h3>
          <div class="links">
            <ul style="list-style-type: none">
              <li><a href="./index.html">Home</a></li>
              <li><a href="./events.html">Events</a></li>
              <li><a href="./index.html#Contact_us">Contact Us</a></li>
            </ul>

            <ul style="list-style-type: none">
              <li><a href="./index.html#About_us">About Us</a></li>
              <li><a href="./projects.html">Projects</a></li>
              <li><a href="./blogs.html">Blogs</a></li>
            </ul>
          </div>
        </div>
      </div>

      <hr />

      <div class="under">
        <ul style="list-style: none">
          <li>
            <a href="https://github.com/ALX-SE-Algorithmia" target="_blank">
              <i class="uil uil-github"></i>
            </a>
            <a href="https://twitter.com/Algorithmia_SE" target="_blank">
              <i class="uil uil-twitter"></i>
            </a>
            <a
              href="https://www.linkedin.com/in/algorithmia-se-0743b9283/"
              target="_blank"
            >
              <i class="uil uil-linkedin"></i>
            </a>
            <a href="https://discord.gg/xgEsBQBRp3" target="_blank">
              <i class="uil uil-discord"></i>
            </a>
            <a
              href="https://whatsapp.com/channel/0029Va5SC3G9sBIFUjjzNl1c"
              target="_blank"
            >
              <i class="uil uil-whatsapp"></i>
            </a>
            <a
              href="mailto:algorithmiasecollaborators@gmail.com"
              target="_blank"
            >
              <i class="uil uil-envelope"></i>
            </a>
            <a href="https://www.youtube.com/@Algorithmia_SE" target="_blank">
              <i class="uil uil-youtube"></i>
            </a>
          </li>
        </ul>
        <div class="footer_product">
          A product of
          <img
            src="./images/website-logos/logo.svg"
            width="30px"
            height="auto"
            alt="Algorithmia SE logo"
          />
        </div>
        <div class="copyright">
          &copy; 2023 Algorithmia SE 🌍. All Rights Reserved
        </div>
      </div>
    </footer>

    <!-- Text Section -->

    <!-- JavaScript -->
    <script>
      // menu responsiveness
      let menu = document.getElementById("menu-bar");
      let navbar = document.querySelector(".nav-container");

      window.onscroll = function () {
        menu.classList.remove("fa-times");
        navbar.classList.remove("active");
      };

      menu.addEventListener("click", function () {
        menu.classList.toggle("fa-times");
        navbar.classList.toggle("active");
      });
      // menu responsiveness ends

      // Card visibility
      function scrolltop() {
        window.scrollTo(0, 0);
      }

      function updateCardVisibility(cardContainerId) {
        // Get references to the card container and the cards
        const cardContainer = document.getElementById(cardContainerId);
        const cards = cardContainer.querySelectorAll(".card");
        const leftArrow = cardContainer.querySelector(
          ".fa-circle-chevron-left"
        );
        const rightArrow = cardContainer.querySelector(
          ".fa-circle-chevron-right"
        );

        // Define the current card index
        let currentCardIndex = 0;

        // Event listener for left arrow click
        leftArrow.addEventListener("click", () => {
          if (currentCardIndex > 0) {
            currentCardIndex--;
            updateCardVisibility();
          }
        });

        // Event listener for right arrow click
        rightArrow.addEventListener("click", () => {
          if (currentCardIndex < cards.length - 3) {
            currentCardIndex++;
            updateCardVisibility();
          }
        });

        // Function to update the card visibility
        function updateCardVisibility() {
          cards.forEach((card, index) => {
            if (index >= currentCardIndex && index < currentCardIndex + 3) {
              card.style.display = "block";
            } else {
              card.style.display = "none";
            }
          });
        }

        // Initial card visibility setup
        updateCardVisibility();
      }

      // Call the function for each section
      updateCardVisibility("featured-projects");
      updateCardVisibility("recent-projects");
      updateCardVisibility("upcoming-projects");

      // Intersection observer for the navbar
      const header = document.querySelector("header");
      const section = document.querySelector(".hero-section");
      const sectionOptions = {
        rootMargin: "-500px 0px 0px 0px",
      };

      const sectionObserver = new IntersectionObserver(function (
        entries,
        sectionObserver
      ) {
        entries.forEach((entry) => {
          if (!entry.isIntersecting) {
            header.classList.add("nav-scrolled");
          } else {
            header.classList.remove("nav-scrolled");
          }
        });
      },
      sectionOptions);

      sectionObserver.observe(section);

      // Join us link
      var button = document.getElementById("join_us");

      // Add a click event listener to the button
      button.addEventListener("click", function () {
        var targetURL = "https://forms.gle/ojo9Yi3xM8mbaZ4HA";

        window.location.href = targetURL;
      });
    </script>
  </body>
</html>