Been a minute - I had a busy last week of work and was in the process of moving down to Champaign, so I worked on and off on the website, but hope to finish before school starts which is in 7 days.
Today I tackled my “links” problem. The issue was that each project will have different links, and the corresponding logos for the links might be different.
To solve this I am now passing an array of tuples as the link prop. The first item in each tuple is the link and the second is an identifer so I know which logo to use.
So in the example below “gh” is the key for the github logo, which is what will show for said link.
I also was having a problem with the background for my react subpages. Typically, you’d set the “body” element of the css to a background color. However, I am using Chakra and was originally wrapping my entire App in the chakraProvider object. You can only set a single background color by modifying the default theme in the ChakraProvider . This theme is set when the App is initially loaded and can not be modified afterwards (or at least that is what my testing leads me to believe).
So to fix this, I am no longer wrapping my entire app in the ChakraProvider, but rather each specific subpage. I created a helper function CreateTheme which creates the theme with a passed background color. This function is called as each subpage is loaded. The returned theme is used in a ChakraProvider object to wrap the subpage.
For now I have to be done with my work page. I’m not quite satisfied with how it looks, but for the sake of time, I have to move one.
