{{ define "main" }}
<!-- Navigation Bar -->
{{ partial "nav.html" . }}

<!-- Portfolio Single Hero -->
<section class="bg-gradient-to-b from-gray-900 to-gray-800 min-h-[40vh] flex flex-col items-center justify-center text-white py-16 px-4">
  <h1 class="text-4xl md:text-5xl lg:text-6xl font-extrabold text-center mb-4 drop-shadow-lg bg-gradient-to-r from-blue-400 via-pink-400 to-yellow-300 bg-clip-text text-transparent animate-breath">{{ .Title }}</h1>
  <div class="flex flex-col md:flex-row items-center justify-center gap-4 mb-2">
    <span class="text-lg md:text-xl text-blue-200 font-semibold">{{ .Date.Format "Jan 2, 2006" }}</span>
  </div>
</section>

<!-- Portfolio Description (caption) -->
{{ with .Params.description }}
  <div class="w-full flex justify-center">
    <p class="max-w-2xl text-center text-lg md:text-xl text-gray-200 mb-8 mt-2 px-4">{{ . }}</p>
  </div>
{{ end }}

<!-- Portfolio Content (Intro, Gallery, etc.) -->
<div class="w-full">
  {{ .Content | safeHTML }}
</div>

<style>
.animate-breath {
  animation: breath 6s ease-in-out infinite;
}
@keyframes breath {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.04); }
}
/* Add spacing above the grid for visual separation */
.grid {
  margin-top: 1.5rem;
}
</style>
{{ end }}