PAW_TP1_Maquetado_Punto_6

index.html

<section class="section-resume">
  <div class="main-container">
    <!--PRESENTATION-->
    <table class="presentation">
      <tbody>
        <tr><td class="header name width-525">Nicolas Sebastian Vidal</td></tr>
        <tr><td class="header profession">Software Engineer</td></tr>
      </tbody>
    </table>
    <!--WORK EXPERIENCE-->
    <table class="experience-header">
      <tbody>
        <tr><td class="work-image"><i class="fas fa-pencil-ruler fa-3x"></i></td></tr>
        <tr><td class="experience-subtitle"><h2>Work Experience</h2></td></tr>
      </tbody>
    </table>
    <table class="experience">
      <tbody>
        <tr>
          <td class="center exp-td width-90 bold">
            <p class="margin-top-5">May 2018</p>
            <p>Present</p>
          </td>
          <td class="exp-td width-90">
            <img class="devborn" src="https://s3.amazonaws.com/nisevi-paw/tp1/devborn.png">
          </td>
          <td class="exp-td width-340">
              Software Engineer. Working with Ruby on Rails and React in order to
              deliver new functionality every day. Continuous Integration processes
              by using TravisCI and CircleCI. Continuous deployment by using pipelines
              and AWS services.
          </td>
        </tr>
        <tr>
          <td class="center exp-td width-90 bold">
            <p class="margin-top-5">Aug 2015</p>
            <p>Present</p>
          </td>
          <td class="exp-td width-90">
            <img class="agile-ventures" src="https://s3.amazonaws.com/nisevi-paw/tp1/agile-ventures.png">
          </td>
          <td class="exp-td width-340">
              On the technical side I'm mainly using Ruby on Rails as a framework, both versions 4 and 5. We use heroku for hosting services and I've been involved in some devops tasks mainly on the LocalSupport project. We have tools like travis-ci, codeclimate, coveralls and semaphoreci for continuous integration and continuous deployment. On the front end I've been using Bootstrap as a toolkit for developing with HTML, CSS, and JS. In addition we've been using Rspec and Cucumber as testing frameworks.
          </td>
        </tr>
        <tr>
          <td class="center exp-td width-90 bold">
            <p class="margin-top-5">Oct 2014</p>
            <p>Sep 2016</p>
          </td>
          <td class="exp-td width-90">
            <img class="tradehelm" src="https://s3.amazonaws.com/nisevi-paw/tp1/tradehelm.png">
          </td>
          <td class="exp-td width-340">
              I was in charge of designing and developing documents that arise from the relationship among the different parts involved in the construction industry. This is managed through Textura®, which is is the leading provider of collaboration and productivity tools for this field, across the project lifecycle. The technologies that we used were RML, Python and JIRA for the management of issues, VPN connection, Linux as primary Operative System, SVN and SCRUM methodologies.
          </td>
        </tr>
        <tr>
          <td class="center exp-td width-90 bold">
            <p class="margin-top-5">Sep 2014</p>
            <p>Jul 2016</p>
          </td>
          <td class="exp-td width-90">
            <img class="upwork" src="https://s3.amazonaws.com/nisevi-paw/tp1/upwork.png">
          </td>
          <td class="exp-td width-340">
              I was in charge of 5 projects making general improvements. I used ThinkingSphinx search engine, Nokogiri to get and parse the html and Redis with Sidekiq to process the information that we obtained. These apps were using AWS/S3 to consume what they need. For front-end development I was using Bourbon. We used Trello for the management of the issues, Linux as OS and GitHub as a Git repository web-based hosting service.
          </td>
        </tr>
      </tbody>
    </table>
    <!--EDUCATION-->
    <table class="education-header">
      <tbody>
        <tr><td class="work-image"><i class="fas fa-user-graduate fa-3x"></i></td></tr>
        <tr><td class="experience-subtitle"><h2>Education</h2></td></tr>
      </tbody>
    </table>
    <table class="education">
      <tbody>
        <tr>
          <td class="center exp-td width-90 bold">UNLu</td>
          <td class="exp-td width-430">National University of Luján. B.S in Systems (85% complete)</td>
        </tr>
      </tbody>
    </table>
  </div>
  <!--SIDE BAR-->
  <table class="side-bar">
    <tbody>
      <tr>
        <td class="image">
          <img class="self" src="https://s3.amazonaws.com/nisevi-paw/tp1/resized.png" />
        </td>
      </tr>
      <tr>
        <td class="sidebar-icon">
          <i class="fas fa-info-circle fa-3x"></i>
        </td>
      </tr>
      <tr>
        <td>
          <h2 class="sidebar-subtitle">Informations</h2>
        </td>
      </tr>
      <tr>
        <td>
          <p class="info-item">
            <i class="far fa-calendar-alt fa-lg"></i> 03.10.1987
          </p>
        </td>
      </tr>
      <tr>
        <td>
          <p class="info-item">
            <i class="far fa-envelope fa-lg"></i> nicolas.s.vidal@gmail.com
          </p>
        </td>
      </tr>
      <tr>
        <td>
          <p class="info-item">
            <i class="fab fa-github fa-lg"></i> github.com/nisevi
          </p>
        </td>
      </tr>
      <tr>
        <td>
          <p class="info-item">
            <i class="fab fa-skype fa-lg"></i> nicolassvidal
          </p>
        </td>
      </tr>
      <tr>
        <td>
          <p class="info-item">
            <i class="fab fa-medium-m fa-lg"></i> medium.com/@nisevi
          </p>
        </td>
      </tr>
      <tr>
        <td class="sidebar-icon">
          <i class="fas fa-comments fa-3x"></i>
        </td>
      </tr>
      <tr>
        <td>
          <h2 class="sidebar-subtitle">Languages</h2>
        </td>
      </tr>
      <tr>
        <td>
          <p class="language">Spanish...........................Native</p>
        </td>
      </tr>
      <tr>
        <td>
          <p class="language">English............................B2</p>
        </td>
      </tr>
      <tr>
        <td class="sidebar-icon">
          <i class="fas fa-desktop fa-3x"></i>
        </td>
      </tr>
      <tr>
        <td>
          <h2 class="sidebar-subtitle">Computer Skills</h2>
        </td>
      </tr>
      <tr>
        <td>
          <p class="skill-item">Ruby&nbsp;&nbsp;
            <span class="dots">
              <i class="fas fa-circle fa-lg"></i>
              <i class="fas fa-circle fa-lg"></i>
              <i class="fas fa-circle fa-lg"></i>
              <i class="fas fa-circle fa-lg"></i>
              <i class="far fa-circle fa-lg"></i>
            </span>
          </p>
        </td>
      </tr>
      <tr>
        <td>
          <p class="skill-item">Rails&nbsp;&nbsp;
            <span class="dots">
              <i class="fas fa-circle fa-lg"></i>
              <i class="fas fa-circle fa-lg"></i>
              <i class="fas fa-circle fa-lg"></i>
              <i class="fas fa-circle fa-lg"></i>
              <i class="far fa-circle fa-lg"></i>
            </span>
          </p>
        </td>
      </tr>
      <tr>
        <td>
          <p class="skill-item">Python&nbsp;&nbsp;
            <span class="dots">
              <i class="fas fa-circle fa-lg"></i>
              <i class="fas fa-circle fa-lg"></i>
              <i class="fas fa-circle fa-lg"></i>
              <i class="far fa-circle fa-lg"></i>
              <i class="far fa-circle fa-lg"></i>
            </span>
          </p>
        </td>
      </tr>
      <tr>
        <td>
          <p class="skill-item">Sidekiq&nbsp;&nbsp;
            <span class="dots">
              <i class="fas fa-circle fa-lg"></i>
              <i class="fas fa-circle fa-lg"></i>
              <i class="fas fa-circle fa-lg"></i>
              <i class="far fa-circle fa-lg"></i>
              <i class="far fa-circle fa-lg"></i>
            </span>
          </p>
        </td>
      </tr>
      <tr>
        <td>
          <p class="skill-item">Redis&nbsp;&nbsp;
            <span class="dots">
              <i class="fas fa-circle fa-lg"></i>
              <i class="fas fa-circle fa-lg"></i>
              <i class="fas fa-circle fa-lg"></i>
              <i class="far fa-circle fa-lg"></i>
              <i class="far fa-circle fa-lg"></i>
            </span>
          </p>
        </td>
      </tr>
      <tr>
        <td>
          <p class="skill-item">CSS&nbsp;&nbsp;
            <span class="dots">
              <i class="fas fa-circle fa-lg"></i>
              <i class="fas fa-circle fa-lg"></i>
              <i class="fas fa-circle fa-lg"></i>
              <i class="fas fa-circle fa-lg"></i>
              <i class="far fa-circle fa-lg"></i>
            </span>
          </p>
        </td>
      </tr>
      <tr>
        <td>
          <p class="skill-item">HTML&nbsp;&nbsp;
            <span class="dots">
              <i class="fas fa-circle fa-lg"></i>
              <i class="fas fa-circle fa-lg"></i>
              <i class="fas fa-circle fa-lg"></i>
              <i class="fas fa-circle fa-lg"></i>
              <i class="far fa-circle fa-lg"></i>
            </span>
          </p>
        </td>
      </tr>
      <tr>
        <td>
          <p class="skill-item">GIT&nbsp;&nbsp;
            <span class="dots">
              <i class="fas fa-circle fa-lg"></i>
              <i class="fas fa-circle fa-lg"></i>
              <i class="fas fa-circle fa-lg"></i>
              <i class="far fa-circle fa-lg"></i>
              <i class="far fa-circle fa-lg"></i>
            </span>
          </p>
        </td>
      </tr>
    </tbody>
  </table>
