index.js

const PROJECTS = [
  {
    name: "Node.js",
    description: "JavaScript runtime built on Chrome's V8 engine.",
    language: "JavaScript",
    difficulty: "beginner",
    url: "https://github.com/nodejs/node",
  },
  {
    name: "Git",
    description: "Distributed version control system.",
    language: "C",
    difficulty: "beginner",
    url: "https://github.com/git/git",
  },
  {
    name: "HTML",
    description: "Standard markup language for web pages.",
    language: "HTML",
    difficulty: "beginner",
    url: "https://github.com/whatwg/html",
  },
  {
    name: "CSS",
    description: "Stylesheet language for designing web pages.",
    language: "CSS",
    difficulty: "beginner",
    url: "https://github.com/w3c/csswg-drafts",
  },
  {
    name: "ECMAScript",
    description: "Specification that standardizes JavaScript.",
    language: "JavaScript",
    difficulty: "beginner",
    url: "https://github.com/tc39/ecma262",
  },
  {
    name: "Markdown",
    description: "Lightweight markup language for formatting text.",
    language: "Markdown",
    difficulty: "beginner",
    url: "https://github.com/markedjs/marked",
  },
  {
    name: "JSON",
    description: "Lightweight data-interchange format.",
    language: "JavaScript",
    difficulty: "beginner",
    url: "https://github.com/douglascrockford/JSON-js",
  },
  {
    name: "npm",
    description: "Node.js package manager.",
    language: "JavaScript",
    difficulty: "beginner",
    url: "https://github.com/npm/cli",
  },
  {
    name: "Vite",
    description: "Fast frontend build tool.",
    language: "JavaScript",
    difficulty: "beginner",
    url: "https://github.com/vitejs/vite",
  },
  {
    name: "Bootstrap",
    description: "CSS framework for responsive web design.",
    language: "CSS",
    difficulty: "beginner",
    url: "https://github.com/twbs/bootstrap",
  },
  {
    name: "SQLite",
    description: "Lightweight embedded SQL database engine.",
    language: "C",
    difficulty: "beginner",
    url: "https://github.com/sqlite/sqlite",
  },
  {
    name: "Python",
    description: "High-level programming language focused on readability.",
    language: "Python",
    difficulty: "beginner",
    url: "https://github.com/python/cpython",
  },
  {
    name: "Flask",
    description: "Lightweight Python web framework.",
    language: "Python",
    difficulty: "beginner",
    url: "https://github.com/pallets/flask",
  },
  {
    name: "Linux",
    description: "Open source operating system kernel.",
    language: "C",
    difficulty: "beginner",
    url: "https://github.com/torvalds/linux",
  },
  {
    name: "Axios",
    description: "Promise-based HTTP client for JavaScript.",
    language: "JavaScript",
    difficulty: "beginner",
    url: "https://github.com/axios/axios",
  },
  {
    name: "Material UI",
    description: "React UI component library.",
    language: "TypeScript",
    difficulty: "beginner",
    url: "https://github.com/mui/material-ui",
  },
  {
    name: "Firebase JS SDK",
    description: "Client SDK for Firebase services.",
    language: "JavaScript",
    difficulty: "beginner",
    url: "https://github.com/firebase/firebase-js-sdk",
  },
  {
    name: "Insomnia",
    description: "API testing and development tool.",
    language: "JavaScript",
    difficulty: "beginner",
    url: "https://github.com/Kong/insomnia",
  },
  {
    name: "React Router",
    description: "Routing library for React applications.",
    language: "TypeScript",
    difficulty: "beginner",
    url: "https://github.com/remix-run/react-router",
  },
  {
    name: "Express",
    description: "Minimal Node.js web framework.",
    language: "JavaScript",
    difficulty: "beginner",
    url: "https://github.com/expressjs/express",
  },
  {
    name: "Node-RED",
    description: "Flow-based programming tool for IoT and APIs.",
    language: "JavaScript",
    difficulty: "intermediate",
    url: "https://github.com/node-red/node-red",
  },
  {
    name: "NestJS",
    description: "Progressive Node.js framework for scalable apps.",
    language: "TypeScript",
    difficulty: "intermediate",
    url: "https://github.com/nestjs/nest",
  },
  {
    name: "Redux",
    description: "Predictable state container for JavaScript apps.",
    language: "JavaScript",
    difficulty: "intermediate",
    url: "https://github.com/reduxjs/redux",
  },
  {
    name: "GraphQL JS",
    description: "Reference implementation of GraphQL in JavaScript.",
    language: "JavaScript",
    difficulty: "intermediate",
    url: "https://github.com/graphql/graphql-js",
  },
  {
    name: "WebRTC",
    description: "Real-time communication framework for browsers.",
    language: "C++",
    difficulty: "intermediate",
    url: "https://github.com/webrtc",
  },
  {
    name: "Nginx",
    description: "High-performance web server and reverse proxy.",
    language: "C",
    difficulty: "intermediate",
    url: "https://github.com/nginx/nginx",
  },
  {
    name: "Terraform",
    description: "Infrastructure as code tool by HashiCorp.",
    language: "Go",
    difficulty: "intermediate",
    url: "https://github.com/hashicorp/terraform",
  },
  {
    name: "OpenTelemetry JS",
    description: "Observability framework for cloud-native software.",
    language: "TypeScript",
    difficulty: "intermediate",
    url: "https://github.com/open-telemetry/opentelemetry-js",
  },
  {
    name: "Webpack",
    description: "Module bundler for JavaScript applications.",
    language: "JavaScript",
    difficulty: "intermediate",
    url: "https://github.com/webpack/webpack",
  },
  {
    name: "Docker Compose",
    description: "Tool for defining multi-container Docker apps.",
    language: "Go",
    difficulty: "intermediate",
    url: "https://github.com/docker/compose",
  },

  {
    name: "LLVM",
    description: "Compiler infrastructure for programming languages.",
    language: "C++",
    difficulty: "advanced",
    url: "https://github.com/llvm/llvm-project",
  },
  {
    name: "Chromium",
    description: "Open source browser project behind Chrome.",
    language: "C++",
    difficulty: "advanced",
    url: "https://github.com/chromium/chromium",
  },
  {
    name: "OpenCV",
    description: "Computer vision and image processing library.",
    language: "C++",
    difficulty: "advanced",
    url: "https://github.com/opencv/opencv",
  },
  {
    name: "Apache Spark",
    description: "Big data processing engine.",
    language: "Scala",
    difficulty: "advanced",
    url: "https://github.com/apache/spark",
  },
  {
    name: "Apache Kafka",
    description: "Distributed event streaming platform.",
    language: "Java",
    difficulty: "advanced",
    url: "https://github.com/apache/kafka",
  },
  {
    name: "Elasticsearch",
    description: "Distributed search and analytics engine.",
    language: "Java",
    difficulty: "advanced",
    url: "https://github.com/elastic/elasticsearch",
  },
  {
    name: ".NET Runtime",
    description: "Cross-platform runtime for .NET applications.",
    language: "C#",
    difficulty: "advanced",
    url: "https://github.com/dotnet/runtime",
  },
  {
    name: "Unreal Engine",
    description: "Advanced real-time 3D game engine.",
    language: "C++",
    difficulty: "advanced",
    url: "https://github.com/EpicGames/UnrealEngine",
  },
  {
    name: "Godot Engine",
    description: "Open source game engine for 2D and 3D games.",
    language: "C++",
    difficulty: "advanced",
    url: "https://github.com/godotengine/godot",
  },
  {
    name: "Blender",
    description: "3D creation suite for modeling, animation, and rendering.",
    language: "C",
    difficulty: "advanced",
    url: "https://github.com/blender/blender",
  },
  {
    name: "Apache Airflow",
    description: "Workflow orchestration platform.",
    language: "Python",
    difficulty: "advanced",
    url: "https://github.com/apache/airflow",
  },
  {
    name: "ONNX",
    description: "Open format for machine learning models.",
    language: "Python",
    difficulty: "advanced",
    url: "https://github.com/onnx/onnx",
  },
  {
    name: "JAX",
    description: "High-performance numerical computing library.",
    language: "Python",
    difficulty: "advanced",
    url: "https://github.com/google/jax",
  },
  {
    name: "Rust Compiler",
    description: "Compiler for the Rust programming language.",
    language: "Rust",
    difficulty: "advanced",
    url: "https://github.com/rust-lang/rust",
  },
  {
    name: "PostgreSQL",
    description: "Advanced open-source relational database.",
    language: "C",
    difficulty: "advanced",
    url: "https://github.com/postgres/postgres",
  },
  {
    name: "PyTorch",
    description: "Deep learning framework with dynamic graphs.",
    language: "Python",
    difficulty: "advanced",
    url: "https://github.com/pytorch/pytorch",
  },
  {
    name: "TensorFlow",
    description: "End-to-end machine learning platform.",
    language: "Python",
    difficulty: "advanced",
    url: "https://github.com/tensorflow/tensorflow",
  },
  {
    name: "Kubernetes",
    description: "Container orchestration system.",
    language: "Go",
    difficulty: "advanced",
    url: "https://github.com/kubernetes/kubernetes",
  },
  {
    name: "Linux Kernel",
    description: "Core of the Linux operating system.",
    language: "C",
    difficulty: "advanced",
    url: "https://github.com/torvalds/linux",
  },
  {
    name: "JAX",
    description: "High-performance machine learning research library.",
    language: "Python",
    difficulty: "advanced",
    url: "https://github.com/google/jax",
  },
];

