aboutsummaryrefslogtreecommitdiff
path: root/index.html
blob: 6740dbee4651b8052a1f8d826901bf0d19a23f46 (plain) (blame)
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
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>fib</title>
	<style>
		.person {
			margin-bottom: 1em;
		}

		.person-pic {
			width: 50px;
		}

		.person-header {
			display: flex;
			align-items: end;
		}

		.person-header > * {
			margin: 0.5em;
		}

		.person-name {
			margin-bottom: 0;
		}

		.person-title {
			margin-top: 0;
			font-size: 80%;
		}

		.person > p {
			margin: 0;
			margin-left: 0.5em;
		}

		#contributors-container {
			margin-bottom: 3em;
		}

		details img {
			max-width: 600px;
		}

		@media only screen and (min-width: 600px) {
			details img {
				max-width: 70%;
			}
		}


	</style>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>
<h1><code>fib</code></h1>
<p>Can you please give me a Fibonacci function? Ideally (but not necessarily) one that only you would give me.</p>

<p>For a submission to the "Our Space" exhibition at <a href="https://www.instagram.com/hatch_artgallery">Hatch Art
	Gallery</a>.</p>

<details>
	<summary>contributing</summary>
	<p>
		want to contribute? <a href="https://github.com/braxtonhall/fib#contributing">click here</a> and make a pr to the fib repo
		<br>
		so far we haven't rejected anything
	</p>
</details>

<details>
	<summary>photo gallery</summary>
	<img src="./img/hatch-1.jpeg" alt="at hatch gallery">
	<img src="./img/hatch-2.jpg" alt="also at hatch gallery">
	<img src="./img/hatch-3.jpg" alt="still at hatch gallery">
</details>

<details>
	<summary>web rings</summary>
	<p>This site is a member of <a href="https://bobs-club.net/">bob's club!</a> check out a friend's website too<br>
		<a href="https://bobs-club.net/site/fib/pred">previous site</a> --
		<a href="https://bobs-club.net/site/fib/random">random site</a> --
		<a href="https://bobs-club.net/site/fib/succ">next site</a>
	</p>
</details>
<br>
<div id="contributors-container">
	contributors
	<div id="contributors"></div>
</div>
<script>
	const getContributors = _ => fetch(`/people.json`).then(res => res.json());

	const toPersonNode = person => $("<div>", {class: "person"}).append(
		toPersonHeader(person),
		...person.entries.sort(cmpName).map(toPersonEntryNode),
	);

	const toPersonImage = github => github
		? $("<img>", {class: "person-pic", src: `https://github.com/${github}.png`, alt: github})
		: $("<div>", {class: "person-pic"});


	const toPersonDetails = person =>
		$("<div>").append(
			person.github
				? $("<a>", {href: `https://github.com/${person.github}`})
					.append($("<p>", {class: "person-name"}).text(person.name))
				: $("<p>", {class: "person-name"}).text(person.name),
			$("<p>", {class: "person-title"}).text(person.title),
		);

	const toPersonHeader = person => $("<div>", {class: "person-header"})
		.append(toPersonImage(person.github), toPersonDetails(person));

	const toPersonEntryNode = entry => $("<p>").append(
		$("<a>", {
			href: entry.link.startsWith("./entries")
				? `https://github.com/braxtonhall/fib/tree/main/${entry.link.replace(/^\.\//, "")}`
				: entry.link
		}).append($("<code>").text(entry.name)),
	);

	const cmpName = (a, b) => a.name.toLowerCase() < b.name.toLowerCase() ? -1 : 1;

	$(document).ready(
		_ => getContributors()
			.then(people => people.sort(cmpName))
			.then(people => people.map(toPersonNode))
			.then(nodes => $("#contributors").append(...nodes))
	);
</script>
</body>
</html>