Files
indiekit-blog/_includes/components/sections/cv-experience.njk
Ricardo 8e393e215d feat: warm palette overhaul — cold zinc/teal to warm stone/amber
Replace the entire color system with a design-driven warm palette:

- Surface tokens: cold zinc grays → warm stone (#faf8f5 to #0f0e0d)
- Accent tokens: cold teal → warm amber (#fffbeb to #451a03)
- All bg-white → bg-surface-50 across templates (warm cream instead of pure white)
- Critical CSS: all hardcoded hex values updated to warm palette
- Prism code blocks: cold gray backgrounds → warm stone
- Pagefind search UI: blue buttons/links → amber interactive colors
- Dark mode: warm dark surfaces with amber accents throughout

Design system documented in .interface-design/system.md

Confab-Link: http://localhost:8080/sessions/bd3f7012-c703-47e9-bfe2-2ad04ce1842d
2026-03-04 14:02:59 +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-surface-50 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 %}