Github page for personal website

This is the code for my personal Github page @ tesslins.com.

STEPS TO BUILDING THIS ORIGINALLY

1. Mess around a bit and try to decide what tech I want to use and how manual I want the set-up to be. Admire the theory of using React, yet eventually decide I do not want a giant framework for a tiny site.
2. Make a favicon & find a fun profile-y image (not important, fun though!)
3. Decide to use github pages (mostly out of ease & interest since I have never set a Github page up before). Set up repository with correct name following the Github documentation.
4. Rename the master branch to main. (I thought that was happening automatically for all repos now, perhaps not for Github page repos?) This required updates via the Github UI to the Default branch and the Github Pages "source".
5. Create an index.html file in the root of the directory.
6. Create a /src/ directory to hold site content.
7. Within the /src/ directory, create a css/ directory. Within that directory, create index.css file.
8. Within the /src/ directory, create an img/ directory. Within that directory, add the favicon.ico (an emoji favicon, for the time being) and a "profile" image of myself that I choose earlier.
9. Start building the page by adding content to index.html and styling to src/css/index.css.
10. Add a _config.yml and a .nojekyll file to root directory, both specific to Github pages (the .nojekyll file indicates that the page is not using a Jekyll template, which is the default for Github pages.)
11. Spend an inordinate amount of time designing a toggle to display the (future) minimalist & maximalist versions of the page (aka I can never look at too many Google fonts 😍).
12. Add Vue as a script to the HTML; I wanted some way to conditionally render the "minimalist" and "maximalist" page designs rather than use vanilla javascript or jquery to hide/show elements.
13. Create a functional & silly toggle component.
14. Add content (about my engineering life & other life).
15. Style it (set a cool background color, font, and font color to the "maximalist" page; adjust a bunch of font sizes; design a mobile-first toggle with emojis since it turns out that there are not a lot of good synonyms for "minimalist" and "maximalist" that contain minimal letters).
16. Swapped the domain to a custom domain using Github docs on configuring an apex domain.
17. Add some links to useful things (PDF of my resume, LinkedIn, Github).
18. Add a mailto and tel for email & phone number.
19. Add in the Atari font aka favorite silly font perhaps second only to cursive.
20. Set up https, which turned out to be previously not working because I had incorrectly set up a CNAME record to point to my custom domain with an added www.

TECH

• Vue (added to the HTML for the most basic implementation possible)

DESIGN

• fonts from
  • https://fonts.google.com/
  • https://github.com/TheRobotFactory/EightBit-Atari-Fonts
  • https://github.com/intel/intel-one-mono
• for emojis https://emojipedia.org/
• love using the ColorPick Chrome extension to decide on colors

SOME INSPO & HOW-TOs & USEFUL RESOURCES

• for Vue without build tools https://vuejs.org/guide/quick-start.html#without-build-tools
• for initial ideas of site structure https://github.com/SethClydesdale/sethclydesdale.github.io
• for toggle switch https://www.w3schools.com/howto/howto_css_switch.asp