whom.html

<!DOCTYPE html>
<html lang="he" dir="rtl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="preload" href="fonts/Alef-Regular.woff2" as="font" type="font/woff2" crossorigin>
    <link rel="preload" href="fonts/Alef-Bold.woff2" as="font" type="font/woff2" crossorigin>
    <link rel="stylesheet" href="styles/whom.css">
    <title>מי פה?</title>
    <noscript><style>body {visibility: visible}</style></noscript>
</head>
<body style="visibility: hidden" onload="document.body.style.visibility = 'visible'">
    <h3><a href=".">אוליפֹה</a></h3>
    <div id="grid"></div>
    <script>
        people = {
            'Meytar Moran': {name: 'מיתר מורן', url: 'https://www.meytarmoran.com'},
            'Noam Dovev': {name: 'נעם דובב', url: 'https://palindromist.art'},
            'Eyal Gruss': {name: 'איל גרוּס', url: 'https://eyalgruss.com'},
            'Savyon': {name: 'סביון', url: 'https://www.savyonshenhar.com/'},
            'Alex Ben-Ari': {name: 'אלכס בן־ארי', url: 'https://alexbenari.com'},
            'Eran Hadas': {name: 'ערן הדס', url: 'https://eranhadas.com'},
            'Rotem Atar': {name: 'רותם עטר', url: 'https://he.wikipedia.org/wiki/%D7%A8%D7%95%D7%AA%D7%9D_%D7%A2%D7%98%D7%A8'},
            'Amit Ben Ami': {name: 'עמית בן עמי', url: 'https://www.facebook.com/amit.benami.88'},
            'Yael Netzer': {name: 'יעל נצר', url: 'https://yaeln.org/home/'},
            'Yaniv Hagbi': {name: "יניב חג'בי", url: 'https://uva.academia.edu/YanivHagbi'},
            'Adi Sorek': {name: "עדי שורק", url: 'https://adisorek.com'},
        }

        for ([person, _] of Object.keys(people).map(x => [x, Math.random()]).sort((a, b) => a[1] - b[1])) {
            img = document.createElement('img')
            img.className = 'headshot'
            img.src = `media/headshots/${person}.jpg`

            cap = document.createElement('figcaption')
            cap.innerHTML = people[person].name
            a = document.createElement('a')
            a.dir = 'ltr'
            a.href = a.innerHTML = people[person].url
            a.innerHTML = decodeURI(a.innerHTML.split(/https?:\/\/(www\.)?/).pop())
            div = document.createElement('div')
            div.appendChild(a)
            cap.appendChild(div)

            fig = document.createElement('figure')
            fig.appendChild(img)
            fig.appendChild(cap)

            a = document.createElement('a')
            a.href = people[person].url
            a.appendChild(fig)
            grid.appendChild(a)
        }
    </script>
</body>
</html>