> *Since 2023, I haven’t had time to update the site, though I still have many unpublished images. In the future, I may rebuild it with a true back end to have a streamlined way to push new content. For now, View From Elsewhere 1.0 remains online.* > > [!note] > **I have finally tackled the update! Here was the key point to improve:** > > - Keep the site static but with more dynamic parts, so it is much more maintainable and the workflow for adding, editing, and reshuffling new content is minimized. > - Cut dependencies > - Optimize performance and loading time > - Improve accessibility with complete keyboard navigation > - Make some subtle improvements and adjustments across the board ### Architecture & Structure **Data system overhaul** - Created a centralized `data.js` file: all album metadata (slug, name, publisher, developer, image sets, era) now live in a single `VFE.albums` object, replacing hand-authored static HTML. **Gallery system overhaul** - Created a `gallery.js` file that dynamically builds the gallery from `VFE.albums` data, replacing hundreds of hardcoded HTML lines duplicated across every page. - Album pages (`gris.html`, etc.) are now empty shells with a `data-album="slug"` attribute — all content is generated in JS. The index page uses the same mechanism, with images drawn randomly from the full album pool. **Dynamically generated navigation** - `header.js` moves from a monolithic hardcoded HTML string to a `buildNav(albums)` function that builds the Explore menu by reading `VFE.albums` — no more manual list maintenance. - The “latest albums” row is now generated dynamically. --- ### Performance & Quality - All images except full-size (which remain in `.jpg` to make downloading easier) are now in `.webp`. All albums have been rebuilt to this new standard, with better full-size images and more optimized thumbnails. - Full-size images are now lazy-loaded when the fullscreen view is opened. - LCP should be drastically improved. --- ### Features **Fullscreen & Gallery view mode — full rewrite** - Replaced the `data-google-image-layout` library with a custom justification algorithm (`justifyGrid`), with no external dependency. - Cleaner window resize handling & last row composition - Navigation does not loop over the entire gallery. There is a start and an end. - Replaced the external `fullscreen.js` library with a custom fullscreen implementation built into the new and improve `gallery.js`. - **Download** button for the current photo (button + `D` shortcut). - **"Album" button** in the lightbox: visible from the index, gives direct access to the album of the displayed photo. **Future-proofing and preparing future content with an expanded exploration model** - Introduced an `era` metadata (`current` / `archive`). The displays separate in the nav. - The homepage displays a random mix of 100 photos drawn from all albums (Fisher-Yates shuffle). **Multi-set albums** - Support for albums containing multiple photo series (sets). - A side navigation (`set-nav`) appears automatically for multi-set albums, with active scrolling and highlighting of the visible section. --- ### Keyboard - **Keyboard navigation in the thumbnail grid** (Tab, Arrows, Enter/Space) with roving tabindex. - **Automatic focus** — On album pages, focus is placed on the first thumbnail after load, enabling immediate keyboard navigation. - `E` — open/close the Explore navigation. - `Esc` — close the Explore navigation or the lightbox. - `←` / `→` — previous / next photo in the lightbox. - `D` — download the current photo. - `Enter` — go to the album of the displayed photo. - All shortcuts are documented in the About page. --- ### UI **General improvements & addition** - `styles-galerie.css` goes from a minified single line to readable CSS organized into commented sections (making it easier to edit confidently). - Introduction of CSS variables (`gallery-img-border`, `lightbox-bg`, `btn-bg`, etc.). - `background-color: white` added on `body` to prevent transparent backgrounds in certain browsers. - New visual element and pattern to accompany the new features - Social media icons in the header now behave like proper buttons. **About page** - Added a "Keyboard Shortcuts" section. - Updated contact buttons: added inline SVG icons (globe, email, Instagram). - Footer hidden on this page.