Devlog #13 (Last Devlog Before Ship)

I am finally done with my website.Please read the NEXT STEPS section of this devlog as I have favour to ask you guys. I spent 7 hours of my life building a shader background for my website, but it totally paid off in the end because now I have a really cool, interactive, animated gradient background. I used GLSL to write a shader, and WebGL and Three.js to implement it into my website. I used a video tutorial and some AI debugging to achieve the effect, but it really was a learning process, as I had to install all the tools for it and then work with those, so I learned how to use those. Because of this, I also spent some time updating my README.

Current Progress

First of all, it took me a really long time to find a good tutorial to make a background, because I really wanted an animated one to show my blur effect and really add a pop to my website. To acheive a shader background I watched a video tutorial from Codegrid, which explained everything really nicely and was quite quick, so I was able to write the code. After though, the background didn’t quite show, so then I used the help of AI to help debug the code and get it working. After I finally got it to work, I spent some time adjusting colors, and brush strength and size, and then distortion amount and fluid decay and all of that stuff until I found the perfect values for a super good looking background. Overall, it was definately worth the time and added a really nice touch to my webpage.

I also updated by README, because now the user will need to install some dependencies for this webpage because of the addition of Three.js and everything. So I updated the README to include proper instructions for that and so it explained some more features of my website. I really polished it up, because it was kinda messy before, so I got it ready for a ship.

I also changed my cursor one last time. What I had before was a <div> element in HTML following my actual cursor using mousemove in JS, and my actual cursor was hidden in CSS. However, it was like lagging behind and that was starting to show on my new background. So instead, I just made my cursor a little white dot in CSS by liking making a svg file and linking it to the cursor. It just improved user interaction a lot be removing any lag between an following element and the actual cursor. There is still the feature where it will turn bigger and light purple when hovering over a link.

Next Steps

My next step is to ship!!! However, I have to ask you guys for something. I need some color suggestions for my background. I got a nice one right now that is like dark purplish, but I want your guys’ suggestions on what type of gradient I should make. I can put 4 colors into the gradient. You can use the attached video below to view how the shader looks on the hero page. I do have glass cards, so I don’t want something too light, but it could make a nice addition in a dark gradient. So please put some suggestions in the comments!!! Thank you!!!

I will ship right after this, but I will for sure try to look over some color suggestions and experiment around with them. I might try to use one before I ship the final version of the website, so please put some suggestions. Expect a ship really soon.