How to Build a Static Portfolio Page With CSS & JavaScript

In this tutorial we’ll use all the power of flexbox and learn to build a simple, yet attractive static HTML portfolio page. We’ll also create a responsive column chart without using any external JavaScript library, SVG, or the canvas element. Just with plain CSS!

Here’s the project that we’re going to create (click the Skills link in the top corner):

Note: This tutorial assumes some flexbox knowledge. If you’re just beginning, Anna Monus has a great collection of primers to get you started:

A Comprehensive Guide to Flexbox Alignment

Anna Monus

23 May 2021

1. Begin With the Page Markup

The page markup is pretty straightforward; a header, a heading, a mailto link and a section:

<body class="position-fixed d-flex flex-column text-white bg-red">
  <header class="page-header">
    <nav class="d-flex justify-content-between">
      <a href="" class="logo">...</a>
      <ul class="d-flex">
        <li>
          <a href="">...</a>
        </li>
        <!-- possibly more list items here -->
      </ul>
    </nav>
  </header>
  <h1 class="position-absolute w-100 text-center heading">...</h1>
  <a class="position-absolute contact" href="">...</a>
  <section class="position-absolute d-flex align-items-center justify-content-center text-black bg-white skills-section" data-slideIn="to-top">
    <!-- content here -->
  </section>
</body>

Inside the section, we put a close button and a wrapper element with two lists. These lists are responsible for building the column chart:

<section class="position-absolute d-flex align-items-center justify-content-center text-black bg-white skills-section" data-slideIn="to-top">
  <button class="position-absolute skills-close" aria-label="Close Skills Section">✕</button>
  <div class="d-flex chart-wrapper">
    <ul class="chart-levels">
      <li>Expert</li>
      <li>Advanced</li>
      <li>Intermediate</li>
      <li>Beginner</li>
      <li>Novice</li>
    </ul>
    <ul class="d-flex justify-content-around align-items-end flex-grow-1 text-center bg-black chart-skills">
      <li class="position-relative bg-red" data-height="80%">
        <span class="position-absolute w-100">CSS</span>
      </li>
      <li class="position-relative bg-red" data-height="60%">
        <span class="position-absolute w-100">HTML</span>
      </li>
      <li class="position-relative bg-red" data-height="68%">
        <span class="position-absolute w-100">JavaScript</span>
      </li>
      <li class="position-relative bg-red" data-height="52%">
        <span class="position-absolute w-100">Python</span>
      </li>
      <li class="position-relative bg-red" data-height="42%">
        <span class="position-absolute w-100">Ruby</span>
      </li>
    </ul>
  </div>
</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 readability reasons, within the CSS we won’t group common CSS rules.

2. Define Some Basic Styles

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

:root {
  --black: #1a1a1a;
  --white: #fff;
  --red: #e21838;
  --transition-delay: 0.85s;
  --transition-delay-step: 0.3s;
}

* {
  padding: 0;
  margin: 0;
}

ul {
  list-style: none;
}

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

button {
  background: none;
  border: none;
  cursor: pointer;
  outline: none;
}

.d-flex {
  display: flex;
}

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

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

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

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

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

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

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

.w-100 {
  width: 100%;
}

.position-relative {
  position: relative;
}

.position-fixed {
  position: fixed;
}

.position-absolute {
  position: absolute;
}

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

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

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

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

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

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

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

3. Style the Page Layout

The page layout will be as simple as this:

Here are the design requirements:

The page should be full-screen.
The logo is placed to the top left of the page, the menu to the top right, and the mailto link to the bottom right.
The heading is horizontally and vertically centered.
The section which contains the chart is initially hidden (off-screen).

Here are the corresponding styles to get all that done:

body {
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  font: 1rem/1.5 "Montserrat", sans-serif;
  overflow: hidden;
}

.page-header {
  padding: 20px;
  border-bottom: 1px solid #e93451;
}

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

.page-header .logo {
  font-size: 1.2rem;
  z-index: 1;
  transition: color 0.3s;
}

.window-opened .page-header .logo {
  color: var(--black);
  transition-delay: 0.8s;
}

.heading {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 2.5rem;
}

.contact {
  bottom: 20px;
  right: 20px;
}

.skills-section {
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  transform: translateX(100%);
}

Progress so Far

Here’s what we've built so far!

4. Toggling the Section

Initially, as discussed above, the section is hidden. It will become visible with a nice slide-in effect each time we click on the menu link. We’ll do this by adding the window-opened class to the body element and altering the CSS as needed. In the same way, the section will disappear as soon as we click on the close button.

As a bonus, we’ll give ourselves the ability to set the direction of the slide-in animation. We can pass the data-slideIn custom attribute to the section which will determine the starting position of its animation. Possible attribute values are to-top, to-bottom, and to-right. By default, the section appears from right to left.

Here are the associated styles:

.skills-section {
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  transform: translateX(100%);
  transition: transform 1s;
}

.window-opened .skills-section {
  transform: none;
}

[data-slideIn="to-top"] {
  transform: translateY(100%);
}

[data-slideIn="to-bottom"] {
  transform: translateY(-100%);
}

[data-slideIn="to-right"] {
  transform: translateX(-100%);
}

And the JavaScript code needed for toggling its state:

const skillsLink = document.querySelector(".page-header li:nth-child(1) a");
const skillsClose = document.querySelector(".skills-close");
const windowOpened = "window-opened";

