Files
indiekit-blog/_includes/components/sections/cv-experience.njk
Ricardo 155816a0bc feat: replace all primary (blue) with contextual colors across entire theme
Eliminate monotonous blue by replacing ~290 primary- references in 60 files
with semantically appropriate colors:

- accent (teal): links, CTAs, buttons, tabs, focus rings, spinners
- purple: Funkwhale/music, photos, Mastodon/fediverse
- surface (neutral): GitHub, dates/metadata, info boxes
- amber: bookmarks, blogroll categories
- red: likes
- green: reposts
- sky: replies
- orange: RSS/feeds, podcasts
- #0085ff: Bluesky brand
- #a730b8: Mastodon brand

Also updates prose link colors in tailwind.config.js, pagefind UI
primary color to teal, and client-side JS color references.

Confab-Link: http://localhost:8080/sessions/bd3f7012-c703-47e9-bfe2-2ad04ce1842d
2026-03-04 12:50:19 +01:00

49 lines
2.1 KiB
Plaintext
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
{#
CV Experience Section - work experience timeline
Data fetched from /cv/data.json via homepage plugin
#}
{% set sectionConfig = section.config or {} %}
{% set maxItems = sectionConfig.maxItems or 10 %}
{% set showHighlights = sectionConfig.showHighlights if sectionConfig.showHighlights is defined else true %}
{% if cv and cv.experience and cv.experience.length %}
<section class="mb-8 sm:mb-12" id="experience">
<h2 class="text-xl sm:text-2xl font-bold text-surface-900 dark:text-surface-100 mb-4 sm:mb-6">
{{ sectionConfig.title or "Experience" }}
</h2>
<div class="space-y-4">
{% for item in cv.experience | head(maxItems) %}
{% if not filterType or item.experienceType == filterType or not item.experienceType %}
<div class="relative pl-6 border-l-2 border-accent-300 dark:border-accent-700">
<div class="absolute -left-[7px] top-1 w-3 h-3 rounded-full bg-accent-500"></div>
<h3 class="font-semibold text-surface-900 dark:text-surface-100">{{ item.title }}</h3>
<p class="text-sm text-surface-600 dark:text-surface-400">
{{ item.company }}{% if item.location %} &middot; {{ item.location }}{% endif %}
{% if item.type %} &middot; <span class="capitalize">{{ item.type }}</span>{% endif %}
</p>
{% if item.startDate %}
<p class="text-xs text-surface-500 mt-0.5">
{{ item.startDate }}{% if item.endDate %} {{ item.endDate }}{% else %} Present{% endif %}
</p>
{% endif %}
{% if item.description %}
<p class="text-sm text-surface-700 dark:text-surface-300 mt-2">{{ item.description }}</p>
{% endif %}
{% if showHighlights and item.highlights and item.highlights.length %}
<div class="flex flex-wrap gap-1.5 mt-2">
{% for h in item.highlights %}
<span class="px-2.5 py-1 bg-white dark:bg-surface-800 border border-surface-200 dark:border-surface-700 rounded-full text-xs text-surface-700 dark:text-surface-300">
{{ h }}
</span>
{% endfor %}
</div>
{% endif %}
</div>
{% endif %}
{% endfor %}
</div>
</section>
{% endif %}