/* ----- Project Imports ----- */
import "@/styles/projects.css";
import { webProjects } from "@/data/webdata.js";


function WebProjects() {
  return (
    <section id="webprojects" className="subProjectsContainer">
    <h3>This is Web projects area title</h3>
    <div className="projectItemsContainer">
    {webProjects.map((item) => {
      return (
        <div key={item.Name} className="projectIndividualItemContainer">
          <h4>{item.Name}</h4>
          <p>{item.Details}</p>
          <p>{item.Features}</p>
          <p>{item.Technologies}</p>
          <p>{item.GitHub}</p>
          <p>{item.Hosted}</p>
        </div>
      );
    })}
    </div>
    </section>
  );
};

export default WebProjects;