Slider (Owl Carousel)

Om de vaardigheden van rechts naar links te laten gaan wordt er gebruik gemaakt van een slider. Hiervoor heb ik gebruikt van de Owl Carousel slider. Voor meer informatie kijk op:

https://owlcarousel2.github.io/OwlCarousel2/

Slider (Owl Carousel) - CSS Bestand

Download het onderstaande bestand en plaats deze CSS bestanden de map '/css'

owl.carousel.min.css

Pie chart

Voor het genereren van procenten in de grafieken is gebruik gemaakt van Easy Pie Chart. Voor meer informatie kijk op:

https://github.com/rendro/easy-pie-chart

Pie Chart - JS Bestand

Download het onderstaande bestand en plaats deze JS bestanden de map 'js'

owl-en-easypiechart.zip

Voeg de onderstaande JS links toe aan het index.html bestand.

Boven de laatste </body> tag.

<script src="js/owl.carousel.min.js"></script>
<script src="js/jquery.easypiechart.min.js"></script>

Voeg daarna de onderstaande code toe aan het index.html bestand (onder het over mij gedeelte).

	<div id="skills" class="skillsSection section">
		<div class="container">
			<div class="row">
				<div class="col-md-12 text-center">
					<h2>Mijn vaardigheden</h2>
					<p>Mijn kennis in vaardigheden (drag to scroll)</p>
				</div>

				<div class="owl-carousel owl-theme">

				    <div class="skill">
				    	<span class="chart" data-percent="67">
				    		<span class="percent">67</span>
				    		<canvas height="152" width="152"></canvas>
				    	</span>
				    	<h4>PHP</h4>
				    	<p>Toegepast in de meeste websites</p>
				    </div>

				    <div class="skill">
				    	<span class="chart" data-percent="72">
				    		<span class="percent">72</span>
				    		<canvas height="152" width="152"></canvas>
				    	</span>
				    	<h4>CSS</h4>
				    	<p>Veel toegepast in de gemaakte websites</p>
				    </div>

				    <div class="skill">
				    	<span class="chart" data-percent="14">
				    		<span class="percent">14</span>
				    		<canvas height="152" width="152"></canvas>
				    	</span>
				    	<h4>Vue</h4>
				    	<p>Een nieuwe vaardigheid die ik aan het leren ben</p>
				    </div>

				    <div class="skill">
				    	<span class="chart" data-percent="90">
				    		<span class="percent">90</span>
				    		<canvas height="152" width="152"></canvas>
				    	</span>
				    	<h4>HTML</h4>
				    	<p>Veel toegepast in de gemaakte websites</p>
				    </div>

				    <div class="skill">
				    	<span class="chart" data-percent="60">
				    		<span class="percent">60</span>
				    		<canvas height="152" width="152"></canvas>
				    	</span>
				    	<h4>Javascript</h4>
				    	<p>Toegepast in de meeste websites</p>
				    </div>
				</div>
			</div>
		</div>
	</div>