<file_sep>import React, { Component } from "react";
import { Link } from "react-router-dom";

// let url = window.location.href.split('/');
// let path = window.location.pathname;

class Navbar extends Component {
  constructor() {
    super();
    this.state = {};
  }

  render() {
    let { pathname } = this.props.location;
    return (
      <div className="navigation">
        <div className="inner-nav">
          <Link to="/" className={"/" === pathname ? "active" : "inactive"}>
            About Me
          </Link>

          <Link
            to="/languages"
            className={"/languages" === pathname ? "active" : "inactive"}
          >
            Languages & Frameworks
          </Link>

          <Link
            to="/projects"
            className={"/projects" === pathname ? "active" : "inactive"}
          >
            My Projects
          </Link>

          <Link
            to="contact"
            className={"/contact" === pathname ? "active" : "inactive"}
          >
            Contact Me
          </Link>
        </div>
        {/* {console.log(pathname)} */}
      </div>
    );
  }
}

export default Navbar;
<file_sep>import React from "react";
import wise from "../images/projects/wise-code.png";
import geek from "../images/projects/geektext.png";
import rhaz from "../images/projects/rhaz.png";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faLink, faCode } from "@fortawesome/free-solid-svg-icons";

const Projects = props => (
  <div className="projects">
    <div className="project1">
      <div className="flip">
        <div className="front">
          <img src={wise} alt="wise-code" />
        </div>
        <div className="back">
          <div className="project-name">
            <strong>Wise Code - Mobile</strong>
          </div>
          <div className="contributions">
            My Contributions:
            <ul>
              <li>
                Implemented and maintained Graphql API for data management app
                (WiseDB).
              </li>
              <li>Successfully created scripts to find and fix faulty data.</li>
              <li>
                Helped improve mutation efficiency and code cleanliness
                (refactoring).
              </li>
            </ul>
          </div>
          <div className="tech">
            Technologies used:
            <ul>
              <li>Graphql</li>
              <li>Prisma</li>
              <li>Yoga</li>
              <li>Redis</li>
              <li>Kubernetes</li>
              <li>Docker</li>
            </ul>
          </div>
          <div className="code-link">
            <button className="project-link">
              <FontAwesomeIcon icon={faLink} />
            </button>
            <button className="project-link">
              <FontAwesomeIcon icon={faCode} />
            </button>
          </div>
        </div>
      </div>
    </div>
    <div className="project2">
      <div className="flip">
        <div className="front">
          <img src={rhaz} alt="rhaz" />
        </div>
        <div className="back">
          <div className="project-name">
            <strong>RHAZ</strong>
          </div>
          <div className="contributions">
            My Contributions:
            <ul>
              <li>Implemented logic for alien movement and re-generation.</li>
            </ul>
          </div>
          <div className="tech">
            Technologies used:
            <ul>
              <li>Unity</li>
              <li>C#</li>
            </ul>
          </div>
          <div className="code-link">
            <button className="project-link">
              <FontAwesomeIcon icon={faLink} />
            </button>
            <button className="project-link">
              <FontAwesomeIcon icon={faCode} />
            </button>
          </div>
        </div>
      </div>
    </div>
    <div className="project3">
      <div className="flip">
        <div className="front coming-soon"></div>
        <div className="back">COMING SOON</div>
      </div>
    </div>
    <div className="project4">
      <div className="flip">
        <div className="front">
          <img src={geek} alt="geek-text" />
        </div>
        <div className="back">
          <div className="contributions-long">
            <strong>Geek Text</strong>
            <br />
            <br />
            My Contributions:
            <ul>
              <li>Implemented login feature.</li>
              <li>Impremented create-account feature.</li>
              <li>Used Stripe API for payment storage/verification.</li>
            </ul>
          </div>
          <div className="tech-long">
            Technologies used:
            <ul>
              <li>ReactJS</li>
              <li>Java Springboot</li>
              <li>Postgresql</li>
            </ul>
          </div>
          <div className="code-link-long">
            <button className="project-link">
              <FontAwesomeIcon icon={faLink} />
            </button>
            <button className="project-link">
              <FontAwesomeIcon icon={faCode} />
            </button>
          </div>
        </div>
      </div>
    </div>
  </div>
);

export default Projects;
<file_sep>import React, { Component } from "react";
import Navbar from "./components/Navbar";
import AboutMe from "./components/AboutMe";
import { BrowserRouter, Route, withRouter } from "react-router-dom";
import Languages from "./components/Languages";
import Projects from "./components/Projects";

class App extends Component {
  constructor() {
    super();
    this.state = {
      currentPage: window.location.pathname
    };
  }

  render() {
    return (
      <BrowserRouter>
        <div className="box">
          <Route
            path="/"
            render={withRouter(props => (
              <Navbar {...props} />
            ))}
          />
          <Route exact path="/" component={AboutMe} />
          <Route path="/languages" component={Languages} />
          <Route path="/projects" component={Projects} />
        </div>
        {console.log("URL", process.env.PUBLIC_URL)}
      </BrowserRouter>
    );
  }
}

export default App;
<file_sep>import React from "react";
import computer from "../images/computer.jpeg";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faFileDownload } from "@fortawesome/free-solid-svg-icons";
import { faLinkedin, faGithub } from "@fortawesome/free-brands-svg-icons";

const AboutMe = props => (
  <div className="content">
    <div className="computer">
      <img src={computer} alt="computer" />
    </div>

    <h1 className="name">
      Hello, <br />
      my name is <NAME>.
    </h1>
    <p className="about">
      I currently work as a <strong>full-stack software developer</strong> and
      enjoy challenging tasks, team collaboration and added responsibility. I am
      a problem solver working to constantly expand my knowledge. I am
      self-driven, detail- oriented, adaptable, and coachable, and hope to get
      the chance to work on high-impact projects.
    </p>
    <div className="icons">
      <button className="resume">
        <FontAwesomeIcon icon={faFileDownload} />
      </button>
      <button
        className="linkedin"
        onClick={() => {
          window.location.href =
            "https://www.linkedin.com/in/janeth-arriola-a01463158/";
        }}
      >
        <FontAwesomeIcon icon={faLinkedin} />
      </button>
      <button
        className="github"
        onClick={() => {
          window.location.href = "https://github.com/Jarriola989";
        }}
      >
        <FontAwesomeIcon icon={faGithub} />
      </button>
    </div>
  </div>
);

export default AboutMe;
<file_sep>import React from "react";
import cplusplus from "../images/c++.png";
import graphql from "../images/graphql.png";
import javascript from "../images/javascript.png";
import typescript from "../images/typescript.png";
import java from "../images/java.png";
import html from "../images/html.png";
import css from "../images/css.png";
import sql from "../images/sql.png";

const Languages = props => (
  <div className="languages">
    <div className="java">
      <img src={java} alt="java" />
    </div>
    <div className="javascript">
      <img src={javascript} alt="javascript" />
    </div>
    <div className="typescript">
      <img src={typescript} alt="typescript" />
    </div>

    <div className="html">
      <img src={html} alt="html" />
    </div>
    <div className="css">
      <img src={css} alt="css" />
    </div>
    <div className="graphql">
      <img src={graphql} alt="graphql" />
    </div>
    <div className="sql">
      <img src={sql} alt="sql" />
    </div>
    <div className="cplusplus">
      <img src={cplusplus} alt="C++" />
    </div>
  </div>
);

export default Languages;
