Code Your Way - Week 9 (03/31/2025)

4/6/2025

User Testable Site

This week, we further developed our projects so that the class can user test and provide feedback. My focus is to fill out as much content as possible and add some basic interaction to the page. Hoping to get some feedback on what ideas were sparked while navigating through the site.

W08 | 03/17 --- Present Project Proposals
W00 | 03/31 --- Spring Break
W09 | 03/31 --- "Hello World!"

Learn HTML and CSS
Build site in VS Code & Repo to Github

W10 | 04/07 --- Github Pages

Fill out framework with content structure
Build out interactions with javascript

W11 | 04/14 --- Content curation and user testing

Refine and develop "statement" interaction
Edit & add project descriptions

W12 | 04/21 --- Refine page experience

Continue refining page contents and interaction
Build out blog space (nice to have)

W13 | 04/28 --- Porting Domain and linking to Github

Transfer url to different host
Link custom domain with github page
Continue editing and refining blog space

W14 | 05/05 --- Final Presentation

Explorations this week:

Getting started this week felt like running around like a headless chicken. I think I had gathered too many resources that I didn't know much about and did not know which tools were appropriate for my next step and which were not quite appropriate for this personal project. I spent the first 2 hours reading up on 11ty, jekyll, and react, and decided to just stick with good old javascript.

I decided that I wanted user feedback on interaction and media display, so I focused on populating as many project assets as possible. This involved looking through my drives and going on the internet to find what content was still available to pull.
Thank god for performance theatres and their records/good documentation. I also found it a little scary to find a few short ad campaigns, that did not run for very long, still available on vimeo. (dropping them down here for future reference)
https://vimeo.com/382471493?share=copy
https://vimeo.com/487105984?share=copy
https://vimeo.com/382471428?share=copy

Below is a video that I referenced this week to help me format youtube videos - which is where I will be hosting all my project videos since Vimeo has a ridiculous subscription price for anything more that 1GB.

In terms of interaction. Since I want the my site to be as close to a single page application, the user interaction is really focused on mouse position and animation response to any mouse click events. This week, I just focused on tying the media to the text components to that they are responsive to each other.

I did use a bit of copilot to help me with the javascript. I'm still wrapping my head around the javascript logic and will need to spend more time decoding the scripts currently running the site.
At the end of the day, I want to maintain the minimal/brutalist site design so I only want a "statement interaction" rather than a ton of really cool things to explore.

The video below was an interaction inspiration, but after watching the video, I found the execution of the animation to be incredibly cumbersome and inefficient, so I want to spend next week trying to reference a bunch of video tutorials and collage together my own interaction script.

Feedback I'm looking for

Is the content organized in an intuitive manner?
What information do you think is missing?
What interactions are exciting to see? what do you hope to see more of?
What is a playful elements do you like on the site, or would like to see on the site?

Some goals for myself next week

Still trying to figure out + hope to add to the site in the next few weeks:

embedding videos from vimeo
debug the scrolling project indicator - seems to be skipping projects for some reason
interesting mouse hover interactions (started looking at examples, but some of the programming examples are rather inefficient. Will need to take time to figure this out)
where to include project descriptions and how to scale page appropriately
make page adaptive for tablet and mobile