document.write(`
<!-- Projects Section -->
<section class="section projects" id="projects">
  <div class="section-container">
    <div class="section-header">
      <h2 class="section-title">Featured Projects</h2>
      <p class="section-subtitle">My recent work</p>
      <div class="section-divider"></div>
    </div>
    <div class="projects-grid">



              <!-- Project 1 -->
      <div class="project-card" style="--order: 1">
        <div class="project-image">
          <img
            src="assets/fuadbot.png"
            alt="FuadBot AI Chatbot"
            loading="lazy"
          />
          <div class="project-overlay">
            <div class="project-badge">AI</div>
            <a
              href="https://fuadbot-ui.vercel.app"
              target="_blank"
              rel="noopener noreferrer"
              class="project-preview"
            >
              <svg
                width="24"
                height="24"
                viewBox="0 0 24 24"
                fill="none"
                xmlns="http://www.w3.org/2000/svg"
              >
                <path
                  d="M15 12C15 13.6569 13.6569 15 12 15C10.3431 15 9 13.6569 9 12C9 10.3431 10.3431 9 12 9C13.6569 9 15 10.3431 15 12Z"
                  stroke="currentColor"
                  stroke-width="2"
                  stroke-linecap="round"
                  stroke-linejoin="round"
                />
                <path
                  d="M12 5C7 5 2.5 8 2.5 12C2.5 16 7 19 12 19C17 19 21.5 16 21.5 12C21.5 8 17 5 12 5Z"
                  stroke="currentColor"
                  stroke-width="2"
                  stroke-linecap="round"
                  stroke-linejoin="round"
                />
              </svg>
            </a>
          </div>
        </div>
        <div class="project-content">
          <h3 class="project-title">FuadBot — AI Chatbot</h3>
          <p class="project-description">
            Gen-Z-style AI chatbot powered by LLaMA 3 + Groq. Replies fast and
            friendly like your digital twin.
          </p>
          <div class="project-tech">
            <span>HTML</span>
            <span>CSS</span>
            <span>JavaScript</span>
            <span>Node.js</span>
            <span>Express</span>
            <span>Groq API</span>
          </div>
          <div class="project-links">
            <a
              href="https://github.com/Fuad-Khan/fuadbot-ui"
              target="_blank"
              rel="noopener noreferrer"
              class="project-link code-link"
              >View Code</a
            >
            <a
              href="https://fuadbot-ui.vercel.app"
              target="_blank"
              rel="noopener noreferrer"
              class="project-link demo-link"
              >Live Demo</a
            >
          </div>
        </div>
      </div>

      <!-- Project 2 -->
      <div class="project-card" style="--order: 2">
        <div class="project-image">
          <img
            src="assets/django-notes.png"
            alt="Django Notes App"
            loading="lazy"
          />
          <div class="project-overlay">
            <div class="project-badge">New</div>
            <a
              href="https://django-notes-app-dt1n.onrender.com/"
              target="_blank"
              rel="noopener noreferrer"
              class="project-preview"
            >
              <svg
                width="24"
                height="24"
                viewBox="0 0 24 24"
                fill="none"
                xmlns="http://www.w3.org/2000/svg"
              >
                <path
                  d="M15 12C15 13.6569 13.6569 15 12 15C10.3431 15 9 13.6569 9 12C9 10.3431 10.3431 9 12 9C13.6569 9 15 10.3431 15 12Z"
                  stroke="currentColor"
                  stroke-width="2"
                  stroke-linecap="round"
                  stroke-linejoin="round"
                />
                <path
                  d="M12 5C7 5 2.5 8 2.5 12C2.5 16 7 19 12 19C17 19 21.5 16 21.5 12C21.5 8 17 5 12 5Z"
                  stroke="currentColor"
                  stroke-width="2"
                  stroke-linecap="round"
                  stroke-linejoin="round"
                />
              </svg>
            </a>
          </div>
        </div>
        <div class="project-content">
          <h3 class="project-title">Django Notes App</h3>
          <p class="project-description">
            A beginner-friendly CRUD Notes App. Add, edit, delete, and manage
            your notes easily.
          </p>
          <div class="project-tech">
            <span>Python</span>
            <span>Django</span>
            <span>SQLite</span>
            <span>HTML</span>
            <span>CSS</span>
          </div>
          <div class="project-links">
            <a
              href="https://github.com/Fuad-Khan/django-notes-app"
              target="_blank"
              rel="noopener noreferrer"
              class="project-link code-link"
              >View Code</a
            >
            <a
              href="https://django-notes-app-dt1n.onrender.com/"
              target="_blank"
              rel="noopener noreferrer"
              class="project-link demo-link"
              >Live Demo</a
            >
          </div>
        </div>
      </div>






      <!-- Project 3 -->
      <!-- <div class="project-card" style="--order: 3">
        <div class="project-image">
          <img
            src="assets/resume-generator.jpg"
            alt="Resume Generator"
            loading="lazy"
          />
          <div class="project-overlay">
            <div class="project-badge">New</div>
            <a
              href="https://github.com/Fuad-Khan/Automated-Resume-Generator-with-Custom-Templates"
              target="_blank"
              rel="noopener noreferrer"
              class="project-preview"
            >
              <svg
                width="24"
                height="24"
                viewBox="0 0 24 24"
                fill="none"
                xmlns="http://www.w3.org/2000/svg"
              >
                <path
                  d="M15 12C15 13.6569 13.6569 15 12 15C10.3431 15 9 13.6569 9 12C9 10.3431 10.3431 9 12 9C13.6569 9 15 10.3431 15 12Z"
                  stroke="currentColor"
                  stroke-width="2"
                  stroke-linecap="round"
                  stroke-linejoin="round"
                />
                <path
                  d="M12 5C7 5 2.5 8 2.5 12C2.5 16 7 19 12 19C17 19 21.5 16 21.5 12C21.5 8 17 5 12 5Z"
                  stroke="currentColor"
                  stroke-width="2"
                  stroke-linecap="round"
                  stroke-linejoin="round"
                />
              </svg>
            </a>
          </div>
        </div>
        <div class="project-content">
          <h3 class="project-title">Automated Resume Generator</h3>
          <p class="project-description">
            Web application that generates professional resumes with
            customizable templates in PDF format.
          </p>
          <div class="project-tech">
            <span>PHP</span>
            <span>HTML</span>
            <span>CSS</span>
            <span>JavaScript</span>
          </div>
          <div class="project-links">
            <a
              href="https://github.com/Fuad-Khan/Automated-Resume-Generator-with-Custom-Templates"
              target="_blank"
              rel="noopener noreferrer"
              class="project-link code-link"
            >
              <svg
                width="18"
                height="18"
                viewBox="0 0 24 24"
                fill="none"
                xmlns="http://www.w3.org/2000/svg"
              >
                <path
                  d="M12 2C6.477 2 2 6.484 2 12.017C2 16.425 4.865 20.183 8.839 21.517C9.339 21.608 9.521 21.305 9.521 21.042C9.521 20.809 9.513 20.165 9.512 19.313C6.726 19.938 6.14 17.95 6.14 17.95C5.684 16.81 5.029 16.5 5.029 16.5C4.121 15.88 5.1 15.9 5.1 15.9C6.102 15.97 6.629 16.93 6.629 16.93C7.523 18.45 8.97 18 9.54 17.76C9.63 17.11 9.889 16.67 10.18 16.42C7.954 16.17 5.62 15.31 5.62 11.49C5.62 10.39 6.009 9.49 6.649 8.79C6.546 8.54 6.202 7.52 6.747 6.15C6.747 6.15 7.586 5.88 9.496 7.17C10.295 6.95 11.15 6.84 12 6.84C12.85 6.84 13.705 6.95 14.504 7.17C16.414 5.88 17.253 6.15 17.253 6.15C17.798 7.52 17.454 8.54 17.351 8.79C17.991 9.49 18.38 10.39 18.38 11.49C18.38 15.32 16.04 16.16 13.81 16.41C14.17 16.72 14.5 17.33 14.5 18.26C14.5 19.6 14.49 20.68 14.49 21.042C14.49 21.307 14.67 21.612 15.18 21.514C19.137 20.175 22 16.418 22 12.017C22 6.484 17.523 2 12 2Z"
                  fill="currentColor"
                />
              </svg>
              View Code
            </a>
            <a href="#" class="project-link demo-link">
              <svg
                width="18"
                height="18"
                viewBox="0 0 24 24"
                fill="none"
                xmlns="http://www.w3.org/2000/svg"
              >
                <path
                  d="M18 13V19C18 20.1046 17.1046 21 16 21H5C3.89543 21 3 20.1046 3 19V8C3 6.89543 3.89543 6 5 6H11"
                  stroke="currentColor"
                  stroke-width="2"
                  stroke-linecap="round"
                  stroke-linejoin="round"
                />
                <path
                  d="M15 3H21V9"
                  stroke="currentColor"
                  stroke-width="2"
                  stroke-linecap="round"
                  stroke-linejoin="round"
                />
                <path
                  d="M10 14L21 3"
                  stroke="currentColor"
                  stroke-width="2"
                  stroke-linecap="round"
                  stroke-linejoin="round"
                />
              </svg>
              Live Demo
            </a>
          </div>
        </div>
      </div> -->

      <!-- Project 4 -->
      <div class="project-card" style="--order: 4">
        <div class="project-image">
          <img
            src="assets/portfolio.png"
            alt="Portfolio Website"
            loading="lazy"
          />
          <div class="project-overlay">
            <a
              href="#"
              target="_blank"
              rel="noopener noreferrer"
              class="project-preview"
            >
              <svg
                width="24"
                height="24"
                viewBox="0 0 24 24"
                fill="none"
                xmlns="http://www.w3.org/2000/svg"
              >
                <path
                  d="M15 12C15 13.6569 13.6569 15 12 15C10.3431 15 9 13.6569 9 12C9 10.3431 10.3431 9 12 9C13.6569 9 15 10.3431 15 12Z"
                  stroke="currentColor"
                  stroke-width="2"
                  stroke-linecap="round"
                  stroke-linejoin="round"
                />
                <path
                  d="M12 5C7 5 2.5 8 2.5 12C2.5 16 7 19 12 19C17 19 21.5 16 21.5 12C21.5 8 17 5 12 5Z"
                  stroke="currentColor"
                  stroke-width="2"
                  stroke-linecap="round"
                  stroke-linejoin="round"
                />
              </svg>
            </a>
          </div>
        </div>
        <div class="project-content">
          <h3 class="project-title">Portfolio Website</h3>
          <p class="project-description">
            Built a personal portfolio to showcase skills, projects, resume, and
            research info. Fully responsive with modern UI.
          </p>
          <div class="project-tech">
            <span>HTML</span>
            <span>CSS</span>
            <span>JavaScript</span>
          </div>
          <div class="project-links">
            <a
              href="#"
              target="_blank"
              rel="noopener noreferrer"
              class="project-link code-link"
              >View Code</a
            >
            <a
              href="#"
              target="_blank"
              rel="noopener noreferrer"
              class="project-link demo-link"
              >Live Demo</a
            >
          </div>
        </div>
      </div>


            <!-- Project 5 -->
      <div class="project-card" style="--order: 5">
        <div class="project-image">
          <img
            src="assets/ticket-system.jpg"
            alt="Ticket Booking System"
            loading="lazy"
          />
          <div class="project-overlay">
            <div class="project-badge">Featured</div>
            <a
              href="https://github.com/Fuad-Khan/Ticket-Booking-System"
              target="_blank"
              rel="noopener noreferrer"
              class="project-preview"
            >
              <svg
                width="24"
                height="24"
                viewBox="0 0 24 24"
                fill="none"
                xmlns="http://www.w3.org/2000/svg"
              >
                <path
                  d="M15 12C15 13.6569 13.6569 15 12 15C10.3431 15 9 13.6569 9 12C9 10.3431 10.3431 9 12 9C13.6569 9 15 10.3431 15 12Z"
                  stroke="currentColor"
                  stroke-width="2"
                  stroke-linecap="round"
                  stroke-linejoin="round"
                />
                <path
                  d="M12 5C7 5 2.5 8 2.5 12C2.5 16 7 19 12 19C17 19 21.5 16 21.5 12C21.5 8 17 5 12 5Z"
                  stroke="currentColor"
                  stroke-width="2"
                  stroke-linecap="round"
                  stroke-linejoin="round"
                />
              </svg>
            </a>
          </div>
        </div>
        <div class="project-content">
          <h3 class="project-title">Ticket Booking System</h3>
          <p class="project-description">
            A comprehensive platform for event ticket booking with real-time
            seat availability and payment processing.
          </p>
          <div class="project-tech">
            <span>PHP</span>
            <span>HTML</span>
            <span>JavaScript</span>
            <span>CSS</span>
            <span>MySQL</span>
            <span>Bootstrap</span>
          </div>
          <div class="project-links">
            <a
              href="https://github.com/Fuad-Khan/Ticket-Booking-System"
              target="_blank"
              rel="noopener noreferrer"
              class="project-link code-link"
            >
              <svg
                width="18"
                height="18"
                viewBox="0 0 24 24"
                fill="none"
                xmlns="http://www.w3.org/2000/svg"
              >
                <path
                  d="M12 2C6.477 2 2 6.484 2 12.017C2 16.425 4.865 20.183 8.839 21.517C9.339 21.608 9.521 21.305 9.521 21.042C9.521 20.809 9.513 20.165 9.512 19.313C6.726 19.938 6.14 17.95 6.14 17.95C5.684 16.81 5.029 16.5 5.029 16.5C4.121 15.88 5.1 15.9 5.1 15.9C6.102 15.97 6.629 16.93 6.629 16.93C7.523 18.45 8.97 18 9.54 17.76C9.63 17.11 9.889 16.67 10.18 16.42C7.954 16.17 5.62 15.31 5.62 11.49C5.62 10.39 6.009 9.49 6.649 8.79C6.546 8.54 6.202 7.52 6.747 6.15C6.747 6.15 7.586 5.88 9.496 7.17C10.295 6.95 11.15 6.84 12 6.84C12.85 6.84 13.705 6.95 14.504 7.17C16.414 5.88 17.253 6.15 17.253 6.15C17.798 7.52 17.454 8.54 17.351 8.79C17.991 9.49 18.38 10.39 18.38 11.49C18.38 15.32 16.04 16.16 13.81 16.41C14.17 16.72 14.5 17.33 14.5 18.26C14.5 19.6 14.49 20.68 14.49 21.042C14.49 21.307 14.67 21.612 15.18 21.514C19.137 20.175 22 16.418 22 12.017C22 6.484 17.523 2 12 2Z"
                  fill="currentColor"
                />
              </svg>
              View Code
            </a>
            <a href="#" class="project-link demo-link">
              <svg
                width="18"
                height="18"
                viewBox="0 0 24 24"
                fill="none"
                xmlns="http://www.w3.org/2000/svg"
              >
                <path
                  d="M18 13V19C18 20.1046 17.1046 21 16 21H5C3.89543 21 3 20.1046 3 19V8C3 6.89543 3.89543 6 5 6H11"
                  stroke="currentColor"
                  stroke-width="2"
                  stroke-linecap="round"
                  stroke-linejoin="round"
                />
                <path
                  d="M15 3H21V9"
                  stroke="currentColor"
                  stroke-width="2"
                  stroke-linecap="round"
                  stroke-linejoin="round"
                />
                <path
                  d="M10 14L21 3"
                  stroke="currentColor"
                  stroke-width="2"
                  stroke-linecap="round"
                  stroke-linejoin="round"
                />
              </svg>
              Live Demo
            </a>
          </div>
        </div>
      </div>

      <!-- Project 6 -->
      <div class="project-card" style="--order: 6">
        <div class="project-image">
          <img
            src="assets/super-shop.jpg"
            alt="Online Super Shop"
            loading="lazy"
          />
          <div class="project-overlay">
            <a
              href="https://github.com/Fuad-Khan/Online-Super-Shop-Website"
              target="_blank"
              rel="noopener noreferrer"
              class="project-preview"
            >
              <svg
                width="24"
                height="24"
                viewBox="0 0 24 24"
                fill="none"
                xmlns="http://www.w3.org/2000/svg"
              >
                <path
                  d="M15 12C15 13.6569 13.6569 15 12 15C10.3431 15 9 13.6569 9 12C9 10.3431 10.3431 9 12 9C13.6569 9 15 10.3431 15 12Z"
                  stroke="currentColor"
                  stroke-width="2"
                  stroke-linecap="round"
                  stroke-linejoin="round"
                />
                <path
                  d="M12 5C7 5 2.5 8 2.5 12C2.5 16 7 19 12 19C17 19 21.5 16 21.5 12C21.5 8 17 5 12 5Z"
                  stroke="currentColor"
                  stroke-width="2"
                  stroke-linecap="round"
                  stroke-linejoin="round"
                />
              </svg>
            </a>
          </div>
        </div>
        <div class="project-content">
          <h3 class="project-title">Online Super Shop</h3>
          <p class="project-description">
            E-commerce platform for groceries with cart functionality, product
            filtering, and secure checkout.
          </p>
          <div class="project-tech">
            <span>PHP</span>
            <span>JavaScript</span>
            <span>MySQL</span>
            <span>HTML</span>
            <span>CSS</span>
          </div>
          <div class="project-links">
            <a
              href="https://github.com/Fuad-Khan/Online-Super-Shop-Website"
              target="_blank"
              rel="noopener noreferrer"
              class="project-link code-link"
            >
              <svg
                width="18"
                height="18"
                viewBox="0 0 24 24"
                fill="none"
                xmlns="http://www.w3.org/2000/svg"
              >
                <path
                  d="M12 2C6.477 2 2 6.484 2 12.017C2 16.425 4.865 20.183 8.839 21.517C9.339 21.608 9.521 21.305 9.521 21.042C9.521 20.809 9.513 20.165 9.512 19.313C6.726 19.938 6.14 17.95 6.14 17.95C5.684 16.81 5.029 16.5 5.029 16.5C4.121 15.88 5.1 15.9 5.1 15.9C6.102 15.97 6.629 16.93 6.629 16.93C7.523 18.45 8.97 18 9.54 17.76C9.63 17.11 9.889 16.67 10.18 16.42C7.954 16.17 5.62 15.31 5.62 11.49C5.62 10.39 6.009 9.49 6.649 8.79C6.546 8.54 6.202 7.52 6.747 6.15C6.747 6.15 7.586 5.88 9.496 7.17C10.295 6.95 11.15 6.84 12 6.84C12.85 6.84 13.705 6.95 14.504 7.17C16.414 5.88 17.253 6.15 17.253 6.15C17.798 7.52 17.454 8.54 17.351 8.79C17.991 9.49 18.38 10.39 18.38 11.49C18.38 15.32 16.04 16.16 13.81 16.41C14.17 16.72 14.5 17.33 14.5 18.26C14.5 19.6 14.49 20.68 14.49 21.042C14.49 21.307 14.67 21.612 15.18 21.514C19.137 20.175 22 16.418 22 12.017C22 6.484 17.523 2 12 2Z"
                  fill="currentColor"
                />
              </svg>
              View Code
            </a>
            <a href="#" class="project-link demo-link">
              <svg
                width="18"
                height="18"
                viewBox="0 0 24 24"
                fill="none"
                xmlns="http://www.w3.org/2000/svg"
              >
                <path
                  d="M18 13V19C18 20.1046 17.1046 21 16 21H5C3.89543 21 3 20.1046 3 19V8C3 6.89543 3.89543 6 5 6H11"
                  stroke="currentColor"
                  stroke-width="2"
                  stroke-linecap="round"
                  stroke-linejoin="round"
                />
                <path
                  d="M15 3H21V9"
                  stroke="currentColor"
                  stroke-width="2"
                  stroke-linecap="round"
                  stroke-linejoin="round"
                />
                <path
                  d="M10 14L21 3"
                  stroke="currentColor"
                  stroke-width="2"
                  stroke-linecap="round"
                  stroke-linejoin="round"
                />
              </svg>
              Live Demo
            </a>
          </div>
        </div>
      </div>



      <!-- Project 7 -->
      <div class="project-card" style="--order: 7">
        <div class="project-image">
          <img src="assets/jokes.jpg" alt="Jokes HTML CSS JS" loading="lazy" />
          <div class="project-overlay">
            <a
              href="https://jokes-html-css-js.vercel.app"
              target="_blank"
              rel="noopener noreferrer"
              class="project-preview"
            >
              <svg
                width="24"
                height="24"
                viewBox="0 0 24 24"
                fill="none"
                xmlns="http://www.w3.org/2000/svg"
              >
                <path
                  d="M15 12C15 13.6569 13.6569 15 12 15C10.3431 15 9 13.6569 9 12C9 10.3431 10.3431 9 12 9C13.6569 9 15 10.3431 15 12Z"
                  stroke="currentColor"
                  stroke-width="2"
                  stroke-linecap="round"
                  stroke-linejoin="round"
                />
                <path
                  d="M12 5C7 5 2.5 8 2.5 12C2.5 16 7 19 12 19C17 19 21.5 16 21.5 12C21.5 8 17 5 12 5Z"
                  stroke="currentColor"
                  stroke-width="2"
                  stroke-linecap="round"
                  stroke-linejoin="round"
                />
              </svg>
            </a>
          </div>
        </div>
        <div class="project-content">
          <h3 class="project-title">Jokes HTML CSS JS</h3>
          <p class="project-description">
            A fun web app built with HTML, CSS, and JavaScript serving random
            jokes with clean UI.
          </p>
          <div class="project-tech">
            <span>HTML</span>
            <span>CSS</span>
            <span>JavaScript</span>
          </div>
          <div class="project-links">
            <a
              href="https://github.com/Fuad-Khan/Jokes-html-css-js-"
              target="_blank"
              rel="noopener noreferrer"
              class="project-link code-link"
              >View Code</a
            >
            <a
              href="https://jokes-html-css-js.vercel.app"
              target="_blank"
              rel="noopener noreferrer"
              class="project-link demo-link"
              >Live Demo</a
            >
          </div>
        </div>
      </div>


    </div>
  </div>
</section>
`);