$(document).ready(function () {
    // SKILLS
    let skills = [
        {
            name: 'C#',
            percentage: 95
        },
        {
            name: '.NET',
            percentage: 95
        },
        {
            name: 'Entity Framework',
            percentage: 80
        },
        {
            name: 'MediatR',
            percentage: 85
        },
        {
            name: 'NodeJS',
            percentage: 95
        },
        {
            name: 'SQL',
            percentage: 75
        },
        {
            name: 'MongoDB',
            percentage: 75
        },
        {
            name: 'Angular8+',
            percentage: 90
        },
        {
            name: 'React',
            percentage: 70
        },
        {
            name: 'Vue',
            percentage: 50
        }
    ]
        // Sort by descending percentage
        .sort((a, b) => b.percentage - a.percentage);
    $("#skills").html("");
    $.each(skills, (index, skill) => {
        $("#skills").append(`
<div class="bar flex">
	<div class="bar fill" style="width:${skill.percentage}%">
      <div class="tag bold flex">${skill.name}</div>
   </div>
   <span>${skill.percentage}%</span>
</div>
`)
    });


    // EDUCATIONS
    let educations = [
        {
            school: "Microsoft",
            timeframe: "Jan 2023",
            fields_of_study: [
                {
                    name: "Microsoft Certified: Azure fundamentals (AZ-900)",
                    description: "The <a href='https://learn.microsoft.com/en-us/certifications/exams/az-900/'>Microsoft AZ-900 Azure Fundamentals exam</a> is designed " +
                        "to test an individual's foundational knowledge of cloud computing and the basics of Azure services. The exam covers topics such as cloud concepts, " +
                        "core Azure services, security, privacy, compliance, pricing and support, and Azure resource management. I prepared for the exam using the " +
                        "<a href='https://learn.microsoft.com/en-us/'>Microsoft Learn platform</a>, along with the officially provided labs and hands-on experience with Azure." +
                        "<br>" +
                        "Certificate: <a href='https://goffincedric.be/assets/cedric-goffin-azure-az-900-azure-fundamentals'>pdf</a>"
                }
            ],
            location: {
                name: "Microsoft - AZ-900",
                url: "https://learn.microsoft.com/en-us/certifications/exams/az-900/"
            }
        },
        {
            school: "Linux Foundation",
            timeframe: "Feb 2021 - Nov 2021",
            fields_of_study: [
                {
                    name: "OpenJS Node.js Application Developer (JSNAD)",
                    description: "<a href='https://training.linuxfoundation.org/certification/jsnad/'>This certification</a> comprehensively tested the skills and knowledge of core NodeJS APIs, such as Buffers & streams, Events, Child processes, module system, ... " +
                        "Unit testing, diagnostics, performance, inner workings of the Node binary and the Node ecosystem, where among other knowledge areas that got tested. " +
                        "I prepared for this certification by completing the complementary course <a href='https://training.linuxfoundation.org/training/nodejs-application-development-lfw211/'>Node.js Application Development (LFW211)</a>, along with lots of other resources (both theoretical and practical material)." +
                        "<br>" +
                        "Certificate: <a href='https://goffincedric.be/assets/cedric-goffin-nodejs-jsnad-certificate.pdf'>pdf</a>" +
                        "Course: <a href='cedric-goffin-nodejs-application-development-lfw211-certificate.pdf'>pdf</a>"
                }
            ],
            location: {
                name: "Linux Foundation - JSNAD",
                url: "https://training.linuxfoundation.org/certification/jsnad/"
            }
        },
        {
            school: "Karel de Grote Hogeschool",
            timeframe: "Sept 2016 - Aug 2019",
            fields_of_study: [
                {
                    name: "Bachelor - Applied informatics: Application development",
                    description: "This study programme was mainly focused around the use of Java and Object Oriented programming. In the 2nd year, I also got familiarized with C# and its " +
                        "integration into web  applications using frameworks such as ASP.NET MVC, ASP.NET WebAPI and Entity Framework. Additionally, a broad and extensive foundation on numerous " +
                        "other technologies was laid: Oracle SQL, MSSQL, Angular 2+, Cisco networking, UML and a wide range of management courses. " +
                        "During the final year of my education at KdG, the study programme further elaborated on web technologies such as Java Spring Boot with Thymeleaf and other frameworks, e.g. Angular 7. " +
                        "We also integrated this knowledge in multiple large projects to get more familiar with the inner workings of these frameworks. We also deviated from the classical relational databases and " +
                        "got to work with MongoDB. </br>" +
                        "As the icing on the cake, <a>Thomas Verhoeven</a> and I did an internship at <a href='https://stacked.be/'>Stacked</a>. " +
                        "During the internship, we were able to fully immerse ourselves in the day-to-day business world. Within 8 weeks we created the Tech Dive Platform using a MEVN stack. " +
                        "Eventually I graduated with distinction and I completed the study programme according to the 3-year model trajectory."
                }
            ],
            location: {
                name: "Antwerp, Belgium - Campus Groenplaats",
                url: "https://www.google.com/maps/place/Campus+Groenplaats+-+KdG+(Karel+de+Grote+Hogeschool)/@51.2181825,4.3998886,17z/data=!4m12!1m6!3m5!1s0x47c3f6ea98a8ce0f:0xf69cda1e60b9ce83!2sKarel+de+Grote+Hogeschool!8m2!3d51.2022912!4d4.3904732!3m4!1s0x47c3f6f6d16cb7fb:0xfc5f09fa2a5e0ae9!8m2!3d51.2181531!4d4.4009028"
            }
        },
        {
            school: "Heilig Graf Turnhout",
            timeframe: "Sept 2014 - Aug 2016",
            fields_of_study: [
                {
                    name: "TSO - IT & Networking",
                    description: "During my last 2 years of secondary education, I have been able to immerse myself well enough in the world of programming. " +
                        "I learned to make basic applications in VB.NET and during my final year I also learned to combine VB.NET, HTML5 and CSS3 with ASP.NET to create web applications. " +
                        "Furthermore, I also got taught how to work with Linux, picked up the basic knowledge of Bash scripting, learned how to set up a Windows server, found out about the basic PC parts, ... " +
                        "For my final project, we had to create a responsive website in ASP.NET for an organization of choice. I decided to make this website for the orchestra of my music school: " +
                        "<a href=\"http://gip3cedricgoffin.azurewebsites.net/\" class=\"highlight\">Website</a>."
                }
            ],
            location: {
                name: "Turnhout, Belgium - Campus Patersstraat",
                url: "https://www.google.com/maps/place/Heilig+Graf+secundair+onderwijs+-+campus+Patersstraat/@51.3248802,4.9492606,17z/data=!3m1!4b1!4m5!3m4!1s0x47c6b3d5b9b39f47:0x30ffea8a9e6a2bf1!8m2!3d51.3248769!4d4.9514493"
            }
        },
        {
            school: "Koninklijk Atheneum Ekeren",
            timeframe: "Sept 2010 - Aug 2014",
            fields_of_study: [
                {
                    name: "ASO - Sciences & Mathematics",
                    description: "My secondary education started in Ekeren. I have always been fascinated by science, " +
                        "how everything is put together, how and why things work as they are. A science-oriented study programme " +
                        "seemed like the perfect choice for me. Only, after a few years I began to realize that I would rather continue " +
                        "my education in the field of computer science. At that time I was already working on small applications."
                }
            ],
            location: {
                name: "Ekeren, Belgium",
                url: "https://www.google.com/maps/place/Koninklijk+Atheneum+Ekeren/@51.2764033,4.4199533,17z/data=!3m1!4b1!4m5!3m4!1s0x47c409cdadc738d5:0xb1fc8845b68dee16!8m2!3d51.2764!4d4.422142"
            }
        },
    ];
    $("#educations-list").html("");
    $.each(educations, function (index, education) {
        let fields = "";
        $.each(education.fields_of_study, function (field_index, field) {
            fields += "<div>" +
                "   <strong>" + field.name + "</strong><br>" +
                "   <p id=\"" + index + "-" + field_index + "\" class=\"phone-desc hidden\"> " + field.description + "</p>" +
                "</div>" +
                "<span data_id=\"" + index + "-" + field_index + "\" class=\"toggle-show more\">Show <span id=\"more-less-" + index + "-" + field_index + "\">more</span> <i class='mdi mdi-arrow-down'></i><br></span>"
        });
        $("#educations-list").append(
            "<div class=\"waypoint experience\" data-animation=\"slide-up\">" +
            "   <div class=\"col-md-4\">" +
            "       <h4 class=\"school\">" + education.school + "</h4>" +
            "       <p class=\"experience-period\">" + education.timeframe + "</p>" +
            "   </div>" +
            "   <div class=\"col-md-8\">" +
            fields +
            "       <span class=\"highlight location\"><a href=\"" + education.location.url + "\" target=\"_blank\"><i class=\"mdi mdi-map-marker-radius\"></i> " + education.location.name + "</a></span>" +
            "   </div>" +
            "</div>"
        )
    });
    $(".toggle-show").on('click', function (event) {
        if (this.classList.contains("more")) {
            $(this).removeClass("more").addClass("less");
            $("#" + $(this).attr("data_id")).removeClass("hidden").addClass("shown");
            $("#more-less-" + $(this).attr("data_id")).text("less");
        } else {
            $(this).removeClass("less").addClass("more");
            $("#" + $(this).attr("data_id")).removeClass("shown").addClass("hidden");
            $("#more-less-" + $(this).attr("data_id")).text("more");
        }
    });


    // WORK EXPERIENCE (TIMELINE)
    let work_experiences = [
        {
            position: ".NET Developer",
            company: "Cheops, Kontich, Belgium",
            timeframe: "January 2023 - Present",
            description: "",
            technologies: [
                ".NET 6+",
                ".NET Framework 4.6.1+",
                "Entity Framework",
                "MediatR",
                "Dapper",
                "MS SQL",
                "Azure Cloud",
                "Docker",
                "Node.js",
                "OAuth 2.0 + JWT",
                "Angular2+",
                "React",
                "Gitlab",
                "Unit Testing"
            ]
        },
        {
            position: "Full Stack Developer",
            company: "RMDY NV, Kontich, Belgium",
            timeframe: "December 2019 - December 2022",
            description: "<p>" +
                "At RMDY I had my first experiences working both in internal development teams for internal/external clients, " +
                "as well as a consultant. Because of the variety in these projects, I am capable of being flexible in lots of " +
                "different situations and development teams, be it small or large teams. Some of the highlights so far are:" +
                "</p><ul>" +
                "<li>Gateway: As the need for a centralized authentication/user management system grew, I was tasked with developing " +
                "a solution. This system was kickstarted with 2 other employees, but quickly became solely my responsibility. " +
                "I was involved in the entire process, from initial analysis and architecture setup, to the actual development and testing, " +
                "as well as support, maintenance and currently training newer employees to learn how to use and integrate the gateway into their own projects." +
                "<li>Project under NDA: The delivered product contained both a backend, frontend and mobile application that are currently " +
                "still in testing with the target audience. The frontend application framework was used in conjunction with the Ionic framework, " +
                "so that both Android and iOS apps could be generated from the same codebase that was used for the web app. The final stable release " +
                "was delivered comfortably within schedule with time left for change requests from the customer and optimizations, " +
                "before the initial testing could start." +
                "<li>Consultancy@Digipolis: I am currently working as a web developer within digipolis. My current tasks include a full " +
                "refactor of multiple applications used by Antwerpen. I am mainly working on the Angular2+ frontend applications, " +
                "but am currently reorienting myself within Digipolis as a backend .NET developer." +
                "</ul>",
            technologies: [
                "Node.js",
                "Express",
                "MongoDB",
                "Google APIs",
                "OAuth 2.0 + JWT",
                "NPM package development",
                "Angular2+",
                "Vue.js",
                "Gitlab",
                "Docker",
                ".NET",
                "Unit Testing"
            ]
        },
        {
            position: "Google Cloud Platform Developer",
            position_note: "(Student job)",
            company: "XTi, Kontich, Belgium",
            timeframe: "June 2019 - July 2019",
            description: "<p>" +
                "At XTi, I, along with Thomas Verhoeven, worked on an internal research project, regarding an extension of XTI's services. " +
                "Before our research on GCP, they were mainly focused on developing using Amazon Web Services, " +
                "but because of more competition in cloud services, XTi wanted to explore their options with other cloud service providers. " +
                "</p><p>" +
                "Our test project was a small immo web scraper, that would periodically scrape certain websites with certain filters to limit the scrape results. " +
                "These filters would depend on the search preferences of users. Users would also be notified when certain new results, that suited their preferences, were found or old results had changed. " +
                "</p><p>" +
                "In the course of the coming 4 weeks, we developed the application and changed it to run on App Engine (Flex and standard environments) and modularized the project for use in Cloud Functions and Cloud Run. " +
                "We also got more familiar using the Google Cloud infrastructure, its limitations and advantages, ... " +
                "As an added bonus, we learned how to set up and modify Docker containers, how to use Docker files for deployment. " +
                "Something that we never had done before, or got set up for us." +
                "</p>",
            technologies: [
                "App Engine (Flex & Standard)",
                "Cloud Functions",
                "Cloud Run",
                "Cloud Scheduler",
                "Cloud Firestore",
                "Java Spring + Selenium",
                "Docker"
            ]
        },
        {
            position: "Full Stack Javascript Developer",
            position_note: "(Internship KdG)",
            company: "Stacked, Edegem, Belgium",
            timeframe: "April 2019 - June 2019",
            description: "<p>" +
                "For this <a href='https://www.rmdy.be/experimenteren-met-echte-technologieen-enter-rmdy-stages/'>internship at Stacked</a>, Thomas Verhoeven and I were tasked with developing a web app, " +
                "called 'Tech Dive Platform'. This platform would later be used for people to register for RMDY's Tech Dives. " +
                "The need for a managed platform grew when they noticed a growing trend in the amount of people that would show up for their Tech Dives, " +
                "ever since they organized their <a href='https://www.rmdy.be/succesvolle-opkomst-voor-onze-eerste-publieke-tech-dive/'>first public Tech Dive</a>. " +
                "</p><p>" +
                "While we were working on the Tech Dive Platform, we were also able to fully grasp concepts such as code review, scrum and agile workflow, ... " +
                "In short, subjects that were only briefly touched on at KdG. " +
                "We also learned to use Vue.js, a framework akin to Angular 2+. Learning to work with these new technologies was also the reason why I chose this particular internship. " +
                "This way we were able to broaden our perspective on current and relevant technologies, beside the ones we were taught to use during our education at KdG. " +
                "</p><p>" +
                "After the final product was delivered, I left with a satisfied feeling, having learned new and interesting concepts along the way and being able to have had this opportunity." +
                "</p>",
            technologies: [
                "Vue.js + PWA",
                "Node.js + Express",
                "MongoDB",
                "Google APIs",
                "OAuth 2.0 + JWT"
            ]
        },
        {
            position: "Website maintainer",
            position_note: "(Student job)",
            company: "Anubis Care Brasschaat, Belgium",
            timeframe: "Oct 2016 - Present",
            description: "<p>" +
                "At Anubis Care I am mainly concerned with maintaining the website. This includes tasks such as:<br>" +
                "<ul>" +
                "   <li>Adding, modifying or removing products & trainings" +
                "   <li>SEO" +
                "   <li>Make small changes to page layouts/site structure" +
                "</ul>" +
                "Additionally, I also perform tasks using Exact Online. This mainly concerns product management, stock changes, ..." +
                "</p>",
            technologies: [
                "Wordpress",
                "WooCommerce",
                "Yoast SEO",
                "Exact Online"
            ]
        },
        {
            position: "Intern",
            position_note: "(Internship secondary education)",
            company: "Soudal NV Turnhout, Belgium",
            timeframe: "Oct 2015 - Nov 2015 (2 weeks)",
            description: "<p>" +
                "During my internship at Soudal NV, my primary task was to create webforms using Sharepoint:<br>" +
                "<ul>" +
                "   <li>Production process security & issues form:<br>" +
                "       This webform had the purpose of reporting problems (accidents, safety concerns, ...) during the production process, together with a possible solution and priority." +
                "   <li>People directory:<br>" +
                "       A webform on which all employees were shown. Possibility to filter on several variables." +
                "</ul>" +
                "</p>",
            technologies: [
                "Sharepoint",
                "Infopath",
                "VB.NET"
            ]
        },
    ];
    $("#timeline").html("");
    $.each(work_experiences, function (index, job) {
        let technologies = "<li class=\"list-inline-item\"><span class=\"badge badge-primary badge-pill\">" +
            job.technologies.join("</span></li><li class=\"list-inline-item\"><span class=\"badge badge-primary badge-pill\">") +
            "</span></li>";

        $("#timeline").append(
            "<article class=\"resume-timeline-item position-relative waypoint\" data-animation=\"slide-in-" + ((index % 2 === 0) ? "right" : "left") + "\">" +
            "   <div class=\"resume-timeline-item-header mb-2\">" +
            "       <div class=\"d-flex flex-column flex-md-row\">" +
            "           <h3 class=\"resume-position-title font-weight-bold mb-1\">" + job.position +
            ((job.position_note !== undefined) ? "           <small class=\"text-muted\">" + job.position_note + " </small>" : "") +
            "           </h3>" +
            "       <div class=\"resume-company-name ml-auto\">" + job.company + "</div>" +
            "   </div>" +
            "   <div class=\"resume-position-time\">" + job.timeframe + "</div></div>" +
            "   <div class=\"resume-timeline-item-desc\">" +
            job.description +
            "       <h4 class=\"resume-timeline-item-desc-heading font-weight-bold mb-0\">Used technologies:</h4>" +
            "       <ul class=\"list-inline\">" +
            technologies +
            "       </ul>" +
            "    </div>" +
            "</article>"
        )
    });


    // PROJECTS
    let projects = [
        {
            project_id: "integratie_KdG_2018",
            card_title: "Integration project KdG 2018",
            card_tag: "C# + ASP.NET",
            filter: {
                name: "C#",
                data_name: "c-sharp"
            },
            title: "Political Barometer",
            tag: "SOCIAL MEDIA ANALYSIS",
            detail: "The political barometer is a web application that aims to find and analyze trends around persons, themes and organizations and show these to users in a well-organized way. " +
                "This website was a group assignment for KdG, in collaboration with <a href=\"https://textgain.com\" target=\"_blank\" class=\"highlight\">Textgain</a>, <a href=\"http://www.treecompany.be\" target=\"_blank\" class=\"highlight\">Tree Company</a> and <a href=\"https://www.nodebox.net\" target=\"_blank\" class=\"highlight\">Nodebox</a>. " +
                "I was responsible for the back-end part: C#, MSSQL, WebAPI, MVC, Entity Framework Code First + Migrations, ... Furthermore, I also worked on a small android application for this project.",
            // link: "",
            // bullets: [
            //     "",
            //     ""
            // ],
            slides: 4
        },
        {
            project_id: "tdp_stacked_2019",
            card_title: "Internship project Stacked 2019",
            card_tag: "Vue.js, Node.js, MongoDB",
            filter: {
                name: "JAVASCRIPT",
                data_name: "js"
            },
            title: "Tech Dive Platform",
            tag: "MANAGED EVENT PLATFORM",
            detail: "The Tech Dive Platform is a platform where users, that are familiar with RMDY's Tech Dives, can register themselves and sign themselves up to go to talks of planned Tech Dives. " +
                "The homepage contains a dynamic grid system that can change the subjects, its timetable, ... according to the next upcoming Tech Dive. " +
                "For this project, I decided to work on both front-end and back-end, because of the new technologies involved in both sides of the application.",
            // link: "",
            // bullets: [
            //     "",
            //     ""
            // ],
            slides: 5
        }
    ];
    $("#project-filter").html("").append("<div class=\"filter active\" data-filter=\"all\">ALL</div>");
    $("#project-filter-float-bar").html("").append("<div class=\"filter active\" data-filter=\"all\">ALL</div>");
    $("#gallery").html("");
    let filters = [];
    $.each(projects, function (index, project) {
        if ($("#project-filter").html().indexOf(project.filter.data_name) === -1) {
            let filter_text = "<div class=\"filter\" data-filter=\"." + project.filter.data_name + "\">" + project.filter.name + "</div>";
            $("#project-filter").append(filter_text);
            $("#project-filter-float-bar").append(filter_text);
        }

        $("#gallery").append("<div class=\"mix " + project.filter.data_name + "\" data-my-order=\"1\" style=\"display: inline-block;\" data-bound>" +
            "   <div>" +
            "       <div class=\"card\" style='background: url(\"../img/thumb-" + index + ".jpg\") center center/cover;'></div>" +
            "       <div class=\"text\">" +
            "           <div class=\"bold\">" + project.card_title + "</div>" +
            "           <span class=\"highlight\">" + project.card_tag + "</span>" +
            "       </div>" +
            "       <div class=\"button\" id=\"" + index + "\">LEARN MORE</div>" +
            "   </div>" +
            "</div>")
    });

    $('#gallery .button').on('click', function () {
        $('body').css({
            overflow: "hidden"
        });
        fillModal(this.id);
        $('.modal-wrap').addClass('visible');
    });

    $('.close').on('click', function () {
        $('body').css({
            overflow: "initial"
        });
        $('.modal-wrap, #modal .button').removeClass('visible');
    });

    $('.mask').on('click', function () {
        $('body').css({
            overflow: "initial"
        });
        $('.modal-wrap, #modal .button').removeClass('visible');
    });

    let carousel = $('#carousel'),
        slideWidth = $(window).width() * 0.9 > 700 ? 700 : $(window).width() * 0.9,
        imgWidth,
        imgHeight,
        threshold = slideWidth / 3,
        dragStart,
        dragEnd;

    setDimensions();

    $('#next').click(function () {
        shiftSlide(-1)
    });
    $('#prev').click(function () {
        shiftSlide(1)
    });

    carousel.on('mousedown', function () {
        if (carousel.hasClass('transition')) return;
        dragStart = event.pageX;
        $(this).on('mousemove', function () {
            dragEnd = event.pageX;
            $(this).css('transform', 'translateX(' + dragPos() + 'px)');
        });
        $(document).on('mouseup', function () {
            if (dragPos() > threshold) {
                return shiftSlide(1)
            }
            if (dragPos() < -threshold) {
                return shiftSlide(-1)
            }
            shiftSlide(0);
        });
    });

    function setDimensions() {
        if (/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)) {
            slideWidth = $(window).innerWidth();
        }
        $('.carousel-wrap, .slide').css('max-width', slideWidth);
        $('.modal').css('max-width', slideWidth);
        $('#carousel').css('left', slideWidth * -1)
    }

    function dragPos() {
        return dragEnd - dragStart;
    }

    function shiftSlide(direction) {
        if (carousel.hasClass('transition')) return;
        dragEnd = dragStart;
        $(document).off('mouseup');
        carousel.off('mousemove')
            .addClass('transition')
            .css('transform', 'translateX(' + (direction * slideWidth) + 'px)');
        setTimeout(function () {
            if (direction === 1) {
                $('.slide:first').before($('.slide:last'));
            } else if (direction === -1) {
                $('.slide:last').after($('.slide:first'));
            }
            carousel.removeClass('transition');
            carousel.css('transform', 'translateX(0px)');
        }, 700)
    }

    function fillModal(id) {
        $('#modal .title').text(projects[id].title);
        $('#modal .detail').html(projects[id].detail);
        $('#modal .tag').text(projects[id].tag);
        if (projects[id].link) $('#modal .button').addClass('visible')
            .parent()
            .attr('href', projects[id].link);

        $.each($('#modal li'), function (index, value) {
            $(this).text(projects[id].bullets[index]);
        });

        let tmpImg = new Image();
        tmpImg.src = "../img/slides/en/" + projects[id].project_id + "-0.png";
        imgWidth = tmpImg.width;
        imgHeight = tmpImg.height;

        $("#carousel").html("")
            .css({
                height: imgHeight / (imgWidth / slideWidth)
            })
            .append(("<div class=\"slide\" style=\"width: " + slideWidth + "px;\"></div>").repeat(projects[id].slides));
        $.each($('#modal .slide'), function (index, value) {
            $(this).css({
                background: "url('../img/slides/en/" + projects[id].project_id + '-' + (index + projects[id].slides - 1) % projects[id].slides + ".png') center center/cover",
                backgroundSize: 'cover'
            });
        });
    }

    $(window).resize(function () {
        slideWidth = $(window).width() * 0.9 > 700 ? 700 : $(window).width() * 0.9;
        threshold = slideWidth / 3;
        setDimensions();

        $("#carousel").css({
            height: imgHeight / (imgWidth / slideWidth)
        });
        $(".slide").css({
            width: slideWidth
        });
    });
});