<p class="text-3xl font-bold">My projects:</p>

<div class="grid md:grid-cols-3 gap-4 mt-4 sm:grid-cols-2 grid-cols-1">
  <% @projects.each do |project| %>
    <%= link_to project_path(repo: project.repo, project_name: project.project_name), class: "block bg-[#2E2A54] max-w-4xl py-8 px-8 rounded-lg text-white hover:bg-[#3A3A6D] transition duration-100" do %>
      <h1 class="text-2xl"><%= project.name %> <span class="text-base text-[#96ABF9]">(<%= project.github_slug %>)</span></h1>
      <p class="mb-2">created by <span class="text-[#96ABF9]">[<%= project.author %>]</span></p>
      <p class="opacity-70"><%= project.description %></p>
      <p class="opacity-70 mt-2">Started on <%= project.formatted_created_at %></p>
    <% end %>
  <% end %>
</div>

<p class="text-3xl font-bold mt-8">Explore projects:</p>
