---
layout: layout.njk
---
<section class="content-container" aria-label="Main content">
  <aside class="sidebar" aria-label="Sidebar">
    
  </aside>

  <article class="main-content" aria-label="Main article">
    <div class="post-card">
      <div class="post-header">
        <span class="post-date">Last update: </span>
        <h2 class="post-title">~ introduction / about me ~</h2>
      </div>
      <div class="post-body">
        
        <img src="/assets/hi.webp" alt="welcome" style="width: 100%; margin: 10px auto 0; display: block; border-radius: 4px;" />
      </div>
      <div class="post-footer">
        
      </div>
    </div>

    <div class="post-card">
      <div class="post-header">
        <span class="post-date">Last update: </span>
        <h2 class="post-title">~ latest clients ~</h2>
      </div>
      <div class="post-body">
        <div class="clients-grid">
          
        </div>
        <img src="/assets/heyo.webp" alt="welcome" style="width: 100%; margin: 10px auto 0; display: block; border-radius: 4px;" />
      </div>
    </div>

    <div class="post-card">
      <div class="post-header">
        <span class="post-date">Last update: </span>
        <h2 class="post-title">~ tech stack ~</h2>
      </div>
      <div class="post-body stack-body">
        
      </div>
    </div>

    <div class="post-card">
      <div class="post-header">
        <span class="post-date">Last update: </span>
        <h2 class="post-title">~ projects ~</h2>
      </div>
      <div class="post-body">
        <ul class="project-list">
          
          <li><a href="https://example.com" target="_blank">Proyecto editorial experimental</a> — Diseño y estructura de un producto editorial web con enfoque en velocidad, claridad y mantenimiento simple.</li>
          
          <li><a href="https://example.com" target="_blank">Sistema de marca personal</a> — Página mínima para reunir perfil, portafolio, publicaciones y contacto en un solo lugar.</li>
          
        </ul>
      </div>
      <div class="post-footer">
        <span class="post-tag">projects</span><span class="post-tag">web</span><span class="post-tag">editorial</span>
      </div>
    </div>
  </article>

  <aside class="sidebar sidebar--right" aria-label="Right sidebar">
    <div class="widget">
      <div class="widget-title">~ socials</div>
      <img src="/assets/neko.jpg" alt="" style="width: 100%;" aria-hidden="true" />
      <div class="widget-body">
        <div class="social-list">
          
        </div>
      </div>
    </div>

    

    <div class="widget">
      <div class="widget-title">~ mood</div>
      <div class="widget-body" style="padding: 0; background: #000;">
        <img src="" alt="mood" style="width: 100%; display: block;" />
      </div>
    </div>

    <div class="widget">
      <div class="widget-title">~ blog (Latest)</div>
      <div class="widget-body">
        <div class="social-list" style="text-align: center;">
          
          <a href="/blog/post-01/" class="social-link blog-item"><span class="blog-post-title">Por qué un sitio personal no necesita un stack pesado</span></a>
          
          <a href="/blog/post-02/" class="social-link blog-item"><span class="blog-post-title">Git como CMS realista</span></a>
          
          <a href="/blog/" class="social-link blog-item"><span>View all posts</span></a>
        </div>
      </div>
    </div>

    <div class="widget">
      <div class="widget-title">~ hits</div>
      <div class="widget-body hits-body">
        <div class="hit-counter"></div>
        <p class="hit-label">visitors ♥</p>
      </div>
    </div>
  </aside>
</section>