This week was the final opportunity to work on my full stack development project, and I spent the majority of my time refining the visual design, particularly the website background. My original aim was to create an underwater-inspired aesthetic; however, many of the approaches I experimented with appeared unnatural or visually distracting. Through several iterations, I recognised that a more restrained design would better support the content. I ultimately settled on a subtle white-to-blue gradient combined with floating bubbles of varying sizes, which felt cleaner, more cohesive, and better aligned with the project’s purpose.
<div className="background-bubbles">
{/* Each Bubble uses Inline Styles for Unique Size, Position, and Animation Delay */}
<div className="bubble-bg" style={{ width: "110px", height: "110px", top: "8%", left: "6%", animationDelay: "0s" }}></div>
(etc.)
To prevent the design from feeling too static, I added a gentle animation to the bubbles. This helped bring the interface to life without overwhelming the user or detracting from the information being presented. Creating this effect required writing individual lines of code for each bubble in order to vary their size and position. While this process was repetitive and time-consuming, I was satisfied with the final outcome. It also highlighted an area for future improvement, as I would like to explore more efficient or programmatic methods for generating repeated visual elements.
Overall, this project was challenging, particularly as full stack development was a completely new area for me. Despite this, I found the process both rewarding and enjoyable. The project strengthened my technical skills and creative problem-solving abilities, and it deepened my understanding of how visual design and functionality must work together to create a cohesive and effective web application.