“Design and develop a website featuring multiple, integrated JavaScript interactions which provide a cohesive experience for a designated target audience.”

I initiated my web development endeavor by conducting an extensive exploration of JavaScript interactions on CodePen.io.

During this exploration, I encountered a Spinning Card Gallery that captivated me to such an extent that I made the strategic decision to center my entire website around its design principles. Concurrently, in my investigative efforts, I identified a Rotating Text Effect, which specifically targeted individual words and animated their lettering. To incorporate a typewriter effect seamlessly into my website, I made use of a Typewriter script that I had successfully employed in a prior project.

Furthermore, to enhance user engagement, I aspired to implement dynamic features such as the ability to hide/show distinct elements based on user actions, such as scrolling or clicking on the cards. In pursuit of this objective, I developed bespoke JavaScript code tailored to these specific interactive requirements.

Resources Used:

I engaged in a comprehensive ideation process to explore potential themes for the development of a personal website, ultimately focusing on comedy writing as a key interest.

Within the realm of comedy writing, I actively participate in a dedicated community, spending time crafting succinct one-liner jokes. I prepared character personas based off of community members I had interacted with to help me craft an experience that would appeal to them.

In formulating the concept for my website, I discerned the suitability of incorporating the Spinning Card Gallery feature. This design choice would enable users to access individual one-liner jokes by selecting specific cards within the gallery, thereby enhancing the overall user experience.

I came up with the following website prototype on paper:

With the focus of this project being JavaScript Interactions, the following interactions were implemented:

1. Upon clicking a card, it will undergo an enlargement effect on the display. Initially, the Spinning Card Gallery lacked accessibility for keyboard users. Subsequently, I dedicated efforts to enhance its functionality, enabling seamless interaction through the Tab, Right Arrow, Left Arrow, and Enter keys.
2. Each successive click on a new card supersedes the previously enlarged card on the screen.
3. Clicking on the enlarged card restores it to its original position within the spinning gallery.

For Accessibility:

1. Tab or Shift+Tab is employed to facilitate user navigation through the gallery elements when clicked.
2. Upon focusing on a card and activating the Enter key, the corresponding card will expand and fill the screen.
3. The gallery’s rotational movement is triggered when the user engages the right or left arrow keys.

My second interaction I wrote from scratch. It hides/reveals the joke elements when the user clicks one of the cards on the site. This allows the user to see the joke that matches the card picture when they click to enlarge that card.

Upon the presentation of the joke on the screen, I implemented a distinctive rotating letters effect to underscore the punchline. To achieve this, I extended a script sourced from codepen.io, modifying it to accommodate multiple targeted punchlines corresponding to various jokes featured on the site.

I encountered a typewriter effect on codepen.io and leveraged it to animate the ‘title’ element on my page. This effect dynamically reveals the ‘title’ within the window tab, employing a letter-by-letter typing animation that effectively draws attention to the text.

I developed a unique hide/reveal script to monitor the Y-Scroll position on the page. This script dynamically cycles through distinct background pattern images as the user scrolls down, each employing blend-modes for enhanced visual appeal. Notably, rapid up-and-down scrolling induces interactions between the patterns, generating intricate and dynamic visual compositions.