Pip-Boy 3000 Mark IV

technologies used: vue.js, html canvas, sass, location api


This project was to build an in-browser version of the Pip-Boy 3000 Mark IV from Fallout 4. I obtained the gifs from the game files and built the rest of the view using CSS, including the CRT-style scanlines. The state and data are managed using Vue. The map obtains the user's location and gets map data from Open Street Map. It then draws streets and landmarks using HTML5 Canvas and adds images depicting nearby places of interest. Check it out on GitHub Pages.

<- home