<!DOCTYPE html>
<html>
<head>
  <title><%= title %></title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;700&family=Roboto:wght@400;700&display=swap" rel="stylesheet">
  <link href="/css/styles.css" rel="stylesheet">
</head>
<body>
  <div class="container-fluid">
    <div class="row">
      <nav class="col-md-3 col-lg-2 d-md-block sidebar ">
        <div class="position-sticky">
          <ul class="nav flex-column">
            <li class="nav-item">
              <a class="nav-link active" aria-current="page" href="/">
                <img src="/profilePic.jpg" alt="Profile Picture" class="profile-picture">
              </a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="/blog">Blogs</a>
            </li>
            <!-- Social Media Links -->
            <li class="nav-item">
              <a class="nav-link" href="https://x.com/metachaser24" target="_blank">Twitter</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="https://github.com/metachaser24" target="_blank">GitHub</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="https://www.cr3dentials.xyz" target="_blank">Cr3dentials</a>
            </li>
          </ul>
        </div>
      </nav>
      <main class="col-md-9 ms-sm-auto col-lg-10 px-md-4 main-content">
        <h1 class="display-2">Elo's Lens</h1>
        <p>Hello everyone, my name is Elo, I started this page because I am TIRED of leaving everything in my brain. I need an outlet, a place to breathe, a place where I can truly voice my opinions on a multitude of topics. Focuses being in technology and life in general. I'll primarily write about blockchains, cryptography, finance and other things I find interesting. I'm a self taught dev, and currently, I work at Privacy and Scaling Explorations (PSE) where we explore and apply the world of zero knowledge to real world applications.  </p>
        <!-- Writings Section -->
        <section>
            <h2>Cryptography</h2>
            <ul class="list-unstyled">
              <% blogs.filter(blog => blog.category === 'Cryptography').forEach(function(blog) { %>
                <li>
                  <h4>
                    <a href="<%= blog.type === 'internal' ? blog.url : blog.url %>">
                      <%= blog.title %>
                    </a>
                  </h4>
                  <p><small class="date"><%= blog.formattedDate %></small> <%= blog.excerpt %></p>
                </li>
              <% }); %>
            </ul>
          </section>
        <section>
          <h2>Think Pieces</h2>
          <ul class="list-unstyled">
            <% blogs.filter(blog => blog.category === 'Think Pieces').forEach(function(blog) { %>
              <li>
                <h4>
                  <a href="<%= blog.type === 'internal' ? blog.url : blog.url %>">
                    <%= blog.title %>
                  </a>
                </h4>
                <p><small class="date"><%= blog.formattedDate %></small> <%= blog.excerpt %></p>
              </li>
            <% }); %>
          </ul>
        </section>
        <section>
            <h2>Real World Assets(RWAs)</h2>
            <ul class="list-unstyled">
              <% blogs.filter(blog => blog.category === 'Real World Assets').forEach(function(blog) { %>
                <li>
                  <h4>
                    <a href="<%= blog.type === 'internal' ? blog.url : blog.url %>">
                      <%= blog.title %>
                    </a>
                  </h4>
                  <p><small class="date"><%= blog.formattedDate %></small> <%= blog.excerpt %></p>
                </li>
              <% }); %>
            </ul>
          </section>
      </main>
    </div>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>