</section>

paw_tp1_maquetado_punto_6.markdown

PAW_TP1_Maquetado_Punto_6

A Pen by Nicolás on CodePen.

License.

style.css

table, tbody, tr, td {
  border-spacing: 0;
  font-family: system-ui;
}

.bold {
  font-weight: bold;
}

.center {
  text-align: center;
}

.section-resume {
  width: 100%;
  display: flex;
  justify-content: center;
}

/* MAIN CONTAINER */
/****************/

.main-container {
  flex-direction: column;
  width: 525px;
  margin-right: 30px;
}

.presentation,
.experience-header,
.experience,
.education-header,
.education {
  width: 100%;
}

.experience-header,
.education-header {
  padding-top: 20px;
}

.header {
  background-color: #38393B;
  color: white;
  text-align: center;
  height: 27px;
  text-transform: uppercase;
}

.name {
  font-family: "Trebuchet MS";
  font-size: 30px;
}

.profession {
  font-family: "Courier New";
  font-size: 35px;
}

.work-image {
  text-align: center;
  padding: 10px;
  height: 27px;
}

.width-90 {
  width: 90px;
}

.width-340 {
  width: 340px;
}

.width-430 {
  width: 430px;
}

.experience-subtitle {
  text-align: center;
  text-transform: uppercase;
  font-size: 20px;
  font-family: "Verdana";
  color: grey;
}

