This week was the time to create better infrastructure for my website. While most of it looks the same as last week, both the banners and the the grid are completely reworked.
File structure: I created a more robust file structure for the website, with different files for different scripts, rather than a single ultra long page. I also have a main page that calls the scripts to start when the website is loaded.
Banners: Before, my banners were essentially one message on a loop using keyframes. I wanted that late 90s marquee effect which led me down the rabbit hole of people frustrated that the marquee function for html was deprecated. Lots of people complaining there is not a one-size-fits-all solution to an infinite banner. While I found this a little hard to believe as the infinite scrolling banner as been somewhat trendy on artsy websites, it was difficult to find a straight javascript/css source. I’d go to different websites that had nice banners and most of the time it would be something in react. Eventually, I started working with Claud and over two days I would generate code, edit, and regenerate it, eventually landing on something I liked. It took my awhile to realize I needed to generate multiple copies of the same text and have them scrolling. Claude helped create some great logic that dynamically calculates what it needs. I went through a bunch of different versions of the banners that would always break with either scrolling direction changes or resizing of the window.
Main Grid: I used Claude to help adjust the main grid and footer boxes to adjust dynamically as well. This was an interesting workflow for me, because ended up going through multiple ways the grid can collapse or expand on itself pending on the window size. Due to the majority of the webpage being a very basic grid, it afforded me many options to try. I am particularly happy about the footer box appearing on the right side of the page if if the window is stretched to an ultrawide width.