add personal website workshop

talks-and-workshops/index.html

@@ -190,6 +190,24 @@ <h3 id="font-talk">Font Talk <a href="#font-talk">#</a></h3>
           </ul>
         </nav>
       </article>
+
+      <hr />
+
+      <article>
+        <h3 id="personal-website-workshop">
+          Personal Website Workshop <a href="personal-website-workshop">#</a>
+        </h3>
+        <p>
+          This is a workshop for people without a personal website (or anyone,
+          really) to discover a small slice of the personal websites of the
+          world, and to create their own.
+        </p>
+        <p>
+          My workshop notes are available as a
+          <a href="./personal-website-workshop.md">downloadable Markdown file</a
+          >.
+        </p>
+      </article>
     </main>
 
     <footer>

talks-and-workshops/personal-website-workshop.md

@@ -0,0 +1,129 @@
+# personal website workshop
+
+let's make a personal website
+
+this workshop can run in two (about equal) parts:
+
+1. a personal website safari, where we click around a few examples of personal sites, to see (a small slice into) the breadth of sites that people make
+2. building your own website, where we use ideas and themes from the safari or your mind to get a simple site on the Internet!
+
+## part 1 - safari
+
+here are 22 semi-random personal websites:
+
+- <https://www.tomforth.co.uk/>
+- <https://sometimes.digital/>
+- <https://brr.fyi/>
+- <https://www.timhunkin.com/>
+- <https://www.cameronsworld.net/>
+- <https://vlad.roam.garden/Vlad's-Dating-Profile>
+- <https://robinprice.net/>
+- <https://nutcroft.com/>
+- <http://tom7.org/>
+- <https://cuddlesomerats.com/>
+- <https://lobi.to/>
+- <https://alifeee.co.uk/>
+- <https://caolan.uk/>
+- <http://kaimac.org/>
+- <https://novalis.org/>
+- <http://clofont.free.fr/>
+- <https://cobyzaby.neocities.org/>
+- <https://maria.town/>
+- <https://erich-friedman.github.io/>
+- <https://sweetfish.site/>
+- <https://seif.world/>
+- <https://soha.lt/>
+activities include (whatever people feel like doing)
+- browse the sites and write an "observation card"/nature survey (write down things that you find)
+- categorise websites somehow (personal / blog / shrines / etc)
+  - try to categorise these 22 websites into 6 or fewer groups of "similar" sites
+- treasure hunt (find X on specific site)
+  - recipe for Potato Provencale (V) (GF)
+  - fonts including "Hockey is Lif", "This Boring Party", "Boring Boron", "Tom's New Roman"
+  - dream diary
+  - Beauty and the Beast grotto
+  - a shrine to trains
+  - Central Florida Mini-Golf Reviews
+- match the website to the description
+  - french fonts
+  - dating profile
+  - antarctica blog
+  - open data blog
+  - cat-looking site
+  - site of a guy who makes amusement machines
+  - massive gif collection (callback to geocities)
+  - professional physicist art portfolio
+  - blog mainly about politics in software
+  - bald nerd does crazy stuff
+  - instructions for embracing rodents
+  - simple collection of personal notes
+  - experimental website hosted on a microcontroller
+  - crazy looking tree structure
+  - an endlessly deep looking website with too many gifs
+  - a very retro looking space-y site with eclectic mix of stuff
+  - maths lover
+  - dithered representation of a household
+  - alifeee's personal website
+  - collection of programming experiments in space
+  - some simple lists of favourite things
+
+## part 2 - building a personal website
+
+for site hosting we'll use use: <https://neocities.org>... go and create an account!
+
+for inspiration, look at the above sites artistically, and also look at source code for the sites (using inspect element)
+
+either:
+
+- start from scratch (follow the neocities tutorial first)
+- use a template, e.g., <https://webmastering.neocities.org/layouts> or <https://goblin-heart.net/sadgrl/projects/layout-builder/>
+- find a drag and drop maker, e.g., <https://hotglue.me/>
+
+### guides
+
+- neocities built in tutorial (you should be shown this when you create an account)
+- <https://htmlforpeople.com/>
+- <https://goblin-heart.net/sadgrl/learn/articles/beginners-guide-neocities>
+- <https://webmastering.neocities.org/>
+- <https://jakechirak.com/howto/makeyourownwebsite/howtohome>
+
+### why should you care?
+
+personal websites are awesome :). consider the thoughts found in these links:
+
+- <https://indieweb.org/>
+- <https://birming.com/blog-painter/>
+
+### cheatsheets
+
+- how to steal from other websites (using inspect element)
+- HTML \<head\> template with all metadata
+- HTML, e.g., <https://htmlcheatsheet.com/>, <https://developer.mozilla.org/en-US/docs/Learn/HTML/Cheatsheet>
+- CSS, e.g., <https://htmlcheatsheet.com/css/>, <https://devhints.io/css>
+
+### specific things you could want to do
+
+ask someone you know - or a search engine - how to do these
+
+- create an RSS feed -> <https://everest-pipkin.com/teaching/handmadeRSS>
+- use a custom font
+- set custom colours
+- place items anywhere on screen
+- make something bigger or smaller
+- custom mouse cursor
+  - use animations like click spark
+- have a custom URL
+
+### non-exhaustive list of things you could put on your site
+
+- who are you?
+- what do you like?
+- who are your friends (links)?
+- what do you think?
+- information about where you live?
+- see more on <https://slashpages.net/>
+
+### key understandings
+
+- this is not for profit or productivity. this is for fun.
+- you can take HTML from other people's sites