<!DOCTYPE html>
<html lang="en">
<head>

  <!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-HBJP6CFGNQ"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());

  gtag('config', 'G-HBJP6CFGNQ');
</script>

  <meta charset="UTF-8">
  <title>ALEX VALENTINE</title>
  <link rel="stylesheet" href="styles.css">
  <link href="https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;600&display=swap" rel="stylesheet">
</head>
<body class="home-page">

<!-- site name fixed top-left (hidden on home) -->
<div class="landing-name">ALEX VALENTINE EVDOKIMOV</div>
<!-- bottom-left three-line name only on home page -->
<div class="home-name">Alex\nValentine\nEvdokimov</div>

<!-- four persistent navigation columns -->
<div class="landing-grid">
  <div class="landing-cell home-cell" data-page="index.html" data-label="HOME"></div>
  <div class="landing-cell work-cell" data-page="drawings.html" data-label="MY WORK"></div>
  <div class="landing-cell about-cell" data-page="about.html" data-label="ABOUT ME"></div>
  <div class="landing-cell contact-cell" data-page="contact.html" data-label="CONTACTS"></div>
</div>

<!-- page content will be moved into active cell -->

<script>
  document.addEventListener('DOMContentLoaded', function() {
    const cells = document.querySelectorAll('.landing-cell');
    
    // determine which page is currently active
    const path = window.location.pathname.toLowerCase();
    let activeCell = cells[0]; // default to HOME
    
    if (path.includes('drawings')) {
      activeCell = document.querySelector('.work-cell');
    } else if (path.includes('about')) {
      activeCell = document.querySelector('.about-cell');
    } else if (path.includes('contact')) {
      activeCell = document.querySelector('.contact-cell');
    }
    
    // set active class
    activeCell.classList.add('active');
    // move page content into active cell
    const pageContent = document.querySelector('.page-content');
    if (pageContent) {
      activeCell.appendChild(pageContent);
    }
    
    // add click handlers
    cells.forEach(cell => {
      cell.addEventListener('click', function() {
        const page = this.dataset.page;
        // remove active from all
        cells.forEach(c => c.classList.remove('active'));
        this.classList.add('active');
        // delay navigation to allow transition to complete
        setTimeout(() => {
          window.location.href = page;
        }, 500); // smoother delay
      });
    });
  });
</script>

</body>
</html>