cv-online/js/main.js

function checkSectionWidth(){
	var mainsection = $('#section-main');
	if(mainsection.width()-46 < 800)//article border added width = 46px
		$('body').attr({'data-width': 'small'});
		// mainsection.addClass('fullwidth');
	else
		$('body').attr({'data-width': 'large'});
		// mainsection.removeClass('fullwidth');
}

$(window).resize(checkSectionWidth);
$(document).ready(checkSectionWidth);
$(document).ready(() => {


	let path = document.location.pathname;

	setPage(path);

	$("nav > a").each((i, elmt) => {
		const href = $(elmt).attr("href");
		if(href[0] === "/"){
			$(elmt).bind("click", () => {
				// window.location.pathname = href;
				history.pushState(null, null, href);
				setPage(href);
				return false;
			})
		}
	})
})


function setPage(path){
	const markedOpt = {
		pedantic: false,
		gfm: true,
		tables: true,
		breaks: false,
		smartLists: true,
		smartypants: false,
		xhtml: false,
		sanitize: false,
	};

	if(path === "/" || path === "" || path === "/index.html"){
		path = "/home";
	}
	const existingPages = [ "/home", "/skills", "/projects", "/experiences", "/hobbies"];

	if(existingPages.findIndex(a => a === path) >= 0){
		window.scrollTo(0, 0);
		$("#article-container").empty();


		$("#left > a").each((i, elmt) => {
			let hrefPath = elmt.attributes["href"].value;
			if(hrefPath === "/" || path === "" || path === "/index.html")
				hrefPath = "/home";

			$(elmt).toggleClass("active", hrefPath === path);
		});

		$.ajax("/pages"+path+".md")
			.done((res) => {

				$("#article-container").html(res);

				const len = $("#article-container > article").length;
				let cnt = 0;
				$("#article-container > article").each((i, elmt) => {

					marked($(elmt).html(), markedOpt, (err, res) => {
						$(elmt).html(res);

						cnt++;
						if(cnt === len){
							if(path == "/skills"){
								skillsPageSetup();
							}
							setTimeout(() => {
								if(window.location.hash != ""){
									target = $(window.location.hash);
									if(target.length > 0){
										target = target[0];
										$('html,body').animate({
											scrollTop: (target.offsetTop)
										}, 400);
									}

								}
							}, 500);// I'm lazy to search a way to wait for the view engine to be updated, 500ms should be fine
						}
					});
				});
			})
			.fail((err) => {
				$("#article-container").html(`<article><h1>Error ${err.status}'</h1><p>${err.statusText}<br/>${err.responseText}</p>`);
				console.error(err);
			});
	}
	else{
		$("#article-container").html(`<article><h1>Error 404</h1><p>Page <code>${path}</code> does not exist</p>`);
	}

}



function smoothScrollSetup(){
	$("a[href*='#']:not([href='#'])").click(function()
	{
		if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname)
		{
			var target = $(this.hash);
			target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
			if (target.length)
			{
				$('html,body').animate(
				{
					scrollTop: (target.offset().top)
				}, 400);
				return true;
			}
		}
	});
}

