Gold Master Series (unofficial web portfolio template)

Web portfolio template in Web Components, visually inpired by Gold Master Series video games from Digital Eclipse.

Inspiration / Plagiarism

In 2022, the video game development studio Digital Eclipse released Atari 50: The Anniversary Celebration, a documentary which took the form of a video game celebrating the 50th birthday of video game company Atari. The game provides an interface to show multiple timelines retracing Atari's history, with visual documents (artworks, game manuals, legal documents, promotional material), videos (TV advertisements, interviews, trailers, ...), and even games from different platforms directly playable on today's machines.

Three new games were developed with the same concept, showcasing different game creators and companies. Those games were regrouped under a same label called Gold Master Series :

• The Making of Karateka : about the creation of Deathbounce and Karateka, the first games from creator Jordan Mechner.
• Llamasoft: The Jeff Minter Story : about the first games published by Llamasoft, Jeff Minter's video game studio.
• Tetris Forever : about the game Tetris created by Alexey Pajitnov.

About this project

"Well in fact, this is a great multimedia documentary format, I wish Digital Eclipse would retrace all my life like this." I've thought. But since I'm not an acclaimed video game developer from the eighties, creating my own portfolio myself was an easier project to accomplish. Since most of my projects are visually ugly, I've decided to assume the fact that I would copy Gold Master Series games' design.

I'm most at ease with Javascript without any library, framework or genAI ; but I also wish to integrate modern and useful standards to my own projects. So my goal is to reproduce this design with Web Components and (hopefully) accessibility in mind to create my own portfolio. I don't know if I will integrate all available components in this version (advanced interface animations, 3D models, playable games, frame-by-frame rotoscoped animations, ...), but will do my best.

Architecture

• /src : root folder of the website.
• /src/common : common components between all themes and datasets.
• /src/datasets/DATASET_NAME : customized contents to show, one folder per dataset.
• /src/datasets/DATASET_NAME/index.json : dataset configuration :
  • lang : array of supported languages, same format as the one used in HTML lang attribute, first one will be chosen if no suitable navigator language is available (["en", "fr"]).
  • title : website title as an object, key is chosen lang, value is the translated title.
  • description : description used in meta tag as an object, key is chosen lang, value is the translated description.
  • theme-color : theme-color used in meta tag (#000000).
  • link : array of optional link tags as objects, key is rel, value is href (use THEME_NAME in value if theme folder name is needed in an URL).
  • meta : array of optional meta tags as objects, key is property, value is content (use THEME_NAME in value if theme folder name is needed in an URL).
• /src/themes/THEME_NAME : customized styles, one folder per theme.
• /src/themes/THEME_NAME/scripts/index.js : custom JS entry point.
• /src/themes/THEME_NAME/styles/index.css : custom CSS entry point.
• /src/index.example.json : configuration template to change project settings :
  • dataset : chosen dataset folder name (default).
  • theme : chosen theme folder name (default).
• /src/index.html : website entry point.
• build.js : generates minfied version of the website in /dist.

Installation

• Install node.js (tested with v24).
• Copy src/index.example.json to src/index.json and edit it according to your needs.
• Run node build.js to create the minified version of the website in /dist.