const state = {
  language: "All",
  difficulty: "All",
};

const LANGS = ["All", "JavaScript", "TypeScript", "Python", "Go", "Rust"];
const DIFFS = ["All", "beginner", "intermediate", "advanced"];

const langClass = {
  JavaScript: "lang-js",
  TypeScript: "lang-ts",
  Python: "lang-py",
  Go: "lang-go",
  Rust: "lang-rust",
};

function getFiltered() {
  return PROJECTS.filter((p) => {
    const langMatch = state.language === "All" || p.language === state.language;
    const diffMatch =
      state.difficulty === "All" || p.difficulty === state.difficulty;
    return langMatch && diffMatch;
  });
}

function renderFilters() {
  const langWrap = document.getElementById("langFilters");
  const diffWrap = document.getElementById("diffFilters");

  langWrap.innerHTML = LANGS.map(
    (l) => `
        <button class="filter-btn ${state.language === l ? "active" : ""}" onclick="setLang('${l}')">${l}</button>
      `,
  ).join("");

  diffWrap.innerHTML = DIFFS.map(
    (d) => `
        <button class="filter-btn ${state.difficulty === d ? "active" : ""}" onclick="setDiff('${d}')">${d}</button>
      `,
  ).join("");
}

function renderGrid() {
  const data = getFiltered();
  document.getElementById("count").textContent =
    `${data.length} project${data.length !== 1 ? "s" : ""}`;

  const grid = document.getElementById("grid");

  if (data.length === 0) {
    grid.innerHTML = `<div class="empty-state">No projects match your filters.</div>`;
    return;
  }

  grid.innerHTML = data
    .map(
      (p) => `
        <div class="card">
          <div class="card-top">
           
          </div>
          <h3 class="name">${p.name}</h3>
          <div class="desc">${p.description}</div>
          <div class="tags">
            <span class="pill ${langClass[p.language] || ""}">${p.language}</span>
            <span class="difficulty ${p.difficulty}">${p.difficulty}</span>
          </div>
          <a class="link" href="${p.url}" target="_blank" rel="noopener">View Repo →</a>
        </div>
      `,
    )
    .join("");
}

function setLang(l) {
  state.language = l;
  render();
}

function setDiff(d) {
  state.difficulty = d;
  render();
}

function render() {
  renderFilters();
  renderGrid();
}

function toggleTheme() {
  document.body.classList.toggle("theme-dark");
  const btn = document.querySelector(".theme-toggle");
  btn.textContent = document.body.classList.contains("theme-dark")
    ? "☀️ Theme"
    : "🌙 Theme";
}

render();