<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>JoLo - Curriculum Vitae</title>
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Space+Mono&amp;display=swap">
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css">
    <link rel="stylesheet" href="./assets/css/styles.css">
</head>

<body>
    <header class="layout">
        <div class="logo">
            Image
        </div>
        <div class="name">
            <h1>Name</h1>
          <div class="meta">
            Some basic information
          </div>
            <div class="self-title">
                Your profession and a short description of yourself
            </div>
        </div>
    </header>
    <div class="layout">
        <div class="expertises">
            <h2>Areas of Expertises</h2>
        </div>
        <div class="expertises">
            <h2>Additional Skills</h2>
            <!-- <ul class="description">
                <li>AWS Solutions Architect Associate</li>
                <li>Microsoft Azure Fundamentals</li>
                <li>freecodecamp.com D3.js</li>
            </ul> -->
        </div>
        <div class="work-experiences">
            <h2>Work Experiences</h2>
            <div class="title">
                Title
            </div>
            <div class="date">
                Company
            </div>
          <ul class="description">
            <li>List of Description</li>
          </ul>
      </div>
    </div>
    <hr />
    <div class="layout">
        <div>
            <h2>Contacts</h2>
            <a class="email" href="#">E-Mail</a>
            <hr style="border:0" />
            <a class="website" href="https://www.example.com/">example</a>
            <hr style="border:0" />
            <a class="social-link" href="#" target="_blank">
                <i class="fab fa-codepen"></i>
            </a>
            <a class="social-link" href="#" target="_blank">
                <i class="fab fa-github"></i>
            </a>
            <a class="social-link" href="#" target="_blank">
                <i class="fab fa-twitter"></i>
            </a>
            <a class="social-link" href="#" target="_blank">
                <i class="fab fa-linkedin-in"></i>
            </a>
        </div>
        <div>
            <h2>Education</h2>
            <div class="education">
                <div class="masters">
                    <div class="title">Master of Desaster</div>
                    Witcher<br />
                    Hogwarts<br />
                </div>
                <div class="erasmus">
                    <div class="title">Exchange</div>
                    Become Awesome<br />
                    Somewhere<br />
                </div>
            </div>
        </div>
    </div>
</body>
</html>
$firstColor: #000;
$secondColor: #db3853;
$titleSize: 1.2em;
$headerSize: 2em;
$defaultSize: 1em;
body {
  font-family: "Space Mono", monospace;
  width: 80%;
  margin: 5% auto;
  h1,
  h2 {
    color: $secondColor;
    margin: 10px 0;
  }
  .title {
    font-size: $titleSize;
    font-weight: bold;
  }
  hr {
    margin-top: 2%;
    border-color: $secondColor;
  }
}

header {
  display: grid;
  grid-template-columns: 30% auto;
  grid-column-gap: 2%;
  .logo {
      display: grid;
      align-items: center;
      justify-items: center;
      height: 25vh;
      background-color: #e3e7de;
  }
  .logo img {
    border-radius: 25%;
  }
  .meta {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    margin-bottom: 2%;
  }
}

.layout {
  display: grid;
  grid-template-columns: 40% auto;
  grid-column-gap: 2%;
  a {
    color: $firstColor;
    text-decoration: none;
    font-size: $headerSize;
    padding: 2% 2% 2% 0;
  }
  .email,
  .website {
    font-size: $defaultSize;
  }
  .education {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-row-gap: 3%;
  }
}

.work-experiences {
  grid-column: 2;
  grid-row: 1 / span 2;
  height: 50vh;
  background-color: #f4f3f1;
  padding: 5%;
  .description {
    margin: 1%;
    font-size: .8em;
  }
}
View Compiled
/**!
 * easy-pie-chart
 * Lightweight plugin to render simple, animated and retina optimized pie charts
 *
 * @license 
 * @author Robert Fleischmann <rendro87@gmail.com> (http://robert-fleischmann.de)
 * @version 2.1.7
 **/
