JSFiddle - React, Tailwind, and code Playground

HTML

<body>
    <div id="nav"></div>
    <div id="home"></div>
    <div id="about"></div>
    <div id="experience"></div>
    <div id="hobbies"></div>
    <div id="contact"></div>
</body>

CSS

html,
body {
  padding: 0;
  margin: 0;
}
#home {
  background-color: black;
}
#about {
  background-color: #488BFF;
}
#experience {
  background-color: #B3B3B3;
}
#hobbies {
  background-color: #FF7F35;
}
#contact {
  background-color: #803A7D;
}

JavaScript

(function() {
  var a, updateDimensions;

  updateDimensions = function() {
    var aspectRatio, padding, viewportHeight, viewportWidth, width;
    viewportWidth = $(window).width();
    viewportHeight = $(window).height();
    aspectRatio = viewportWidth / viewportHeight;
    if (aspectRatio > 1.6) {
      width = 1.6 * viewportHeight;
      padding = (viewportWidth - width) / 2;
      $("#home").css({
        width: width,
        height: 0.92 * viewportHeight,
        paddingLeft: padding,
        paddingRight: padding
      });
      $("#about").css({
        width: width,
        height: 1.08 * viewportHeight,
        paddingLeft: padding,
        paddingRight: padding
      });
      return $("#experience, #hobbies, #contact").css({
        width: width,
        height: viewportHeight,
        paddingLeft: padding,
        paddingRight: padding
      });
    } else {
      $("#home").css({
        width: viewportWidth,
        height: 0.575 * viewportWidth
      });
      $("#about").css({
        width: viewportWidth,
        height: 0.675 * viewportWidth
      });
      return $("#experience, #hobbies, #contact").css({
        width: viewportWidth,
        height: 0.625 * viewportWidth
      });
    }
  };

  $(window).resize(updateDimensions);

  $(updateDimensions);

  a = 3;

}).call(this);