index.html

---
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">
            Array.prototype.shuffle = function () {
                for (var i = 0; i < this.length; ++i) {
                    var j = Math.floor(Math.random() * this.length);
                    var tmp = this[i];
                    this[i] = this[j];
                    this[j] = tmp;
                }
                return this;
            };
            var codeFellowResumeUrls = await fetch('code-fellows.json')
                .then(response => response.json())
                .then(data => data["code-fellows"]);
            codeFellowResumeUrls.shuffle().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>

<section class="text-center">
    <h2>Praat mee op Slack</h2>
    <form method="post" action="https://praatmee.codefor.nl">
        <input type="text" name="name" placeholder="Voornaam">
        <input type="text" name="email" placeholder="E-mail">
        <button>Meld je aan</button>
    </form>
</section>

<footer>
    <div class="footer-item">
      
      <div class="founder">
        <p>Co-founded by:</p>
        <a href="https://waag.org"><img src="//codefor.nl/img/premium/img_footer_waag.png" style="max-width: 280px"></a>
      </div>
      
      <div class="founder">
        <p>Governing partner van:</p>
        <a href="https://codeforall.org"><img src="//codefor.nl/img/premium/img_footer_codeforall.png" style="max-width: 280px"></a>
      </div>
      
      
    </div>
    <div class="footer-item">
      <p>
        <a href="https://www.codefor.nl">Website</a><br>
        <a href="https://codefor.nl/blog">Blog</a><br>
        <a href="https://github.com/codefornl">Github</a><br>
        <a href="https://twitter.com/codefornl">Twitter</a><br>
        <a href="https://codefornl.slack.com">Slack</a><br>
      </p>
    </div>
    <div class="footer-item">
        <p>
          Stichting <b>Code for NL</b><br>
          KvK registratie <a target="_blank" href="https://www.kvk.nl/orderstraat/product-kiezen/?kvknummer=69749477">69749477</a>
        </p>
      </div>
  </footer>