<repo_name>ebru-c-7/my-portfolio<file_sep>/src/components/Tools.js
import React from "react";

const Tools = (props) => {
  return props.data.map((tool, i) => (
    <img
      src={tool.logo}
      alt={tool.name}
      key={i}
      style={{ width: "2rem" }}
      title={tool.name}
    />
  ));
};

export default Tools;
<file_sep>/src/components/CustomCard.js
import React from "react";

import Card from "react-bootstrap/Card";

import Tools from "./Tools";
import logo from "../assets/projects/logo.png";

const CustomCard = (props) => {
  return (
    <div className="card-container">
      {props.data.map((pro, i) => (
        <Card bg="light" text="dark" className="custom-card" key={i}>
          <Card.Img variant="top"  className="project-logo" src={pro.logo || logo} />
          <Card.Body>
            <Card.Title>{pro.name}</Card.Title>
            <Card.Text>{pro.description}</Card.Text>
          </Card.Body> 
          <Card.Footer>
            {!!pro.codeURL && <Card.Link target="blank" href={pro.codeURL}>Code</Card.Link>}
            {!!pro.link && <Card.Link target="blank" href={pro.link}>Live</Card.Link>}
            {!!pro.document && <Card.Link target="blank" href={pro.document}>Doc</Card.Link>}
          </Card.Footer>
          <Card.Footer>
            <Tools data={pro.tools} />
          </Card.Footer>
        </Card>
      ))}
    </div>
  );
};

export default CustomCard;
<file_sep>/src/components/About.js
import React from "react";

import Modal from "react-bootstrap/Modal";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faLinkedinIn, faGithub } from "@fortawesome/free-brands-svg-icons";
import { faEnvelope } from "@fortawesome/free-solid-svg-icons";

import profile from "../assets/profile-ebru-c-7.jpg";

const About = (props) => {
  return (
    <React.Fragment>
      <Modal.Header closeButton>
        <Modal.Title>who am I?</Modal.Title>
      </Modal.Header>
      <Modal.Body>
        <img src={profile} alt="profile" className="about-profile" />
        <p>
          I have provided the advisory and audit (post-control) services at EY
          Turkey to the global clients for almost 6 years after graduation.
          However, at the end of this long and fruitful career, I have decided
          to pursue a different path and started to work to become a web
          developer after leaving EY as the "Global Trade Manager".
        </p>
        <p>
          I have completed the double major program with MIS department in the
          university and participated in the system design and management of
          multiple projects to get my degree.
        </p>
        <p>
          In the projects I have created, React, Jquery, Bootstrap, CSS3, HTML5
          for Frontend; Node.js (REST API) for Backend are used (Check out{" "}
          <code onClick={props.change.bind(null, "skills")}>my skills</code>{" "}
          section here).
        </p>
        <p>
          Also, you can take a look at the projects on{" "}
          <code onClick={props.change.bind(null, "my-projects")}>
            my projects
          </code>{" "}
          section.
        </p>
      </Modal.Body>
      <Modal.Footer>
        <Modal.Header>
          <b>Contact: </b>
        </Modal.Header>
        <Modal.Body>
          <a
            className="about-social"
            target="blank"
            rel="noopener noreferrer"
            href={"https://www.linkedin.com/in/ebru-%C3%A7akmak-1b62b133/"}
          >
            <FontAwesomeIcon
              style={{ fontSize: "1.3rem" }}
              icon={faLinkedinIn}
            />
          </a>
          <a className="about-social" href={`mailto:<EMAIL>`}>
            <FontAwesomeIcon style={{ fontSize: "1.3rem" }} icon={faEnvelope} />
          </a>
          <a
            className="about-social"
            target="blank"
            rel="noopener noreferrer"
            href={"https://github.com/ebru-c-7/"}
          >
            <FontAwesomeIcon style={{ fontSize: "1.3rem" }} icon={faGithub} />{" "}
          </a>
        </Modal.Body>
      </Modal.Footer>
    </React.Fragment>
  );
};

export default About;
<file_sep>/src/components/Container.js
import React, { useState } from "react";

import rocket from "../assets/icons/rocket-solid.svg";
import code from "../assets/icons/laptop-code-solid.svg";
import cap from "../assets/icons/graduation-cap-solid.svg";
import tools from "../assets/icons/tools-solid.svg";

import MenuItem from "./MenuItem";
import CustomModal from "./CustomModal";

const Container = () => {
  const [modal, setModal] = useState(null);

  const modalHandler = (section) => setModal(section);

  const modalCloseHandler = () => setModal(null);
  
  return (
    <React.Fragment>
      <div className="App">
        <MenuItem
          class="App-top"
          logo={rocket}
          alt="about-me"
          modalHandler={modalHandler}
        >
          About Me
        </MenuItem>
        <div className="App-middle">
          <MenuItem logo={code} alt="my-projects" modalHandler={modalHandler}>
            My Projects
          </MenuItem>
          <MenuItem
            logo={cap}
            alt="education-certificates"
            modalHandler={modalHandler}
          >
            Education & {"\n"}
            Certificates
          </MenuItem>
        </div>
        <MenuItem
          class="App-bottom"
          logo={tools}
          alt="skills"
          modalHandler={modalHandler}
        >
          My Skills
        </MenuItem>
      </div>
      <CustomModal change={modalHandler} type={modal} close={modalCloseHandler} />
    </React.Fragment>
  );
}

export default Container;
<file_sep>/src/components/Projects.js
import React, { useState } from "react";
import axios from "../utility/axios";

import Modal from "react-bootstrap/Modal";

import CustomCard from "./CustomCard";

const Projects = (props) => {
  const [list, setList] = useState(null);

  const loadProjects = async () => {
    const projects = await axios.get("/projectList.json");
    setList(projects.data);
  };

  if (!list) {
    loadProjects();
  }

  let content = list ? (
    <React.Fragment>
      <Modal.Header closeButton>
        <Modal.Title>My Projects</Modal.Title>
      </Modal.Header>
      <Modal.Body>
        <CustomCard data={list} />
      </Modal.Body>
    </React.Fragment>
  ) : null;

  return content;
};

export default Projects;
<file_sep>/src/components/CustomFigure.js
import React from "react";

import Figure from "react-bootstrap/Figure";

const CustomFigure = (props) => {
  let figuresElement = props.data.map((el, i) => (
    <Figure key={i}>
      <Figure.Image alt="tool" src={el.logo} />
      <Figure.Caption>{el.description}</Figure.Caption>
    </Figure>
  ));

  return (
    <section>
      <h6>{props.children}</h6>
      <div className="figure-container">{figuresElement}</div>
    </section>
  );
};

export default CustomFigure;
<file_sep>/src/components/Skills.js
import React, { useState } from "react";
import axios from "../utility/axios";

import Modal from "react-bootstrap/Modal";

import CustomFigure from "./CustomFigure";

const Skills = (props) => {
  const [list, setList] = useState(null);

  const loadSkills = async () => {
    const skills = await axios.get("/skillsList.json");
    setList(skills.data);
  };

  if (!list) {
    loadSkills();
  }

  let content = list ? (<React.Fragment>
    <Modal.Header closeButton>
      <Modal.Title>My Skills</Modal.Title>
    </Modal.Header>
    <Modal.Body>
      <CustomFigure data={list && list.project}>My Project-Based Skills</CustomFigure>
      <hr />
      <CustomFigure data={list && list.basic}>General Knowledge</CustomFigure>
    </Modal.Body>
  </React.Fragment>) : null;
 
  return content;
};

export default Skills;
