index.html

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <!-- Mobile responsive view -->
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <!-- All of Bootstrap 5.1 -->
        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
        <!-- Our CSS -->        
        <link rel="stylesheet" href="index.css"/>
        <!-- Bootstrap Icons -->
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.7.2/font/bootstrap-icons.css">
        <!-- Our JS and logo -->
        <script src="index.js"></script>
        <link rel="icon" href="assets/gt-webdev-logo.png">
        <!-- Replace this with your name! -->
        <title>Portfolio Website Example</title>
    </head>
    <body>
        <div id="root" class="bg-light">
            <nav class="navbar navbar-expand-md bg-dark navbar-dark sticky-top">
                <div class="container-fluid">
                    <a class="navbar-brand" onclick="scrollToElement()" data-target="root">
                        <img  src="assets/transparent_GTWD.png" alt="GT WebDev Logo" height="24" width="40" class="d-inline-block align-text-bottom"></img>
                        GT WebDev
                    </a>
                    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                        <span class="navbar-toggler-icon"></span>
                    </button>
                    <div class="collapse navbar-collapse" id="navbarSupportedContent">
                        <ul class="navbar-nav me-auto mb-2 mb-lg-0">
                            <li class="nav-item">
                                <a onclick="scrollToElement()" data-target="about" class="nav-link">
                                    About
                                </a>
                            </li>
                            <li class="nav-item">
                                <a onclick="scrollToElement()" class="nav-link" data-target="experience">
                                    Experience
                                </a>
                            </li>
                            <li class="nav-item">
                                <a onclick="scrollToElement()" class="nav-link" data-target="projects">
                                    Projects
                                </a>
                            </li>
                            <li class="nav-item">
                                <a onclick="scrollToElement()" class="nav-link" data-target="awards">
                                    Awards
                                </a>
                            </li>
                        </ul>
                    </div>
                </div>
            </nav>
            <div id="home">
                <div>
                    <!-- Replace this with your name! -->
                    <h1 class="title">GEORGIA TECH WEB DEVELOPERS</h1>
                </div>
            </div>
            <div id="about">
                <!-- All about you! (Replace this with "About Me" or "Bio" or anything similar) -->
                <h2>About Us</h2>
                <p>
                    We are Georgia Tech Web Developers, or GT WebDev, a student organization based on the campus of the Georgia Institute of Technology that promotes web development education through the use of hands-on projects, workshops, and asynchronous video tutorials. We learn about many different web technologies ranging from the basics of HTML and CSS to MongoDB and Node.js.
                </p>
                <!-- Just some more sample content -->
                <h3>Our Team of Officers</h3>
                <ul>
                    <li>
                        Steven Buckley: Co-President
                    </li>
                    <li>
                        Talia Tian: Co-President
                    </li>
                    <li>
                        Deepak Ramalingam: Vice-President
                    </li>
                    <li>
                        Jinwoo Park: Director of Sponsorships and Outreach
                    </li>
                    <li>
                        Vignesh Sreedhar: Project Manager
                    </li>
                    <li>
                        Jakob Bjorner: Project Manager
                    </li>
                    <li>
                        Jacob Amin: Project Manager
                    </li>
                    <li>
                        Sanjit Pingili: Website Administrator
                    </li>
                    <li>
                        Sharon Kim: Director of Social Media
                    </li>
                    <li>
                        Varun Patel: Treasurer
                    </li>
                </ul>
            </div>
            <div id="experience">
                <!-- Talk about your experiences. You could list them if you wanted to. -->
                <h2>Our Experience</h2>
                <p>
                    While as a whole, we haven't had any work experience, but our officers have interned at companies like Amazon and TikTok! Some of our past officers have taken up jobs at companies like Slack and Cypress! Others are even cofounders of their own startup!
                </p>
                <div id="logo-panel">
                    <img src="assets/slack_logo.png">
                    <img src="assets/amazon_logo.PNG">
                    <img src="assets/808_logo.png">
                    <img src="assets/tik-tok_logo.png">
                </div>
            </div>
            <div id="projects">
                <!-- Highlight any projects you would like others to see here! -->
                <h2>Our Projects</h2>
                <p>
                    A new pivot away from our old model of weekly tutorials was the inclusion of project teams. Officers would propose different ideas that would then be selected from to become the semester's hands-on element. These projects are designed such that anyone can join, though they have varying skill levels. Last semester, we had apps such as a protest information website, crypto currency dashboards, and even a Youtube to Spotify playlist converter!
                </p>
                <h3>Spring 2022</h3>
                <p>
                    As of the start of the current semester, we have a new host of interesting projects for our members to take up! These are, as follows:
                </p>
                <ul>
                    <li>A COVID-19 Dashboard</li>
                    <li>A live video chatting app</li>
                    <li>An essay writing dashboard powered by GPT-3</li>
                    <li>A continuation of the Youtube-Spotify playlist application</li>
                    <li>A continutation of the protest information site</li>
                    <li>Web-based board games</li>
                    <li>A video game clip sharing site</li>
                </ul>
            </div>
            <div id="awards">
                <!-- Got something you want to show off? Do it here! -->
                <h2>Awards and Achievements</h2>
                <p>
                    While our members and officers have, sadly, as an organization, we have nothing to share.
                </p>
            </div>
            <div id="footer" class="bg-dark">
                <!-- Contact Info and other last notes -->
                <h6>Contact Us!</h6>
                <div class="contact">
                    <a href="https://discord.gg/BbykvvQmGz">
                        <i class="bi bi-discord"></i>
                    </a>
                    <a href="mailto:gtwebdevclub@gmail.com">
                        <i class="bi bi-envelope-fill"></i>
                    </a>
                    <a href="https://www.facebook.com/GtWebdev/">
                        <i class="bi bi-facebook"></i>
                    </a>
                </div>
                <div class="copyright"></div>
            </div>
        </div>
    </body>
</html>