index.html


<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">

  <title>Sydoruk Serhii</title>

  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/octicons/2.0.2/octicons.min.css">

  
  <style type="text/css">
@import url('https://fonts.googleapis.com/css?family=Lato:300,400,700');

body {
  background: #fff;
  font-family: Lato, sans-serif;
  font-weight: 300;
  color: #333;
  margin: 0 0 80px;
  font-size: 15px;
}

a {
  color: #e32b46;
}

a:focus,
a:hover {
  color: #333;
  text-decoration: none;
}

strong {
  font-size: smaller;
  font-weight: 400;
  color: #333;
}

p {
  line-height: 1.5;
  margin: 0 0 0.5em 0;
}

p + p {
  margin-top: 10px;
}

h1,
h2,
h3,
h4 {
  margin-top: 0;
  font-weight: 300;
  color: #555;
}

section {
  margin-top: 24px;
}

ul,
ol {
  padding-left: 21px;
}

li {
  line-height: 1.8;
  list-style: none;
}

li:before {
  content: '\f052';
  float: left;
  font: 16px Octicons;
  margin-top: 6px;
  margin-left: -20px;
  opacity: 0.1;
  position: absolute;
}

blockquote {
  border-left: 3px solid #e7e9ec;
  font-size: 14px;
  margin-bottom: 4px;
}

em {
  color: #666;
  font-weight: 300;
  font-style: normal;
}

h4 span:first-child {
  color: #333;
  font-weight: 400;
}

.section {
  display: flex;
  margin-right: -15px;
  margin-left: -15px;
}

.section-title {
  flex: 1;
  text-align: right;
  padding-right: 30px;
}

.section-content {
  flex: 4;
}

.container {
  max-width: 768px;
  padding: 0 30px;
}

.item-row {
  padding-top: 5px;
  margin-top: -5px;
}

.item-row-split {
  display: flex;
  flex-wrap: wrap;
}

.item-split {
  flex: 0 0 50%;
}

#header {
  padding: 50px 0 25px;
}

#header .section-title {
  padding-right: 30px;
}

#header h2 {
  color: #95a5a6;
  font-size: 24px;
}

#content h3 {
  color: #555;
  font-size: 26px;
  margin-top: -4px;
}

#profiles .network {
  text-transform: capitalize;
}

#work .position,
#volunteer .position {
  font-weight: 400;
  margin-bottom: 8px;
}

#education .area {
  font-weight: 400;
}

#education .area:before {
  content: '\f0d7';
  font: 16px Octicons;
  margin-right: 6px;
}

#education .studyType {
  margin-left: 25px;
  padding-bottom: 5px;
}

#awards .summary,
#publications .summary {
  margin-top: 8px;
}

#publications .website a:before {
  content: attr(href);
}

@media (min-width: 480px) {
  .strike-through {
    border-top: 1px solid #f4f6f6;
    height: 20px;
    margin-top: 12px;
    margin-bottom: -2px;
    position: relative;
  }

  .strike-through span,
  .strike-through a {
    background: #fff;
    position: absolute;
  }

  .strike-through span:first-child {
    padding-right: 20px;
    margin-top: -12px;
  }

  .strike-through span + span {
    font-size: 14px;
    margin-top: -10px;
    padding-left: 20px;
    right: 0;
  }
}

@media (max-width: 480px) {
  h1 {
    font-size: 28px;
  }

  #header h2 {
    font-size: 24px;
  }

  #content h3 {
    font-size: 20px;
  }

  h4 {
    font-size: 16px;
  }

  .date {
    font-size: 14px;
    margin-bottom: 5px;
  }

  .strike-through span:first-child {
    margin-bottom: 7px;
  }

  .strike-through span {
    display: block;
  }

  #header {
    padding: 30px 0 0;
  }

  #actions {
    display: none;
  }
}

@media (max-width: 768px) {
  .section-content {
    flex: 6;
  }

  #content h3 {
    font-size: 20px;
    margin-top: -1px;
  }
}

@page {
  margin-top: 0.5in;
  margin-bottom: 0.5in;
}

@media print {
  a {
    color: #333 !important;
    font-weight: bold;
  }

  a[href]:after {
    display: none;
  }
  .break-page { 
    break-after: page;
  }

  *,
  :after,
  :before {
    background: #fff !important;
  }

  .container::before,
  .container::after {
    content: inherit;
  }

  .item-row {
    break-inside: avoid;
  }

  #content aside {
    margin: 0 !important;
  }
}

  </style>
  
