91 lines
3.1 KiB
HTML
91 lines
3.1 KiB
HTML
<div class="w-full rounded-2xl bg-pink-950">
|
|
|
|
<div class="p-6 justify-between h-full">
|
|
|
|
<!-- Header -->
|
|
<div class="flex flex-col">
|
|
<div class="flex flex-row">
|
|
{% match project.logo %}
|
|
{% when Some with (logo) %}
|
|
|
|
{% let css_logo -%}
|
|
{# If css updates make sure to update in both places! #}
|
|
{% if logo.transparent_background == true -%}
|
|
{% let css_logo = "h-16 w-16 rounded-xl mr-4 p-2 bg-white" -%}
|
|
{% else -%}
|
|
{% let css_logo = "h-16 w-16 rounded-xl mr-4" -%}
|
|
{% endif -%}
|
|
<img loading="lazy" src="{{ logo.file }}" alt="{{ project.name }} logo" class="{{ css_logo }}">
|
|
|
|
{% when None %}
|
|
{% endmatch %}
|
|
|
|
<div class="flex flex-col justify-evenly">
|
|
<div class="text-xl md:text-2xl font-semibold">{{ project.name }}</div>
|
|
<div class="text-xs md:text-sm">{{ project.dates }}</div>
|
|
</div>
|
|
</div>
|
|
<p class="text-xl md:text-2xl font-semibold my-4">{{ project.tagline }}</p>
|
|
</div>
|
|
|
|
<!-- Content -->
|
|
<div class="space-y-2">
|
|
<!-- Description -->
|
|
{% for desc in project.description %}
|
|
<p>{{ desc }}</p>
|
|
{% endfor %}
|
|
|
|
<!-- Accomplishments -->
|
|
<div>
|
|
<ul class="list-disc mt-6">
|
|
{% for accomplishment in project.accomplishments %}
|
|
<li class="ml-5">{{ accomplishment }}</li>
|
|
{% endfor %}
|
|
</ul>
|
|
</div>
|
|
|
|
<!-- Technologies -->
|
|
<div>
|
|
<div class="text-xl font-semibold mt-8 mb-2">
|
|
Technologies
|
|
</div>
|
|
<ul>
|
|
{% for technology in project.technologies %}
|
|
<li>{{ technology }}</li>
|
|
{% endfor %}
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Link with label -->
|
|
{% match project.link %}
|
|
|
|
{% when Some with (link) %}
|
|
{% match link %}
|
|
|
|
{% when ProjectLink::Available(project_link) %}
|
|
<a
|
|
href="{{ project_link.uri }}"
|
|
target="_blank"
|
|
class="mt-4 inline-flex max-w-fit bg-transparent hover:bg-sky-700 text-white font-semibold py-1.5 px-4 rounded-xl items-center border border-white hover:border-transparent transition-all duration-200"
|
|
>
|
|
<div class="inline-flex items-center">
|
|
{% include "icons/link.html" %}
|
|
<span>{{ project_link.label }}</span>
|
|
</div>
|
|
</a>
|
|
|
|
<!-- Link is not available -->
|
|
{% when ProjectLink::NotAvailable %}
|
|
<span class="mt-4 cursor-not-allowed inline-flex max-w-fit bg-gray-400 text-gray-600 font-semibold py-1.5 px-4 rounded-xl items-center">
|
|
No longer available
|
|
</span>
|
|
|
|
{% endmatch %}
|
|
<!-- No link -->
|
|
{% when None %}
|
|
{% endmatch %}
|
|
|
|
</div>
|
|
|
|
</div>
|