text: import React, { Component } from "react";
  import ProjectDetailsModal from "./ProjectDetailsModal";
  
  class Projects extends Component {
      constructor(props) {
          super(props);
          this.state = {
              deps: {},
              detailsModalShow: false,
          };
      }
  
      render() {
          let detailsModalShow = (data) => {
              this.setState({ detailsModalShow: true, deps: data });
          };
  
          let detailsModalClose = () =>
              this.setState({ detailsModalShow: false });
          if (this.props.resumeProjects && this.props.resumeBasicInfo) {
              // var sectionName = this.props.resumeBasicInfo.section_name.projects; // I change to Semester Project for now
              var sectionName = "School Projects in Nanyang Polytechnic";
              var projects = this.props.resumeProjects.map(function (projects) {
                  return (
                      <div
                          className="col-sm-12 col-md-6 col-lg-4"
                          key={projects.title}
                          style={{ cursor: "pointer" }}
                      >
                          <span className="portfolio-item d-block">
                              <div
                                  className="foto"
                                  onClick={() => detailsModalShow(projects)}
                              >
                                  <div>
                                      {/*
                    style={{ backgroundColor: "gray" }}  #EBE1CE */}
                                      <img
                                          src={projects.images[0]}
                                          alt="projectImages"
                                          height="230"
                                          style={{
                                              maxHeight: "100%",
                                              maxWidth: "100%",
                                              objectFit: "contain",
                                              marginBottom: 0,
                                              paddingBottom: 0,
                                              position: "relative",
                                          }}
                                      />
                                      <span className="project-date">
                                          {projects.startDate}
                                      </span>
                                      <br />
                                      <p className="project-title-settings mt-3">
                                          {projects.title}
                                      </p>
                                  </div>
                              </div>
                          </span>
                      </div>
                  );
              });
          }
  
          return (
              <section id="portfolio">
                  <div className="col-md-12">
                      <h1 className="section-title" style={{ color: "black" }}>
                          <span>{sectionName}</span>
                      </h1>
                      <div className="col-md-12 mx-auto">
                          <div className="row mx-auto">{projects}</div>
                      </div>
                      <ProjectDetailsModal
                          show={this.state.detailsModalShow}
                          onHide={detailsModalClose}
                          data={this.state.deps}
                      />
                  </div>
              </section>
          );
      }
  }
  
  export default Projects;
  