</head>
<body>
  <!-- HEADER -->
  <header id="header">
    <div class="container">
			<div class="section">
        <div class="section-title">
          <img src="https://www.gravatar.com/avatar/486489f9bd18cb42de73c12f67ac889c?s=400" class="img-responsive img-circle pull-right" style="max-height: 88px">
        </div>
				<div class="section-content">
          <h1>Sydoruk Serhii</h1>
          <h2>Frontend Engineer</h2>
				</div>
			</div>
		</div>
	</header>

  <!-- CONTENT: Re-arrange sections order if necessary -->
  <div id="content" class="container">
    <!-- Contact -->
    

  <section id="contact" class="section">
    <aside class="section-title"><h3>Contact</h3></aside>
    <div class="section-content">
      <div class="item-row">
        <div class="item-row-split">
          
            <div class="item-split">
              <strong>Email</strong>
              <div>
                <a href="mailto:sidoruksergey@gmail.com">sidoruksergey@gmail.com</a>
              </div>
            </div>
          
          
            <div class="item-split">
              <strong>Phone</strong>
              <div class="phone">+380988113773</div>
            </div>
          
          
            <div class="item-split">
              <strong>Website</strong>
              <div>
                <a target="_blank" href="https://sydoruk.com">https://sydoruk.com</a>
              </div>
            </div>
          
        </div>
      </div>
    </div>
  </section>


    <!-- About -->
    

  <section id="about" class="section">
    <aside class="section-title">
      <h3>About</h3>
    </aside>
    <div class="section-content">
      <p>Dynamic and detail-oriented Full Stack Developer with over <span id='diffyear'>15</span> years of experience specializing in client-side programming. Proven track record in delivering diverse and complex web projects in sectors ranging from healthcare to political analytics and homeowner maintenance management systems.<br /><br />

 An effective team player in both large and small agile teams, with a knack for translating design team visions into pixel-perfect web formats, while adhering to responsive web design conventions. Passionate about keeping pace with the latest industry trends and advancements, and committed to continuous learning and professional growth.<br /><br />

 Driven by results, I am currently seeking opportunities to leverage my technical skills and passion to become a leading software engineer in a challenging and progressive environment.</p>
    </div>
  </section>


    <!-- Profiles -->
    

  <section id="profiles" class="section">
    <aside class="section-title">
      <h3>Profiles</h3>
    </aside>
    <div class="section-content">
      <div class="item-row">
        <div class="item-row-split">
          
            <div class="item-split">
              <strong class="network">Facebook</strong>
              <div class="url">
                <a target="_blank" href="https://www.facebook.com/SydorukSV">SydorukSV</a>
              </div>
            </div>
          
            <div class="item-split">
              <strong class="network">Twitter</strong>
              <div class="url">
                <a target="_blank" href="https://twitter.com/Sidoruk_SV">@Sidoruk_SV</a>
              </div>
            </div>
          
            <div class="item-split">
              <strong class="network">Linkedin</strong>
              <div class="url">
                <a target="_blank" href="https://www.linkedin.com/in/sydoruk-sv">sydoruk-sv</a>
              </div>
            </div>
          
        </div>
      </div>
    </div>
  </section>


    <!-- Education -->
    

  <section id="education" class="section">
    <aside class="section-title">
      <h3>Education</h3>
    </aside>
    <div class="section-content">
      
        <div class="item-row">
          <h4 class="strike-through">
            <span>National Aviation University</span>
            <span class="date">
              September 2007 — June 2012
            </span>
          </h4>
          <div class="area">Multimedia systems</div>
          <div class="studyType">
            Master of Engineering
            
          </div>
          
        </div>
      
    </div>
  </section>


    <!-- Languages -->
    

  <section id="languages" class="section">
    <aside class="section-title">
      <h3>Languages</h3>
    </aside>
    <div class="section-content">
      <div class="item-row">
        <div class="item-row-split">
          
            <div class="item-split">
              <div class="language"><strong>Ukrainian</strong></div>
              <div class="fluency">Native speaker</div>
            </div>
          
            <div class="item-split">
              <div class="language"><strong>English</strong></div>
              <div class="fluency">Upper Intermediate</div>
            </div>
          
        </div>
      </div>
    </div>
  </section>


    <!-- Interests -->
    

  <section id="interests" class="section">
    <aside class="section-title">
      <h3>Interests</h3>
    </aside>
    <div class="section-content">
      <div class="item-row">
        <div class="item-row-split">
          
            <div class="item-split">
              <div class="name">
                <h4>Sport</h4>
              </div>
              <ul class="keywords">
                
                  <li>Squash</li>
                
              </ul>
            </div>
          
            <div class="item-split">
              <div class="name">
                <h4>Hobby</h4>
              </div>
              <ul class="keywords">
                
                  <li>Travelling</li>
                
                  <li>Astronomy</li>
                
                  <li>Listening to Podcasts</li>
                
              </ul>
            </div>
          
        </div>
      </div>
    </div>
  </section>


    <div class="break-page"></div>

    <!-- Work -->
    

  <section id="work" class="section">
    <aside class="section-title">
      <h3>Work</h3>
    </aside>
    <div class="section-content">
      
        <div class="item-row">
          <h4 class="strike-through">
            <span>Wix.com</span>
            <span class="date">
              September 2018 — June 2024
            </span>
          </h4>
          <div class="website pull-right">
            <a target="_blank" href="https://wix.com">wix.com</a>
          </div>
          <div class="position">
            Frontend Team Lead
          </div>
          <div class="summary">
            <p>Wix.com Ltd. is an Israeli software company, providing cloud-based web development services. It allows users to create HTML5 websites and mobile sites through the use of online drag and drop tools. Key technologies used: TypeScript, React.js, Mobx, Redux.</p>
          </div>
          
            <p><strong>Highlights</strong></p>
            <ul class="highlights">
              
                <li class="bullet">Team Lead at Wix Groups FEDs</li>
              
                <li class="bullet">Engineer from FED infrastructure team (till Dec 2021)</li>
              
                <li class="bullet">Developer in Premium Domains FED squad (till Jan 2021)</li>
              
            </ul>
          
        </div>
      
        <div class="item-row">
          <h4 class="strike-through">
            <span>Helsi</span>
            <span class="date">
              February 2017 — September 2018
            </span>
          </h4>
          <div class="website pull-right">
            <a target="_blank" href="https://helsi.me">helsi.me</a>
          </div>
          <div class="position">
            Frontend Team Lead
          </div>
          <div class="summary">
            <p>Ukrainian health-care startup. Key technologies used: React, Redux, Redux Saga, Redux Form.</p>
          </div>
          
        </div>
      
        <div class="item-row">
          <h4 class="strike-through">
            <span>Cogniance</span>
            <span class="date">
              August 2015 — January 2017
            </span>
          </h4>
          <div class="website pull-right">
            <a target="_blank" href="https://star.global">star.global</a>
          </div>
          <div class="position">
            Frontend Engineer
          </div>
          <div class="summary">
            <p></p>
          </div>
          
            <p><strong>Highlights</strong></p>
            <ul class="highlights">
              
                <li class="bullet">Web app for homeowners (the key technologies used: Angular 1.*, SCSS);</li>
              
                <li class="bullet">Chrome extension for Gmail (the key technologies used: InboxSDK, Backbone.js, SCSS);</li>
              
                <li class="bullet">CRM analytics web app (the key technologies used: React, Redux).</li>
              
            </ul>
          
        </div>
      
        <div class="item-row">
          <h4 class="strike-through">
            <span>R&amp;R Music Ltd</span>
            <span class="date">
              October 2014 — July 2015
            </span>
          </h4>
          <div class="website pull-right">
            <a target="_blank" href="https://"></a>
          </div>
          <div class="position">
            Frontend Developer
          </div>
          <div class="summary">
            <p>The key technologies used: Ember.js, JavaScript, SCSS.</p>
          </div>
          
            <p><strong>Highlights</strong></p>
            <ul class="highlights">
              
                <li class="bullet">Development of Ember web app for music library catalog;</li>
              
            </ul>
          
        </div>
      
        <div class="item-row">
          <h4 class="strike-through">
            <span>ZEO Alliance</span>
            <span class="date">
              October 2012 — October 2014
            </span>
          </h4>
          <div class="website pull-right">
            <a target="_blank" href="https://clario.co">clario.co</a>
          </div>
          <div class="position">
            Frontend Developer 
          </div>
          <div class="summary">
            <p>The key technology used: JavaScript, jQuery, SCSS, Less, HTML, HTML5, CSS, CSS3.</p>
          </div>
          
            <p><strong>Highlights</strong></p>
            <ul class="highlights">
              
                <li class="bullet">supporting and improving the company&#39;s indoor landing management system</li>
              
                <li class="bullet">work with HTML for in-app web views inside of the desktop application (MacKeeper)</li>
              
                <li class="bullet">implementation of new technologies (HTML5, CSS3, CSS frameworks, JavaScript frameworks)</li>
              
            </ul>
          
        </div>
      
        <div class="item-row">
          <h4 class="strike-through">
            <span>Stanfy</span>
            <span class="date">
              August 2011 — October 2012
            </span>
          </h4>
          <div class="website pull-right">
            <a target="_blank" href="https://stanfy.com">stanfy.com</a>
          </div>
          <div class="position">
            HTML/CSS/JavaScript developer
          </div>
          <div class="summary">
            <p>The key technologies used: Backbone.js, PhoneGap, JavaScript, jQuery, HTML, HTML5, CSS, CSS3.</p>
          </div>
          
            <p><strong>Highlights</strong></p>
            <ul class="highlights">
              
                <li class="bullet">Developed the hybrid mobile application on PhoneGap.js (iOS, Android)</li>
              
                <li class="bullet">Worked with the front-end part (WebViews) of mobile applications;</li>
              
            </ul>
          
        </div>
      
    </div>
  </section>


    <!-- Skills -->
    

  <section id="skills" class="section">
    <aside class="section-title">
      <h3>Skills</h3>
    </aside>
    <div class="section-content">
      <div class="item-row">
        <div class="item-row-split">
          
            <div class="item-split">
              <div class="name">
                <h4>React.js</h4>
              </div>
              
                <ul class="keywords">
                  
                    <li>Redux</li>
                  
                    <li>Redux-Saga</li>
                  
                    <li>MobX</li>
                  
                </ul>
              
            </div>
          
            <div class="item-split">
              <div class="name">
                <h4>AngularJS</h4>
              </div>
              
            </div>
          
            <div class="item-split">
              <div class="name">
                <h4>Other</h4>
              </div>
              
                <ul class="keywords">
                  
                    <li>Component-based UI</li>
                  
                    <li>Responsive design</li>
                  
                    <li>Chrome Extension development</li>
                  
                    <li>Continuous Integration</li>
                  
                    <li>JIRA tuning</li>
                  
                </ul>
              
            </div>
          
        </div>
      </div>
    </div>
  </section>


    <!-- Certificates -->
    

    <!-- Awards -->
    

    <!-- Projects -->
    

    <!-- Volunteer -->
    

    <!-- Publications -->
    

    <!-- References -->
    

  <section id="references" class="section">
    <aside class="section-title">
      <h3>References</h3>
    </aside>
    <div class="section-content">
      
        <div class="item-row">
          <p>Serhii is a great young specialist. One of those who has good knowledge, amazing desire to explore and implement new technologies. I&#39;ve collaborated with Serhii as product owner and can recommend him as a great front-end developer with huge potential.</p>
          <p class="name">
            <strong>— Sergey Moliavko</strong></p>
          </p>
          <br>
        </div>
      
        <div class="item-row">
          <p>Serhii is a very innovative developer, who always followed the innovations in the industry and successfully applied them in practice. Self-organized and able to achieve the goals. Very friendly, good team player. It was a pleasure to work with him.</p>
          <p class="name">
            <strong>— Anastasiia Voitova</strong></p>
          </p>
          <br>
        </div>
      
        <div class="item-row">
          <p>Serhii is highly professional HTML/CSS technician. We worked together on a few extremely challenging projects, that required continuous attention, constant engagement, commitment, and readiness to generate new ideas, and it proved to be an excellent collaboration. Serhii is especially attentive to details and is eager to try out new technologies and approaches, which makes him a great team member and contractor.</p>
          <p class="name">
            <strong>— Anna Mininkova</strong></p>
          </p>
          <br>
        </div>
      
    </div>
  </section>


  </div>
  <script>
    document.getElementById('diffyear').innerHTML = new Date().getFullYear() - 2009;
  </script>
</body>
</html>