Projects Data

export type Status = 'Deployed' | 'In Development' | 'Completed';

export type Category = 'Tech' | 'Operations';

export const projects: {
  name: string;
  description: string;
  status: Status;
  category: Category;
  tags: string[];
  gradient: string;
  url: string;
}[] = [
  // ... project entries
];

{
  name: 'API Explorer',
  description: 'Web app for consuming and testing third-party REST APIs — built to practice real-world HTTP request handling, authentication flows, and dynamic data rendering.',
  status: 'Deployed',
  category: 'Tech',
  tags: ['JavaScript', 'REST API', 'Fetch'],
  gradient: 'linear-gradient(135deg,#0f0028 0%,#1a0035 50%,#000 100%)',
  url: 'https://github.com/drakk3',
}

{
  name: 'SOP Optimization & Confluence Implementation',
  description: 'Reviewed and restructured Standard Operating Procedures across operations and corporate levels. Migrated and organized all documentation into Confluence, creating a centralized, searchable knowledge base aligned with company structure.',
  status: 'Completed',
  category: 'Operations',
  tags: ['SOP', 'Confluence', 'Process Optimization', 'Documentation'],
  gradient: 'linear-gradient(135deg,#001a14 0%,#000d0a 50%,#000 100%)',
  url: 'https://github.com/drakk3',
}

export const badgeVariant: Record<Status, string> = {
  'Deployed':        'deployed',
  'In Development':  'warning',
  'Completed':       'completed',
};

linear-gradient(135deg, [start-color] 0%, [mid-color] 50%, #000 100%)

---
import { projects } from '@/data/projects';
---

<div class="grid grid-cols-1 sm:grid-cols-2 gap-6" id="projects-grid">
  {projects.map((project) => (
    <a
      href={project.url}
      target="_blank"
      rel="noopener noreferrer"
      data-category={project.category}
      class="project-card"
    >
      <!-- Card renders project.name, project.description, etc. -->
    </a>
  ))}
</div>

const filterBtns = document.querySelectorAll('.filter-btn');
const cards = document.querySelectorAll('.project-card');

filterBtns.forEach((btn) => {
  btn.addEventListener('click', () => {
    const filter = btn.dataset.filter;
    cards.forEach((card) => {
      const match = filter === 'All' || card.dataset.category === filter;
      card.style.display = match ? '' : 'none';
    });
  });
});