.experience {
  font-family: "Verdana";
  text-align: justify;
}

.ed-td,
.exp-td {
  vertical-align:top;
  padding: 5px;
}

.margin-top-5 {
  margin-top: 5px;
}

.devborn,
.agile-ventures,
.tradehelm,
.upwork,
.monklar {
  height: 100px;
  width: 100%;
}

/* SIDE BAR */
/************/

.side-bar {
  order: 2;
  width: 235px;
  background-color: #E5D7C7;
  padding-bottom: 50px;
}

.image {
  text-align: center;
  height: 200px;
}

.self {
  padding: 10px;
  width: 200px;
  height: 200px;
  border-radius: 50%;
}

.sidebar-icon {
  padding-top: 30px;
  text-align: center;
}

.sidebar-subtitle {
  text-transform: uppercase;
  text-align: center;
  font-family: Arial;
  font-size: 20px;
}

.info-item {
  margin-left: 5px;
  margin-bottom: 10px;
  margin-top: 5px;
}

.language {
  margin-left: 5px;
}

.skill-item {
  margin-left: 5px;
  margin-bottom: 0;
  line-height: 18px;
  font-size: 16px;
  vertical-align: middle;
}

.dots {
  float: right;
  padding-right: 10px;
}

styles

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.8.1/css/all.min.css" rel="stylesheet" />