<!--


                         ██████░▒▒█░▓░
                          ███████████░
                          ░█░█▒███████▓█▒
                           ░████▒█████▒█░█
                            ███▒██▓███████░                               ▓███▓ ▒░▓█▒██▓▓░██████▓▓
                            ▓████░█████████▓█░                  ▓████████████████████▓█░▒█▒██▒█▓▓█▓█▓  ▒
                ░  ▒       ░██████░▓████▓███ ▓▓           ░▓▓█  ░ ░█████    ▒███████████████████████
               ▒██░▒█      ▓███████████████▒▓ ██      ██      ░ ████▓██░░░░███████▓█████▓█▒░  ░   ░░░
         ▓██████▓██████  ▓ ░███████▓██████████▓░    ██▒        ░░▒▒█▓ ██▒███████████████████████░
          ▓████░███████░░▓████▓████░▓██████████▓   █▓█████  ░ ░▒▓██▒▓  ███████▒░░████▓░
            ░█▓██░▒▓███░████▓██████▒▓████████▒▓▓     ░▒███   ░██▒▒█▓██░▒▓█▒███████████
              ░████▓█████░████▒░█████████████▓▒█        ▓█░ ░█░▓█░▓▓██░░▓▒░▒▒████
             ░▓▒█░████████████▒▓▒▓█▓░░█░███▒█░▓█       ▓█       ██████▓██  █████████▓
          ░░▒███████▒▓█████████████▒█ ░▓░░░█░█  █     █▓░    ▒▒ █▒░▓██▓░ █ ░█▒███████░▒
           ████████████████████████░░░░█░░▓▒    ░░   ░▒      ░███░░████▒█░ ▓██████████
             ░ ░███████████▓▓███████ █░  ███     ░░   ░▓   ░  ░▒░████▓█▒  ░▓█████████░▓▓
             ░ ░▒████▓░██▓█▓███░██▒▒█  ▓░                    ▓█▓░█████ ▓   ▒███████░████
               ░▓███████▓██░░  ░░  █░  ▒  ░              ▓▒ █▒▒█ ░███▓▒███▓░███▓████▒▓
                █████▓██▓█░█   ░    █    ░                 ░  ░▒████ █       ██ ▓████▓
               ░██▓█░▒▓░  ▒   ▒  ▓▓█░     ░  ░    ░          ░░█████████░▒█ █▓░░██ ░██
               ░█████░█░█▓    ▒░▒ █░    ░                         ▒█ █░▒█   █ ▓█▒█░█
               ░▓██░█▓░▒▒      ░░       ░  ░     ░              ▒▒ ░  ██▓███  ░█▒██ ▓░███░░░
               ░▓██░██ ▓░░░  ░ ░░░ ░                 █                ▓█░▓  █   ▓█████▓████▒▓▓██
                 ███░░█░ ░   ░░ ░     ░       █ ░█░ ██░  ▓█  ▓ ░       ░█░▓ ▓█▒▓░██░█████░▒▓████▓█
                 ░██▓▒░▓░    ░░  ░       ░    ░  ▓░███▒░  █▓▒█ ▓   ░ ▒ ░▓       ▓███▓▓███▒░███ ▒████▓ ▒
                  █▒▓ ░  ░     ░      ▒     ░  █  ░▓████ ▓░▒██▓▒█░█░ █ ░▓▓██    ▒█████████░██▓███ ░
                   ▓█▒     ░     ░░ ░     ░  █ ░▓██░ ░░██ ▒  ██▓▓█▓ ▓    █    ▒██░  ███ ░██ █▓██▒░█▒░█▒       ▒
                   ░█▒█                         █░▓████▓░ ▒▒ █▓  ░██░███▒ █▓██  ▒▓███░▒█▓█▓█░ ░ ▒░ ▓ █ ░░ ██ ░
                   █▒  ▓░ ░ ▓░░░  ░░ ░    ░░▒░██▒██▓░█░████▒▒▓█ ░▒█░█░░  █ █ ░██    ░█▓█▒  █ ░▓▒█░░█▒░█  ░░█
                 █▓░       ░░ ░░      █░░▓ ░░██░▒██ ░ ▓█  ░░   █░█ ░██░█ █  ██░ ███ █▓▓█░▓░█▓░█▓▓██▓██▓██▓
                ▓█░░░░ ░░ ░█▒▒░▓ ▒ ░ ██░███░███▓▒▒░▒▓░██░██░▓░▒▓▓▒▒ ░░  █░ ▓ █  ░░  █ ░██ ██ ░███▓█▓█▒▒██▓████     ░
              ▒ ░░░█░▒░░░░░▓░ █  ░░██▓█▓░ ░░ █  ▓██ ░▓██▒█▒░█        ██░ █▓ ██▒▓▒ █  █  ░░███░ ▓ ███░▓▓░░█▓▓█░░▒░▒█▓
             ██▓▓▒█▓█ ░▓█░▓█░███░█████▓█▓░░▒░██▒███████████▓██▓████░██░█  █  █  ████ ░░░  ░ ██░ ░ ▒██░████████████▓░
           ████░█ ▓█░░█  ░▓▓ ███░███░░█▒▒░█▓█ ▓█ ▓█▓▓████▓██████████░░ █░  ▒▓ ▓  █░█ █▓▓█▒▒▓ ░█▓ ▒░   ░██████▓███▒░█▒
         ░ █████████▓███▒▒██░██████░█▒▒▒█▓▒██▒▓██ █████████████████░ █░ ▓ ▒  █░▓▒░█ ▓ █▓█░░▒   ▒▓█░▓█▓░  ▓█▓██████████░░█               ▒▓█   ░░
         ▒███▓██▓███▓▓██░ █▓ ▒░░█░██▓█▒██▓█▓▒█ ███░████ ████ ░░ ██▓████░▓█ ██░░░█░ █▓█░▓██░░░    ███ █░  ▓ ░▓▓███████▓██▒ ▓▓  ░██████▓███▓▒█▓▓████▓▒
         ▓▓█░███░███░░▒██░ ▓░ ▓██░██ ███████▒██████▓█████     ▒ ▓█▓████▒███ ███  ▒ ░█▓█░▒█▓  █▓   ▓░█ ░▓█ ░█░░ ███▓▓███▓▓████████▓██▓█▓██▓▓█▒█▒▓▓▓▓░
        ░█░▒░█▓░█░█░  ░░██░█░████░▓█░██▒███████░▒███ ██▓█  █    █▓ ██ ░▒████ ░▓█ █  ███▒██▓░ ░█░█▒░██▓░█ █  ▓ ▒█  ▒░█▓▓███████▓█▓█▓██░█▒░█▒██  ░▓██████░           ▒░░░█▓▓▒▒▒
        ░░░█░█▒▒█ █▒█▒░░█▓░█████████████████████ ████░█░ █ █░█ ██▒████▓███████▓█ ░  ▓█░▓ ██▓   █ ▒▓▓██ █▓█    ▓░▓  ▓░▒░     ░░  ░▓   ▓█░▓   ░     ░▓▒▒█▒ ▓█░ ▒▓   ▓░░░▓▒██░█▓█▓
        █░▓▒ █▒█▒░█▒█░▒░██░█▓███████████▓████     ░▒  ▒█       █░░████░██░███  █ ▒▒ ▓░▒█ █▓ █▒░▓██▓███ █ ▒██      ▒  ▓ ▒ ░░███░  █▒░  ░             ▒▓▓░░ █  ▒▓ ████ ░   █▓▒█▓█░░
       ░█░█░███████▒██▓█▓▓░▒████████████░░░░▒░   ▓██  ██░          ░░█░██  ░ ░ █ ░▓█▒░ ██  ░░ ░▓█▓▒░███ ░█▒██  ░       ▓░█▓ █▒█▓                       ██░█ ▓█ ▓▓█         ▓▓██
      ░███▓▒████▒▓█░██░███▓ ▒██▓██▓ ░▒            ██▓ ██░           ░█      ░  ░ ▒ ▓░ ▓█▓ ░▓ ░▒▒█▓▒███░█▒▓▓██░            ▓ ▓▓█▓                      █████▓▓██▓▓             ▒▓░░
     ░░█▓█▒█████░██░█████▒█ ░▓▒░                   ▒█████░████▒             ▒██ ▓█ █░ ▓ ▓ ▓█  ░██▒▓  ▒▓░▓░░█▓▒                                     ▒▒██▒▓▓█▒█▒██▓░▓              █▓▓█
      ████░▓████░██ ███▒█░█                           ░██▒                 █▒   ▓▓ █▒ ░▒  ██ ░█ ▓█░ ███░▓▒ ░███                                    ▓░░▒███▓▓▓ █▓░▓               ▒▓█▓
     ░██████████▓██░███░█░                              ░█░                    █▒  ▓█▒   ███ ▒  ▒█ ░▓▓█░░▓   █▒                                   ▓░▓▓█░▓█░█▓░ ░                █ █▓██
     ▒███▓████████▒░▓██░░░                                                    █░  ▓      ▓     ░▓█ ██▓▓░ ▓    █░                                  ▓█▓▓██                       ░  ▓░▓ █
    ░████▓███████▓▒ ███                                                      █         ██     ░██ ░███▒█ ▓▒   █░                                   ▓█████▓                  ░▓█░ ██▒▒▓██
     █▓██▒▓█▒██▓██ ░▒░░                                                                        ░  ░████▓ ░░   ▒░                              █░        ░░░█              ██    █▓▓▓██  ░
    ░████████▓█▒██░  ▓                                                                        ░    ███▓█▒█                             ░▒░█▓████▓███▒░█░░█   ░▓░▓▒░░ █  █    ░▒███▓▓▓██
    ░░█████████▓█▓                                                                                 ▓███▓█ █                           ███▓░░▓       ░▒██▓ █ ▒   ▒█▒█▓░░ ▒░▒█▒█▒▓█████▒▓
     ░█████████▒█░                                                                                  ▒▒█████ █░                       ▓░▓▒  █▓         ▒▒███▒▓▒          ▒▓▒█▒▓▒░██▓▓▓
      ██░██░██▓░█                                                                                     █▓██████                      ░▓▒▓░██▒▓█▒        ▒█░▒█▒░▓             ▒▓▒▒▓░  ▓
     ░██▒██▓███ ░                                                                                      ▒█ ▓██████                      ▓█░ ▒▓███▒█░     ▓ █████░▒▒
     ▓██░▓█▒███                                                                                            ▓██████▒█    ▓░░             ▓██  █▒▓▓█▓       ▒▓█▓█▓
     ░██▓██████                                                                                                   ▓▓█▓  ▒░███              ▓█░█▓▓░░    ▒░ █▓▓█████▒
      ▓█░██░▒█▒                                                                                                       █▓▓ ▒▒▓█                       ▒ ▒ ▒▓▒█▓▓█▓█
     ░░█░██▒██░                                                                                                        ▒████░██                    █▒  ▒▓▓██████░   ░
       ░ ░█ ▒                                                                                                            ████▓█               ░████▒▓██████▒░█▓▓░█▒
         ░█                                                                                                               ███████▒       ░░▓▓█▓███▓█▒██████▓▓█░███
                                                                                                                           ░▓▓███████████████████░ ▓████▓▓▓░
                                                                                                                             ███████████▓██████▓ ░
                                                                                                                                 ██▓██████▒███▓███
                                                                                                                                    █ ▒▓████▒ ▓█▒░
                                                                                                                                         ▒█▓▒░█▓░


 -->


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="html.css" type="text/css" media="screen">

    <title>Home</title>
    <style>
    .typewriter {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100vh;
       margin-top: 23vh;
       color: blue;
       white-space: nowrap;
       overflow: hidden;
       transition: opacity 0.5s ease;
    }

    #typewriter-text {
      font-family: monospace;
      font-size: 1em;
      white-space: nowrap;
      overflow: hidden;
      animation: typing 3s steps(22, end),
    }

    @keyframes typing {
      from {
        width: 0;
      }
      to {
        width:13em; /* Adjust width to fit your text length */
      }
    }

        .dropdown {
            position: relative;
            display: inline-block;
        }

        .dropdown-content {
            display: none;
            position: absolute;
            min-width: 15em;
            /* box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); */
            z-index: 1;
            max-height: calc(100vh - 100px);
            overflow-y: auto;
            scrollbar-width: none;
            -ms-overflow-style: none;
          }

          .dropdown-content::-webkit-scrollbar {
            display: none;
          }

        .dropdown-content a {
            color: blue;
            padding: 0;
            display: block;
            text-align: left;
            margin: 0;
            font-family: "IBM Plex Sans", sans-serif;
            font-style: italic;
        }

        .dropdown-content a:hover {
            background-color: yellow;
        }

        .dropdown:hover .dropdown-content {
            display: block;
        }

        .dropdown-click .dropdown-content {
            display: block;
        }

    </style>
