🔀 Setting up git

I always forget I need to do keygen.

ssh-keygen -t ed25519 -C "email@example.com" to generate a key.

pbcopy < ~/.ssh/id_ed25519.pub to copy it to pasteboard.

Cloning the repo worked. Now to create my site.

👨🏻‍💻 Quick HTML

Easiest way to do this is to use the command line. But I am not a l33t h4kz0r so I used nano rather than vim to...

  1. Update the index.html page with a link to my homepage: nano index.html

  2. Add my home directory and a new index.html file inside of it.

    • mkdir mschrage
    • cd mschrage
    • touch index.html

git push and my site is live!

Make it pretty

I browsed some of the previous mas863 sites and they are all very cool. One of my favorites was Kenneth Friedman's site. It's simultaneously distinctive and minimal -- a hard combination to pull off! I also thought Dalma Foldesi's was particularly well designed. And Eliott Ford's makes good use of the HTML 5 video player to have gif-like autoplaying videos.

<video autoplay playsinline muted loop>

I was in a VES class at Harvard last year where I learned how to silkscreen. One of my projects was a CMYK print of a pixelated version of my face with emojis coming out of my head.

silkscreen

The vision I have for the homepage is similar. My pixelated head with emoji's coming out of it. But now the emojis won't be random. Each column will correspond to a week of the course -- I just counted and, coincidentally, this works perfectly! -- and each emoji in the column will be a link to a subsection of that week's documentation.

Might be worthwhile to write a really simple script to generate this for me in the future. But for now I will do it manually.

Open Google Chrome from Command Line
Add alias chrome="open -a \"Google Chrome\"" in your ~/.bash_profile. Save the file and run source ~/.bash_profile and then you can open html files very easily.

Okay... so like 3 hours of messing around with css relative positioning, the site finally works... at least on desktop.

Adding the right meta tags makes it work reasonable well on mobile.

<meta name="viewport" content="initial-scale=1, maximum-scale=1">