portfolio.php

<?php
$pageSlug='portfolio'; $pageTitle='Portfolio — NeuralNomadAI'; $pageDesc='Selected work.';
ob_start(); ?>
<div class="container">
  <div class="text-center mb-4"><h2 class="fw-bold">AI Art Portfolio</h2><p class="text-secondary">Illustration • Photoreal • Logo/Icon • UI</p></div>

  <div class="text-center mb-4">
    <div class="btn-group" role="group">
      <input type="radio" class="btn-check" name="filter" id="f-all" checked>
      <label class="btn btn-outline-primary" for="f-all" data-filter="*">All</label>
      <input type="radio" class="btn-check" name="filter" id="f-ill">
      <label class="btn btn-outline-primary" for="f-ill" data-filter="illustration">Illustration</label>
      <input type="radio" class="btn-check" name="filter" id="f-photo">
      <label class="btn btn-outline-primary" for="f-photo" data-filter="photoreal">Photoreal</label>
      <input type="radio" class="btn-check" name="filter" id="f-logo">
      <label class="btn btn-outline-primary" for="f-logo" data-filter="logo">Logo/Icon</label>
      <input type="radio" class="btn-check" name="filter" id="f-ui">
      <label class="btn btn-outline-primary" for="f-ui" data-filter="ui">UI Mockups</label>
    </div>
  </div>

  <div id="portfolioGrid" class="row g-4">
    <?php
      $items = [
        ['illustration','Editorial Illustration','https://images.unsplash.com/photo-1497215728101-495ebbda99b3?q=80&w=600&auto=format&fit=crop','https://images.unsplash.com/photo-1497215728101-495ebbda99b3?q=80&w=1600&auto=format&fit=crop'],
        ['photoreal','Product Photos','https://images.unsplash.com/photo-1483985988355-763728e1935b?q=80&w=600&auto=format&fit=crop','https://images.unsplash.com/photo-1483985988355-763728e1935b?q=80&w=1600&auto=format&fit=crop'],
        ['logo','Minimal Icons','https://images.unsplash.com/photo-1504805572947-34fad45aed93?q=80&w=600&auto=format&fit=crop','https://images.unsplash.com/photo-1504805572947-34fad45aed93?q=80&w=1600&auto=format&fit=crop'],
        ['ui','Dark Mode Concept','https://images.unsplash.com/photo-1516542076529-1ea3854896e1?q=80&w=600&auto=format&fit=crop','https://images.unsplash.com/photo-1516542076529-1ea3854896e1?q=80&w=1600&auto=format&fit=crop'],
      ];
      foreach($items as $it): ?>
      <div class="col-sm-6 col-lg-4 portfolio-item" data-category="<?= $it[0] ?>">
        <div class="card portfolio-card">
          <img class="card-img-top" src="<?= $it[2] ?>" alt="<?= $it[1] ?>" data-bs-toggle="modal" data-bs-target="#portfolioModal" data-full="<?= $it[3] ?>">
          <div class="card-body"><h6 class="card-title mb-1"><?= $it[1] ?></h6><span class="badge text-bg-secondary text-capitalize"><?= $it[0] ?></span></div>
        </div>
      </div>
    <?php endforeach; ?>
  </div>
</div>

<div class="modal fade" id="portfolioModal" tabindex="-1" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered modal-xl">
    <div class="modal-content bg-black">
      <button type="button" class="btn-close btn-close-white ms-auto me-2 mt-2" data-bs-dismiss="modal" aria-label="Close"></button>
      <img id="modalImage" class="w-100" style="max-height:85vh;object-fit:contain" alt="">
    </div>
  </div>
</div>
<?php $content=ob_get_clean(); include 'template.php'; ?>