skillsLink.addEventListener("click", (e) => {
  e.preventDefault();
  document.body.classList.toggle(windowOpened);
});

skillsClose.addEventListener("click", () => {
  document.body.classList.toggle(windowOpened);
});

5. Style the Chart

At this point, we’ll have a closer look at the contents of our section. First we have the close button located to the top right side of the section.

Here’s its markup:

1	<button class="position-absolute skills-close" aria-label="Close Skills Section">✕</button>

And its styles:

.skills-close {
  top: 20px;
  right: 20px;
  font-size: 2rem;
}

Next we have the chart itself. Let’s also revisit its structure:

<div class="d-flex chart-wrapper">
  <ul class="chart-levels">
    <li>Expert</li>
    ...
  </ul>
  
  <ul class="d-flex justify-content-around align-items-end flex-grow-1 text-center bg-black chart-skills">
    <li class="position-relative bg-red" data-height="80%">
      <span class="position-absolute w-100">CSS</span>
    </li>
    ...
  </ul>
</div>

Here are the key points regarding this markup:

We set the .chart-wrapper element as a flex container with two lists as flex items.
The second list, which measures the knowledge for a certain skill, is itself a flex container. We give it flex-grow: 1 to grow and take up all the available space.

The initial CSS rules for our chart:

.chart-wrapper {
  width: calc(100% - 40px);
  max-width: 500px;
}

.chart-levels li {
  padding: 15px;
}

At this point we’ll have a closer look at the items of the second list.

Things to remember:

They all have a width of 12%. We evenly distribute them across the main axis by giving justify-content: space-around to the parent list.
They should sit at the bottom of their container, and thus we set align-items: flex-end to the parent list.
Their initial height is 0. As soon as the section becomes visible, their height is animated and receives a value equal to the value of their data-height attribute. Just keep in mind that we have to rewrite the desired height values in our CSS because setting height: attr(data-height) doesn’t work :(

Here are the related styles:

:root {
  ...
  --transition-delay: 0.85s;
  --transition-delay-step: 0.3s;
}

.chart-skills li {
  width: 12%;
  height: 0;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  transition: height 0.65s cubic-bezier(0.51, 0.91, 0.24, 1.16);
}

.window-opened .chart-skills li:nth-child(1) {
  height: 80%;
  transition-delay: var(--transition-delay);
}

.window-opened .chart-skills li:nth-child(2) {
  height: 60%;
  transition-delay: calc(
    var(--transition-delay) + var(--transition-delay-step)
  );
}

.window-opened .chart-skills li:nth-child(3) {
  height: 68%;
  transition-delay: calc(
    var(--transition-delay) + var(--transition-delay-step) * 2
  );
}

.window-opened .chart-skills li:nth-child(4) {
  height: 52%;
  transition-delay: calc(
    var(--transition-delay) + var(--transition-delay-step) * 3
  );
}

.window-opened .chart-skills li:nth-child(5) {
  height: 42%;
  transition-delay: calc(
    var(--transition-delay) + var(--transition-delay-step) * 4
  );
}

As you can see from the code above, we use the transition-delay and transition-delay-step CSS variables along with the calc() CSS function to control the speed of the transition effects. Microsoft Edge doesn’t support those math operations though, so if you need to support it, just pass some static values instead, like this:

.window-opened .chart-skills li:nth-child(2) {
  transition-delay: 1.15s;
}

.window-opened .chart-skills li:nth-child(3) {
  transition-delay: 1.45s;
}

To output the amount of knowledge stated for a certain technology, we’ll use the ::before pseudo-element.

Using sudo element to output the amount of knowledge

This value is extracted from the data-height attribute which is assigned to the items of the second list.

Here are the styles which do this job:

.chart-skills li::before { 
  content: attr(data-height);
  position: absolute;
  top: 10px;
  left: 0;
  width: 100%;
  font-size: 0.85rem;
  color: var(--white);
}

Lastly, we add some styles to the span element which is located inside each of the list items. This element behaves as a label and stores the technology names.

The corresponding styles:

.chart-skills span {
  bottom: 0;
  left: 0;
  transform: translateY(40px) rotate(45deg);
}

6. Go Responsive

We’re almost done! As a last thing, let’s ensure that the page has a solid appearance across all screens. We’ll apply two rules specifically for narrow screens:

@media screen and (max-width: 600px) {
  html {
    font-size: 12px;
  }
  
  .chart-levels li {
    padding: 15px 10px 15px 0;
  }
}

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 aren’t absolute and their values depend on the value of the root element. So, if we decrease the font size of the root element like in the code above, the rem-related font sizes will be dynamically decreased. Nice job folks!

The final state of our project:

7. Browser Support

The demo works well in all recent browsers and devices.

As already discussed earlier, Microsoft Edge still doesn’t support math operations with custom properties inside the calc() function. To overcome this issue, you’ll need to use hard-coded values instead.

Conclusion

In this tutorial, we improved our flexbox skills by building an attractive static portfolio page. We even challenged ourselves by learning to create a responsive column chart without using any external JavaScript library, SVG, or the canvas element. Just with plain CSS!

Hopefully you enjoyed this tutorial as much as I enjoyed writing it, and you’ll use this demo as inspiration for developing your own portfolio site. I’d love to see your work–be sure to share it with us!