gabrielkaszewski_rs/assets/views/website/macros/project_item.html

{% import "website/macros/chip.html" as chip %}
{% import "website/macros/image_carousel.html" as image_carousel %}
{% macro project_item(project) %}
<script src="/static/js/project-item.js"></script>

<div class="flex items-center justify-between w-full h-full gap-4 text-white">
    <div class="flex flex-col w-full gap-4 m-4 md:w-1/3">
        <div class="prose">
            <h1 class="text-white">{{ project.name }}</h1>
            <p class="text-white whitespace-pre-wrap">{{ project.short_description }}</p>
        </div>
        <div class="flex flex-wrap justify-center gap-2 md:justify-start">
            {% for technology in project.technologies %}
                {{ chip::chip(text=technology) }}
            {% endfor %}
        </div>
        <a href="/projects/{{ project.name }}"
           class="w-full p-2 text-center border border-yellow-400 rounded-xl hover:bg-yellow-400">Read more</a>
        <div class="flex flex-wrap gap-2 sm:justify-center md:justify-start">
            {% if project.githubUrl %}
                <a href="{{ project.github_url }}" target="_blank" rel="noopener noreferrer"
                   class="w-full p-2 text-center border border-yellow-400 rounded-xl hover:bg-yellow-400">
                    <span class="fa-brands fa-github"></span>
                    CODE
                </a>
            {% endif %}
            {% if project.visitUrl %}
                <a href="{{ project.visit_url }}" target="_blank" rel="noopener noreferrer"
                   class="w-full p-2 text-center border border-yellow-400 rounded-xl hover:bg-yellow-400">
                    <span class="fas fa-eye"></span>
                    LIVE
                </a>
            {% endif %}
            {% if project.downloadUrl %}
                <a href="{{ project.download_url }}" target="_blank" rel="noopener noreferrer"
                   class="w-full p-2 text-center border border-yellow-400 rounded-xl hover:bg-yellow-400">
                    <span class="fas fa-cloud-download-alt"></span>
                    DOWNLOAD
                </a>
            {% endif %}
        </div>
        {% if project.thumbnails|length > 0 %}
            <div class="w-full m-2 md:hidden">
                {% set carousel_id = "carousel-mobile-" ~ project.id %}
                {{ image_carousel::image_carousel(id=carousel_id, thumbnails=project.thumbnails) }}
        </div>
        {% endif %}
        {% if project.thumbnails|length == 0 %}
            <div class="w-full m-2 md:hidden">
            <div class="bg-gradient-to-r from-violet-600 to-indigo-600 shadow-lg w-full max-w-full md:max-w-[50hw] h-[40rem] flex items-center justify-center">
            {% if project.category == "Desktop" %}
                <svg title="desktop" xmlns="http://www.w3.org/2000/svg" width="256" height="256" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-app-window"><rect x="2" y="4" width="20" height="16" rx="2"/><path d="M10 4v4"/><path d="M2 8h20"/><path d="M6 4v4"/></svg>
            {% endif %}
            {% if project.category == "Mobile" %}
            <svg title="mobile" xmlns="http://www.w3.org/2000/svg" width="256" height="256" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-smartphone"><rect width="14" height="20" x="5" y="2" rx="2" ry="2"/><path d="M12 18h.01"/></svg>
            {%endif%}
            {% if project.category == "Web" %}
            <svg title="web" xmlns="http://www.w3.org/2000/svg" width="256" height="256" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-globe"><circle cx="12" cy="12" r="10"/><path d="M12 2a14.5 14.5 0 0 0 0 20 14.5 14.5 0 0 0 0-20"/><path d="M2 12h20"/></svg>
            {%endif%}
            {% if project.category == "Api" %}
            <svg title="API" xmlns="http://www.w3.org/2000/svg" width="256" height="256" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-monitor-cog"><path d="M12 17v4"/><path d="m15.2 4.9-.9-.4"/><path d="m15.2 7.1-.9.4"/><path d="m16.9 3.2-.4-.9"/><path d="m16.9 8.8-.4.9"/><path d="m19.5 2.3-.4.9"/><path d="m19.5 9.7-.4-.9"/><path d="m21.7 4.5-.9.4"/><path d="m21.7 7.5-.9-.4"/><path d="M22 13v2a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h7"/><path d="M8 21h8"/><circle cx="18" cy="6" r="3"/></svg>
            {%endif%}
            {% if project.category == "Game" %}
            <svg title="game" xmlns="http://www.w3.org/2000/svg" width="256" height="256" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-gamepad-2"><line x1="6" x2="10" y1="11" y2="11"/><line x1="8" x2="8" y1="9" y2="13"/><line x1="15" x2="15.01" y1="12" y2="12"/><line x1="18" x2="18.01" y1="10" y2="10"/><path d="M17.32 5H6.68a4 4 0 0 0-3.978 3.59c-.006.052-.01.101-.017.152C2.604 9.416 2 14.456 2 16a3 3 0 0 0 3 3c1 0 1.5-.5 2-1l1.414-1.414A2 2 0 0 1 9.828 16h4.344a2 2 0 0 1 1.414.586L17 18c.5.5 1 1 2 1a3 3 0 0 0 3-3c0-1.545-.604-6.584-.685-7.258-.007-.05-.011-.1-.017-.151A4 4 0 0 0 17.32 5z"/></svg>
            {%endif%}
            </div>
        </div>
        {% endif %}
    </div>
    {% if project.thumbnails|length > 0 %}
        <div class="hidden m-2 md:flex md:w-1/2">
            {% set carousel_id = "carousel-desktop-" ~ project.id %}
            {{ image_carousel::image_carousel(id=carousel_id, thumbnails=project.thumbnails) }}
        </div>
    {% endif %}
    {% if project.thumbnails|length == 0 %}
        <div class="hidden m-2 md:flex md:w-1/2">
            <div class="bg-gradient-to-r from-violet-600 to-indigo-600 shadow-lg w-full max-w-full md:max-w-[50hw] h-[40rem] flex items-center justify-center">
            {% if project.category == "Desktop" %}
                <svg title="desktop" xmlns="http://www.w3.org/2000/svg" width="256" height="256" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-app-window"><rect x="2" y="4" width="20" height="16" rx="2"/><path d="M10 4v4"/><path d="M2 8h20"/><path d="M6 4v4"/></svg>
            {% endif %}
            {% if project.category == "Mobile" %}
            <svg title="mobile" xmlns="http://www.w3.org/2000/svg" width="256" height="256" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-smartphone"><rect width="14" height="20" x="5" y="2" rx="2" ry="2"/><path d="M12 18h.01"/></svg>
            {%endif%}
            {% if project.category == "Web" %}
            <svg title="web" xmlns="http://www.w3.org/2000/svg" width="256" height="256" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-globe"><circle cx="12" cy="12" r="10"/><path d="M12 2a14.5 14.5 0 0 0 0 20 14.5 14.5 0 0 0 0-20"/><path d="M2 12h20"/></svg>
            {%endif%}
            {% if project.category == "Api" %}
            <svg title="API" xmlns="http://www.w3.org/2000/svg" width="256" height="256" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-monitor-cog"><path d="M12 17v4"/><path d="m15.2 4.9-.9-.4"/><path d="m15.2 7.1-.9.4"/><path d="m16.9 3.2-.4-.9"/><path d="m16.9 8.8-.4.9"/><path d="m19.5 2.3-.4.9"/><path d="m19.5 9.7-.4-.9"/><path d="m21.7 4.5-.9.4"/><path d="m21.7 7.5-.9-.4"/><path d="M22 13v2a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h7"/><path d="M8 21h8"/><circle cx="18" cy="6" r="3"/></svg>
            {%endif%}
            {% if project.category == "Game" %}
            <svg title="game" xmlns="http://www.w3.org/2000/svg" width="256" height="256" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-gamepad-2"><line x1="6" x2="10" y1="11" y2="11"/><line x1="8" x2="8" y1="9" y2="13"/><line x1="15" x2="15.01" y1="12" y2="12"/><line x1="18" x2="18.01" y1="10" y2="10"/><path d="M17.32 5H6.68a4 4 0 0 0-3.978 3.59c-.006.052-.01.101-.017.152C2.604 9.416 2 14.456 2 16a3 3 0 0 0 3 3c1 0 1.5-.5 2-1l1.414-1.414A2 2 0 0 1 9.828 16h4.344a2 2 0 0 1 1.414.586L17 18c.5.5 1 1 2 1a3 3 0 0 0 3-3c0-1.545-.604-6.584-.685-7.258-.007-.05-.011-.1-.017-.151A4 4 0 0 0 17.32 5z"/></svg>
            {%endif%}
            </div>
        </div>
    {% endif %}
</div>
{% endmacro project_item %}