!function(a,b){"function"==typeof define&&define.amd?define([],function(){return a.EasyPieChart=b()}):"object"==typeof exports?module.exports=b():a.EasyPieChart=b()}(this,function(){var a=function(a,b){var c,d=document.createElement("canvas");a.appendChild(d),"object"==typeof G_vmlCanvasManager&&G_vmlCanvasManager.initElement(d);var e=d.getContext("2d");d.width=d.height=b.size;var f=1;window.devicePixelRatio>1&&(f=window.devicePixelRatio,d.style.width=d.style.height=[b.size,"px"].join(""),d.width=d.height=b.size*f,e.scale(f,f)),e.translate(b.size/2,b.size/2),e.rotate((-0.5+b.rotate/180)*Math.PI);var g=(b.size-b.lineWidth)/2;b.scaleColor&&b.scaleLength&&(g-=b.scaleLength+2),Date.now=Date.now||function(){return+new Date};var h=function(a,b,c){c=Math.min(Math.max(-1,c||0),1);var d=0>=c?!0:!1;e.beginPath(),e.arc(0,0,g,0,2*Math.PI*c,d),e.strokeStyle=a,e.lineWidth=b,e.stroke()},i=function(){var a,c;e.lineWidth=1,e.fillStyle=b.scaleColor,e.save();for(var d=24;d>0;--d)d%6===0?(c=b.scaleLength,a=0):(c=.6*b.scaleLength,a=b.scaleLength-c),e.fillRect(-b.size/2+a,0,c,1),e.rotate(Math.PI/12);e.restore()},j=function(){return window.requestAnimationFrame||window.webkitRequestAnimationFrame||window.mozRequestAnimationFrame||function(a){window.setTimeout(a,1e3/60)}}(),k=function(){b.scaleColor&&i(),b.trackColor&&h(b.trackColor,b.trackWidth||b.lineWidth,1)};this.getCanvas=function(){return d},this.getCtx=function(){return e},this.clear=function(){e.clearRect(b.size/-2,b.size/-2,b.size,b.size)},this.draw=function(a){b.scaleColor||b.trackColor?e.getImageData&&e.putImageData?c?e.putImageData(c,0,0):(k(),c=e.getImageData(0,0,b.size*f,b.size*f)):(this.clear(),k()):this.clear(),e.lineCap=b.lineCap;var d;d="function"==typeof b.barColor?b.barColor(a):b.barColor,h(d,b.lineWidth,a/100)}.bind(this),this.animate=function(a,c){var d=Date.now();b.onStart(a,c);var e=function(){var f=Math.min(Date.now()-d,b.animate.duration),g=b.easing(this,f,a,c-a,b.animate.duration);this.draw(g),b.onStep(a,c,g),f>=b.animate.duration?b.onStop(a,c):j(e)}.bind(this);j(e)}.bind(this)},b=function(b,c){var d={barColor:"#ef1e25",trackColor:"#f9f9f9",scaleColor:"#dfe0e0",scaleLength:5,lineCap:"round",lineWidth:3,trackWidth:void 0,size:110,rotate:0,animate:{duration:1e3,enabled:!0},easing:function(a,b,c,d,e){return b/=e/2,1>b?d/2*b*b+c:-d/2*(--b*(b-2)-1)+c},onStart:function(a,b){},onStep:function(a,b,c){},onStop:function(a,b){}};if("undefined"!=typeof a)d.renderer=a;else{if("undefined"==typeof SVGRenderer)throw new Error("Please load either the SVG- or the CanvasRenderer");d.renderer=SVGRenderer}var e={},f=0,g=function(){this.el=b,this.options=e;for(var a in d)d.hasOwnProperty(a)&&(e[a]=c&&"undefined"!=typeof c[a]?c[a]:d[a],"function"==typeof e[a]&&(e[a]=e[a].bind(this)));"string"==typeof e.easing&&"undefined"!=typeof jQuery&&jQuery.isFunction(jQuery.easing[e.easing])?e.easing=jQuery.easing[e.easing]:e.easing=d.easing,"number"==typeof e.animate&&(e.animate={duration:e.animate,enabled:!0}),"boolean"!=typeof e.animate||e.animate||(e.animate={duration:1e3,enabled:e.animate}),this.renderer=new e.renderer(b,e),this.renderer.draw(f),b.dataset&&b.dataset.percent?this.update(parseFloat(b.dataset.percent)):b.getAttribute&&b.getAttribute("data-percent")&&this.update(parseFloat(b.getAttribute("data-percent")))}.bind(this);this.update=function(a){return a=parseFloat(a),e.animate.enabled?this.renderer.animate(f,a):this.renderer.draw(a),f=a,this}.bind(this),this.disableAnimation=function(){return e.animate.enabled=!1,this},this.enableAnimation=function(){return e.animate.enabled=!0,this},g()};return b});

const languages = [
  {
        'language': 'german',
        'status': '#00ab03'
  },
  {
        'language': 'english',
        'status': '#00ab03'
  },
  {
        'language': 'vietnamese',
        'status': '#F3BC14'
  },
  {
        'language': 'portuguese',
        'status': 'red'
  },
]

languages.forEach(element => {
  var el = document.querySelector('.' + element['language']);
  new EasyPieChart(el, {
    barColor: element['status'],
    lineWidth: 10,
    scaleColor: '#db3853'
  });
});

External CSS

  1. https://fonts.googleapis.com/css?family=Space+Mono&amp;display=swap
  2. https://use.fontawesome.com/releases/v5.6.3/css/all.css

External JavaScript

This Pen doesn't use any external JavaScript resources.