lee
/
leemorgan-dev


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439
							<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>Lee Morgan</title>
        <link rel="stylesheet" href="/style">
        <link rel="icon" type="img/ico" href="/images/favicon">
        <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="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="currencyButton">
                <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                    <line x1="12" y1="1" x2="12" y2="23"></line>
                    <path d="M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6"></path>
                </svg>

                <p>Currency</p>
            </button>
        </div>

        <div id="main">
            <div id="about">
                <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 presents 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.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>
                </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="/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="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 id="currency" style="display:none">
                <div id="locations"></div>
        
                <div id="currencyContainer"></div>
        
                <template id="currencyTemplate">
                    <div class="currency">
                        <h1 class="location"></h1>
                        <p class="info"></p>
                        <div class="currencyImages">
                            <img class="frontImage">
                            <img class="backImage">
                        </div>
                        <p class="comment"></p>
                    </div>
                </template>
            </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;
            }

            //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: [-6.2764, 48.3623],
                    zoom: 3
                });

                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)=>{});

            //Get currency data
            let displayImage = (image, cType)=>{
                let div = document.createElement("div");
                div.classList.add("fullImageBackground");
                div.onclick = ()=>{document.body.removeChild(div)};
                document.body.appendChild(div);

                image.className = "";
                image.style.margin = "auto";
                if(cType === "paper"){
                    image.style.height = "";
                    image.style.width = "100%";
                }else{
                    image.style.width = "";
                    image.style.height = "100%";
                }
                div.appendChild(image);
            }

            let imageSize = (image)=>{
                let width = `${image.clientWidth * 0.35}px`;
                image.style.height = `${image.clientHeight * 0.35}px`;
                image.style.width = width;
            }

            let filterLocations = (location, currencies)=>{
                let container = document.getElementById("currencyContainer");
                let template = document.getElementById("currencyTemplate").content.children[0];

                while(container.children.length > 0){
                    container.removeChild(container.firstChild);
                }

                for(let i = 0; i < currencies.length; i++){
                    if(currencies[i].location.toLowerCase() === location){
                        let currency = template.cloneNode(true);
                        let frontImage = currency.querySelector(".frontImage");
                        let backImage = currency.querySelector(".backImage");
                        let code = currencies[i].currencyCode;

                        currency.querySelector(".location").innerText = `${currencies[i].location.toUpperCase()} (${currencies[i].name})`;
                        currency.querySelector(".info").innerText = `${currencies[i].value} ${code ? code : ""}`;
                        frontImage.src = currencies[i].frontImage;
                        frontImage.onload = ()=>{imageSize(frontImage)};
                        frontImage.onclick = ()=>{displayImage(frontImage.cloneNode(true), currencies[i].type)};
                        backImage.src = currencies[i].backImage;
                        backImage.onload = ()=>{imageSize(backImage)};
                        backImage.onclick = ()=>{displayImage(backImage.cloneNode(true), currencies[i].type)};
                        currency.querySelector(".comment").innerText = currencies[i].comment;
                        container.appendChild(currency);
                    }
                }
            }

            fetch("/currency/data")
                .then(r=>r.json())
                .then((response)=>{
                    let locationsContainer = document.getElementById("locations");
                    let locations = [];

                    for(let i = 0; i < response.length; i++){
                        if(!locations.includes(response[i].location.toLowerCase())){
                            locations.push(response[i].location.toLowerCase());

                            let button = document.createElement("button");
                            button.classList.add("locationBtn");
                            button.innerText = response[i].location.toUpperCase();
                            button.onclick = ()=>{
                                let btnLocations = document.querySelectorAll(".locationBtn");
                                for(let j = 0; j < btnLocations.length; j++){
                                    btnLocations[j].classList.remove("curSelected");
                                }

                                button.classList.add("curSelected");
                                filterLocations(response[i].location.toLowerCase(), response);
                            }
                            locationsContainer.appendChild(button);
                        }
                    }
                })
                .catch((err)=>{});
        </script>
    </body>
</html>