This project, hosted at https://iamgenius.io, uses Next.js to highlight the "24 Characteristics that Geniuses have in Common" as written by Doctor Barrios.
I have had to learn how to do various things for this app. The following people wrote excellent posts or tutorials or instruction on the following subjects:
-
A thank you to Augustin Mauroy. Augustin answered the call for help when I needed to know the strategy in using Nextjs 13 (app dir) to translate MDX based pages. He showed me his repo and answered questions as needed. Without his help, I would not have gotten very far.
-
How to properly import SVG images and some options to the excellent next/images import.
-
A more modern CSS reset by Josh Comeau who wrote and shared his modern CSS Reset.
-
Fluid Typography by Christian Diaz writing over at LogRocket - Fluid vs. responsive typography with CSS clamp. Great tool for fluid typography. This fluid tool for a single element was helpful for determining the calc for my blockquote component.
-
To fine-tune the font and the line-height, I turned to two tools. For creating clamp based font-size. Calculating line-height was done with this excellent line-height calculator tool. I used it for the automatic calc of line-height between 360px viewport and 640px largest container width.
-
Tool to ensure colors were accessible: Accessible Color Generator by Erik Kennedy
-
I used a few of the ready-made components from React Aria. This helped with accessibility. For example, the hamburger menu on the website is using the Menu Component underneath it all.
-
A nice article by Dan Valinotti on how to implement copy-to-clipboard for a React app. This helped with the feature that allows copying the link to share on Facebook, TikTok and other Social media.