nowakkamil / it-services

A customer-oriented solution for the IT Services company

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

it-services's Issues

Add a link to the services section from the landing section

Adjust link references while deployed on GitHub Pages

Create navbar fallback for JavaScript disabled version

Add the animation timeline of the staff section

Add animations to the entire webpage

Add Travis CI with proper configuration

Adjust the white bottom bar to be fully visible on mobile

Add the content of the staff member card (visible on hover)

Hide address bar on mobile

Adjust navbar links colours for various backgrounds across each section

Add scroll and swipe indicator to cover all devices

Add the elements of the contact section with styling

Dependency Dashboard

This issue lists Renovate updates and detected dependencies. Read the Dependency Dashboard docs to learn more.

Rate-Limited

These updates are currently rate-limited. Click on a checkbox below to force their creation now.

• Update babel monorepo (@babel/core, @babel/plugin-proposal-class-properties, @babel/preset-env)
• Update dependency babel-loader to v8.3.0
• Update dependency gsap to v3.12.5
• Update dependency start-server-and-test to v1.15.4
• Update dependency style-loader to v1.3.0
• Update dependency babel-loader to v9
• Update dependency copy-webpack-plugin to v12
• Update dependency css-loader to v7
• Update dependency cypress to v13
• Update dependency eslint to v9
• Update dependency postcss-loader to v8
• Update dependency sass-loader to v14
• Update dependency start-server-and-test to v2
• Update dependency style-loader to v4
• Update dependency webpack-cli to v5
• Update dependency webpack-dev-server to v5
• 🔐 Create all rate-limited PRs at once 🔐

Edited/Blocked

These updates have been manually edited so Renovate will no longer make changes. To discard all commits and start over, click on a checkbox.

• Update dependency node-sass to v7 [SECURITY]
• Update dependency file-loader to v6.2.0
• Update dependency webpack to v4.47.0
• Update dependency clean-webpack-plugin to v4

Open

These updates have all been created already. Click a checkbox below to force a retry/rebase of any.

• Update dependency postcss to v8 [SECURITY]
• Update dependency cypress to v8.7.0
• Update dependency html-webpack-plugin to v4.5.2
• Update dependency autoprefixer to v10
• Update dependency html-webpack-plugin to v5
• Update dependency mini-css-extract-plugin to v2
• Update dependency webpack to v5
• Update dependency webpack-merge to v5
• Click on this checkbox to rebase all open PRs at once

Detected dependencies

npm

LandingPage/package.json

• @babel/polyfill 7.12.1
• @babel/core 7.16.0
• @babel/plugin-proposal-class-properties 7.16.0
• @babel/plugin-syntax-dynamic-import 7.8.3
• @babel/preset-env 7.16.4
• @barba/core 2.9.7
• autoprefixer 9.8.8
• babel-loader 8.2.3
• clean-webpack-plugin 2.0.2
• copy-webpack-plugin 5.1.2
• css-loader 3.6.0
• cypress 8.4.0
• eslint 7.32.0
• eslint-loader 4.0.2
• file-loader 6.0.0
• gsap 3.4.0
• html-webpack-plugin 4.3.0
• mini-css-extract-plugin 0.12.0
• node-sass 4.14.0
• postcss 7.0.39
• postcss-loader 3.0.0
• sass-loader 9.0.3
• start-server-and-test 1.14.0
• style-loader 1.2.1
• webpack 4.43.0
• webpack-cli 3.3.12
• webpack-dev-server 3.11.3
• webpack-merge 4.2.2

travis

.travis.yml

• node 14

---

• Check this box to trigger a request for Renovate to run again on this repository

Handle wheel or touch event depending on the device to navigate between sections

Add the elements of the staff section with styling

Make the services section responsive

Make the landing section responsive

Prevent the webpack from performing tree shaking

Add the elements of the services section with styling

Make the staff section responsive

Add the animation timeline of the contact section

Add the elements of the landing page with styling

Action Required: Fix Renovate Configuration

There is an error with this repository's Renovate configuration that needs to be fixed. As a precaution, Renovate will stop PRs until it is resolved.

Error type: undefined. Note: this is a nested preset so please contact the preset author if you are unable to fix it yourself.

Adjust address bar colours on mobile devices for each section

Make the contact section responsive

Adjust navbar hamburger menu on mobile devices

Add the navbar element with styling

Add favicon

Make the navbar links accessible

Add different versions of the landing section image depending on the viewport width

Modularise .html and .scss files

Adjust the navbar logo so that it displays correctly on every device

Add autoprefixer in webpack

Configure Travis CI to incorporate deployment on GitHub Pages

Incorporate single navbar HTML so that it can be injected via webpack

Adjust the logic to match the URL scheme of GitHub Pages

Make the services section responsive

Add the animation timeline of the landing section

Make the staff section responsive

Add the elements of the landing section with styling

Add the animation timeline of the header element

Make font size responsive

Add the development configuration for the landing page

Make the navbar responsive

Modularise .js files

Add barba.js and GSAP

Correct the class names to follow the convention

Correct the class names to follow the convention (container and wrapper)

In programming languages, the word container is generally used for structures that can contain more than one element. A wrapper, on the other hand, is something that wraps around a single object to provide more functionality and interface to it.
[Source] CSS Tricks

Add the animation timeline of the services section

Adjust the staff container to be fully visible on mobile