<!DOCTYPE html>
<html lang="en">
  <head>
    <%- include("./partials/head.ejs") %>
    <link rel="stylesheet" href="css/project.css" />
  </head>

  <body>
    <!-- Project -->
    <div class="container">
      <%- include("./partials/nav.ejs") %>

      <div class="box">
        <div class="box__row">
          <div data-cell="1" class="box__row-cell">
            <div class="box__row-cell-info">
              <p class="box__row-cell-info-ep">EP <span>04</span></p>
            </div>
            <div class="box__row-cell-info">
              <p class="box__row-cell-info-title">The <br /><span>TOP</span></p>
            </div>
            <div class="box__row-cell-info">
              <div class="box__row-cell-info-sign"></div>
            </div>
            <div class="box__row-cell-info box__row-cell-info--time">
              <p>Educational</p>
            </div>
            <div class="box__row-cell-info--full">
              <h1 class="box__row-cell-info--full-heading">The TOP</h1>
              <p class="box__row-cell-info--full-par">
                An online academic writing startup.
              </p>
            </div>
          </div>

          <div data-cell="2" class="box__row-cell">
            <div class="box__row-cell-info">
              <p class="box__row-cell-info-ep">EP <span>03</span></p>
            </div>
            <div class="box__row-cell-info">
              <p class="box__row-cell-info-title">
                Tic Tac Toc<br /><span>Game</span>
              </p>
            </div>
            <div class="box__row-cell-info">
              <div class="box__row-cell-info-sign"></div>
            </div>
            <div class="box__row-cell-info box__row-cell-info--time">
              <p>Game Development</p>
            </div>
            <div class="box__row-cell-info--full">
              <h1 class="box__row-cell-info--full-heading">Tic Tac Toc</h1>
              <p class="box__row-cell-info--full-par">A game dev project .</p>
            </div>
          </div>
        </div>

        <div class="box__row">
          <div data-cell="3" class="box__row-cell">
            <div class="box__row-cell-info">
              <p class="box__row-cell-info-ep">EP <span>02</span></p>
            </div>
            <div class="box__row-cell-info">
              <p class="box__row-cell-info-title">
                To Do <br /><span>App</span>
              </p>
            </div>
            <div class="box__row-cell-info">
              <div class="box__row-cell-info-sign"></div>
            </div>
            <div class="box__row-cell-info box__row-cell-info--time">
              <p>Time management</p>
            </div>
            <div class="box__row-cell-info--full">
              <h1 class="box__row-cell-info--full-heading">To Do App</h1>
              <p class="box__row-cell-info--full-par">
                A simple vanilla JavaScript App to manage your day.
              </p>
            </div>
          </div>

          <div data-cell="4" class="box__row-cell">
            <div class="box__row-cell-info">
              <p class="box__row-cell-info-ep">EP <span>01</span></p>
            </div>
            <div class="box__row-cell-info">
              <p class="box__row-cell-info-title">Visual Academics</p>
            </div>
            <div class="box__row-cell-info">
              <div class="box__row-cell-info-sign"></div>
            </div>
            <div class="box__row-cell-info box__row-cell-info--time">
              <p>Educational</p>
            </div>
            <div class="box__row-cell-info--full">
              <h1 class="box__row-cell-info--full-heading">Visual Academics</h1>
              <p class="box__row-cell-info--full-par">
                This is a project written entirely in React.
              </p>
            </div>
          </div>
        </div>

        <div data-content="1" class="box__content">
          <div class="box__content-wrapper">
            <div class="box__content-inner">
              <div class="box__content-text">
                <h2 class="box__content-text-heading">
                  PROJECT DETAILS - 43 MIN
                </h2>
                <p class="box__content-text-par">
                  This is a startup that aims to connect Talented specialist
                  writers with students and academic stakeholders. Non orci
                  porta, consectetur tellus in, gravida felis. Aenean vel
                  posuere lacus. Quisque eget rutrum elit. In eu tortor eget
                  velit scelerisque porttitor.
                </p>
                <p class="box__content-text-par">
                  I leveraged the serverless technology, Firebase, and Hasura to
                  equip the app with an out-of-the-box backend.
                </p>
                <h2 class="box__content-text-heading">TECH STACK</h2>
                <ul class="box__content-text-list">
                  <li class="box__content-text-item">FRONT-END</li>
                  <li class="box__content-text-item">CSS3</li>
                  <li class="box__content-text-item">JAVASCRIPT</li>
                  <li class="box__content-text-item">NODEJS</li>
                  <li class="box__content-text-item">MONGODB DATABASE</li>
                  <li class="box__content-text-item">APIs</li>
                </ul>
                <h2 class="box__content-text-heading">FOLLOW</h2>
                <a
                  class="box__content-text-link"
                  href="https://twitter.com"
                  target="_blank"
                  >fentonmiyare | @fentonmiyare</a
                ><br />
                <a
                  class="box__content-text-link"
                  href="https://codepen.io/fentonmiyare/"
                  target="_blank"
                  >Checkout my other pens</a
                >
              </div>
            </div>
          </div>
        </div>

        <div data-content="2" class="box__content">
          <div class="box__content-wrapper">
            <div class="box__content-inner">
              <div class="box__content-text">
                <h2 class="box__content-text-heading">
                  TIC TAC TOC GAME - 44 MIN
                </h2>
                <p class="box__content-text-par">
                  This TicTacToe project is a simulation of the Famous
                  real-world TicTacToe Game, but instead of using circles and
                  X's you can pick from a lot of other shapes, it was built
                  using HTML5, CSS3, and Vanilla JavaScript.
                </p>
                <p class="box__content-text-par">
                  Tic Tac Toe is a pencil and paper game played on a 3Ã—3 grid
                  wherein players take turns (one is X, and the other O) in
                  marking down the spaces in the grid. The first player who can
                  place his mark in a horizontal, vertical, or diagonal row wins
                  the match.
                </p>
                <h2 class="box__content-text-heading">SHOW NOTES</h2>
                <ul class="box__content-text-list">
                  <li class="box__content-text-item">WEB</li>
                  <li class="box__content-text-item">FRONT-END</li>
                  <li class="box__content-text-item">JAVASCRIPT</li>
                  <li class="box__content-text-item">INTERACTION</li>
                  <li class="box__content-text-item">SYSTEMS</li>
                </ul>
                <h2 class="box__content-text-heading">FOLLOW</h2>
                <a
                  class="box__content-text-link"
                  href="https://twitter.com/fentonmiyare"
                  target="_blank"
                  >fentonmiyare | @fentonmiyare</a
                ><br />
                <a
                  class="box__content-text-link"
                  href="https://codepen.io/fentonmiyare/"
                  target="_blank"
                  >Checkout my other pens</a
                >
              </div>
            </div>
          </div>
        </div>

        <div data-content="3" class="box__content">
          <div class="box__content-wrapper">
            <div class="box__content-inner">
              <div class="box__content-text">
                <h2 class="box__content-text-heading">TO DO APP - 41 MIN</h2>
                <p class="box__content-text-par">
                  This is my new todo list app where you can store your todos
                  securely and without a mess. Here you can edit a task, remove
                  it, add it to localhost memory, complete it and make a task
                  incomplete!
                </p>
                <p class="box__content-text-par">
                  User can mark an added task as completed . They can delete
                  only completed task or all added task as they wish. It is as
                  simple as it comes amd has easy to use functionalities!!
                </p>
                <h2 class="box__content-text-heading">TECH STACK</h2>
                <ul class="box__content-text-list">
                  <li class="box__content-text-item">JAVASCRIPT</li>
                  <li class="box__content-text-item">CSS3</li>
                  <li class="box__content-text-item">FRONT-END</li>
                </ul>
                <h2 class="box__content-text-heading">FOLLOW</h2>
                <a
                  class="box__content-text-link"
                  href="https://twitter.com/"
                  target="_blank"
                  >fenton miyare | @fentonmiyare</a
                ><br />
                <a
                  class="box__content-text-link"
                  href="https://codepen.io/fentonmiyare/"
                  target="_blank"
                  >Checkout my other projects</a
                >
              </div>
            </div>
          </div>
        </div>

        <div data-content="4" class="box__content">
          <div class="box__content-wrapper">
            <div class="box__content-inner">
              <div class="box__content-text">
                <h2 class="box__content-text-heading">
                  VISUAL ACADEMICS - 42 MIN
                </h2>
                <p class="box__content-text-par">
                  A complimentary writing-related platform for people in the
                  research field of academia. It's filled with curated
                  background stories from experts in various fields. Targets
                  both writing enthusiasts and students.
                </p>
                <p class="box__content-text-par">
                  This is a project written entirely in React combined with
                  other frontend JS frameworks. I employed REST API, using
                  context and useReducer API in place of redux, the JavaScript
                  fetch method and external axios library (just to name a few).
                </p>
                <h2 class="box__content-text-heading">SHOW NOTES</h2>
                <ul class="box__content-text-list">
                  <li class="box__content-text-item">FRONT-END</li>
                  <li class="box__content-text-item">BACK-END</li>
                  <li class="box__content-text-item">REACT</li>
                  <li class="box__content-text-item">JS FRAMEWORKS</li>
                  <li class="box__content-text-item">STYLED-COMPONENTS</li>
                  <li class="box__content-text-item">JAVASCRIPT</li>
                  <li class="box__content-text-item">INTERACTION</li>
                </ul>
                <h2 class="box__content-text-heading">FOLLOW</h2>
                <a
                  class="box__content-text-link"
                  href="https://twitter.com/fentonmiyare"
                  target="_blank"
                  >fentonmiyare | @fentonmiyare</a
                ><br />
                <a
                  class="box__content-text-link"
                  href="https://codepen.io/fentonmiyare/"
                  target="_blank"
                  >Checkout my other pens</a
                >
              </div>
            </div>
          </div>
        </div>
        <div class="box__close">
          <span></span><br />
          <span></span>
          <span></span><br />
          <span></span>
          <span></span>
          <span></span>
        </div>
        <div class="box__episodes">PROJECTS</div>
        <div class="box__smokebg"></div>
        <div class="box__title">
          <h1 class="box__title-heading">
            PORT<br />
            <span>FOLIO.</span>
          </h1>
          <p class="box__title-par">fenton miyare</p>
        </div>
      </div>

      <%- include("./partials/button.ejs") %>
    </div>
    <script src="js/main.js"></script>
    <script src="js/project.js"></script>
  </body>
</html>
