Code Your Way - Week 10 (04-07-2025)

User Tested Site 

Prior to user testing, I was juggling between interesting interaction design and content organization - the feedback I got was to do both - indicating the user position on my very minimal site was crucial, and I got some inspiration on possible ways to use hover and scroll interaction to indicate way finding.

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

I worked on a few things this week:

1. Create an ​expanding effect in the list portion for the project description to be displayed​
   • Discovery: since the description is not part of the .list-item class, it doesn't fit to the parameters of the .list-item grid structure. Wondering if I need to also create a description container to organize the formatting...?
   • Next Step:
     
     • Figure out how to format the description to fit within the adaptive grid layout - right now its offset by 60 pixels from the left and extends to the right edge of the page. The offset from the from the left works for now since the "year" column is not scaling.
     • Figure out why once a mouse click interaction occurs, the scrolling response no longer expands the description text (only highlights the project listing row in yellow)
2. Trouble shoot why the scrolling indicator does not work for all projects
   1. Discovery: I found out that projects that had 3 or less media items would work for the scroll (when the project comes into view, the project in list view would highlight in yellow to match the click selection process) and projects with more would get skipped over for some reason
   2. Next Step: decide whether I want to keep the 3 assets limit and creatively combine elements to tell the whole story, or debug the issue to house multiple assets as needed
      1. Debugging idea: Maybe if I create another class container, the javascript would only need to scrub through the container rather than the contents?
3. Reformat the header to no longer say "Hello World!"
   1. I haven't decided what to put there, but I would like it to be something interesting without taking away from the minimalist/brutalist aesthetic
4. Added an about me section
   1. I don't really love this feature, but it did come up a few times. maybe I can put it at the bottom instead of the top or come up with a more creative, discrete/hidden way to provide that information...

Temporary link to site: https://bethanylwu.github.io/portfolio/#
Link to github: https://github.com/bethanylwu/portfolio