<!DOCTYPE html>
<html lang="en" class="no-js">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1">
  <title>tensa - Personal Site</title>
  
  <link rel="preload" href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600&family=Noto+Sans:wght@400;700&display=swap" as="style" onload="this.onload=null;this.rel='stylesheet'">
  <noscript>
    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600&family=Noto+Sans:wght@400;700&display=swap">
  </noscript>
  
  <link rel="preload" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
  <noscript>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css">
  </noscript>

  <style>
  :root {
    --bg-light: #f6f6f4;
    --text-primary-light: #2e3436;
    --text-secondary-light: #555753;
    --accent-light: #ff007f;
    --surface-light: #ffffff;
    --border-light: #c0bfbc;
    --shadow-light: rgba(0, 0, 0, 0.1);

    --bg-dark: #1d1d1d;
    --text-primary-dark: #ffffff;
    --text-secondary-dark: #d5d5d5;
    --accent-dark: #e4007f;
    --surface-dark: #2d2d2d;
    --border-dark: #3d3d3d; 
    --shadow-dark: rgba(0, 0, 0, 0.3);

    --transition-speed: 0.4s;
    color-scheme: light dark;
  }
    [data-theme='light'] {
      --bg: var(--bg-light);
      --text-primary: var(--text-primary-light);
      --text-secondary: var(--text-secondary-light);
      --accent: var(--accent-light);
      --surface: var(--surface-light);
      --border: var(--border-light);
      --shadow: var(--shadow-light);
    }

    [data-theme='dark'] {
      --bg: var(--bg-dark);
      --text-primary: var(--text-primary-dark);
      --text-secondary: var(--text-secondary-dark);
      --accent: var(--accent-dark);
      --surface: var(--surface-dark);
      --border: var(--border-dark);
      --shadow: var(--shadow-dark);
    }

    *,
    *::before,
    *::after {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
      transition: 
        background-color var(--transition-speed) ease,
        color var(--transition-speed) ease,
        box-shadow var(--transition-speed) ease;
    }

    html {
      scroll-behavior: smooth;
      text-rendering: optimizeLegibility;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
    }

    body {
      font-family: 'Inter', 'Noto Sans', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
      background-color: var(--bg);
      color: var(--text-primary);
      line-height: 1.6;
      max-width: 1000px;
      margin: 0 auto;
      padding: 1rem;
      opacity: 0;
      animation: fadeIn 0.6s ease forwards;
    }

    @keyframes fadeIn {
      from { opacity: 0; transform: translateY(20px); }
      to { opacity: 1; transform: translateY(0); }
    }

    .container {
      display: grid;
      grid-template-columns: 1fr 2fr;
      gap: 1.5rem;
      background-color: var(--surface);
      border-radius: 12px;
      border: 1px solid var(--border);
      box-shadow: 0 10px 30px -15px var(--shadow);
      padding: 1.5rem;
      overflow: hidden;
      transform: scale(0.95);
      opacity: 0;
      animation: slideUp 0.8s ease 0.2s forwards;
    }

    @keyframes slideUp {
      from { 
        opacity: 0; 
        transform: scale(0.95) translateY(30px); 
      }
      to { 
        opacity: 1; 
        transform: scale(1) translateY(0); 
      }
    }

    .profile {
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
    }

    .profile-image {
      width: 150px;
      height: 150px;
      border-radius: 50%;
      object-fit: cover;
      border: 3px solid var(--accent);
      box-shadow: 0 0 20px var(--shadow);
      margin-bottom: 1rem;
      transition: 
        transform var(--transition-speed) ease,
        box-shadow var(--transition-speed) ease;
    }

    .profile-image:hover {
      transform: scale(1.1);
      box-shadow: 0 10px 30px var(--shadow);
    }

    .profile-name {
      font-size: 1.8rem;
      font-weight: 600;
      color: var(--accent);
      margin-bottom: 0.5rem;
      transform: translateX(-10px);
      opacity: 0;
      animation: slideRight 0.6s ease 0.4s forwards;
    }

    @keyframes slideRight {
      from { 
        opacity: 0; 
        transform: translateX(-10px); 
      }
      to { 
        opacity: 1; 
        transform: translateX(0); 
      }
    }

    .social-links {
      display: flex;
      justify-content: center;
      gap: 1rem;
      margin-top: 1rem;
    }

    .social-links a {
      color: var(--text-secondary);
      text-decoration: none;
      display: flex;
      align-items: center;
      gap: 0.5rem;
      padding: 0.5rem 1rem;
      border-radius: 6px;
      transition: 
        all var(--transition-speed) ease;
      transform: scale(0.9);
      opacity: 0;
      animation: popIn 0.5s ease forwards;
    }

    @keyframes popIn {
      from { 
        opacity: 0; 
        transform: scale(0.9); 
      }
      to { 
        opacity: 1; 
        transform: scale(1); 
      }
    }

    .social-links a:hover {
      background-color: color-mix(in srgb, var(--accent) 10%, transparent);
      color: var(--accent);
      transform: scale(1.05);
    }

    .section {
      background-color: var(--surface);
      border: 1px solid var(--border);
      border-radius: 8px;
      padding: 1.5rem;
      margin-bottom: 1rem;
      transform: translateY(20px);
      opacity: 0;
      animation: staggeredSlideUp 0.6s ease 0.6s forwards;
    }

    @keyframes staggeredSlideUp {
      from { 
        opacity: 0; 
        transform: translateY(20px); 
      }
      to { 
        opacity: 1; 
        transform: translateY(0); 
      }
    }

    .section-title {
      font-size: 1.4rem;
      color: var(--accent);
      border-bottom: 2px solid var(--accent);
      padding-bottom: 0.5rem;
      margin-bottom: 1rem;
    }

    .theme-toggle {
      position: fixed;
      top: 1rem;
      right: 1rem;
      background-color: var(--accent);
      color: var(--surface);
      border: none;
      padding: 0.75rem 1.25rem;
      border-radius: 6px;
      cursor: pointer;
      display: flex;
      align-items: center;
      gap: 0.5rem;
      box-shadow: 0 4px 6px var(--shadow);
      z-index: 100;
      transition: 
        transform var(--transition-speed) ease,
        background-color var(--transition-speed) ease;
    }

    .theme-toggle:hover {
      transform: scale(1.1);
    }

    @media (max-width: 768px) {
      .container {
        grid-template-columns: 1fr;
        gap: 1rem;
      }

      .social-links {
        flex-wrap: wrap;
        justify-content: center;
      }
    }

    @media (prefers-reduced-motion: reduce) {
      * {
        transition: none !important;
        animation: none !important;
      }
    }
  </style>
