Whenever you want something to be behind everything else, set the z-index to a negative value.
Like this:

.background-blur {
  background-image: url("img/orchid-blur-2-1.jpg");
  background-size: auto 100%;
  background-repeat: no-repeat;
  height: 100%;
  position: absolute;
  opacity: 0.6;
  z-index: 2; // ----> set to -1 or something
}

The projects have not yet been added to the page.

Have not yet added handlebars.js to portfolio project, doing this makes it easier to add large chunks of code to your page and also to edit data

When you set the opacity property of an element, it changes the opacity of everything inside the box as well, including any text.

#about-me{
  background-color: white;
  opacity: 0.4; ---> now all your text also has an opacity of 0.4 too.
  z-index: 4;
}

If you want to have a translucent box, add an alpha layer to the background color.

rgba(255, 255, 255, 0.4);

Several css files to organize your styles would be really helpful - see SMACCS reading :)