index.html

<!DOCTYPE html>
<html lang='en'>
    <head>
        <!-- <meta charset='utf-8'> -->
        <link href='app.css' rel='stylesheet'>
    </head>
    <body>
        <div id='content'>
            <div>This site is under construction! Please read <a href='about.html'>About Me</a> for a quick bio and come back soon for content.</div>
            <button onclick='setConstrucitonGif()''>Change Technical Difficulties View</button>
        </div>
        <img id='construction-gif'></img>
        <script>
            const constructionGifs = [
                'assets/techdif0.jpg',
                'assets/techdif1.gif',
                'assets/techdif2.webp',
                'assets/techdif3.webp',
                'assets/techdif4.webp'
            ];

            function setConstrucitonGif() {
                const n = constructionGifs.length;
                const i = Math.floor(Math.random() * n);
                document.getElementById('construction-gif').src = constructionGifs[i];
            }

            setConstrucitonGif();
        </script> 
    </body>
</html>