Here are some resources I used to create this website (and some extras)
Technologies
I'm assuming the person reading this is someone who also wants to make a website of their own so I might be explaining things a bit too much, bear with me :D. Because I am a frontend developer by trade I just couldn't write this the vanilla html and css styles. I am too used to the comforts of code splitting and easy organising, using json files to organise data and having typescript to remember what i wrote. So here is the list of things i used to make programming this a little less painful :D
- First of all, VSCode code editor has been my go-to for years and with a couple extensions it makes writing html and css a lot easier + automatic code formatting is saving me a lot of pain since i can just write however and have it fix the insets for me
- For version management and remote storage i used git and github, I'm using a private repository for now because i am too embarrassed my employers might find this website :) I also use github actions that build and deploy this website automatically when i push to the master branch! It makes updating the website and tracking changes in my code very easy!
- For easy code splitting, routing and logic organising I used the Astro framework. It has a lot of useful features like reusable components and layouts that make life that much more pleasant. I admit i am not using it to its fullest potential because i'm a bit new, but i love it already.
- For easy layouts and styling I used tailwindcss, honesly I am just too used to using it at work and feel completely at a loss when it comes to organising normal css by myself without using preprocessors like sass. I love the easy media queries and the spacing variables that come straight out of the box. The granular css architecture just works for my brain and they have a lot of documentation that i reach for even when i'm not using it directly. The theme is easy to extend if i need to in the future, so it doesn't really limit me to its presets.
- And of course typescript makes it easy for me to remember what my data structures look like and what props the components and functions can accept. The vscode supports it out of the box and provides some neat autocomplete features that speed up the development a lot!
Assets
Here are some sources for the assets and decorations i used (or intend to use) for this website.
- I pulled the tarot card illustrations from Wiki Commons, its a great resource for public domain images that you can add to your website through a link without wasting space downloading them :D. The downside is if they are down you can't control it, but i'm taking that trade off easy.
- For decorative little emojis i used emojicombos. They have a lot of tags to filter by and a wide range of choices all community contributed.
- For free svgs i usually use SVG repo when i dont have it in me to make one myself. For cool svg filters and effects there is fffuel. I really want to use some of their cool effects!!
Sources and inspiration
- Mark Mcelroy is a great source for tarot basics. He published his books uncopyrighted specifically to spread education on tarot and make it more accessible, what a legend
- Despite me not showcasing it much on this website Ana Tudor is a great source of inspiration and wanting to learn more about the web. Her codepen has a lot of cool snippets that you can yoink for your website.
- Solaria has a lot of cool things like their collection of fonts and rainbow gradients. They are in a code collective webring and although i am not quite familiar with all of the members i feel like it would be helpful to check out if you want to make your own website :)