{{ define "main" }}
{{ partial "nav.html" . }}
<div
    class="rounded flex dark:bg-black justify-center items-center h-screen w-full bg-[repeating-linear-gradient(transparent,transparent_27px,#333_28px)] dark:bg-[repeating-linear-gradient(transparent,transparent_27px,#aaa_28px)] bg-[size:100%_28px] shadow-[0_4px_6px_-1px_rgb(107,114,128)]"
>
    <div
        class="bg-cyan-200 dark:bg-emerald-500 border-2 dark:border-white rounded-lg p-2"
    >
        <div class="flex flex-col sm:flex-row items-center">
            <img
                src="fede.jpg"
                class="w-22 object-cover rounded-lg border-4 border-gray-400 grayscale hover:grayscale-0 z-0"
            />

            <div class="hidden sm:flex flex-col items-center p-2">
                <div class="w-[2px] h-16 bg-black"></div>
            </div>
            <p
                class="underline font-serif font-bold text-2xl md:text-4xl lg:text-5xl self-center"
            >
                {{ .Site.Params.author }}
            </p>
        </div>
        <p class="font-mono font-light">
            {{ if .Site.Params.leyenda }} {{ .Site.Params.leyenda }} {{ end }}
        </p>
    </div>
    <div class="absolute bottom-8 flex justify-center w-full animate-bounce">
        <svg width="40" height="20" viewBox="0 0 40 20">
            <defs>
                <linearGradient id="grad" x1="0%" y1="0%" x2="100%" y2="100%">
                    <stop offset="0%" style="stop-color: #ff0000" />
                    <stop offset="100%" style="stop-color: #ffff00" />
                </linearGradient>
            </defs>
            <path d="M0 0 L20 20 L40 0 Z" fill="url(#grad)" />
        </svg>
    </div>
</div>
<hr class="m-4" />

<div class="flex justify-center p-8 flex-col items-center bg-teal-200 rounded-t-lg shadow-md">
    <p
        class="underline font-serif font-bold text-2xl md:text-4xl lg:text-5xl self-center"
    >
    Sitemap
    </p>

    {{partial "sitemap.html"}}
</div>

<hr class="m-4" />
<!-- Aca esta la parte de abajo de la portada -->

<div class="flex justify-center p-8 flex-col items-center bg-sky-200 rounded-t-lg shadow-md">
    <p
        class="underline font-serif font-bold text-2xl md:text-4xl lg:text-5xl self-center"
    >
        Portfolio
    </p>
    {{partial "proyectos.html" .}}
    {{partial "posts.html" .}}
</div>
{{ end }}