Project Overview

CSS Styles

The CSS styles define the visual appearance and animations of various elements on the webpage. Some notable styles include:

• Background gradients, fonts, and overall styling for the body.
• Raindrop animations (fall and spread keyframes).
• Blob animations (animateBlob keyframes).
• Styling for buttons, headers, and other UI elements.

JavaScript Functionality

The JavaScript code enhances the interactivity of the webpage by dynamically creating clickable blobs at random positions. It ensures that blobs do not overlap with each other or the central title. The blobs are linked to specific works or process documentation pages.

Functions

• getRandomPosition(existingPositions): Generates a random position for a new blob while avoiding collisions with existing blobs.
• createBlob(existingPositions, link, textContent): Creates a new blob element with a given link and text content, ensuring collision-free positioning.

Blob Creation

The script dynamically creates blobs for each work in the collection, positioning them randomly on the page. The blobs are then appended to the blob container.

Usage and Links

The blobs serve as clickable links to specific works or process documentation. They are strategically positioned to create an engaging and interactive user experience.

Conclusion

The webpage successfully combines creative design elements with functional interactivity, providing an engaging and visually stunning index for a collection of works. Further improvements and additions can be made based on project requirements and user feedback.