Build a Static Portfolio With Advanced CSS Bar Chart

In aprevious 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.

• 

  Flexbox

  A Comprehensive Guide to Flexbox Alignment

  Anna Monus

• 

  Flexbox

  A Comprehensive Guide to Flexbox Ordering & Reordering

  Anna Monus

1. Begin With the Page Markup

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

<header class="position-fixed text-lightblue page-header">...</header>
<section class="d-flex justify-content-center align-items-center vh-100">...</section>
<section class="d-flex vh-100 bg-lightwhite">...</section>
<section class="d-flex flex-column justify-content-center align-items-center vh-100 position-relative">...</section>

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:

:root {
  --gray: #cbcfd3;
  --white: white;
  --black: #1a1a1a;
  --lightwhite: whitesmoke;
  --lightblue: #009dd3;
  --peach: #ff9469;
  --transition-delay: 0.3s;
  --transition-delay-step: 0.3s;
  --skills-width: 120px;
}

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

ul {
  list-style: none;
}

a {
  text-decoration: none;
  color: inherit;
}

.d-block {
  display: block;
}

.d-flex {
  display: flex;
}

.flex-column {
  flex-direction: column;
}

.justify-content-center {
  justify-content: center;
}

.justify-content-between {
  justify-content: space-between;
}

.align-items-center {
  align-items: center;
}

.align-items-end {
  align-items: flex-end;
}

.flex-grow-1 {
  flex-grow: 1;
}

.vh-100 {
  height: 100vh;
}

.position-relative {
  position: relative;
}

.position-absolute {
  position: absolute;
}

.position-fixed {
  position: fixed;
}

.text-center {
  text-align: center;
}

.text-gray {
  color: var(--gray);
}

.text-lightblue {
  color: var(--lightblue);
}

.text-peach {
  color: var(--peach);
}

.bg-white {
  background: var(--white);
}

.bg-lightwhite {
  background: var(--lightwhite);
}

.h1 {
  font-size: 2.5rem;
}

.h2 {
  font-size: 2rem;
}

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

Header HTML

<header class="position-fixed bg-white page-header">
  <nav class="d-flex justify-content-between align-items-center">
    <a href="" class="text-peach logo">
      <strong>DM</strong>
    </a>
    <ul class="d-flex">
      <li>
        <a href="#skills">Skills</a>
      </li>
      <li>
        <a href="#contact">Contact</a>
      </li>
    </ul>
  </nav>
</header>

Header CSS

.page-header {
  left: 0;
  right: 0;
  top: 0;
  padding: 20px;
  z-index: 10;
}

.page-header .logo {
  font-size: 1.7rem;
}

.page-header li:not(:last-child) {
  margin-right: 20px;
}

.page-header a {
  font-size: 1.1rem;
}

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:

Section #1 HTML

<section class="d-flex justify-content-center align-items-center vh-100">
  <h1 class="text-center h1">...</h1> 
  <div class="position-absolute scroll-down">...</div>  
</section>

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:

.scroll-down {
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  text-transform: uppercase;
  transition: all 0.5s;
}

.scroll-down.is-hidden {
  opacity: 0;
  visibility: hidden;
}

.scroll-down::after {
  content: '';
  display: block;
  margin: 3px auto 0;
  width: 1px;
  height: 60px;
  background: var(--black);
  transform-origin: bottom;
  animation: pulse 3.5s infinite linear;
}

@keyframes pulse {
  0% {
    transform: scaleY(1);
  }
  50% {
    transform: scaleY(0.65);
  }
  100% {
    transform: scaleY(1);
  }
}

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:

const scrollDown = document.querySelector(".scroll-down");

window.addEventListener("scroll", scrollHandler);

function scrollHandler() {
  window.pageYOffset > 0
    ? scrollDown.classList.add("is-hidden")
    : scrollDown.classList.remove("is-hidden");
}

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:

Section #2 HTML

<section class="d-flex vh-100 bg-lightwhite" id="skills">
  <div class="position-relative flex-grow-1 bg-img"></div>
  <div class="d-flex justify-content-center align-items-center flex-grow-1">
    <div class="position-relative chart-wrapper">
      <ul class="d-flex flex-column chart-skills">
        <li class="position-relative">
          <span>CSS</span>
        </li>
        ...
      </ul>
      <ul class="d-flex position-absolute chart-levels">
        <li class="flex-grow-1 position-relative">
          <span class="position-absolute">Novice</span>
        </li>
        ...
      </ul> 
    </div>
  </div>
</section>

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

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 example.

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

The corresponding styles:

.bg-img {
  background: #fff url(bg-programming.jpg) no-repeat center / cover;
}

.bg-img::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  width: 7rem;
  background: var(--lightwhite);
  transform: skew(-5deg);
  transform-origin: left bottom;
}

@media screen and (max-width: 600px) {
  .bg-img {
    display: none;
  }
}

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 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:

