script.js

const projects = window.PORTFOLIO_PROJECTS || [];
const grid = document.querySelector('#projectGrid');
const count = document.querySelector('#projectCount');

function escapeHtml(value) {
  return String(value).replace(/[&<>'"]/g, character => ({
    '&': '&amp;',
    '<': '&lt;',
    '>': '&gt;',
    "'": '&#39;',
    '"': '&quot;'
  }[character]));
}

function renderProjects() {
  if (count) count.textContent = projects.length;

  if (!grid) return;
  grid.innerHTML = projects.map(project => `
    <article class="project-card">
      <div class="project-top">
        <div class="project-icon">${escapeHtml(project.icon || project.title.slice(0, 2))}</div>
        <span class="badge">${escapeHtml(project.status || 'In progress')}</span>
      </div>
      <h3>${escapeHtml(project.title)}</h3>
      <p>${escapeHtml(project.description)}</p>
      <div class="tags">
        ${(project.tags || []).map(tag => `<span>${escapeHtml(tag)}</span>`).join('')}
      </div>
      <div class="project-links">
        ${project.liveUrl ? `<a href="${escapeHtml(project.liveUrl)}" target="_blank" rel="noreferrer">Live demo</a>` : ''}
        ${project.repoUrl ? `<a href="${escapeHtml(project.repoUrl)}" target="_blank" rel="noreferrer">Source</a>` : ''}
      </div>
    </article>
  `).join('');
}

renderProjects();