index.html

<!DOCTYPE html>
<html>
  <head>
    <meta name='viewport' content='width=device-width, initial-scale=1.0'>
    <link rel='stylesheet' type='text/css' href='https://fonts.googleapis.com/css?family=Dosis:300,500|Open+Sans:400,600&subset=latin-ext'>
    <link rel='icon' type='image/x-icon' href='images/favicon.png'>
    <link rel="stylesheet" href="css/style.min.css">
    <title>Portfolio | slri</title>
  </head>
  <body class='text-center' id='top' data-spy='scroll' data-target='.navbar' data-offset='50'>
    <div class='background'></div>
    <nav class='navbar navbar-fixed-top' role='navigation'>
      <div class='container'>
        <div class='navbar-header'>
          <button class='collapsed navbar-toggle' data-toggle='collapse' data-target='#navigation'>
            <span class='sr-only'>Toggle navigation</span>
            <span class='icon-bar'></span>
            <span class='icon-bar'></span>
            <span class='icon-bar'></span>
          </button>
        </div>
        <div class='collapse navbar-collapse navbar-right' id='navigation'>
          <ul class='nav navbar-nav text-capitalize'>
            <li>
              <a href='#about'>about</a>
            </li>
            <li>
              <a href='#skills'>skills</a>
            </li>
            <li>
              <a href='#work'>work</a>
            </li>
            <li>
              <a href='#contact'>contact</a>
            </li>
          </ul>
        </div>
      </div>
    </nav>
    <header id='intro'>
      <div class='profile-image'></div>
      <div class='col-md-5 col-xs-12 text-left'>
        <div class='hello'>
          <h1>
            <b>Hello,</b>
            <br>
            I'm Irina
          </h1>
        </div>
      </div>
      <div class='col-xs-12'>
        <button class='btn btn-overlay btn-round'>
          <i class='fa fa-chevron-down'></i>
        </button>
      </div>
    </header>
    <section id='about'>
      <div class='container'>
        <h1>What do I do?</h1>
        <p>I'm a simple person, I don't do well when directly exposed to the outernet and I get an existential crisis without a working PC within 5 meters of me.
          I eat, dream, and breathe programming, whenever I have the opportunity to work with something programming-related I'll go for it, no matter what it is. There's no better feeling in the world for me than being able to solve issues which caused me or other people a lot of headache.
          I like to create things, doesn't have to be something entirely new, it just has to be something different. I like to create in order to learn, it's the educated kind of trial and error that really excites me and drives me to finish something I have in mind.
          There are projects I've created just for the sole purpose of learning by building on them. I leave those projects sometimes untouched for several months until I find a new functionality that will possibly help me learn something new.
          Receiving critique is the best way to learn for me, especially when I realize my approach wasn't as good as I thought at first. It makes the newly acquired knowledge stick faster than repeating the same thing over and over again until it's almost second nature to me.
          However, I'm not a one trick pony. Sometimes I just wanna do something else to break the flow which is when I turn to one of my hobbies. Some of them include vocal synthesizers, games and ways to improve them (especially when it has to be done in creative ways), and graphics design.
        </p>
      </div>
    </section>
    <section id='skills'>
      <div class='container'>
        <h1 class='page-header'>Skills</h1>
        <div class='container text-left'>
          <h2>Front end:</h2>
          <div class='row'>
            <div class='col-md-6 col-xs-12 skill'>
              <div class='col-sm-3 col-xs-12 text-center'>
                <i class='devicon devicon-html5-plain' data-toggle='tooltip' data-placement='top' title='HTML5'></i>
              </div>
              <div class='col-sm-9 col-xs-12 graph'>
                <div class='row text'>
                  <div class='col-xs-4'>
                    <h4>
                      <i class='fa fa-star small'></i>
                      <span>Beginner</span>
                    </h4>
                  </div>
                  <div class='col-xs-4'>
                    <h4>
                      <i class='fa fa-star medium'></i>
                      <span>Intermediate</span>
                    </h4>
                  </div>
                  <div class='col-xs-4'>
                    <h4>
                      <i class='fa fa-star large'></i>
                      <span>Expert</span>
                    </h4>
                  </div>
                </div>
                <div class='percentage row'>
                  <div class='col-xs-4'>
                    <div class='b full'></div>
                  </div>
                  <div class='col-xs-4'>
                    <div class='full i'></div>
                  </div>
                  <div class='col-xs-4'>
                    <div class='e full'></div>
                  </div>
                </div>
              </div>
            </div>
            <div class='col-md-6 col-xs-12 skill'>
              <div class='col-sm-3 col-xs-12 text-center'>
                <i class='devicon devicon-css3-plain' data-toggle='tooltip' data-placement='top' title='CSS3'></i>
              </div>
              <div class='col-sm-9 col-xs-12 graph'>
                <div class='row text'>
                  <div class='col-xs-4'>
                    <h4>
                      <i class='fa fa-star small'></i>
                      <span>Beginner</span>
                    </h4>
                  </div>
                  <div class='col-xs-4'>
                    <h4>
                      <i class='fa fa-star medium'></i>
                      <span>Intermediate</span>
                    </h4>
                  </div>
                  <div class='col-xs-4'>
                    <h4>
                      <i class='fa fa-star large'></i>
                      <span>Expert</span>
                    </h4>
                  </div>
                </div>
                <div class='percentage row'>
                  <div class='col-xs-4'>
                    <div class='b full'></div>
                  </div>
                  <div class='col-xs-4'>
                    <div class='full i'></div>
                  </div>
                  <div class='col-xs-4'>
                    <div class='e full'></div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class='row'>
            <div class='col-md-6 col-xs-12 skill'>
              <div class='col-sm-3 col-xs-12 text-center'>
                <i class='devicon devicon-javascript-plain' data-toggle='tooltip' data-placement='top' title='Javascript'></i>
              </div>
              <div class='col-sm-9 col-xs-12 graph'>
                <div class='row text'>
                  <div class='col-xs-4'>
                    <h4>
                      <i class='fa fa-star small'></i>
                      <span>Beginner</span>
                    </h4>
                  </div>
                  <div class='col-xs-4'>
                    <h4>
                      <i class='fa fa-star medium'></i>
                      <span>Intermediate</span>
                    </h4>
                  </div>
                  <div class='col-xs-4'>
                    <h4>
                      <i class='fa fa-star large'></i>
                      <span>Expert</span>
                    </h4>
                  </div>
                </div>
                <div class='percentage row'>
                  <div class='col-xs-4'>
                    <div class='b full'></div>
                  </div>
                  <div class='col-xs-4'>
                    <div class='full i'></div>
                  </div>
                  <div class='col-xs-4'>
                    <div class='e half'></div>
                  </div>
                </div>
              </div>
            </div>
            <div class='col-md-6 col-xs-12 skill'>
              <div class='col-sm-3 col-xs-12 text-center'>
                <i class='devicon devicon-jquery-plain' data-toggle='tooltip' data-placement='top' title='jQuery'></i>
              </div>
              <div class='col-sm-9 col-xs-12 graph'>
                <div class='row text'>
                  <div class='col-xs-4'>
                    <h4>
                      <i class='fa fa-star small'></i>
                      <span>Beginner</span>
                    </h4>
                  </div>
                  <div class='col-xs-4'>
                    <h4>
                      <i class='fa fa-star medium'></i>
                      <span>Intermediate</span>
                    </h4>
                  </div>
                  <div class='col-xs-4'>
                    <h4>
                      <i class='fa fa-star large'></i>
                      <span>Expert</span>
                    </h4>
                  </div>
                </div>
                <div class='percentage row'>
                  <div class='col-xs-4'>
                    <div class='b full'></div>
                  </div>
                  <div class='col-xs-4'>
                    <div class='full i'></div>
                  </div>
                  <div class='col-xs-4'>
                    <div class='e third'></div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class='row'>
            <div class='col-md-6 col-xs-12 skill'>
              <div class='col-sm-3 col-xs-12 text-center'>
                <i class='devicon devicon-bootstrap-plain' data-toggle='tooltip' data-placement='top' title='Bootstrap'></i>
              </div>
              <div class='col-sm-9 col-xs-12 graph'>
                <div class='row text'>
                  <div class='col-xs-4'>
                    <h4>
                      <i class='fa fa-star small'></i>
                      <span>Beginner</span>
                    </h4>
                  </div>
                  <div class='col-xs-4'>
                    <h4>
                      <i class='fa fa-star medium'></i>
                      <span>Intermediate</span>
                    </h4>
                  </div>
                  <div class='col-xs-4'>
                    <h4>
                      <i class='fa fa-star large'></i>
                      <span>Expert</span>
                    </h4>
                  </div>
                </div>
                <div class='percentage row'>
                  <div class='col-xs-4'>
                    <div class='b full'></div>
                  </div>
                  <div class='col-xs-4'>
                    <div class='full i'></div>
                  </div>
                  <div class='col-xs-4'>
                    <div class='e third'></div>
                  </div>
                </div>
              </div>
            </div>
            <div class='col-md-6 col-xs-12 skill'>
              <div class='col-sm-3 col-xs-12 text-center'>
                <i class='devicon devicon-sass-plain' data-toggle='tooltip' data-placement='top' title='Sass'></i>
              </div>
              <div class='col-sm-9 col-xs-12 graph'>
                <div class='row text'>
                  <div class='col-xs-4'>
                    <h4>
                      <i class='fa fa-star small'></i>
                      <span>Beginner</span>
                    </h4>
                  </div>
                  <div class='col-xs-4'>
                    <h4>
                      <i class='fa fa-star medium'></i>
                      <span>Intermediate</span>
                    </h4>
                  </div>
                  <div class='col-xs-4'>
                    <h4>
                      <i class='fa fa-star large'></i>
                      <span>Expert</span>
                    </h4>
                  </div>
                </div>
                <div class='percentage row'>
                  <div class='col-xs-4'>
                    <div class='b full'></div>
                  </div>
                  <div class='col-xs-4'>
                    <div class='full i'></div>
                  </div>
                  <div class='col-xs-4'>
                    <div class='e'></div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <h2>Back end:</h2>
          <div class='row'>
            <div class='col-md-6 col-xs-12 skill'>
              <div class='col-sm-3 col-xs-12 text-center'>
                <i class='devicon devicon-php-plain' data-toggle='tooltip' data-placement='top' title='PHP'></i>
              </div>
              <div class='col-sm-9 col-xs-12 graph'>
                <div class='row text'>
                  <div class='col-xs-4'>
                    <h4>
                      <i class='fa fa-star small'></i>
                      <span>Beginner</span>
                    </h4>
                  </div>
                  <div class='col-xs-4'>
                    <h4>
                      <i class='fa fa-star medium'></i>
                      <span>Intermediate</span>
                    </h4>
                  </div>
                  <div class='col-xs-4'>
                    <h4>
                      <i class='fa fa-star large'></i>
                      <span>Expert</span>
                    </h4>
                  </div>
                </div>
                <div class='percentage row'>
                  <div class='col-xs-4'>
                    <div class='b full'></div>
                  </div>
                  <div class='col-xs-4'>
                    <div class='full i'></div>
                  </div>
                  <div class='col-xs-4'>
                    <div class='e half'></div>
                  </div>
                </div>
              </div>
            </div>
            <div class='col-md-6 col-xs-12 skill'>
              <div class='col-sm-3 col-xs-12 text-center'>
                <i class='devicon devicon-mysql-plain' data-toggle='tooltip' data-placement='top' title='MySQL'></i>
              </div>
              <div class='col-sm-9 col-xs-12 graph'>
                <div class='row text'>
                  <div class='col-xs-4'>
                    <h4>
                      <i class='fa fa-star small'></i>
                      <span>Beginner</span>
                    </h4>
                  </div>
                  <div class='col-xs-4'>
                    <h4>
                      <i class='fa fa-star medium'></i>
                      <span>Intermediate</span>
                    </h4>
                  </div>
                  <div class='col-xs-4'>
                    <h4>
                      <i class='fa fa-star large'></i>
                      <span>Expert</span>
                    </h4>
                  </div>
                </div>
                <div class='percentage row'>
                  <div class='col-xs-4'>
                    <div class='b full'></div>
                  </div>
                  <div class='col-xs-4'>
                    <div class='full i'></div>
                  </div>
                  <div class='col-xs-4'>
                    <div class='e third'></div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class='row'>
            <div class='col-md-6 col-xs-12 skill'>
              <div class='col-sm-3 col-xs-12 text-center'>
                <i class='devicon devicon-laravel-plain' data-toggle='tooltip' data-placement='top' title='Laravel'></i>
              </div>
              <div class='col-sm-9 col-xs-12 graph'>
                <div class='row text'>
                  <div class='col-xs-4'>
                    <h4>
                      <i class='fa fa-star small'></i>
                      <span>Beginner</span>
                    </h4>
                  </div>
                  <div class='col-xs-4'>
                    <h4>
                      <i class='fa fa-star medium'></i>
                      <span>Intermediate</span>
                    </h4>
                  </div>
                  <div class='col-xs-4'>
                    <h4>
                      <i class='fa fa-star large'></i>
                      <span>Expert</span>
                    </h4>
                  </div>
                </div>
                <div class='percentage row'>
                  <div class='col-xs-4'>
                    <div class='b full'></div>
                  </div>
                  <div class='col-xs-4'>
                    <div class='full i'></div>
                  </div>
                  <div class='col-xs-4'>
                    <div class='e third'></div>
                  </div>
                </div>
              </div>
            </div>
            <div class='col-md-6 col-xs-12 skill'>
              <div class='col-sm-3 col-xs-12 text-center'>
                <i class='devicon devicon-wordpress-plain' data-toggle='tooltip' data-placement='top' title='Wordpress'></i>
              </div>
              <div class='col-sm-9 col-xs-12 graph'>
                <div class='row text'>
                  <div class='col-xs-4'>
                    <h4>
                      <i class='fa fa-star small'></i>
                      <span>Beginner</span>
                    </h4>
                  </div>
                  <div class='col-xs-4'>
                    <h4>
                      <i class='fa fa-star medium'></i>
                      <span>Intermediate</span>
                    </h4>
                  </div>
                  <div class='col-xs-4'>
                    <h4>
                      <i class='fa fa-star large'></i>
                      <span>Expert</span>
                    </h4>
                  </div>
                </div>
                <div class='percentage row'>
                  <div class='col-xs-4'>
                    <div class='b full'></div>
                  </div>
                  <div class='col-xs-4'>
                    <div class='full i'></div>
                  </div>
                  <div class='col-xs-4'>
                    <div class='e'></div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
    <section id='work'>
      <div class='skew-pages'>
        <div class='active skew-page' id='page1'>
          <div class='skew-page-left'>
            <div class='skew-page-skewed'>
              <div class='skew-page_content'>
                <h2>
                  <a href='https://www.wearebamboo.com/'>We Are Bamboo</a>
                </h2>
                <p>This project was really fun to work on because it was a real full stack experience. It pushed me to explore, learn, and get comfortable with various skillsets while improving my overall code proficiency. Some of the things I've done include:</p>
                <ul>
                  <li>Rewrote the front end using the newest technologies while keeping the original SquareSpace design intact, greatly decreasing loading time of the website.</li>
                  <li>Enhanced security of the tour sign up process.</li>
                  <li>Improved code quality to decrease server resource consumption on statistics pages.</li>
                  <li>Resolved multiple inconsistency bugs by minimizing code repetition which improved website performance and fixed problems with wrong data being displayed.</li>
                  <li>Implemented Stripe as an alternative method of payment in the tour signup process.</li>
                </ul>
                <a class='btn btn-sm' href='https://codepen.io/RuinIsProbablyTaken/pen/OboeyB'>Landing page concept</a>
                <a class='btn btn-sm' href='https://codepen.io/RuinIsProbablyTaken/pen/BppRwZ'>Other pages concept</a>
              </div>
            </div>
          </div>
          <div class='skew-page-right'>
            <div class='skew-page-skewed'>
              <div class='skew-page_content skew-page_content_image'></div>
            </div>
          </div>
        </div>
        <div class='skew-page' id='page2'>
          <div class='skew-page-left'>
            <div class='skew-page-skewed'>
              <div class='skew-page_content skew-page_content_image'></div>
            </div>
          </div>
          <div class='skew-page-right'>
            <div class='skew-page-skewed'>
              <div class='skew-page_content'>
                <h2>
                  <a href='https://jcltraffic.com/'>JCL Traffic</a>
                </h2>
                <p>Working on a CRM was really enjoyable since it was my very first project of that sort and it's complex by nature. Developed tools that will be used internally via the admin panel by the JCL Traffic personnel. Some of the things I've done include:</p>
                <ul>
                  <li>Resolved user role handling inconsistency to enforce better role handling which decreased development time and improved scalability.</li>
                  <li>Enhanced personnel account possibilities to include taking full control of the user accounts in order for support service to be much more effective.</li>
                </ul>
              </div>
            </div>
          </div>
        </div>
        <div class='skew-page' id='page3'>
          <div class='skew-page-left'>
            <div class='skew-page-skewed'>
              <div class='skew-page_content'>
                <h2>Minute To Win It</h2>
                <p>In this project the accent was on the unique design, ease of use, and customization freedom. It had to be friendly for non-technical people and having that in mind I decided on using WordPress and Divi theme for easy page manipulation.</p>
                <a class='btn btn-sm' href='https://codepen.io/RuinIsProbablyTaken/pen/YNzjwZ'>Header concept</a>
              </div>
            </div>
          </div>
          <div class='skew-page-right'>
            <div class='skew-page-skewed'>
              <div class='skew-page_content skew-page_content_image'></div>
            </div>
          </div>
        </div>
      </div>
      <div class='cards'>
        <div class='card' id='page1'>
          <div class='card-header'>
            <div class='card-image'></div>
            <h2 class='card-title'>
              <div class='container'>
                <a href='https://www.wearebamboo.com/'>We Are Bamboo</a>
              </div>
            </h2>
          </div>
          <div class='card-content container'>
            <p>This project was really fun to work on because it was a real full stack experience. It pushed me to explore, learn, and get comfortable with various skillsets while improving my overall code proficiency. Some of the things I've done include:</p>
            <ul>
              <li>Rewrote the front end using the newest technologies while keeping the original SquareSpace design intact, greatly decreasing loading time of the website.</li>
              <li>Enhanced security of the tour sign up process.</li>
              <li>Improved code quality to decrease server resource consumption on statistics pages.</li>
              <li>Resolved multiple inconsistency bugs by minimizing code repetition which improved website performance and fixed problems with wrong data being displayed.</li>
              <li>Implemented Stripe as an alternative method of payment in the tour signup process.</li>
            </ul>
            <a class='btn btn-sm' href='https://codepen.io/RuinIsProbablyTaken/pen/OboeyB'>Landing page concept</a>
            <a class='btn btn-sm' href='https://codepen.io/RuinIsProbablyTaken/pen/BppRwZ'>Other pages concept</a>
          </div>
        </div>
        <div class='card' id='page2'>
          <div class='card-header'>
            <div class='card-image'></div>
            <h2 class='card-title'>
              <div class='container'>
                <a href='https://jcltraffic.com/'>JCL Traffic</a>
              </div>
            </h2>
          </div>
          <div class='card-content container'>
            <p>Working on a CRM was really enjoyable since it was my very first project of that sort and it's complex by nature. Developed tools that will be used internally via the admin panel by the JCL Traffic personnel. Some of the things I've done include:</p>
            <ul>
              <li>Resolved user role handling inconsistency to enforce better role handling which decreased development time and improved scalability.</li>
              <li>Enhanced personnel account possibilities to include taking full control of the user accounts in order for support service to be much more effective.</li>
            </ul>
          </div>
        </div>
        <div class='card' id='page3'>
          <div class='card-header'>
            <div class='card-image'></div>
            <h2 class='card-title'>
              <div class='container'>
                Minute To Win It
              </div>
            </h2>
          </div>
          <div class='card-content container'>
            <p>In this project the accent was on the unique design, ease of use, and customization freedom. It had to be friendly for non-technical people and having that in mind I decided on using WordPress and Divi theme for easy page manipulation.</p>
            <a class='btn btn-sm' href='https://codepen.io/RuinIsProbablyTaken/pen/YNzjwZ'>Header concept</a>
          </div>
        </div>
      </div>
      <div class='skew-pages_overlay'></div>
      <a class='skew-pages_navigation skip-work stick-top' href='#skills' data-toggle='tooltip' data-placement='bottom' title='Skip section'>
        <span class='fa fa-chevron-up'></span>
      </a>
      <a class='btn skew-pages_navigation' id='show-work' href='#work'>Browse</a>
      <a class='skew-pages_navigation skip-work stick-bottom' href='#contact' data-toggle='tooltip' data-placement='top' title='Skip section'>
        <span class='fa fa-chevron-down'></span>
      </a>
    </section>
    <section id='contact'>
      <div class='container'>
        <h1 id='target'>Get in touch!</h1>
        <form method='POST' action='https://formspree.io/irina.balaban.dev@gmail.com'>
          <div class='field form-group'>
            <div class='block'>
              <label for='email-from'>Your email address:</label>
            </div>
            <input class='form-control' type='email' name='email-from' placeholder='' required='required'>
          </div>
          <div class='field form-group'>
            <div class='block'>
              <label for='message'>Your message:</label>
            </div>
            <textarea class='form-control' name='message' required='required'></textarea>
          </div>
          <button class='btn btn-overlay' type='submit'>Send</button>
        </form>
      </div>
    </section>
    <footer>
      <div class='container'>
        <p class='credits'>
          Made by Irina Balaban
          <br>
          Using
          <a href='https://github.com/twbs/bootstrap'>Bootstrap</a>
          ,
          <a href='https://github.com/FortAwesome/Font-Awesome'>Font Awesome</a>
          ,
          <a href='https://github.com/konpa/devicon/'>Devicon</a>
          ,
          <a href='https://github.com/jquery/jquery'>jQuery</a>
          , and
          <a href='https://github.com/rdallasgray/bez'>jQuery bez plugin</a>
          <br>
          Picture by
          <a href='https://www.pexels.com/u/snufkin-44775/'>Snufkin at Pexels</a>
        </p>
        <div class='row social'>
          <div class='col-sm-1 col-sm-offset-3 col-xs-12'>
            <a href='https://codepen.io/RuinIsProbablyTaken/'>
              <i class='fa fa-codepen'></i>
            </a>
          </div>
          <div class='col-sm-1 col-xs-12'>
            <a href='https://bitbucket.org/Ruinisprobablytaken/'>
              <i class='fa fa-bitbucket'></i>
            </a>
          </div>
          <div class='col-sm-1 col-xs-12'>
            <a href='https://github.com/slri/'>
              <i class='fa fa-github'></i>
            </a>
          </div>
          <div class='col-sm-1 col-xs-12'>
            <a href='https://www.freecodecamp.org/ruinisprobablytaken'>
              <i class='fa fa-free-code-camp'></i>
            </a>
          </div>
          <div class='col-sm-1 col-xs-12'>
            <span data-toggle='tooltip' data-placement='top' title='Add Pilvi#2962 !'>
              <i class='fa fa-discord'></i>
            </span>
          </div>
          <div class='col-sm-1 col-xs-12'>
            <a class='skype-button' href='#!' data-contact-id='live:irina.balaban.dev'>
              <i class='fa fa-skype'></i>
            </a>
          </div>
        </div>
        <a class='back-to-top' href='#'>
          <i class='fa fa-chevron-up'></i>
        </a>
      </div>
    </footer>
    <script src='https://swc.cdn.skype.com/sdk/v1/sdk.min.js'></script>
    <script src="js/main.min.js"></script>
  </body>
</html>