fymio.us/layouts/index.html

{{ define "main" }}
<div class="terminal-home">
  <pre class="ascii-art">
 ___                _                     
|  _|_ _ __ ___    (_) ___    _   _ ___ 
| |_| | '_ ` _ \   | |/ _ \  | | | / __|
|  _| | | | | | |_ | | (_) |_| |_| \__ \
|_| |_|_| |_| |_(_)/ |\___/(_)\__,_|___/
                 |__/                    
  </pre>

  <div class="prompt-section">
    <p class="terminal-prompt">
      <span class="prompt-user">visitor@fymio.us</span>:<span
        class="prompt-path"
        >~</span
      >$ <span class="typed-text"></span><span class="cursor">█</span>
    </p>
  </div>

  <div class="info-section">
    <h2>> whoami</h2>
    <p>Developer, creator, explorer of digital spaces.</p>

    <h2>> ls -la ~/interests</h2>
    <ul class="file-list">
      <li><span class="file-icon">📁</span> coding/</li>
      <li><span class="file-icon">📁</span> design/</li>
      <li><span class="file-icon">📁</span> automation/</li>
      <li><span class="file-icon">📄</span> coffee.txt</li>
    </ul>

    <h2>> cat ~/links.txt</h2>
    <div class="links">
      <a href="/blog/" class="terminal-link">[Blog]</a>
      <a href="https://git.fymio.us/nik" class="terminal-link">[Git]</a>
      <a href="mailto:me@fymio.us" class="terminal-link">[Email]</a>
    </div>

    <h2>> echo $STATUS</h2>
    <p>System online. All services operational.</p>

    <div class="command-hint">
      <p class="hint">💡 Type <code>help</code> to see available commands</p>
    </div>
  </div>
</div>

<style>
  .terminal-home {
    max-width: 900px;
    margin: 0 auto;
    padding: 40px 20px;
  }

  .ascii-art {
    color: var(--accent);
    font-size: 0.8em;
    line-height: 1.2;
    margin-bottom: 40px;
    overflow-x: auto;
  }

  .prompt-section {
    margin: 30px 0;
  }

  .terminal-prompt {
    font-family: inherit;
    margin: 0;
  }

  .prompt-user {
    color: #00ff00;
  }

  .prompt-path {
    color: #0080ff;
  }

  .typed-text {
    color: var(--foreground);
  }

  .cursor {
    animation: blink 1s infinite;
    color: var(--accent);
  }

  @keyframes blink {
    0%,
    49% {
      opacity: 1;
    }
    50%,
    100% {
      opacity: 0;
    }
  }

  .info-section h2 {
    color: var(--accent);
    font-size: 1.2em;
    margin-top: 40px;
    margin-bottom: 15px;
  }

  .info-section h2:before {
    content: "$ ";
    color: var(--foreground);
  }

  .file-list {
    list-style: none;
    margin-left: 0;
    padding-left: 20px;
  }

  .file-list li {
    margin: 8px 0;
    font-family: inherit;
  }

  .file-icon {
    margin-right: 10px;
  }

  .links {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
    margin: 20px 0;
  }

  .terminal-link {
    display: inline-block;
    padding: 8px 16px;
    border: 2px solid var(--accent);
    color: var(--accent);
    text-decoration: none;
    transition: all 0.2s;
  }

  .terminal-link:hover {
    background: var(--accent);
    color: var(--background);
  }

  .command-hint {
    margin-top: 60px;
    padding: 20px;
    border: 1px dashed var(--foreground);
    opacity: 0.7;
  }

  .hint {
    margin: 0;
    font-size: 0.9em;
  }

  code {
    background: rgba(255, 255, 255, 0.1);
    padding: 2px 8px;
    border-radius: 3px;
  }

  @media (max-width: 768px) {
    .ascii-art {
      font-size: 0.5em;
    }

    .terminal-home {
      padding: 20px 10px;
    }
  }
</style>

<script>
  // Typing animation
  const phrases = ["ls -la", "cat README.md", "whoami", "pwd"];
  let phraseIndex = 0;
  let charIndex = 0;
  let isDeleting = false;
  const typedTextElement = document.querySelector(".typed-text");

  function type() {
    const currentPhrase = phrases[phraseIndex];

    if (isDeleting) {
      typedTextElement.textContent = currentPhrase.substring(0, charIndex - 1);
      charIndex--;
    } else {
      typedTextElement.textContent = currentPhrase.substring(0, charIndex + 1);
      charIndex++;
    }

    if (!isDeleting && charIndex === currentPhrase.length) {
      setTimeout(() => {
        isDeleting = true;
      }, 2000);
    } else if (isDeleting && charIndex === 0) {
      isDeleting = false;
      phraseIndex = (phraseIndex + 1) % phrases.length;
    }

    const typingSpeed = isDeleting ? 50 : 100;
    setTimeout(type, typingSpeed);
  }

  document.addEventListener("DOMContentLoaded", () => {
    setTimeout(type, 1000);
  });
</script>

{{ end }}