/* About Me */

Me: Dave Chiu
Site: https://davechiu.cc/
Location: Zürich, Switzerland

/* Site */

Last update: 2023/01/10
Standards: HTML5, CSS3
Components: VueJS, Google WebFonts, Icon Fonts, Google Analytics
Software: VueCLI, Sublime Text 2, VS Code, Photoshop, Illustrator, Lightroom, Icon Slate
Templates: HTML5 Boilerplate

/* Details */

I set out to refactor my website (last updated in 2013) into something built on a more modern framework (in 2019/2020).
I removed dependencies on jQuery and the AnyStretch plugin and dove deep into the functionality of the slideshow.

Slideshow
* Supports multiple collections of different sizes
* Advances through one image at a time based on a delay
* Progress bar (was 1 bar reflecting time until next slide) reflects size of collection (n-number of bar segments)
* Progress bar shows what has already been shown, what is coming next
* Progress bar shows countdown animation until next slide
* Progress bar pulses on current slide when slideshow is paused
* Clicking on a progress bar segment jumps to that slide
* Slide countdown does not begin until slide is actually shown (in the event of a network slowdown of image loading)
* Pausing the slide show stops the countdown timer
* Restarting the slide show starts the countdown timer from full
* Keyboard keys can play, pause, next, prev, fullscreen, and change collection
* Spinner reverses on "previous" for better context

/* Todo */
[✕] Links-in-Bio style Page
[ ] Correctly use Vue's State Manager for Play/Pause (is this even necessary?)
[✕] Switch BG to fully CSS
[✕] Fullscreen API
[✕] Keyboard Binding Help Modal
[ ] Portrait support, currently only optimized for Landscape photo orientation
[ ] Captions/Labels - info icon: ℹ
[✕] Swipe Events
[ ] Better use of Swipe Events
[✕] Spinner not loading properly on iPad
[✕] Update Page titles on Routes
[✕] _Maybe_ pre-load the first photo from each collection to increase performance
[✕] Fallback trimming, sorry not sorry