{{/* layouts/partials/profile.html */}}
<div class="flex flex-col items-center mb-8">
    {{ with .Params.profileImage }}
      {{/* strip leading “/” if present, otherwise leave as-is */}}
      {{ $img := replaceRE "^/" "" . }}
      <img src="{{ $img }}"
           alt="{{ $.Params.name }}"
           class="profile-pic mb-4">
    {{ end }}
    <h1 class="text-3xl font-bold mb-2 text-center" style="color: var(--text-color)">
      {{ .Params.name }}
    </h1>
    <p class="text-center opacity-80 mb-6">{{ .Params.description }}</p>
  
    <div class="flex flex-wrap justify-center gap-4 mb-8 social-icons">
      {{ range .Params.socials }}
        <a href="{{ .url }}" class="text-xl" target="_blank" rel="noopener">
          <i class="{{ .icon }} icon"></i>
        </a>
      {{ end }}
    </div>
</div>