Merging HTML & JavaScript

I'm editing a section of an open source web-page. It gives logos of companies. This is the main StartupProjects.js file for that particular section: There's also a StartupProjects.css file.

import React from "react";
import "./StartupProjects.css";
import { bigProjects } from "../../portfolio";

export default function StartupProject() {
  function openProjectInNewWindow(url) {
    var win = window.open(url, "_blank");
    win.focus();
  }

  return (
    <div className="main" id="projects">
      <div>
        <h1 className="skills-heading">{bigProjects.title}</h1>
        <p className="subTitle project-subtitle">{bigProjects.subtitle}</p>
        <div className="startup-projects-main">
          <div className="startup-project-text">
            {bigProjects.projects.map(project => {
              return (
                <div className="saaya-health-div" onClick={() => openProjectInNewWindow(project.link)}>
                  <img alt="ME Working" src={project.image}></img>
                </div>
              );
            })}
          </div>
          <div className="starup-project-image"></div>
        </div>
      </div>
    </div>
  );
}

and this is what's imported from another porfolio.js file

const bigProjects = {
  /* Some Big Projects You have worked with your company */
  title: "What I've Been Upto",
  subtitle: "Education",
  projects: [
    {
      image: "https://drive.google.com/uc?VR66eP6RiGAfY",
      link: "http://abaaaac.com/"
    },
    {
      image: "http://themes/nextu/images/og_img.jpg",
      link: "http://xyzhahahnext.se/"
    }
  ]
};

Now, I want to insert a timeline in the same place of this section, under the same heading without disturbing other sections of the webpage. I have written an HTML & CSS code but I can't figure out how to link it here with the javascript file.

For css, I can just edit StartupProjects.css and although there's no file for HTML yet, i can create one but What do I need to keep in the .js file?