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

function WebProjects() {

  return (
    <section id="webprojects" className="projectInformationContainer">
      {webProjects.map((item, index) => {
        return(
          <div key={item.Name} className="projectIndividualItemContainer">
            <div className="projectImageContainer">
              <img className ="projectImage" src={item.Image} alt={item.Name} />
            </div>
            <div className="projectTextContainer">
            <h3 className="projectTextTitle">{item.Name}</h3>
            <p className="projectTechnologies">{item.Technologies}</p>
            <div className="projectLinksContainer">
            <a className="individualProjectLinks" href={item.GitHub} target="_blank" >GitHub</a>
            <a className="individualProjectLinks" href={item.Hosted} target="_blank" >Hosted</a>
            </div>
            </div>
        </div>);
      })}
    </section>
  );
};

export default WebProjects;