index.html

<!-- Declare document type as HTML -->
<!DOCTYPE html>
<!-- Start HTML document -->
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <!-- Declare compatibility with Internet Explorer -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <!-- Declare viewport configuration -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <!-- Set title of the webpage -->
    <title>Nasir's Portfolio</title>
    <!-- Link to external stylesheet -->
    <link rel="stylesheet" href="css/styles.css" />
    <!-- Include Google Fonts link -->
    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link
      href="https://fonts.googleapis.com/css2?family=Galada&family=Poppins:wght@400;500;700&display=swap"
      rel="stylesheet"
    />
  </head>
  <body>
    <!-- custom cursors  -->
    <div class="cursor-1"></div>
    <div class="cursor-2"></div>
    <!-- Start header section -->
    <header class="flex-row justify-center align-center">
      <!-- Start container -->
      <div class="container flex-row align-center">
        <!-- Start logo section -->
        <div class="logo-wrapper flex-row justify-center align-center">
          <a href="#" class="logo">
            <i class="fa-solid fa-circle-play fa-spin"></i>
            Na<i class="fa-solid fa-strikethrough"></i>ir Mahmood
          </a>
        </div>
        <!-- End logo section -->
        <!-- Start menu section -->
        <nav>
          <ul>
            <li><a href="#portfolio">portfolio</a></li>
            <li><a href="#about">about</a></li>
            <li><a href="#contact">contact</a></li>
          </ul>

          <div id="menu-btn" class="fas fa-bars"></div>
        </nav>
        <!-- End menu section -->
      </div>
      <!-- End container -->
    </header>
    <!-- End header section -->
    <!-- Start main section -->
    <main>
      <!-- theme toggler start  -->
      <div id="theme-toggler" class="fas fa-moon"></div>
      <!-- theme toggler end -->
      <!-- Start hero area section -->
      <section class="hero-area flex-row justify-center">
        <!-- Start container -->
        <div class="container flex-row justify-center align-center">
          <!-- Start hero main content section -->
          <div class="hero-main-content">
            <h1>
              I'm Nasir.<br />
              <span class="typing-text"></span>
            </h1>
            <p>
              I'm a passionate Full-stack developer on a mission to bring your
              dreams to life through code! Whether it's crafting a cutting-edge
              project, adding an exciting new feature, or crafting a stunning
              website, I've got the skills and expertise to make it happen. Take
              a glimpse into my portfolio and journey to see how I've turned
              ideas into reality. If you're ready to turn your vision into a
              digital masterpiece, reach out to me without hesitation. Let's
              embark on this exciting coding adventure together!
            </p>
          </div>
          <!-- End hero main content section -->
          <!-- Start hero social section -->
          <div class="hero-social">
            <p>Let's connect</p>
            <ul class="flex-row">
              <li>
                <a
                  href="https://twitter.com/NasirMa35888225"
                  target="_blank"
                  rel="noopener noreferrer"
                >
                  <i class="fa-brands fa-x-twitter"></i>
                </a>
              </li>
              <li>
                <a
                  href="https://www.linkedin.com/in/nasirmahd/"
                  target="_blank"
                  rel="noopener noreferrer"
                >
                  <i class="fa-brands fa-linkedin-in"></i>
                </a>
              </li>
              <li>
                <a
                  href="https://www.instagram.com/nasir_khan294/"
                  target="_blank"
                  rel="noopener noreferrer"
                >
                  <i class="fab fa-instagram"></i>
                </a>
              </li>
              <li>
                <a
                  href="https://github.com/Nasirkhan294/"
                  target="_blank"
                  rel="noopener noreferrer"
                >
                  <i class="fa-brands fa-github"></i>
                </a>
              </li>
              <li>
                <a
                  href="https://www.facebook.com/NASIRATTARY"
                  target="_blank"
                  rel="noopener noreferrer"
                >
                  <i class="fab fa-facebook-f"></i>
                </a>
              </li>
            </ul>
          </div>
          <!-- End hero social section -->
        </div>
        <!-- End container -->
      </section>
      <!-- End hero area section -->
      <!-- Start portfolio section -->
      <section id="portfolio" class="flex-row justify-center">
        <div class="container">
          <div class="popup-card">
            <div class="popup-header">
              <div class="fas fa-times" aria-hidden="true"></div>
              <div>
                <h2 class="popup-title"></h2>
                <ul class="popup-list-items">
                  <li></li>
                  <li></li>
                </ul>
              </div>
            </div>
            <div class="popup-body-thumbnail">
              <img src="#" alt="#" />
            </div>
            <div class="popup-body-content">
              <p class="popup-description"></p>
              <div class="popup-footer flex-column">
                <ul class="popup-languages">
                  <li></li>
                  <li></li>
                  <li></li>
                </ul>
                <div class="popup-btn-wrapper">
                  <a
                    href="#"
                    target="_blank"
                    rel="noopener noreferrer"
                    class="btn popup-btn"
                  >
                    See Live
                    <i class="fa-solid fa-arrow-up-right-from-square"></i>
                  </a>
                  <a
                    href="#"
                    target="_blank"
                    rel="noopener noreferrer"
                    class="btn popup-btn"
                  >
                    See Source <i class="fa-brands fa-github"></i>
                  </a>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>
      <!-- End portfolio section -->
      <!-- Start About section -->
      <section id="about" class="flex-row justify-center">
        <div class="container grid column">
          <div class="about-content">
            <div class="about-main-content">
              <h2>About Myself</h2>
              <p>
                I'm Nasir Mahmood, a driven Full-stack developer, dedicated to
                bringing your ideas to life through code! Browse my work and
                experience to see what I can do. If you have a project in mind,
                don't hesitate to reach out—let's turn your vision into reality!
              </p>
            </div>
            <!-- End hero main content section -->
            <!-- Start hero social section -->
            <div class="about-social">
              <p>Let's connect</p>
              <ul class="flex-row">
                <li>
                  <a
                    href="https://twitter.com/NasirMa35888225"
                    target="_blank"
                    rel="noopener noreferrer"
                  >
                    <i class="fa-brands fa-x-twitter"></i>
                  </a>
                </li>
                <li>
                  <a
                    href="https://www.linkedin.com/in/nasirmahd/"
                    target="_blank"
                    rel="noopener noreferrer"
                  >
                    <i class="fa-brands fa-linkedin-in"></i>
                  </a>
                </li>
                <li>
                  <a
                    href="https://www.instagram.com/nasir_khan294/"
                    target="_blank"
                    rel="noopener noreferrer"
                  >
                    <i class="fab fa-instagram"></i>
                  </a>
                </li>
                <li>
                  <a
                    href="https://github.com/Nasirkhan294/"
                    target="_blank"
                    rel="noopener noreferrer"
                  >
                    <i class="fa-brands fa-github"></i>
                  </a>
                </li>
                <li>
                  <a
                    href="https://www.facebook.com/NASIRATTARY"
                    target="_blank"
                    rel="noopener noreferrer"
                  >
                    <i class="fab fa-facebook-f"></i>
                  </a>
                </li>
              </ul>
              <a
                href="https://drive.google.com/file/d/1OhS43hlnNnj97aOfUcCLxS5NsrffE0-P/view?usp=share_link"
                target="_blank"
                class="btn"
                >Get my resume</a
              >
            </div>
          </div>
          <div class="about-thumbnail">
            <img src="images/me.png" alt="Nasir's Photo" />
          </div>
        </div>
      </section>
      <!--- End About section --->
      <!-- Start contact section -->
      <section id="contact" class="flex-row justify-center align-center">
        <div class="container grid column">
          <div>
            <h2>Contact me</h2>
            <p>
              If you have an application you are interested in developing, a
              feature that you need built or a project that needs coding. I’d
              love to help with it!
            </p>
          </div>
          <form
            action="https://formspree.io/f/myyanyjz"
            method="POST"
            class="flex-column align-center"
            id="contact-form"
          >
            <input
              type="text"
              maxlength="30"
              name="name"
              placeholder="&nbsp;&nbsp;Full name"
              class="contact-input"
              required
            />
            <input
              type="email"
              name="email"
              placeholder="&nbsp;&nbsp;Example@gmail.com"
              class="contact-input"
              required
            />
            <textarea
              name="message"
              id="textarea"
              cols="1"
              rows="6"
              placeholder="&nbsp;Write your message here..."
              class="contact-input"
              maxlength="500"
              required
            ></textarea>
            <input type="submit" class="btn" value="Get in touch" />
            <span id="error-msg"> Email should be in lowercase </span>
          </form>
        </div>
      </section>
      <!-- End contact section -->
    </main>
    <!-- End main section -->

    <!-- Include Fontawesome icons kit -->
    <script
      src="https://kit.fontawesome.com/7f35089b8a.js"
      crossorigin="anonymous"
    ></script>
    <!-- JavaScript typed Link -->
    <script src="js/jquery.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/typed.js@2.0.11"></script>
    <!-- JavaScript Swiper link -->
    <script src="https://unpkg.com/swiper@7/swiper-bundle.min.js"></script>

    <script>
      var typed = new Typed(".typing-text", {
        strings: [
          "Welcome to my portfolio",
          "Glad to see you here.",
          "Let's make the web better together.",
          "Explore my work and connect!",
        ],
        typeSpeed: 80,
        loop: true,
      });
    </script>
    <!-- JavaScript file -->
    <script src="script.js"></script>
  </body>
  <!-- End HTML document -->
</html>