lee
/
leemorgan-dev


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550
							<!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" content="about">
                <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" content="projects">
                <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" content="blog">
                <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" content="gallery">
                <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" content="currency">
                <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="mobileMenu">
            <svg id="openMobileMenu" stroke-width="1.5" viewBox="0 0 24 24" fill="none" color="#000000">
                <path d="M3 5h18M3 12h18M3 19h18" stroke="#ffffff" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
            </svg>
        </div>

        <div id="mobileMenuOptions" style="display:none">
            <svg id="closeMobileMenu" stroke-width="1.5" viewBox="0 0 24 24" fill="none" color="#000000">
                <path d="M6.758 17.243L12.001 12m5.243-5.243L12 12m0 0L6.758 6.757M12.001 12l5.243 5.243" stroke="#ffffff" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
            </svg>

            <a class="mobileChoice" 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
            </a>

            <a class="mobileChoice" 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="mobileChoice" 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>

            <button class="mobileChoice mobileMenuButton" content="about">
                <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 class="mobileChoice mobileMenuButton" content="projects">
                <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 class="mobileChoice mobileMenuButton" content="blog">
                <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 class="mobileChoice mobileMenuButton" content="gallery">
                <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 class="mobileChoice mobileMenuButton" content="currency">
                <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>I am web developer based in South Carolina, though I am often traveling. My primary work is involved with creating and maintaining custom websites that require detailed solutions. I enjoy the process of creating custom solutions for websites, whether that be for clients that have a specific need for their websites or working on my own projects for fun.</p>

                    <p>I also enjoy traveling to different places in the world to experience new places and cultures. One of my favorite hobbies is walking around new cities and photographing all of the beautiful locations that I can find. I try to split my time between resting and enjoying my hometown and going overseas to experience new places.</p>

                    <p>Another passion of mine is simply learning new things. I greatly enjoy learning new languages, whether that is human or computer languages. Aside from traveling different place, I also try to split my free time between learning new programming tools/paradigms and learning languages. My current interests involve learning Rust as a programming language and Ukrainian as a human language.</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>

                <a class="card" href="https://myvillage.market">
                    <h2>MyVillage.market</h2>
                    <img src="/images/myvillage-market" alt="Market with various vegetables"/>
                    <p>A place for local vendors to display their products and users to search for vendors in their region.</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 mobileMenu = document.getElementById("mobileMenu");
            let mobileMenuOptions = document.getElementById("mobileMenuOptions");
            document.getElementById("openMobileMenu").onclick = ()=>{
                mobileMenu.style.display = "none";
                mobileMenuOptions.style.display = "flex";
                document.getElementById("closeMobileMenu").onclick = ()=>{
                    mobileMenu.style.display = "flex";
                    mobileMenuOptions.style.display = "none";
                }
            }
            
            let buttons = document.getElementById("menu").children;
            let mobileButtons = document.querySelectorAll(".mobileMenuButton");
            let content = document.getElementById("main").children;

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

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

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

                        let string = htmlCollection[i].getAttribute("content");
                        document.getElementById(string).style.display = "flex";
                        document.getElementById("mobileMenuOptions").style.display = "none";
                        document.getElementById("mobileMenu").style.display = "flex";
                    };
                }
            }

            navButtonFunctionality(buttons);
            navButtonFunctionality(mobileButtons);

            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>