projects.html

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <meta name="description" content="AI, Computer Vision, and Machine Learning projects by Nguyen Tin Tin Do." />
  <meta name="keywords"
    content="AI, Deep Learning, Machine Learning, Computer Vision, YOLO, TensorFlow, FastAPI, Nguyen Tin Tin Do" />
  <meta name="author" content="Nguyen Tin Tin Do" />
  <title>Projects - Nguyen Tin Tin Do</title>

  <link rel="stylesheet" href="style.css" />
  <script src="script.js" defer></script>
</head>

<body>

  <!-- ================= HEADER ================= -->
  <header>
    <div class="container header-container">
      <h1 class="logo">Projects</h1>

      <nav class="navbar">
        <a href="index.html" class="btn">Home</a>
        <a href="about.html" class="btn">About</a>
        <a href="work.html" class="btn">Experience</a>
        <a href="education.html" class="btn">Education</a>
        <a class="btn active" href="projects.html">Projects</a>
        <a href="contact.html" class="btn">Contact</a>
      </nav>

      <button id="theme-toggle" class="theme-btn">🌙</button>
    </div>
  </header>

  <!-- ================= MAIN CONTENT ================= -->
  <main>
    <section class="content fade-in">

      <!-- HERO LIKE INDEX -->
      <div class="page-header">
        <h2 class="section-title">💻 Featured AI Projects</h2>
        <p class="section-subtitle">
          Practical hands-on work in <b>Computer Vision</b>,
          <b>Deep Learning</b>, and <b>Backend/API development</b>.
        </p>
      </div>

      <!-- PROJECT GRID -->
      <div class="projects-grid">

        <!-- PROJECT 1 -->
        <article class="project-card modern-card">
          <img
            src="C:\Users\Microsoft\OneDrive\Documents\Web_Application_Development\Final_Project_CSCI_250-ndo1\snapshot_1759425843.jpg"
            alt="Face Recognition">
        </article>
        <div class="project-body">
          <h3>Real-Time Face Recognition</h3>
          <p>
            Real-time face detection & recognition using <b>OpenCV</b>,
            <b>Haar Cascade</b>, and optimized preprocessing for high FPS video.
          </p>
          <div class="project-links">
            <a href="https://github.com/NguyenTin2026/Mini-Project-Computer-Vision-in-Deep-Learning.git"
              class="btn small">🔗 Demo</a>
            <a href="https://github.com/NguyenTin2026/Mini-Project-Computer-Vision-in-Deep-Learning.git"
              class="btn small">💻 GitHub</a>
            <a href="C:\Users\Microsoft\OneDrive\Documents\Web_Application_Development\Final_Project_CSCI_250-ndo1\Screen Recording 2025-10-02 132041.mp4"
              class="btn small">🎥 Video</a>
          </div>
        </div>
        </article>

        <!-- PROJECT 2 -->
        <article class="project-card modern-card"><br>
          <img
            src="C:\Users\Microsoft\OneDrive\Documents\Web_Application_Development\Final_Project_CSCI_250-ndo1\cross_00107.jpg"
            alt="YOLO Object Detection"><br><br>
          <div class="project-body">
            <h3>YOLOv5 Object Detection</h3>
            <p>
              Built using <b>YOLOv5</b> + <b>OpenCV</b> with tuned NMS,
              image scaling, and live video inference pipeline.
            </p>
            <div class="project-links">
              <a href="https://github.com/NguyenTin2026/Mini-Project-Computer-Vision-in-Deep-Learning.git"
                class="btn small">🔗 Demo</a>
              <a href="https://github.com/NguyenTin2026/Mini-Project-Computer-Vision-in-Deep-Learning.git"
                class="btn small">💻 GitHub</a>
              <a href="C:\Users\Microsoft\OneDrive\Documents\Web_Application_Development\Final_Project_CSCI_250-ndo1\20251025195545254.mp4"
                class="btn small">🎥 Video</a>

            </div>
          </div>
        </article>


        <!-- PROJECT 3 -->
        <article class="project-card modern-card"><br>
          <img
            src="C:\Users\Microsoft\OneDrive\Documents\Web_Application_Development\Final_Project_CSCI_250-ndo1\Image Linear Regression.png"
            alt="Data Science"><br><br>
          <div class="project-body">
            <h3>Data Analysis Dashboard</h3>
            <p>
              Large-scale data cleaning, processing, and visualization
              using <b>Pandas</b>, <b>Matplotlib</b>, and <b>Seaborn</b>.
            </p>
            <div class="project-links">
              <a href="https://github.com/NguyenTin2026/Data-Science-Tutorial-Step-By-Step-/blob/main/Linear-Regression.py"
                class="btn small">🔗 Demo</a>
              <a href="https://github.com/NguyenTin2026/Data-Science-Tutorial-Step-By-Step-.git" class="btn small">💻
                GitHub</a>
              <a href="https://github.com/NguyenTin2026/Data-Science-Tutorial-Step-By-Step-/blob/main/Linear-Regression.py"
                class="btn small">📊 Dashboard</a>
            </div>
          </div>
        </article>

      </div>
    </section>
  </main>

  <!-- ================= FOOTER ================= -->
  <footer>
    <p>© 2025 Nguyen Tin Tin Do — Portfolio · Artificial Intelligence & Deep Learning</p>
    <div class="social-links">
      <a href="https://github.com/NguyenTin2026" target="_blank">🐙</a>
      <a href="https://www.linkedin.com/in/nguyen-tin-tin-do/" target="_blank">💼</a>
      <a href="mailto:ndo1@drew.edu">📧</a>
    </div>
  </footer>

</body>

</html>