/* ----- Project Imports ----- */
import "@/styles/technologies.css";
import { techData } from "@/data/techdata.js"


function Technologies() {
  return (
    <article id="tech" className="technologiesContainer">
    <h2 className="experienceTitle">Expertise</h2>
    <section className="experienceContainer">
    {techData.map((data) => {
      return (
        <div key={data.Name} className="experienceInnerContainer">
          <div className="experienceItemContainer">
          <h3 className="experienceItemTitle">{data.Name}</h3>
          <ul className="experienceList">
          {data.List.map((item) => {
            return (
              <li key={item} className="experienceListItem">{item}</li>
            );
          })}
          </ul>
          </div>
        </div>
      );
  })}
    </section>
    </article>
  );
};

export default Technologies;

