I just spent a bit of time trying to make this demo accessible through Github Pages. The one I use day to day will have some personal links, so I’ll try to keep that separate. I might add links for the learning resource nodes, maybe somebody will find them useful. There are probably still small bugs in the site, but I am working on them as I find them. If anyone sees any bug, please let me know! The link will be in the project description :)
Done! After spending a bit more time on making this look nice (and then getting sidetracked into making it functional the way I imagined it), I realized that what I was making was almost nothing like what the guide is supposed to help you build. Oops? I could go back and follow the guide, but I realized that what I have made is more interesting to me and I can actually visualize myself using. I am going to hook this up to my DigitalOcean droplet so that I can configure my browser to open this up as a landing page, giving me a nice hub. I can open links that are organized by my interests or life areas, and can change the nodes/shapes just by altering on JSON file! Overall, I am very happy with this project and what I’ve learned from it. Hopefully my next project is a bit quicker though… (Hoping the final product video shows!)
I managed to get the visuals to look roughly the way I wanted them to, although it still looks a bit awful. I had to ask ChatGPT to help me fix an issue with displaying the text on top of the shapes and with making the octagons, as I wasn’t familiar with SVG’s. Hopefully, now that I have learned from the code (Besides getting the AI to explain the code to me, I also read a good amount of Stock Overflow and documentation), I will be able to complete it mostly on my own. My next steps are to go forward in the guide (why yes, I did get side-tracked on making this look like my sketch, how did you guess?) and make the links to ongoing projects and sub-divisions (smaller octagons) work. My inspiration for that is this example from mbostock: https://d3og.com/mbostock/1062288/ . The image I uploaded is the current state of the project (it does have a bit of animation when the page loads, but I don’t think I can upload a video, I will look into that though). I removed my bookmarks and current windows with GIMP, as there are a lot of them and they can be distracting, to me at least.
I began work on the WebOS project, it seems rather interesting. I think I accidentally chose something much too easy for me, so I chose a rather complex design to compensate. However due to this, I have been spending a lot of time figuring out how d3.js works (I would recommend using, it is a very nice library with good usage cases and strong documentation). I drew a basic mock-up of how I want the final “product to look like, and the current version has at least some items in common. I decided that the circles in the design were a bit too boring, so I made them octagons. I’ve attached the design only (I’m not sure I can attach more than one image)