Advertisement
  1. Web Design
  2. CSS
Webdesign

Build a Static Portfolio With Advanced CSS Bar Chart

by
Difficulty:IntermediateLength:MediumLanguages:

In a previous post, I showed you how to build a beautiful fullscreen portfolio page. During that tutorial we also learned how to create a responsive CSS column chart. In this tutorial we’ll build another attractive static portfolio page, this time featuring a pure CSS bar chart without using any external JavaScript library, SVG, or the canvas element!

What We’re Building

Here’s the project we’ll be creating:

We have a lot of exciting things to cover, so let’s get started!

Note: This tutorial assumes some good CSS knowledge. For instance, you should be familiar with CSS positioning and flexbox basics.

1. Begin With the Page Markup

The page markup consists of a header and three fullscreen sections:

Note: Beyond the elements’ specific classes, our markup contains a number of utility (helper) classes. We’ll use this methodology to keep our CSS as DRY as possible. However, for the sake of readability, within the CSS we won’t group common CSS rules.

2. Define Some Basic Styles

Following what we’ve just discussed above, we first specify some reset rules along with a number of helper classes:

The naming conventions for our helper classes are inspired by Bootstrap 4’s class names.

3. Build the Page Header

The page header includes:

  • The logo
  • Main navigation
The header layout

Header HTML

Header CSS 

4. Build the Hero Section

The first section of our page includes:

  • A heading
  • A call-to-action

Here’s what it will look like:

The layout of the first section

Section #1 HTML

Section #1 CSS

The call-to-action includes a thin line which is animated infinitely, compelling the user to scroll down to see what’s beneath “the fold” (which may or may not exist).

Its styles:

Section #1 JavaScript

Initially the call-to-action will be visible. But when the user starts scrolling, it will disappear. More specifically, it will receive the is-hidden class which we have just defined in the styles above.

Here’s the required JavaScript code:

5. Build the Section #2

The second section of our page includes:

  • A background image
  • The bar chart which demonstrates web skills

Here’s what it looks like:

The second section layout

Section #2 HTML

Style the Background Image

The left part of this section contains an image taken from Wordpress Code Backgrounds on Envato Elements. It will give us the atmosphere we’re looking for, whilst inspiring the colors we use elsewhere in the design:

WordPress Code Backgrounds
WordPress Code Backgrounds

Some key things:

  • The image will appear on screens wider than 900px and
  • we’ll use CSS (via the background-image property) and not HTML (via the img element) to place the image within the page. We choose this method because that gives us an easy way to enhance the image appearance. For example, we’ll skew it by taking advantage of its ::after pseudo-element. You could even play with its colors using background-blend-mode: luminosity, for instance.

Note: By default an img is an empty element and doesn’t have pseudo-elements.

The corresponding styles:

Style the Chart

At this point we’ll concentrate on the most challenging part of our demo; how to construct the bar chart. 

The chart will have two axes. On the y-axis we’ll place the web skills (CSS, HTML, JavaScript, Python, Ruby). On the other x-axis we’ll put the skill levels (Novice, Beginner, Intermediate, Advanced, Expert).

The chart axes

The y-axis

In terms of markup, each skill is a list item placed inside the .chart-skills list. Next, each list item will hold its text within a span element, like this:

We define a fixed width for the span element equal to 120px. To avoid repetition and so we can easily change this value (as other values will depend on it), let’s store it inside a CSS variable:

Each list item will contain its own ::before and ::after pseudo-elements:

The ::after pseudo-element will have a light gray color and a static width which is calculated by subtracting the span width from the list item width:

Here’s how it looks:

The after pseudo-element

The initial width of all ::before pseudo-elements will be 0:

But as soon as the chart becomes visible in the viewport, their width will be animated and receive a value that will be determined by the associated skill level:

Add Class When in View

There are multiple ways to detect whether an element is visible in the viewport or not. Let’s take advantage of the following handy function extracted from an old, yet popular StackOverflow thread:

If you have read my previous tutorials, you might remember that I’ve also used this function to animate a vertical timeline.

So, back to the job in hand! When the chart becomes visible in the current viewport, we’ll give it the in-view class.

Here’s the JavaScript code that does this job:

The ::before pseudo-elements should be animated sequentially. To give them the desired transition speed, we’ll use two other CSS variables along with the calc() CSS function.

Here are the CSS styles responsible for revealing those sudo-elements:

Keep in mind that Microsoft Edge doesn’t support the above math operations, so if you need to support it, just pass some static values instead, like this:

The x-axis

In terms of markup, each level is a list item placed inside the .chart-levels list. Next, each list item will hold its text within a span element, like this:

Some things to note:

  • We set the list as a flex container. Also, we absolutely position it and give it a left padding equal to the width of the spans of the first list.
  • We give list items flex-grow: 1 to grow and take up all the available space. 
  • The spans are positioned at the very bottom of their parent list item. 
The position of the span elements

The associated styles for that list:

6. Build the Section #3

The third section of our page includes:

  • A heading
  • A mailto link

Here’s what it looks like:

The layout of the third section

Section #3 HTML

7. Go Responsive

We’re almost done! As one last thing, let’s ensure that the text has a solid appearance across all screens. We’ll apply a rule targeting narrow screens: 

One important note here is that in our styles we’ve used rem for setting the font sizes. This approach is really useful because the font sizes are relative to the root element (html). If we decrease its font size like in the code above, the rem-related font sizes will be dynamically decreased. Of course, we could have used rems for the other CSS properties as well.

The final state of our project:

Conclusion

In this tutorial we improved our CSS knowledge by learning how to build an attractive static portfolio page. We went one step further and created a responsive bar chart without using any external JavaScript library, SVG, or the canvas element. Just with plain CSS!

Hopefully this tutorial has given you enough inspiration for building your awesome portfolio site. I’d love to see your work–be sure to share it with us!

Next Steps

If you want to further enhance or extend this demo, here are two things you can do:

  • Add smooth scrolling behavior to the menu links without using any external JavaScript library.
  • Use the more effective Intersection Observer API instead of the scroll event for checking whether the chart is visible in the viewport or not. 

As always, thanks for reading!

More Practical Projects to Boost Your Front-end Skills

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.