</head>
<body>
    <div id="container">
        <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
        <script src="https://cdn.jsdelivr.net/npm/three@0.128.0/examples/js/loaders/GLTFLoader.js"></script>
        <div id="overlay"></div>
        <div class="nav-container">
            <div class="nav-links">
                <div class="dropdown">
                    <a style="text-align: left; color:blue;" id="works-link">WORKS</a>
                    <div class="dropdown-content">
                        <p style="margin-top: 10px; margin-bottom: 2px; color: black; text-align: left; font-size: .9em;
                        font-weight: 300;">2024</p>
                        <a href="rhizome2.html">Rhizome Intermezzo no.2</a>
                        <a href="uncountable.html">Uncountable Nouns</a>

                        <p style="margin-top: 10px; margin-bottom: 2px; color: black; text-align: left; font-size: .9em;
                        font-weight: 300;">2023</p>
                        <a href="photoLimb.html">Photolimb Regeneration</a>
                        <a href="rhythmai.html">Rhythm AI</a>
                        <a href="8kv.html">8kV 30mA 60Hz</a>

                        <p style="margin-top: 10px; margin-bottom: 2px; color: black; text-align: left; font-size: .9em;
                        font-weight: 300;">2021</p>
                        <a href="photocumulate.html">Photocumulate no.1</a>
                        <a href="rhizome.html">Rhizome Intermezzo</a>
                        <a href="lumpen.html">Performance for Lumpen Radio</a>

                        <p style="margin-top: 10px; margin-bottom: 2px; color: black; text-align: left; font-size: .9em;
                        font-weight: 300;">2020</p>
                        <a href="psychogeo.html">Psychogeography of Chicago Spring '20</a>

                        <p style="margin-top: 10px; margin-bottom: 2px; color: black; text-align: left; font-size: .9em;
                        font-weight: 300;">2019</p>
                        <a href="asMuch.html">as much as the space between my hands can push them apart</a>
                        <a href="dataMe/index.html">SafeTumblr</a>
                        <a href="keyGenesis.html">keyGenesis</a>
                        <a href="xyz.html">xyz</a>

                        <p style="margin-top: 10px; margin-bottom: 2px; color: black; text-align: left; font-size: .9em;
                        font-weight: 300;">2018</p>
                        <a href="fallUp.html">How to Fall Up (and Never Come Back)</a>
                        <a href="scores.html">Scores for the Horizon</a>


                    </div>
                </div>
                <!-- <span class="separator"></span> -->
                <a href="cv.html" style="text-align: right;">CV</a>
                <!-- <span class="separator"></span> -->
                <a href="about.html" style="text-align: right;">ABOUT</a>
            </div>
            <hr>
        </div>
        <div class="typewriter">
            <p id="typewriter-text"></p>
        </div>
        <div>
            <!-- <p><a href="index.html" class="bottom-right">ANGELINA ALMUKHAMETOVA</a></p> -->
            <a href="index.html" class="bottom-right">Angelina <span class="last-name">ALMUKHAMETOVA</span></a>
        </div>

        <script>
            // Create the scene
            const scene = new THREE.Scene();
            scene.background = new THREE.Color("rgb(238, 238, 238)"); // Grey background

            // Create a camera
            const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
            camera.position.z = 5;

            // Create a renderer
            const renderer = new THREE.WebGLRenderer({ antialias: true });
            renderer.setSize(window.innerWidth, window.innerHeight);
            document.getElementById('container').appendChild(renderer.domElement);

            // Load the 3D rose model
            const loader = new THREE.GLTFLoader();
            let rose;
            loader.load('model/rose_model.glb', function(gltf) {
                rose = gltf.scene;
                rose.traverse((node) => {
                    if (node.isMesh) {
                        node.material = new THREE.MeshBasicMaterial({ color: 0x0000ff }); // Set material color to blue
                    }
                });
                rose.position.set(0, -1.5, 0); // Position the rose at the center
                rose.scale.set(1, 1, 1); // Adjust the scale if necessary
                scene.add(rose);
                console.log("Rose model loaded");
            }, undefined, function(error) {
                console.error(error);
            });

            // Animation loop
            function animate() {
                requestAnimationFrame(animate);

                // Rotate the rose horizontally if it's loaded
                if (rose) {
                    rose.rotation.y += 0.01; // Rotate around the vertical axis
                }

                // Render the scene
                renderer.render(scene, camera);
            }

            // Handle window resize
            window.addEventListener('resize', () => {
                camera.aspect = window.innerWidth / window.innerHeight;
                camera.updateProjectionMatrix();
                renderer.setSize(window.innerWidth, window.innerHeight);
            });

            // Start the animation
            animate();

            // SECRET TYPEWRITER

            // Array of sentences to choose from
            const sentences = [
                "feeling lucky?",
                "⚀⚁⚂⚃⚄⚅"
                // "a rose for you"
            ];

            const delay = 100; // Adjust the speed (in milliseconds) of typing
            const fadeOutDelay = 1000; // Delay before fading out (in milliseconds)

            function typeWriter() {
                const randomIndex = Math.floor(Math.random() * sentences.length);
                const text = sentences[randomIndex];

                let i = 0;
                const typewriterText = document.getElementById('typewriter-text');
                typewriterText.textContent = ''; // Clear previous content

                function type() {
                    if (i < text.length) {
                        typewriterText.textContent += text.charAt(i);
                        i++;
                        setTimeout(type, delay);
                    } else {
                        // Typing is finished, schedule fade out
                        setTimeout(() => {
                            typewriterText.style.transition = "opacity 0.5s ease";
                            typewriterText.style.opacity = 0;
                        }, fadeOutDelay);
                    }
                }

                type();
            }

            document.addEventListener('DOMContentLoaded', typeWriter);

            // Handle touch to show dropdown for iPhone
            const worksLink = document.getElementById('works-link');
            worksLink.addEventListener('touchstart', (event) => {
                event.preventDefault();
                const dropdownContent = worksLink.nextElementSibling;
                if (dropdownContent.style.display === 'block') {
                    dropdownContent.style.display = 'none';
                } else {
                    dropdownContent.style.display = 'block';
                }
            });

            // Hide dropdown if clicked outside
            document.addEventListener('click', (event) => {
                const dropdownContent = worksLink.nextElementSibling;
                if (!worksLink.contains(event.target)) {
                    dropdownContent.style.display = 'none';
                }
            });

            // Adjust dropdown max-height dynamically based on window size
function adjustDropdownHeight() {
    const dropdownContent = document.querySelector('.dropdown-content');
    dropdownContent.style.maxHeight = `${window.innerHeight - 100}px`; // Adjust the offset as needed
}

// Call adjustDropdownHeight on page load and window resize
window.addEventListener('DOMContentLoaded', adjustDropdownHeight);
window.addEventListener('resize', adjustDropdownHeight);


        </script>
    </div>
</body>
</html>