cv-online/js/main.js

264 lines
7.0 KiB
JavaScript

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();
$.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) => {
$(elmt).html(marked($(elmt).html(), markedOpt, (err, res) => {
cnt++;
if(cnt === len){
if(path == "/skills"){
// wow such ugly hack... any it works (and when it fails only the graph title disappear, so no big deal)
setTimeout(skillsPageSetup, 500);
}
}
return res;
}));
});
})
.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: "Project Management" },
{ value: 1, color: "#6cd6ef", title: "Web 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"],
datasets : [{
fillColor : "rgba(83, 142, 193, 0.5)",
strokeColor : "#6091ff",
pointColor : "#1a76e2",
pointStrokeColor : "#fff",
data : [80, 80, 80, 90, 70, 80]
},{
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, Java", "Bash", "SQL", "VHDL", "ASM", "Matlab", "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, 90, 80, 40, 40, 70, 60]
},{
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", "X11/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, 80, 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 : ["SVN", "Git", "Development workflows", "GANTT", "PERT", "Quality Assurance"],
datasets : [{
fillColor : "rgba(83, 142, 193, 0.5)",
strokeColor : "rgb(96, 145, 255)",
pointColor : "rgb(26, 118, 226)",
pointStrokeColor : "#fff",
data : [40, 100, 60, 60, 70, 70]
},{
strokeColor : "rgba(0,0,0,0)",
pointColor : "rgba(0,0,0,0)",
data : [0, 100]
}]
};
graphoptions["graphTitle"] = "Tools";
new Chart(ctx).Radar(data,graphoptions);
}
}