</head>
<body data-theme="<%= @theme %>">
  <div class="loader">
    <div class="loader-spinner"></div>
  </div>

  <button class="theme-toggle" onclick="toggleTheme()">
    <i class="fas fa-adjust"></i> Switch Theme
  </button>

  <main class="container">
    <section class="profile">
      <img 
        src="https://cdn.discordapp.com/avatars/1266530258522345574/19e96721a4faf0e57bd299dc289f1370.png" 
        alt="Profile Picture" 
        class="profile-image" 
        loading="lazy"
      >
      <h1 class="profile-name">tensa</h1>
      <nav class="social-links">
        <a href="https://discord.com/users/1266530258522345574/" target="_blank" rel="noopener noreferrer">
          <i class="fab fa-discord"></i> Discord
        </a>
        <a href="https://www.youtube.com/@tensa-dev/" target="_blank" rel="noopener noreferrer">
          <i class="fab fa-youtube"></i> YouTube
        </a>
        <a href="https://github.com/serathinite" target="_blank" rel="noopener noreferrer">
          <i class="fab fa-github"></i> GitHub
        </a>
      </nav>
    </section>

    <div class="content">
      <section class="section">
        <h2 class="section-title">Bio</h2>
        <%= @bio %>
      </section>

      <section class="section">
        <h2 class="section-title">Blog</h2>
        <div class="entry">
          <p>Sunday, December 1, 2024 PT: Site created.</p>
        </div>
      </section>
    </div>
  </main>

  <script>
    (function() {
      function detectTheme() {
        const savedTheme = localStorage.getItem('site-theme');
        if (savedTheme) return savedTheme;

        return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
      }

      function setTheme(theme) {
        const body = document.body;
        const themeToggle = document.querySelector('.theme-toggle');
        
        body.style.opacity = '0';
        themeToggle.style.transform = 'scale(0.9)';
        
        setTimeout(() => {
          body.setAttribute('data-theme', theme);
          localStorage.setItem('site-theme', theme);
          
          body.style.animation = 'fadeIn 0.6s ease forwards';
          themeToggle.style.transform = 'scale(1)';
        }, 300);
      }

      document.addEventListener('DOMContentLoaded', () => {
        const loader = document.querySelector('.loader');
        const initialTheme = detectTheme();
        
        setTimeout(() => {
          loader.classList.add('hidden');
        }, 1500);

        setTheme(initialTheme);
      });

      window.toggleTheme = function() {
        const currentTheme = document.body.getAttribute('data-theme');
        const newTheme = currentTheme === 'light' ? 'dark' : 'light';
        setTheme(newTheme);
      };

      window.matchMedia('(prefers-color-scheme: dark)').addListener(e => {
        setTheme(e.matches ? 'dark' : 'light');
      });
    })();
  </script>
</body>
</html>