lee
/
leemorgan-dev


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542
							<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>Lee Morgan</title>
        <link rel="stylesheet" href="/style">
        <link href='https://api.mapbox.com/mapbox-gl-js/v2.3.1/mapbox-gl.css' rel='stylesheet'>
    </head>
    <body>
        <div id="menu">
            <button id="aboutButton" class="active">
                <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                    <path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path>
                    <circle cx="12" cy="7" r="4"></circle>
                </svg>

                <p>About Me</p>
            </button>

            <button id="projectsButton">
                <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                    <polyline points="16 18 22 12 16 6"></polyline>
                    <polyline points="8 6 2 12 8 18"></polyline>
                </svg>

                <p>Projects</p>
            </button>

            <button id="blogButton">
                <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                    <path d="M12 19l7-7 3 3-7 7-3-3z"></path>
                    <path d="M18 13l-1.5-7.5L2 2l3.5 14.5L13 18l5-5z"></path>
                    <path d="M2 2l7.586 7.586"></path>
                    <circle cx="11" cy="11" r="2"></circle>
                </svg>

                <p>Blog</p>
            </button>

            <button id="linksButton">
                <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                    <rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect>
                    <line x1="3" y1="9" x2="21" y2="9"></line>
                    <line x1="9" y1="21" x2="9" y2="9"></line>
                </svg>

                <p>Fun Links</p>
            </button>

            <button id="galleryButton">
                <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                    <rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect>
                    <circle cx="8.5" cy="8.5" r="1.5"></circle>
                    <polyline points="21 15 16 10 5 21"></polyline>
                </svg>
                
                <p>Gallery</p>
            </button>

            <button id="learnButton">
                <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                    <path d="M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z"></path>
                    <path d="M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z"></path>
                </svg>

                <p>Learn</p>
            </button>
        </div>

        <div id="main">
            <div id="about">
                <div class="aboutLeft">
                    <h2 class="center">Critical Statistics</h2>

                    <h3>Name: Lee Morgan</h3>

                    <p>Gender: Male</p>

                    <p>Born: March 9, 1990</p>

                    <p>SSA Life Expectancy: 81.2 years</p>

                    <p>Likely Death: May 1, 2071</p>

                    <div class="borderLine"></div>

                    <div id=ageDiv>
                        <h3 class="center">Age</h3>
                        <p id="age"></p>
                        <p><span class="boldy">Years: </span><span id="ageYears"></span></p>
                        <p><span class="boldy">Days: </span><span id="ageDays"></span></p>
                        <p><span class="boldy">Hours: </span><span id="ageHours"></span></p>
                        <p><span class="boldy">Minutes: </span><span id="ageMinutes"></span></p>
                        <p><span class="boldy">Seconds: </span><span id="ageSeconds"></span></p>
                    </div>

                    <div class="borderLine"></div>

                    <div id=deathDiv>
                        <h3 class="center">Time to Likely Death</h3>
                        <p id="death"></p>
                        <p><span class="boldy">Years: </span><span id="deathYears"></span></p>
                        <p><span class="boldy">Days: </span><span id="deathDays"></span></p>
                        <p><span class="boldy">Hours: </span><span id="deathHours"></span></p>
                        <p><span class="boldy">Minutes: </span><span id="deathMinutes"></span></p>
                        <p><span class="boldy">Seconds: </span><span id="deathSeconds"></span></p>
                    </div>
                </div>

                <div class="aboutCenter">
                    <h1>Who Am I?</h1>
                    <p>Hey, my name is Lee Morgan. I am primarily a web developer, though I like to dabble in a lot of different things. I mostly do freelance work and work on my own projects whenever life presentst me the opportunity to do so. I also enjoy teaching English as a second language from time to time and a few other things.</p>

                    <p>You can find a lot of content from my hobbies here on my site. Occasionally I like to write about things that I feel strongly about. I also enjoy traveling a bit and doing smartphone photography of different places. My real passion though is programming. That is why I create video lectures to teach people program as well. Check out the menu on the left if you are interested in seeing the results of any of my hobbies.</p>

                    <p>Currently, I am an expat living in Nizhny Novgorod, Russia. I am enjoying traveling around Russia while attempting to learn Russian as well. However, I am originally from Maine, USA and have lived in several different places in the US in my life.</p>
                </div>
                <div class="aboutRight">
                    <a class="meLink" href="/resume">
                        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                            <path d="M13 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V9z"></path>
                            <polyline points="13 2 13 9 20 9"></polyline>
                        </svg>
                        Resume/CV
                    </a>

                    <a class="meLink" href="https://github.com/MorganLee909">
                        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                            <path d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37 0 0 0-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0 0 20 4.77 5.07 5.07 0 0 0 19.91 1S18.73.65 16 2.48a13.38 13.38 0 0 0-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07 0 0 0 5 4.77a5.44 5.44 0 0 0-1.5 3.78c0 5.42 3.3 6.61 6.44 7A3.37 3.37 0 0 0 9 18.13V22"></path>
                        </svg>
                        GitHub
                    </a>

                    <a class="meLink" href="https://www.facebook.com/lee.morgan.33/">
                        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                            <path d="M18 2h-3a5 5 0 0 0-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3z"></path>
                        </svg>
                        Facebook
                    </a>

                    <a class="meLink" href="https://www.linkedin.com/in/leemorganio">
                        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                            <path d="M16 8a6 6 0 0 1 6 6v7h-4v-7a2 2 0 0 0-2-2 2 2 0 0 0-2 2v7h-4v-7a6 6 0 0 1 6-6z"></path>
                            <rect x="2" y="9" width="4" height="12"></rect>
                            <circle cx="4" cy="4" r="2"></circle>
                        </svg>
                        LinkedIn
                    </a>

                    <a class="meLink" href="https://www.minds.com/leemorganio">
                        <svg width="24" height="24" aria-hidden="true" viewBox="0 0 352 512">
                            <path fill="currentColor" d="M96.06 454.35c.01 6.29 1.87 12.45 5.36 17.69l17.09 25.69a31.99 31.99 0 0 0 26.64 14.28h61.71a31.99 31.99 0 0 0 26.64-14.28l17.09-25.69a31.989 31.989 0 0 0 5.36-17.69l.04-38.35H96.01l.05 38.35zM0 176c0 44.37 16.45 84.85 43.56 115.78 16.52 18.85 42.36 58.23 52.21 91.45.04.26.07.52.11.78h160.24c.04-.26.07-.51.11-.78 9.85-33.22 35.69-72.6 52.21-91.45C335.55 260.85 352 220.37 352 176 352 78.61 272.91-.3 175.45 0 73.44.31 0 82.97 0 176zm176-80c-44.11 0-80 35.89-80 80 0 8.84-7.16 16-16 16s-16-7.16-16-16c0-61.76 50.24-112 112-112 8.84 0 16 7.16 16 16s-7.16 16-16 16z"></path>
                        </svg>
                        Minds
                    </a>

                    <a class="meLink" href="https://vk.com/id385316502">
                        <svg wdith="24" height="24" aria-hidden="true"viewBox="0 0 576 512">
                            <path fill="currentColor" d="M545 117.7c3.7-12.5 0-21.7-17.8-21.7h-58.9c-15 0-21.9 7.9-25.6 16.7 0 0-30 73.1-72.4 120.5-13.7 13.7-20 18.1-27.5 18.1-3.7 0-9.4-4.4-9.4-16.9V117.7c0-15-4.2-21.7-16.6-21.7h-92.6c-9.4 0-15 7-15 13.5 0 14.2 21.2 17.5 23.4 57.5v86.8c0 19-3.4 22.5-10.9 22.5-20 0-68.6-73.4-97.4-157.4-5.8-16.3-11.5-22.9-26.6-22.9H38.8c-16.8 0-20.2 7.9-20.2 16.7 0 15.6 20 93.1 93.1 195.5C160.4 378.1 229 416 291.4 416c37.5 0 42.1-8.4 42.1-22.9 0-66.8-3.4-73.1 15.4-73.1 8.7 0 23.7 4.4 58.7 38.1 40 40 46.6 57.9 69 57.9h58.9c16.8 0 25.3-8.4 20.4-25-11.2-34.9-86.9-106.7-90.3-111.5-8.7-11.2-6.2-16.2 0-26.2.1-.1 72-101.3 79.4-135.6z"></path>
                        </svg>
                        VK
                    </a>

                    <a class="meLink" href="https://www.bitchute.com/channel/Dn8vPaD4hqD6/">
                        <img src="/images/bitchute" alt="BitChute logo">
                        BitChute
                    </a>

                    <a class="meLink" href="https://rumble.com/user/LeeMorganIO">
                        <img src="/images/rumble" alt="Rumble logo">
                        Rumble
                    </a>

                    <a class="meLink" href="https://www.youtube.com/channel/UCjAUvyOuOEEXFr3K2oXldRg">
                        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                            <path d="M22.54 6.42a2.78 2.78 0 0 0-1.94-2C18.88 4 12 4 12 4s-6.88 0-8.6.46a2.78 2.78 0 0 0-1.94 2A29 29 0 0 0 1 11.75a29 29 0 0 0 .46 5.33A2.78 2.78 0 0 0 3.4 19c1.72.46 8.6.46 8.6.46s6.88 0 8.6-.46a2.78 2.78 0 0 0 1.94-2 29 29 0 0 0 .46-5.25 29 29 0 0 0-.46-5.33z"></path>
                            <polygon points="9.75 15.02 15.5 11.75 9.75 8.48 9.75 15.02"></polygon>
                        </svg>
                        YouTube
                    </a>
                </div>
            </div>

            <div id="projects" class="cardContainer" style="display:none">
                <a class="card" href="https://thesubline.com">
                    <h2>The Subline</h2>
                    <img src="/images/subline" alt="The Subline">
                    <p>A web application to assist restaurant owners in managing their inventories. Providing insights into usage, waste and other details through the use of data.</p>
                </a>

                <a class="card" href="https://budgeteer.money">
                    <h2>Budgeteer</h2>
                    <img src="/images/budgeteer" alt="Budgeteer">
                    <p>A simple web application to help people to budget their money in a simple and approachable manner.</p>
                </a>

                <a class="card" href="markket.xyz">
                    <h2>Local Markets</h2>
                    <img src="/images/market" alt="Market">
                    <p>A website for people to find farmers markets and vendors of local products in their area.</p>
                </a>

                <a class="card" href="/sudoku">
                    <h2>Sudoku Solver</h2>
                    <img src="/images/sudoku" alt="Sudoku">
                    <p>Stuck on a particularly difficult game of sudoku? Enter any sudoku puzzle and have it solved immediately.</p>
                </a>

                <a class="card" href="/birthdayparadox">
                    <h2>The Birthday Paradox</h2>
                    <img src="/images/birthday" alt="Birthday Hat">
                    <p>A demonstration of the counterintuitive birthday paradox.</p>
                </a>

                <a class="card" href="https://blacklist.aero">
                    <h2>Blacklist.aero</h2>
                    <img src="/images/blacklist" alt="Blacklist.aero logo">
                    <p>A site to enable airports to blacklist and check on the status of those who use their services.</p>
                </a>
            </div>

            <div id="blog" style="display:none;">
                <div id="blogTags" class="tagContainer"></div>

                <div id="blogs" class="cardContainer"></div>

                <template id="blogCard">
                    <a class="card">
                        <h1></h1>
                        <img>
                    </a>
                </template>
            </div>

            <div id="links" class="cardContainer" style="display:none;">
                <a class="card" href="https://cs-online.club/en/servers">
                    <h2>CS:GO in the browser</h2>
                    <p>A website to play CS:GO in the browser with other people online.</p>
                </a>

                <a class="card" href="https://driveandlisten.herokuapp.com/">
                    <h2>Drive and Listen</h2>
                    <p>Pretend to be driving your car and listening to the radio. Watch cars driving down the road all over the world while listening to local radio stations.</p>
                </a>

                <a class="card" href="https://www.ekzhang.com/game-of-life">
                    <h2>Conway's Game of Life</h2>
                    <p>Play around and experiment with different situations in Conway's Game of Life</p>
                </a>

                <a class="card" href="https://librivox.org/">
                    <h2>LibriVox</h2>
                    <p>Free public domain audiobooks. Listen to books for free, or volunteer your time to read them for others to listen to</p>
                </a>

                <a class="card" href="https://rocketcrab.com/">
                    <h2>rocketcrab.com</h2>
                    <p>Party games right on your phone</p>
                </a>

                <a class="card" href="https://thetruesize.com/">
                    <h2>The True Size of</h2>
                    <p>The common Mercator projection map that we are used to distorts the real size of countries. This site will let you move and directly compare the real size of different countries to see how big they really are</p>
                </a>

                <a class="card" href="https://win95.ajf.me/">
                    <h2>Windows 95</h2>
                    <p>Use a virtual Windows 95 computer right in your browser</p>
                </a>

                <a class="card" href="https://pointerpointer.com/">
                    <h2>Pointer Pointer</h2>
                    <p>Point to your pointer</p>
                </a>

                <a class="card" href="https://pudding.cool/2020/12/judge-my-spotify">
                    <h2>Judge My Spotify</h2>
                    <p>Let an AI criticize your taste in music</p>
                </a>
            </div>

            <div id="gallery" style="display:none">
                <div id="galleryTags" class="tagContainer"></div>

                <div id='map' style='width: 400px; height: 300px;'></div>
            </div>

            <div id="learn" class="cardContainer" style="display:none"></div>
        </div>

        <script>
            //GALLERY MAP
            let mapped = false;
            let mapPromise = new Promise((resolve, reject)=>{
                let script = document.createElement("script");
                script.src = "https://api.mapbox.com/mapbox-gl-js/v2.3.1/mapbox-gl.js";
                script.onload = resolve;
                document.getElementById("gallery").appendChild(script);
            });
            
            let buttons = document.getElementById("menu").children;
            let content = document.getElementById("main").children;

            for(let i = 0; i < buttons.length; i++){
                buttons[i].onclick = ()=>{
                    for(let j = 0; j < buttons.length; j++){
                        buttons[j].classList.remove("active");
                    }
                    buttons[i].classList.add("active");

                    for(let j = 0; j < content.length; j++){
                        content[j].style.display = "none";
                    }

                    if(buttons[i].id === "galleryButton" && mapped === false){
                        Promise.all([
                            mapPromise,
                            fetch("/gallery/retrieve").then(response => response.json())
                        ])
                            .then(loadGallery)
                            .catch((err)=>{});
                        mapped = true;
                    }

                    let string = buttons[i].id.replace("Button", "");
                    document.getElementById(string).style.display = "flex";
                };
            }

            let searchTags = (content, tag)=>{
                let galleryList = [];

                for(let i = 0; i < content.length; i++){
                    for(let j = 0; j < content[i].tags.length; j++){
                        if(content[i].tags[j].toLowerCase() === tag){
                            galleryList.push(content[i]);
                            break;
                        }
                    }
                }

                return galleryList;
            }

            //Age display
            let ageYears = document.getElementById("ageYears");
            let ageDays = document.getElementById("ageDays");
            let ageHours = document.getElementById("ageHours");
            let ageMinutes = document.getElementById("ageMinutes");
            let ageSeconds = document.getElementById("ageSeconds");

            let dYears = document.getElementById("deathYears");
            let dDays = document.getElementById("deathDays");
            let dHours = document.getElementById("deathHours");
            let dMinutes = document.getElementById("deathMinutes");
            let dSeconds = document.getElementById("deathSeconds");

            let msYear = 1000 * 60 * 60 * 24 * 365;
            let birth = new Date(Date.UTC(90, 2, 9, 10, 5));
            let death = new Date(birth.getTime() + (msYear * 81.2));
            
            let displayAge = ()=>{
                let now = new Date();
                let msDiff = now - birth;
                let deathDiff = death - now;
                let msDay = 1000 * 60 * 60 * 24;
                let msHour = 1000 * 60 * 60;
                let msMinute = 1000 * 60;
                let msSecond = 1000;

                ageYears.innerText = msDiff / msYear;
                ageDays.innerText = msDiff / msDay;
                ageHours.innerText = msDiff / msHour;
                ageMinutes.innerText = msDiff / msMinute;
                ageSeconds.innerText = parseInt(msDiff / msSecond);

                dYears.innerText = deathDiff / msYear;
                dDays.innerText = deathDiff / msDay;
                dHours.innerText = deathDiff / msHour;
                dMinutes.innerText = deathDiff / msMinute;
                dSeconds.innerText = parseInt(deathDiff / msSecond);

                let years = Math.floor(msDiff / msYear);
                msDiff -= msYear * years;
                let days = Math.floor(msDiff / msDay);
                msDiff -= msDay * days;
                let hours = Math.floor(msDiff / msHour);
                msDiff -= msHour * hours;
                let minutes = Math.floor(msDiff / msMinute);
                msDiff -= msMinute * minutes;
                let seconds = Math.floor(msDiff / msSecond);

                let deathYears = Math.floor(deathDiff / msYear);
                deathDiff -= msYear * deathYears;
                let deathDays = Math.floor(deathDiff / msDay);
                deathDiff -= msDay * deathDays;
                let deathHours = Math.floor(deathDiff / msHour);
                deathDiff -= msHour * deathHours;
                let deathMinutes = Math.floor(deathDiff / msMinute);
                deathDiff -= msMinute * deathMinutes;
                let deathSeconds = Math.floor(deathDiff / msSecond);

                document.getElementById("age").innerText = `${years} years, ${days} days, ${hours} hours, ${minutes} minutes and ${seconds} seconds`;
                document.getElementById("death").innerText = `${deathYears} years, ${deathDays} days, ${deathHours} hours, ${deathMinutes} minutes and ${deathSeconds} seconds`;
            }

            displayAge();
            setInterval(displayAge, 1000);

            //Get blog content
            let populateBlogs = (blogs)=>{
                let container = document.getElementById("blogs");
                let template = document.getElementById("blogCard").content.children[0];

                while(container.children.length > 0){
                    container.removeChild(container.firstChild);
                }
                
                for(let i = 0; i < blogs.length; i++){
                    let card = template.cloneNode(true);
                    card.href = `/blog/${blogs[i]._id}`;
                    card.children[0].innerText = blogs[i].title;
                    card.children[1].src = blogs[i].thumbnail;
                    card.children[1].alt = `${blogs[i].title} thumbnail`;
                    container.appendChild(card);
                }
            }

            fetch("/blog/retrieve")
                .then(response => response.json())
                .then((response)=>{
                    let tagContainer = document.getElementById("blogTags");
                    let tags = [];

                    let tag = document.createElement("button");
                    tag.innerText = "All";
                    tag.classList.add("tag");
                    tag.onclick = ()=>{populateBlogs(response)};
                    tagContainer.appendChild(tag);

                    for(let i = 0; i < response.length; i++){
                        for(let j = 0; j < response[i].tags.length; j++){
                            if(tags.includes(response[i].tags[j].toLowerCase()) === true) continue;

                            tags.push(response[i].tags[j].toLowerCase());

                            let tag = document.createElement("button");
                            tag.innerText = response[i].tags[j];
                            tag.classList.add("tag");
                            tag.onclick = ()=>{populateBlogs(searchTags(response, response[i].tags[j].toLowerCase()))};
                            tagContainer.appendChild(tag);
                        }
                    }

                    populateBlogs(response);
                })
                .catch((err)=>{});

            let loadGallery = (response)=>{
                let galleries = response[1].galleries;

                //MAP
                mapboxgl.accessToken = response[1].mapboxKey;
                let map = new mapboxgl.Map({
                    container: 'map',
                    style: 'mapbox://styles/mapbox/streets-v11',
                    center: [46.313332, 56.183037],
                    zoom: 7
                });

                let mapDiv = document.getElementById("map");
                mapDiv.style.height = "90%";
                mapDiv.style.width = "90%";
                map.resize();

                //GALLERY DATA
                let tagContainer = document.getElementById("galleryTags");
                let tags = [];

                let tag = document.createElement("button");
                tag.innerText = "All";
                tag.classList.add("tag");
                tagContainer.appendChild(tag);

                for(let i = 0; i < galleries.length; i++){
                    let tags = galleries[i].tags.toString();
                    tags = tags.replaceAll(",", ", ");
                    let popup = new mapboxgl.Popup()
                        .on("open", ()=>{
                            popup.setHTML(`
                                <a class="galleryPopup" href="/gallery/${galleries[i]._id}">
                                    <h1>${galleries[i].title}</h1>
                                    <p>${tags}</p>
                                    <img class="popupImage" src="${galleries[i].images[0]}" alt="${galleries[i].title} image">
                                </a>
                            `)
                        });

                    let marker = new mapboxgl.Marker()
                        .setLngLat([galleries[i].location.coordinates[1], galleries[i].location.coordinates[0]])
                        .addTo(map)
                        .setPopup(popup);

                    for(let j = 0; j < galleries[i].tags.length; j++){
                        if(tags.includes(galleries[i].tags[j]) === true) continue;

                        tags.push(galleries[i].tags[j]);

                        let tag = document.createElement("button");
                        tag.innerText = galleries[i].tags[j];
                        tag.classList.add("tag");
                        tagContainer.appendChild(tag);
                    }
                }
            }

            //Get "learn" content
            fetch("/learn/courses/json")
                .then(response => response.json())
                .then((response)=>{
                    let container = document.getElementById("learn");

                    for(let i = 0; i < response.length; i++){
                        let card = document.createElement("a");
                        card.classList.add("card");
                        card.href = `/learn/courses/${response[i]._id}`;
                        container.appendChild(card);

                        let h2 = document.createElement("h2");
                        h2.innerText = response[i].title;
                        card.appendChild(h2);

                        let img = document.createElement("img");
                        img.src = response[i].thumbNail;
                        img.alt = `${response[i].title} thumbnail`;
                        card.appendChild(img);
                    }
                })
                .catch((err)=>{});
        </script>
    </body>
</html>