plcom/templates/pages/root/jobs.html

64 lines
2.5 KiB
HTML

<div>
<h1 class="text-4xl font-bold mb-4">Professional Experiences</h1>
<div class="mt-4 grid grid-cols-1 sm:grid-cols-2 gap-4">
{% for job in jobs %}
<div class="w-full rounded-2xl bg-sky-950">
<div class="p-6 justify-between h-full">
<!-- Header -->
<div class="flex flex-col">
<div class="flex flex-row">
{% let css -%}
{# If css updates make sure to update in both places! #}
{% if job.logo.transparent_background == true -%}
{% let css = "h-16 w-16 rounded-xl mr-4 p-2 bg-white" -%}
{% else -%}
{% let css = "h-16 w-16 rounded-xl mr-4" -%}
{% endif -%}
<img loading="lazy" src="{{ job.logo.file }}" alt="{{ job.company }} logo" class="{{ css }}">
<div class="flex flex-col justify-evenly">
<div class="text-xl md:text-2xl font-semibold">{{ job.company }}</div>
<div class="text-xs md:text-sm">{{ job.dates }}</div>
</div>
</div>
<p class="text-xl md:text-2xl font-semibold my-4">{{ job.title }}</p>
</div>
<!-- Content -->
<div class="space-y-2">
<!-- Description -->
{% for desc in job.description %}
<p>{{ desc }}</p>
{% endfor %}
<!-- Accomplishments -->
<div>
<ul class="list-disc mt-6">
{% for accomplishment in job.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 job.technologies %}
<li>{{ technology }}</li>
{% endfor %}
</ul>
</div>
</div>
</div>
</div>
{% endfor %}
</div>
</div>