function skillsPageSetup(){
	smoothScrollSetup();

	const graphoptions = {
		segmentStrokeWidth : 5,
		animation : false,
		labelFontFamily : "Arial",
		labelFontStyle : "normal",
		labelFontSize : 20,
		labelFontColor : "#666",
		graphTitle : "",
			graphTitleFontFamily : "'Croissant One', cursive",
			graphTitleFontSize : 20,
			graphTitleFontStyle : "bold",
			graphTitleFontColor : "#3A4145",
		legend : true,
			legendFontFamily : "'Noto Serif',serif",
			legendFontSize : 15,
			legendFontStyle : "normal",
			legendFontColor : "#666",
		legendBlockSize : 20,
		legendBorders : false,
		annotateDisplay : true,
		pointLabelFontFamily : "'Noto Serif',serif"
	}

	{
		let ctx = document.getElementById("whatilove_").getContext("2d");
		let data = [
			{ value: 5, color: "#ff706a", title: "Low-level programming"    },
			{ value: 5, color: "#efc26c", title: "Higher-level programming" },
			{ value: 5, color: "#76ef6c", title: "Linux Environment"        },
			{ value: 3, color: "#dd8ae5", title: "Backend dev"              },
			{ value: 1, color: "#6cd6ef", title: "Frontend dev"             }
		];


		graphoptions["graphTitle"] = "What I love";
		new Chart(ctx).Pie(data, graphoptions);
	}

	{
		let ctx = document.getElementById("howilearnt").getContext("2d");
		let data = [
			{ value: 3, color: "#ff706a", title: "With courses"       },
			{ value: 6, color: "#6cef7c", title: "By myself"          },
			{ value: 2, color: "#6cb3ef", title: "During conferences" }
		];

		graphoptions["graphTitle"] = "How I learnt it";
		new Chart(ctx).Pie(data, graphoptions);
	}

	{
		let ctx = document.getElementById("theory").getContext("2d");
		let data = {
			labels : ["Toolchains", "Code generation", "Algorithmic", "Architecture design", "Quality assurance", "CI / Automation", "Reverse-engineering"],
			datasets : [{
				fillColor : "rgba(83, 142, 193, 0.5)",
				strokeColor : "#6091ff",
				pointColor : "#1a76e2",
				pointStrokeColor : "#fff",
				data : [80, 80, 80, 90, 70, 80, 60]
			},{
				strokeColor : "rgba(0,0,0,0)",
				pointColor : "rgba(0,0,0,0)",
				data : [0, 100]
			}]
		};

		graphoptions["graphTitle"] = "Theory";
		new Chart(ctx).Radar(data, graphoptions);
	}

	{
		var ctx = document.getElementById("proglanguages").getContext("2d");
		var data = {
			labels : ["C, C++17, D", "Go", "Rust", "Bash", "SQL", "ASM", "HTML5, CSS3, JS, PHP"],
			datasets : [{
				fillColor : "rgba(83, 142, 193, 0.5)",
				strokeColor : "rgb(96, 145, 255)",
				pointColor : "rgb(26, 118, 226)",
				pointStrokeColor : "#fff",
				data : [100, 60, 70, 90, 80, 40, 70]
			},{
				strokeColor : "rgba(0,0,0,0)",
				pointColor : "rgba(0,0,0,0)",
				data : [0, 100]
			}]
		};

		graphoptions["graphTitle"] = "Programming languages";
		new Chart(ctx).Radar(data,graphoptions);
	}

	{
		var ctx = document.getElementById("linux").getContext("2d");
		var data = {
			labels : ["Ubuntu/Debian", "Archlinux", "Linux From Scratch", "Server admin", "Graphical stack", "Kernel"],
			datasets : [{
				fillColor : "rgba(83, 142, 193, 0.5)",
				strokeColor : "rgb(96, 145, 255)",
				pointColor : "rgb(26, 118, 226)",
				pointStrokeColor : "#fff",
				data : [90, 100, 60, 90, 80, 60]
			},{
				strokeColor : "rgba(0,0,0,0)",
				pointColor : "rgba(0,0,0,0)",
				data : [0, 100]
			}]
		};

		graphoptions["graphTitle"] = "Linux";
		new Chart(ctx).Radar(data,graphoptions)
	}

	{
		var ctx = document.getElementById("network").getContext("2d");
		var data = {
			labels : ["Cisco CCNA1 (Basis)", "Cisco CCNA2 (Routing)", "Cisco CCNA3", "Cisco CCNA4 (VLAN)", "PFSense (Unix distro for routers)", "Linux network daemons"],
			datasets : [{
				fillColor : "rgba(83, 142, 193, 0.5)",
				strokeColor : "rgb(96, 145, 255)",
				pointColor : "rgb(26, 118, 226)",
				pointStrokeColor : "#fff",
				data : [100, 90, 50, 40, 70, 80]
			},{
				strokeColor : "rgba(0,0,0,0)",
				pointColor : "rgba(0,0,0,0)",
				data : [0, 100]
			}]
		};

		graphoptions["graphTitle"] = "Networking";
		new Chart(ctx).Radar(data,graphoptions);
	}

	{
		var ctx = document.getElementById("tools").getContext("2d");
		var data = {
			labels : ["Git", "Gitlab / Github / Gitea", "GitlabCI / TravisCI / CircleCI"],
			datasets : [{
				fillColor : "rgba(83, 142, 193, 0.5)",
				strokeColor : "rgb(96, 145, 255)",
				pointColor : "rgb(26, 118, 226)",
				pointStrokeColor : "#fff",
				data : [100, 90, 80]
			},{
				strokeColor : "rgba(0,0,0,0)",
				pointColor : "rgba(0,0,0,0)",
				data : [0, 100]
			}]
		};

		graphoptions["graphTitle"] = "Tools";
		new Chart(ctx).Radar(data,graphoptions);
	}
}