<ul class="chart-skills">
  <li class="position-relative">
    <span>CSS</span>
  </li>
  ...
</ul>

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:

:root {
  --skills-width: 120px;
}

.chart-wrapper .chart-skills span {
  display: inline-block;
  width: var(--skills-width);
  padding: 15px;
}

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

/*CUSTOM VARIABLES HERE*/

.chart-wrapper .chart-skills li::before,
.chart-wrapper .chart-skills li::after {
  content: '';
  position: absolute;
  top: 25%;
  left: var(--skills-width);
  height: 50%;
  border-top-right-radius: 10px;
  border-bottom-right-radius: 10px;
  z-index: 2;
}

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:

.chart-wrapper .chart-skills li::after {
  width: calc(100% - var(--skills-width));
  background: rgba(211, 211, 211, 0.3);
}

Here’s how it looks:

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

/*CUSTOM VARIABLES HERE*/

.chart-wrapper .chart-skills li::before {
  width: 0;
  background: var(--lightblue);
  transition: width 0.65s ease-out;
}

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 :

function isElementInViewport(el) {
  var rect = el.getBoundingClientRect();
  return (
    rect.top >= 0 &&
    rect.left >= 0 &&
    rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
    rect.right <= (window.innerWidth || document.documentElement.clientWidth)
  );
}

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

• 

  Patterns

  Building a Vertical Timeline With CSS and a Touch of JavaScript

  George Martsoukos

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:

const chartWrapper = document.querySelector(".chart-wrapper");

window.addEventListener("scroll", scrollHandler);

function scrollHandler() {
  if (isElementInViewport(chartWrapper)) chartWrapper.classList.add("in-view");
}

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:

:root {
  ...
  --transition-delay: 0.3s;
  --transition-delay-step: 0.3s;
  --skills-width: 120px;
}

.chart-wrapper.in-view .chart-skills li:nth-child(1)::before {
  width: calc(90% - var(--skills-width));
  transition-delay: var(--transition-delay);
}

.chart-wrapper.in-view .chart-skills li:nth-child(2)::before {
  width: calc(75% - var(--skills-width));
  transition-delay: calc(
    var(--transition-delay) + var(--transition-delay-step)
  );
}

.chart-wrapper.in-view .chart-skills li:nth-child(3)::before {
  width: calc(62% - var(--skills-width));
  transition-delay: calc(
    var(--transition-delay) + var(--transition-delay-step) * 2
  );
}

.chart-wrapper.in-view .chart-skills li:nth-child(4)::before {
  width: calc(49% - var(--skills-width));
  transition-delay: calc(
    var(--transition-delay) + var(--transition-delay-step) * 3
  );
}

.chart-wrapper.in-view .chart-skills li:nth-child(5)::before {
  width: calc(38% - var(--skills-width));
  transition-delay: calc(
    var(--transition-delay) + var(--transition-delay-step) * 4
  );
}

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:

.chart-wrapper.in-view .chart-skills li:nth-child(2)::before {
  transition-delay: 0.6s;
}

.chart-wrapper.in-view .chart-skills li:nth-child(3)::before {
  transition-delay: 0.9s;
}

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:

<ul class="d-flex position-absolute chart-levels">
  <li class="flex-grow-1 position-relative">
    <span class="position-absolute">Novice</span>
  </li>
  ...
</ul>

Some things to note:

span
flex-grow: 1
span

The associated styles for that list:

/*CUSTOM VARIABLES HERE*/

.chart-wrapper .chart-levels {
  left: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  padding-left: var(--skills-width);
}

.chart-wrapper .chart-levels li {
  border-right: 1px solid rgba(211, 211, 211, 0.3);
}

.chart-wrapper .chart-levels li:last-child {
  border-right: 0;
}

.chart-wrapper .chart-levels span {
  bottom: 0;
  transform: translateY(50px) rotate(45deg);
  padding: 10px;
  width: 100%;
}

6. Build the Section #3

The third section of our page includes:

mailto

Here’s what it looks like:

Section #3 HTML

<section class="d-flex flex-column justify-content-center align-items-center vh-100 position-relative" id="contact">
  <h2 class="h1">...</h2>
  <a href="mailto:[email protected]" class="text-gray h2">...</a> 
</section>

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:

@media screen and (max-width: 600px) {
  html {
    font-size: 12px;
  }
}

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 rem s 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

• 

  Bootstrap 4

  How to Quickly Build Layouts With Bootstrap 4’s Responsive Flexbox Utilities

  George Martsoukos

• 

  Bootstrap 4

  How to Build a Landing Page Template With Bootstrap 4

  George Martsoukos

• 

  Flexbox

  How to Build a Full-Screen Responsive Page With Flexbox

  George Martsoukos

• 

  Parallax Scrolling

  Quick Tip: Create a Very Simple Parallax Effect With CSS & JavaScript

  George Martsoukos