IT Services [LIVE]

A customer-oriented solution for the IT Services company.

A design and implementation phases had two main objectives throughout the entire shipping process. First one was to create as elegant and appealing UI as possible. This was achieved by mainly relying on the vector assets. In my opinion, the biggest contributor to the overall aesthetics was the SVG files. They have significantly improved the visuals, and their presence has made a distinctive mark on the website.

The second goal was to provide a vibrant yet harmonious experience for the user. The motion was the answer. The GSAP animation library and the barba.js one blended brilliantly with each other. Had it not been for this duo, the final solution wouldn't have been that accessible for future maintenance. In terms of scalability, this was a perfect decision as well. The ES6 syntax has made the entire implementation phase quite amusing and liberating, so to speak.

Development

As far as the sole development is concerned, I have followed the BEM convention and taken advantage of all perks that come from working with SCSS files. The babel compiler made it possible for me to write in ES6 syntax. ESLint, as well as Codacy, takes care of the quality of the source code. Travis CI made it incredibly convenient to control the current build status. I have also taken leverage of GitHub Pages and its compatibility with Travis to quickly deploy the project. Renovate bot ensures that no dependency is outdated. The webpack serves as a bundler. What's more, this website is fully responsive.

External Libraries / Tools / Conventions

• barba.js - Barba is a small and easy-to-use library that helps you creating fluid and smooth transitions between your website's pages
• GSAP (GreenSock Animation Platform) - Ultra high-performance, professional-grade animation for the modern web
• babel - Babel is a compiler for writing next generation JavaScript
• webpack - A bundler for javascript and friends
• SCSS (SASS) - Sass is an extension of CSS, adding nested rules, variables, mixins, selector inheritance, and more
• BEM - Block Element Modifier is a methodology that helps you to create reusable components and code sharing in front-end development
• Travis CI - A hosted continuous integration service. "Test and Deploy Your Code with Confidence"
• Codacy - Automated code reviews & code analytics
• Renovate - Multi-language dependency update automation