-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
200 lines (181 loc) · 14.5 KB
/
index.html
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
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>home | culi.page</title>
<link rel="stylesheet" href="./styles/index.css">
<!-- <script type="module" src="./app.js" defer></script> -->
</head>
<body>
<header>
<h1 class="title">
<label class="domain">
<input type="checkbox" aria-label="toggle site title to emoji" />
<span class="symbol">💩</span>
<span>culi</span>
</label>
.
<label class="domain">
<input type="checkbox" aria-label="toggle site title to emoji" />
<span class="symbol">🌐</span>
<span>page</span>
</label>
</h1>
</header>
<main>
<section>
<h2 id="2-welcome" class="welcome">Bună ziua! 👋</h2>
<p class="intro-paragraph">
My name is Culi (<i>kuh-lee</i>). I use <a href="https://en.pronouns.page/they">they/them</a> or <a href="https://en.pronouns.page/he">he/him</a> pronouns. I play with <a href="https://github.com/tif-calin/">code a lot</a> (currently mainly JS, TS, Ruby, and Python), but if you're here for that you probably meant to check out <a href="https://work.culi.page">my portfolio site</a>! Although I really enjoy coding, code tends to mainly act as the glue that allows me to tie together my varied interests including, but not limited to:
</p>
<div class="hobbies-container">
<span class="list-label"></span>
<ul class="hobbies mini-list">
<li>botany</li>
<li>citizen science-y and open source stuff like Wikipedia, OpenStreetMaps, iNaturalist, WikiData, and various open-source GitHub projects</li>
<li>~c~o~m~m~u~n~i~t~y~</li>
<li>cooking</li>
</ul>
<br />
<ul class="hobbies mini-list">
<li>yes there's a scroll wheel</li>
</ul>
<br />
<ul class="hobbies mini-list">
<li>the documentary <i>The Queen of Trees</i></li>
<li>linguistics. Originally conlanging (not Esperanto though) and neography, but now just linguistics itself.</li>
<li>soil ecology</li>
<li>generative programming, creative programming, neural networks, conway's game of life</li>
<li>maths; particularly social choice, game theory, and cellular automata</li>
<li>__slowness__</li>
<li>sharing projects & collabing</li>
<li>keeping up with Annual Reviews in order to occasionally reference an article or major development within a field and make people think I know more than I do</li>
<li>making long syllabi and learning plans to learn about topics I never got a chance to study (but not actually following those plans)</li>
<li>antilibraries</li>
<li>participating in niche online communities/forums</li>
<li>the indie web</li>
<li>reading just enough of a book to quote the one part of the book that stuck out to me (again, making me seem a lot more well-read than I am)</li>
<li>composting</li>
<li>traditions</li>
<li>web standards and the a11y space</li>
<li>open-source</li>
<li>sourdough starters (and sometimes making bread with them)</li>
<li><a href="https://www.appropedia.org/Appropriate_technology">appropriate technologies</a></li>
<li>data visualization</li>
<li>traditional architecure techniques; <a href="https://ancientpottery.how/">ancient pottery</a></li>
<li>bikes</li>
<li>electoral politics and modelling</li>
<li>food justice, gardening, dumpster diving, foraging, and sustainable models of localized food production</li>
<li>sharing</li>
<li>libraries of things</li>
</ul>
</div>
</section>
<hr />
<section>
<h2 id="2-projects">Projects!?</h2>
<p>
The first attempt to collect my miniprojects happened at <a href="/toys">/toys</a> and was made with vanilla HTML/CSS/JS. Then I decided to try a create-react-app for <a href="https://dontplaywithculi.netlify.app/">my second attempt</a> at it. I made some architectural mistakes I eventually got fed up with enough to make a third attempt at <a href="https://dontplay.netlify.app/">dontplay.netlify.app</a>. Still a create-react-app and I haven't even finished setting it up. But since then I've tried out Svelte, Elm, Next.js, Preact, and a few other alternatives to the one big SPA approach CRA lends itself for. So I'm researching micro-frontends to see if I can still do it all in one for my next big iteration of this.
</p>
<p>
Other places you may find remnants of my projects are <a href="https://codepen.io/tif-calin">CodePen</a> (a few experiments), Are.na (not yet), <a href="https://replit.com/@CuliTif">ReplIt</a> (a few slightly larger experiments), <a href="https://www.freecodecamp.org/culi">FreeCodeCamp</a> (I actually never really learned much here but I like the community), Dribble (not yet), <a href="https://openprocessing.org/user/331632">OpenProcessing</a> (not much there yet either).
</p>
<hr class="soft" />
<h3 id="2-projects-3-functioning" class="list-label">Semi-functioning projects</h3>
<p>Here's some stuff you can actually play with.</p>
<ul class="mini-list">
<li>
<a href="https://votevote.page/">VoteVote</a> — a little toy I'm working on to allow you to compare dozens of different voting systems in one go using color as a metaphor. Voters and candidates are both represented by color and how much a voter prefers a candidate is determined by their RGB distance to that candidate. It actually started <a href="/vote">here</a> and then I learned D3 to make <a href="https://dontplaywithculi.netlify.app/charts/rcv">this</a> which soon turned into <a href="https://dontplaywithculi.netlify.app/votevote">an exploration</a> of a few more. Then it finally got it's own domain at <a href="https://votevote.page/">votevote.page</a>!
</li>
</ul>
<hr class="soft" />
<h3 id="2-projects-3-standby" class="list-label">Standby projects</h3>
<ul class="mini-list">
<li>
<a href="https://www.bookbookbook.club/">BookBook</a> — killed by Heroku's deprecation of the free tier. This was a little site meant to allow book clubs to vote on what book to read next using voting system(s) like ranked choice voting, approval, etc. Inspired by <a href="https://www.when2meet.com/">when2meet.com</a>'s model of no-sign-up to allow any community to make a poll without forcing anyone to hand over an email or come up with a new password.
</li>
<li>
<a href="https://foodnotbombs.miraheze.org/">the FoodNotBombs wiki</a> — killed by MiraHeze's death. I have a backup and need to migrate it. The focus of the wiki was on different types of produce that Food Not Bombs-like communities would often get too much of. Food storage has always been the #1 problem in my experience with these organizations so I wanted to collect information and recipes in a single, useful place.
</li>
</ul>
<hr class="soft" />
<h3 id="2-projects-3-collab" class="list-label">Projects with other people</h3>
<ul class="mini-list">
<li><a href="#2-projects-3-standby">bookbook</a> — this actually started as a project with friends but I ended up working on it a ton afterwards. It's open-source of course, but I've been the main maintainer for a while. </li>
<li><a href="https://www.curbee.app/">curbee</a></li>
<li><a href="http://www.citypark.world/">citypark</a></li>
<li><a href="https://acp-index.netlify.app/">acp-index</a></li>
</ul>
<hr class="hide soft" />
<h3 class="hide list-label">Unfinished projects</h3>
<p class="hide">
Steal these ideas! Or collab with me!
</p>
<ul class="hide">
<!--partisan lean-->
<li>
Here's some <a href="https://dontplaywithculi.netlify.app/partisanlean">graphs showing how each <b class="semi">US State's Partisan Lean Index</b></a> has changed over the years since 1968. The PLI is a measure of how a state votes relative to the nation as a whole. My plan was to add timestamps of when major voting access related laws were passed in different states and see if that tended to affect the partisan leans over time.
</li>
<!--ascii dataviz-->
<li>
One thing that's really captivated me recently is ASCII-based charting libraries like <a href="https://github.com/chunqiuyiyu/ervy">ervy</a> and <a href="https://github.com/kroitor/asciichart">asciichart</a>. Besides enabling console-based data visualization, they just look really cool. I've been cataloguing all the different libraries I've come across in a big yaml file with the languages they' for and which visualizations they support. My plan is to make an <a href="https://github.com/kroitor/asciichart">accessible</a> dataviz catalog in the vein of <a href="https://datavizproject.com/">DVP by ferdio</a>. I even managed to snag the dataviz.gallery domain! (HMU if you want to help with this).
</li>
<!--portfolio websites gallery-->
<li>
I had big plans for this highly-specific <a href="https://angry-joliot-5a3345.netlify.app/">portfolios project</a> aiming to aggregate and highlight the <b class="semi">portfolio websites</b> of other developers. Kinda started with me trying to collect inspo, but I got really excited about implementing this tag-based voting system that I never actually implemented. I originally started on this because I was looking for inspo for my own personal portfolio site. But since then I've also began collecting niche programming language websites, political campaign websites, one-off conference/events websites, and small business websites. So part of me is wondering about a more generalized system for crowdsourcing these types of collections.
</li>
<!--learning resources aggregator-->
<li>
This one didn't even get passed the "market research" phase to see what similar projects already exist out there, but it was a very interesting investigation so I wanna share anyways. I've always wanted to build a <b class="semi">learning resource aggregator</b> mean to be extensible for learning pretty much anything. This is a natural evolution from my hobby of creating syllabi for myself to some day follow and study a particular subject. However, as usual, <a href="https://dontplaywithculi.netlify.app/learn">I discovered I'm far from the first to have this idea</a>.
</li>
<!--compost guide-->
<li>
This one's more straightforward. I was trying to play with some new styles I hadn't tried much of before and I ended up using a <a href="https://dontplay.netlify.app/compost">compost guide</a> as my excuse to do so. Has some cute easter eggs which I spent a good amount of time on and is probably the reason I didn't finish, haha. I'll probably submit it to <a href="https://whimsical.club/">whimsical.club</a> if I do finish it.
</li>
<!--read later-->
<li>
My attempt at organizing my million bookmarks and playing with some cool generalized UI is <a href="https://dontplaywithculi.netlify.app/readlater">readlater</a>. The short-term goal was to implement a tag-based system for all of my bookmarks. I have widespanning interests but like to stay focused on specific topics at certain points in my life. I'd like to use this to group together similar articles/books/podcasts/documentaries so I can watch them together and make it feel more like a "deep dive" than me bouncing from interest to interest. Long-term goal is to open it up to anyone so that you can also prioritize what you're reading based on your friends or community's interests
</li>
<!--seasonal fruit chart-->
<li>
I made this cute <a href="https://dontplaywithculi.netlify.app/charts">seasonal fruit chart</a>. Don't have big plans or anything. Just wanna expand the functionality to let people add more fruit and export as a png or something.
</li>
<!--slay clone-->
<li>
I'm making an <a href="https://osgameclones.com/">open source game clone</a> of Sean O' Conner's <a href="http://www.windowsgames.co.uk/slay.html">Slay</a>. Mostly because I think it's what I need to finally stop playing this silly game but also as an excuse to learn <a href="https://elm-lang.org/">Elm</a> and playing with <a href="https://www.redblobgames.com/grids/hexagons-v2/implementation.html">hex grids</a>.
</li>
<!--only you'd-->
<li>
There's this fun party game me and some friends played a lot called Loaded Questions. You get a question, everyone anonymously answers and then you go around trying to guess who wrote which answer. Simple idea but loads of fun. I wanted to make an open-sourced online version of this during the pandemic. I called it "<a href="https://only-youd.vercel.app/">Only You'd</a> and made a non-functioning website for it, but then I got a job haha. I still have a collection of 248 questions that I hand typed (most of which are totally original) which you can <a href="https://culi.page/load/">still access here</a>.
</li>
<!--color names x culture-->
<!--color spaces expanded-->
<!--wiki tools-->
<!--linklink browser extension-->
</ul>
</section>
<hr class="hide" />
<section class="hide">
<h2>Other corners of the internet I crawl</h2>
<p>
Other places I maintain an internet presence but won't link here include BookWyrm, Mastodon, Wikipedia, iNaturalist, and various forums (e.g. votingtheory.org and talkelections.org).
</p>
<p>
Accounts I'm ashamed to hold include LinkedIn, Reddit, and Twitter. I also like coding challenge sites like CodeWars, Exercism.org, and even LeetCode.
</p>
</section>
</main>
<ul class="hide">
<a href="https://plant-planter.github.io/Plant-planter-2021/">plantplans</a>
<a href="https://culireads.netlify.app/">culireads</a>
</ul>
<footer>
<a class="source" href="https://github.com/tif-calin/culi.page">
<!--🄯-->steal this
</a>
<p class="disclaimer">this page was made by harnessing <a href="http://html.energy/">the power</a> of HTML (<a href="https://no-js.club/">no JS</a>!)</p>
</footer>
</body>
</html>