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

      <!--=============== FAVICON ===============-->
      <link rel="shortcut icon" href="assets/img/favicon.png" type="image/x-icon">

      <!--=============== REMIXICONS ===============-->
      <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/remixicon/4.2.0/remixicon.css">

      <!--=============== CSS ===============-->
      <link rel="stylesheet" href="assets/css/styles.css">

      <title>Nahidh Naseem</title>
   </head>
   <body>
      <!--==================== NAV ====================-->
      <nav class="nav">
         <ul class="nav__list">
            <li>
               <a href="#home" title="Home" class="nav__link active-link">
                  <i class="ri-home-line"></i>
               </a>
            </li>
            <li>
               <a href="#projects" title="Projects" class="nav__link active-link">
                  <i class="ri-folder-line"></i>
               </a>
            </li>
            <li>
               <a href="#services" title="Services" class="nav__link active-link">
                  <i class="ri-file-edit-line"></i>
               </a>
            </li>
            <li>
               <a href="#experience" title="Experience" class="nav__link active-link">
                  <i class="ri-honour-line"></i>
               </a>
            </li>
            <li>
               <a href="#contact" title="Contact" class="nav__link active-link">
                  <i class="ri-send-plane-line"></i>
               </a>
            </li>
         </ul>
      </nav>

      <!--==================== MAIN ====================-->
      <main class="main">
         <!--==================== HOME ====================-->
         <section class="home section" id="home">
            <div class="home__container container grid">
               <!--===== PERFIL =====-->
               <div class="perfil">
                  <img src="assets/img/home-perfil.png" alt="image" class="perfil__img">

                  <div class="perfil__data">
                     <h1 class="perfil__name">Nahidh <br> Naseem</h1>

                     <div class="perfil__buttons">
                        <a href="#projects" class="button">Projects</a>
                        <a href="#services" class="button button__black">Services</a>
                     </div>
                  </div>
               </div>

               <!--===== INFO =====-->
               <div class="info">
                  <div class="info__data">
                      <div class="info__circle"></div>
                      <h1 class="info__name">Nahidh Naseem</h1>
                  </div>
              
                  <div class="info__image">
                      <img src="assets/img/about-perfil.png" alt="img" class="info__img">
                  </div>
                  
                  <p class="info__description">Passionate about creating innovations that are not just functional, but also visually engaging. Coding by day, studying by night!</p>
              
                  <a href="assets/pdf/Nahidh CV.pdf" download_target="_blank" class="button button__black">Download CV</a>
              </div>              

               <!--===== ABOUT =====-->
               <div class="about">
                  <h3 class="about__name">Nahidh Naseem - <b>Full - Stack Developer</b></h3>
              
                  <p class="about__description">Located in Sri Lanka, I'm a student at Trinity College Kandy, passionate about web development and design, I’m here to create, innovate, and occasionally make things work on the first try!</p>
              
                  <div class="about__social">
                      <a href="www.linkedin.com/in/nahidh-naseem-419916228/" target="_blank" class="about__link"><i class="ri-linkedin-box-line"></i></a>
                      <a href="www.github.com/Nahidh96" target="_blank" class="about__link"><i class="ri-github-line"></i></a>
                      <a href="mailto:mnmnahidh@gmail.com" target="_blank" class="about__link"><i class="ri-mail-line"></i></a>
                  </div>
              
                  <div class="about__image">
                      <img src="assets/img/about-perfil.png" alt="img" class="about__img">
                  </div>
              
                  <p class="about__note">Currently balancing coding and school life, so far, no bugs in the system!</p>
              
                  <a href="#contact" class="button">Contact Me</a>
              </div>                  


               <!--===== SKILLS =====-->
               <div class="skills">
                  <h2 class="skills__title">Skills</h2>

                  <div class="skills__items">
                     <img src="assets/img/skills-html.svg" alt="img" class="skills__item">
                     <img src="assets/img/skills-css.svg" alt="img" class="skills__item">
                     <img src="assets/img/skills-javascript.svg" alt="img" class="skills__item">
                     <img src="assets/img/skills-react.svg" alt="img" class="skills__item">
                     <img src="assets/img/skills-git.svg" alt="img" class="skills__item">
                     <img src="assets/img/skills-github.svg" alt="img" class="skills__item">
                     <img src="assets/img/skills-node.svg" alt="img" class="skills__item">
                     <img src="assets/img/skills-python.svg" alt="img" class="skills__item">
                     <img src="assets/img/skills-electronics.svg" alt="img" class="skills__item">
                     <img src="assets/img/skills-sql.svg" alt="img" class="skills__item">
                     <img src="assets/img/skills-laravel.svg" alt="img" class="skills__item">
                     <img src="assets/img/skills-c.svg" alt="img" class="skills__item">
                     <img src="assets/img/skills-c++.svg" alt="img" class="skills__item">
                  </div>

                  <p class="skills__description">Each icon represents hours of coffee, debugging. But hey, it’s worth it!</p>
               </div>
               
            </div>
         </section>


         <!--==================== PROJECTS ====================-->
         <section class="projects section" id="projects">
            <h2 class="section__title">RECENT PROJECTS</h2>
         
            <div class="projects__container container grid">
                <!-- Flight Computer for Model Rockets -->
                <article class="projects__card">
                    <a href="#" target="_blank" class="projects__image">
                        <img src="assets/img/projects-6.jpg" alt="img" class="projects__img">
                    </a>
                    <div class="projects__data">
                        <h3 class="projects__name">Flight Computer for Model Rockets</h3>
                        <p class="projects__description">Developed an advanced flight computer system to control and monitor rocket systems during flight. It's like NASA, but cooler.</p>
                        <div class="projects__skills">
                            <img src="assets/img/skills-react.svg" alt="img" class="projects__skill">
                            <img src="assets/img/skills-python.svg" alt="img" class="projects__skill">
                            <img src="assets/img/skills-electronics.svg" alt="img" class="projects__skill">
                        </div>
                        <a href="#" target="_blank" class="projects__button">
                            <i class="ri-link"></i>
                            <span>Visit Project</span>
                        </a>
                    </div>
                </article>
                 
                <!-- Hydrogen Reactor Prototype -->
                <article class="projects__card">
                    <a href="#" target="_blank" class="projects__image">
                        <img src="assets/img/projects-2.jpg" alt="img" class="projects__img">
                    </a>
                    <div class="projects__data">
                        <h3 class="projects__name">Arc Reactor Prototype & Jarvis AI</h3>
                        <p class="projects__description">Designed a small-scale hydrogen reactor for energy production. Basically, I'm one step away from being Tony Stark.</p>
                        <div class="projects__skills">
                            <img src="assets/img/skills-electronics.svg" alt="img" class="projects__skill">
                            <img src="assets/img/skills-python.svg" alt="img" class="projects__skill">
                            <img src="assets/img/skills-node.svg" alt="img" class="projects__skill">
                        </div>
                        <a href="#" target="_blank" class="projects__button">
                            <i class="ri-link"></i>
                            <span>Visit Project</span>
                        </a>
                    </div>
                </article>
                 
                <!-- Website for Base Hospital Gampola -->
                <article class="projects__card">
                  <a href="#" target="_blank" class="projects__image">
                      <img src="assets/img/projects-3.jpg" alt="img" class="projects__img">
                  </a>
                  <div class="projects__data">
                      <h3 class="projects__name">Agriconnect & StudyGuide Platform</h3>
                      <p class="projects__description">Created a combined platform for Agriconnect and StudyGuide. Agriconnect helps farmers with crop management and market connections, while StudyGuide equips students with personalized resources for exam prep, notes, and quizzes. Efficiency meets education!</p>
                      <div class="projects__skills">
                          <img src="assets/img/skills-html.svg" alt="img" class="projects__skill">
                          <img src="assets/img/skills-css.svg" alt="img" class="projects__skill">
                          <img src="assets/img/skills-php.svg" alt="img" class="projects__skill">
                          <img src="assets/img/skills-node.svg" alt="img" class="projects__skill">
                      </div>
                      <a href="#" target="_blank" class="projects__button">
                          <i class="ri-link"></i>
                          <span>Visit Project</span>
                      </a>
                  </div>
              </article>              
                 
                <!-- E-commerce Website for Local Business -->
                <article class="projects__card">
                    <a href="#" target="_blank" class="projects__image">
                        <img src="assets/img/projects-5.jpg" alt="img" class="projects__img">
                    </a>
                    <div class="projects__data">
                        <h3 class="projects__name">E-commerce Websites for Local Business</h3>
                        <p class="projects__description">Created a fully functional e-commerce site for a local business. Now, shopping online is just as easy as buying coffee.</p>
                        <div class="projects__skills">
                            <img src="assets/img/skills-cloud.svg" alt="img" class="projects__skill">
                            <img src="assets/img/skills-sql.svg" alt="img" class="projects__skill">
                            <img src="assets/img/skills-html.svg" alt="img" class="projects__skill">
                            <img src="assets/img/skills-css.svg" alt="img" class="projects__skill">
                        </div>
                        <a href="#" target="_blank" class="projects__button">
                            <i class="ri-link"></i>
                            <span>Visit Project</span>
                        </a>
                    </div>
                </article>

                 <!-- Rocket Telemetry Dashboard -->
                <article class="projects__card">
                   <a href="#" target="_blank" class="projects__image">
                       <img src="assets/img/projects-1.jpg" alt="img" class="projects__img">
                   </a>
                   <div class="projects__data">
                       <h3 class="projects__name">Rocket Telemetry Dashboard</h3>
                       <p class="projects__description">Created a real-time telemetry dashboard for rockets, tracking everything from altitude to gyroscopic data. Bringing space-age tech to the ground level.</p>
                       <div class="projects__skills">
                           <img src="assets/img/skills-html.svg" alt="img" class="projects__skill">
                           <img src="assets/img/skills-css.svg" alt="img" class="projects__skill">
                           <img src="assets/img/skills-javascript.svg" alt="img" class="projects__skill">
                           <img src="assets/img/skills-python.svg" alt="img" class="projects__skill">
                       </div>
                       <a href="#" target="_blank" class="projects__button">
                           <i class="ri-link"></i>
                           <span>Visit Project</span>
                       </a>
                   </div>
               </article>

               <article class="projects__card">
                <a href="#" target="_blank" class="projects__image">
                    <img src="assets/img/projects-7.jpg" alt="Smart Healthcare Management System" class="projects__img">
                </a>
                <div class="projects__data">
                    <h3 class="projects__name">Smart Healthcare Management System</h3>
                    <p class="projects__description">Developed a responsive website to streamline patient-doctor interactions, including appointment scheduling, real-time health tracking, and medical record management. Revolutionizing healthcare accessibility with technology.</p>
                    <div class="projects__skills">
                        <img src="assets/img/skills-html.svg" alt="HTML" class="projects__skill">
                        <img src="assets/img/skills-css.svg" alt="CSS" class="projects__skill">
                        <img src="assets/img/skills-javascript.svg" alt="JavaScript" class="projects__skill">
                        <img src="assets/img/skills-node.svg" alt="Node.js" class="projects__skill">
                    </div>
                    <a href="#" target="_blank" class="projects__button">
                        <i class="ri-link"></i>
                        <span>Visit Project</span>
                    </a>
                </div>
            </article>
            
            </div>
        </section>

        <!--==================== SERVICES ====================-->
        <section class="services section" id="services">
         <h2 class="section__title">SERVICES I OFFER</h2>
      
         <div class="services__container container grid">
             <article class="services__card">
                 <div class="services__icon">
                     <div class="services__circle"></div>
                     <i class="ri-code-box-line"></i>
                 </div>
                 <h3 class="services__name">Software Development</h3>
                 <p class="services__description">Crafting responsive, high-performance websites that not only meet your needs but also make your competitors a little jealous.</p>
             </article>
          
             <article class="services__card">
                 <div class="services__icon">
                     <div class="services__circle"></div>
                     <i class="ri-lightbulb-line"></i>
                 </div>
                 <h3 class="services__name">Technology Innovation</h3>
                 <p class="services__description">Bringing futuristic ideas to life, one ingenious solution at a time. (No, I don’t invent flying cars—yet.)</p>
             </article>

             <article class="services__card">
                 <div class="services__icon">
                     <div class="services__circle"></div>
                     <i class="ri-rocket-line"></i>
                 </div>
                 <h3 class="services__name">Project Design & Development</h3>
                 <p class="services__description">Turning ideas into reality with precision, creativity, and maybe a model rocket or two to keep things exciting.</p>
             </article>
         </div>
      </section>

         <!--==================== EXPERIENCE ====================-->
         <section class="experience section" id="experience">
            <h2 class="section__title">EXPERIENCE</h2>
        
            <div class="experience__container container grid">
                <article class="experience__card">
                    <h2 class="experience__company">Web Developer and Programmer</h2>
                    <div class="experience__data">
                        <h3 class="expression__profession">Freelance</h3>
                        <span class="experience__date">01/22 - Present</span>
                        <p class="experience__description">Creating dynamic websites and applications, integrating APIs, and solving client challenges one line of code at a time. (Debugging included, no extra charge!)</p>
                    </div>
                </article>
        
                <article class="experience__card">
                    <h2 class="experience__company">StudyGuideEdu & AgriConnectLK</h2>
                    <div class="experience__data">
                        <h3 class="expression__profession">CEO</h3>
                        <span class="experience__date">02/23 - Present</span>
                        <p class="experience__description">Directing strategic growth, empowering students with educational tools, and occasionally pretending to be the world's busiest CEO. (Spoiler: I’m not pretending.)</p>
                    </div>
                </article>
        
                <article class="experience__card">
                    <h2 class="experience__company">Base Hospital Gampola</h2>
                    <div class="experience__data">
                        <h3 class="expression__profession">Chief Developer</h3>
                        <span class="experience__date">05/23 - Present</span>
                        <p class="experience__description">Revamping the hospital's online presence to improve patient engagement and accessibility. Because healthcare deserves a great UI too!</p>
                    </div>
                </article>
        
                <article class="experience__card">
                    <h2 class="experience__company">Technopreneurship Club TCK</h2>
                    <div class="experience__data">
                        <h3 class="expression__profession">Revitalizer and Chief Strategist</h3>
                        <span class="experience__date">12/24 - Present</span>
                        <p class="experience__description">Breathing life back into the ICT Society with a mix of events, collaborations, and a touch of strategy. Who said clubs can’t be cool?</p>
                    </div>
                </article>
            </div>
        </section>                

         <!--==================== CONTACT ====================-->
         <section class="contact section" id="contact">

             <h2 class="section__title">CONTACT ME</h2>

             <div class="contact__container container grid">
                 <form action="" class="contact__form grid" id="contact-form">
                     <div class="contact__group grid">
                         <input type="text" name="user_name" placeholder="Your Name" required class="contact__input">
                         <input type="email" name="user_email" placeholder="Email" required class="contact__input">
                     </div>
                  
                     <textarea name="user_message" placeholder="Type your message here (friendly or formal—your choice)" class="contact__input contact__area"></textarea>
                  
                     <button type="submit" class="button contact__button">Send Message</button>
                  
                     <p class="contact__message" id="contact-message"></p>
                 </form>
             </div>

         </section>

      </main>

      <!--==================== FOOTER ====================-->
      <footer class="footer">
         <div class="footer__container container grid">
            <div class="footer__content grid">
              <a href="#" class="footer__logo">Nahidh</a>
        
              <ul class="footer__links">
                <li>
                  <a href="#home" class="footer__link">Home</a>
                </li>
                <li>
                  <a href="#projects" class="footer__link">Projects</a>
                </li>
                <li>
                  <a href="#services" class="footer__link">Services</a>
                </li>
              </ul>
            </div>

            <div class="footer__social">
               <a href="https://www.instagram.com/nahidh_naseem/" target="_blank" rel="noopener" title="Instagram" class="footer__social-link">
                  <i class="ri-instagram-line"></i>
               </a>
               <a href="" target="_blank" class="footer__social-link">
                  <i class="ri-discord-line"></i>
               </a>
               <a href="https://x.com/Nahidh_Naseem/" target="_blank" rel="noopener" title="Twitter" class="footer__social-link">
                  <i class="ri-twitter-x-line"></i>
               </a>
               <a href="https://buymeacoffee.com/nahidhnaseem" target="_blank" rel="noopener" title="BuyMeACoffee" class="footer__social-link">
                <i class="ri-cup-line"></i>
             </a>
            </div>
          </div>

          <span class="footer__copy">
            &#169; All Rights Reserved By Nahidh Naseem - 2024
          </span>
         
      </footer>

      <!--========== SCROLL UP ==========-->

      <a href="#" class="scrollup" id="scroll-up">
         <i class="ri-arrow-up-line"></i>
      </a>


      <!--=============== SCROLLREVEAL ===============-->
      <script src="assets/js/scrollreveal.min.js"></script>

      <!--=============== EMAIL JS ===============-->
      <script src="https://cdn.jsdelivr.net/npm/@emailjs/browser@4/dist/email.min.js"></script>

      <!--=============== MAIN JS ===============-->
      <script src="assets/js/main.js"></script>
   </body>
</html>