code-fellows/index.html at main · tomootes/code-fellows · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
---
layout: default
---
<section class="text-center">
    <h2>Code Fellows</h2>

    <p>Code Fellows werken samen aan een open, eerlijke en inclusieve digitale overheid en samenleving. We komen
        maandelijks bijeen om te hacken aan tools die ons daarbij ondersteunen.</p>

    <p>Kijk op <a href="https://github.com/codefornl/code-fellows">Github</a> om jezelf als Code Fellow toe te laten
        voegen. We gebruiken hiervoor de <a href="https://jsonresume.org/schema/">JSON Resume</a> standaard.</a></p>

    <input style="padding: 1em; font-size: 1em; width: 20em" type="search" id="search"
        placeholder="Filter op kennis en expertise">
    <script>
        document.getElementById('search').addEventListener('keyup', function (event) {
            var search = event.target.value.toLowerCase();
            var persons = document.querySelectorAll('.person');
            persons.forEach(function (person) {
                var skills = person.querySelector('.skills').textContent.toLowerCase();
                person.style.display = skills.includes(search) ? "block" : "none";
            });
        });
    </script>

    <div class="person-list" id="code-fellow-list">
        <script src="micro-templating.js"></script>
        <script type="text/html" id="code-fellow">
            <div class="person">
                <img class="picture" src="<%=image%>">
                <p>
                    <%=name%><br>
                    <a href="mailto:<%=email%>"><%=email%></a>
                </p>
                <p class="summary"><%=summary%></p>
                <p class="skills"><%=skills.replace(/,/g, ', ')%></p>
                <p class="social">
                    <a class="websiteBtn smGlobalBtn" href="<%=url%>"></a>
                </p>
            </div>
        </script>
        <script type="module">
            var codeFellowResumeUrls = await fetch('code-fellows.json')
                .then(response => response.json())
                .then(data => data["code-fellows"]);
            codeFellowResumeUrls.forEach(function (url) {
                fetch(url)
                    .then(response => response.json())
                    .then(resume => {
                        var values = {
                            "name": resume.basics.name || "Anonieme Code Fellow",
                            "email": resume.basics.email || "no-reply@codefor.nl",
                            "summary": resume.basics.summary || "Nog geen omschrijving beschikbaar.",
                            "image": resume.basics.image || "https://upload.wikimedia.org/wikipedia/commons/thumb/6/65/No-Image-Placeholder.svg/832px-No-Image-Placeholder.svg.png",
                            "url": resume.basics.url || "https://codefor.nl/",
                            "skills": resume.skills && resume.skills.map(skill => skill.keywords.join(',')).join(', ') || ""
                        };
                        var template = document.getElementById('code-fellow').innerHTML;
                        var html = tmpl(template, values);
                        document.getElementById('code-fellow-list').innerHTML += html;
                    });
            });
        </script>
    </div>
</section>

<section class="text-center principles-section">
    <div class="principles">
        <div class="principle">
            <h3>We werken aan overheid en maatschappij, niet aan politiek.</h3>
        </div>
        <div class="principle">
            <h3>We ontwikkelen oplossingen voor en met burgers.</h3>
        </div>
        <div class="principle">
            <h3>We laten zien wat mogelijk is.</h3>
        </div>
        <div class="principle">
            <h3>We werken open en transparant.</h3>
        </div>
        <div class="principle">
            <h3>We bouwen mee aan een ecosysteem.</h3>
        </div>
    </div>
</section>