Content & design amendments, following feedback from the ex-KNP crew 💙

myresume/data/en/document.toml

@@ -1,6 +1,9 @@
-subtitle = "Passionate Web developer since 1999"
+# This subtitle may actually look a bit odd on something as formal as a CV...
+# subtitle = "Passionate Web developer since 1999"
+# ...so let's just use a more traditional one:
+subtitle = "Python & JavaScript web developer"
 
 [meta]
-title =  "Olivier Philippon - Web developer since 1999"
-description = "Olivier Philippon - Web Developer since 1999 - Django and JavaScript developer"
-keywords = ["web development", "resume", "python", "django", "postgresql"]
+title =  "Olivier Philippon - Passionate web developer since 1999"
+description = "Olivier Philippon - Web Developer since 1999 - Python and JavaScript developer"
+keywords = ["web development", "resume", "python", "django", "node.js", "typescript"]

myresume/data/en/i18n.toml

@@ -4,7 +4,7 @@ language = "language:"
 theme = "switch to theme:"
 
 [open_source_projects]
-title = "Open Source projects"
+title = "Open Source"
 
 [hobbies]
 title = "Hobbies"
@@ -13,12 +13,12 @@ content = "Running, bouldering"
 [side_projects]
 title = "Side projects"
 content = """
-<a href="https://zakuchess.com/" class="underline" target="_blank" rel="noopener">ZakuChess ♞</a>,
-my open source Web game.
+<a href="https://zakuchess.com/" class="underline" target="_blank" rel="noopener">ZakuChess</a>,
+my open source Web game ♞.
 """
 
 [teaching]
-title = "Web development Teacher"
+title = "Teaching"
 content = """
 HTML/CSS, JavaScript and Flash teacher for
 <a href="https://www.digital-campus.fr/" class="underline" target="_blank" rel="noopener">Digital Campus</a>

myresume/data/en/projects.toml

@@ -64,8 +64,8 @@ not_on_pdf = true
 title = "LeMonde.fr"
 content = """
 <span class="tech tech-with-icon nodejs">Node.js</span> and
-<span class="tech tech-with-icon javascript">frontend</span>
-developer at <a href="https://www.lemonde.fr/">LeMonde.fr</a>, one of the main French news web site."""
+<span class="tech tech-with-icon javascript">Backbone.js</span>
+developer at <a href="https://www.lemonde.fr/">LeMonde.fr</a>, one of the main French news websites."""
 [[projects]]
 title = "Ruby on Rails Mail App"
 content = """

myresume/data/fr/document.toml

@@ -1,4 +1,7 @@
-subtitle = "Développeur Web passionné depuis 1999"
+# This subtitle may actually look a bit odd on something as formal as a CV...
+#subtitle = "Développeur Web passionné depuis 1999"
+# ...so let's just use a more traditional one:
+subtitle = "Développeur web Python & JavaScript"
 
 [meta]
 title =  "Olivier Philippon - Développeur Web depuis 1999"

myresume/data/fr/i18n.toml

@@ -4,7 +4,7 @@ language = "langue :"
 theme = "passer au thème :"
 
 [open_source_projects]
-title = "Projets Open Source"
+title = "Open Source"
 
 [hobbies]
 title = "Centres d'intérêts"
@@ -13,12 +13,12 @@ content = "Course à pied, bloc"
 [side_projects]
 title = "Projets personnels"
 content = """
-<a href="https://zakuchess.com/" class="underline" target="_blank" rel="noopener">ZakuChess ♞</a>,
-mon jeu Web open source.
+<a href="https://zakuchess.com/" class="underline" target="_blank" rel="noopener">ZakuChess</a>,
+mon jeu Web open source ♞.
 """
 
 [teaching]
-title = "Formateur en développement Web"
+title = "Formateur"
 content = """
 Enseignant pour l'école
 <a href="https://www.digital-campus.fr/" class="underline" target="_blank" rel="noopener">Digital Campus</a>

myresume/data/fr/projects.toml

@@ -66,7 +66,7 @@ title = "LeMonde.fr"
 content = """
 Développeur
 <span class="tech tech-with-icon nodejs">Node.js</span> et
-<span class="tech tech-with-icon javascript">frontend</span>
+<span class="tech tech-with-icon javascript">Backbone.js</span>
 chez <a href="https://www.lemonde.fr/">LeMonde.fr</a>."""
 [[projects]]
 title = "Ruby on Rails Mail App"

myresume/templates/myresume/about/_base_section.html

@@ -0,0 +1,8 @@
+<section class="mb-4">
+    {% block caption %}
+    {% endblock caption %}
+
+    {% block content %}
+    {% endblock content %}
+
+</section>

myresume/templates/myresume/about/bio.html

@@ -1,18 +1,20 @@
-{% load static myresume_tags %}
+{% extends "myresume/about/_base_section.html" %}
 
-<section>
-    {% svg_icon "bio" classes="size-8 print:size-6" %}
-    <div class="mt-4">
-        <p>
-            <span itemprop="name">{{ bio_data.name }}</span>
-        </p>
+{% load myresume_tags %}
+
+{% block caption %}
+    {% about_section_caption bio_data.name icon="bio" itemprop="name" %}
+{% endblock caption %}
+
+{% block content %}
+    <div>
         <p>
             <a itemprop="email" href="mailto:{{ bio_data.email }}" class="underline">{{ bio_data.email }}</a>
         </p>
         <meta itemprop="jobTitle" content="{{ bio_data.job_title }}" />
         <meta itemprop="url" content="{{ bio_data.url }}" />
     </div>
-    <div class="mt-4">
+    <div class="mt-3">
         <p>
             <span>LinkedIn:</span>
             <br>
@@ -23,7 +25,7 @@
                rel="noopener">{{ bio_data.linked_in }}</a>
         </p>
     </div>
-    <div class="mt-4">
+    <div class="mt-3">
         <p>
             <span>My DevBlog:</span>
             <br>
@@ -34,7 +36,7 @@
                rel="noopener">{{ bio_data.devblog | cut:"https://" }}</a>
         </p>
     </div>
-    <div class="mt-4">
+    <div class="mt-3">
         <p>
             <span>Mastodon:</span>
             <br>
@@ -45,4 +47,4 @@
                rel="noopener">{{ bio_data.mastodon | cut:"https://" }}</a>
         </p>
     </div>
-</section>
+{% endblock content %}

myresume/templates/myresume/about/education.html

@@ -1,12 +1,16 @@
+{% extends "myresume/about/_base_section.html" %}
+
 {% load myresume_tags %}
 
-<section>
-    {% svg_icon "education" classes="size-8 print:size-6" %}
-    {% about_section_title i18n_data.education.title %}
+{% block caption %}
+    {% about_section_caption i18n_data.education.title icon="education" %}
+{% endblock caption %}
+
+{% block content %}
     <p>
         {{ i18n_data.education.src }}
         <br />
         <i>{{ i18n_data.education.src_details }}</i>
     </p>
     <p class="mt-2">{{ i18n_data.education.baccalaureate }}</p>
-</section>
+{% endblock content %}

myresume/templates/myresume/about/hobbies.html

@@ -1,7 +1,11 @@
+{% extends "myresume/about/_base_section.html" %}
+
 {% load myresume_tags %}
 
-<section>
-    {% svg_icon "hobbies" classes="size-8 print:size-6" %}
-    {% about_section_title i18n_data.hobbies.title %}
+{% block caption %}
+    {% about_section_caption i18n_data.hobbies.title icon="hobbies" %}
+{% endblock caption %}
+
+{% block content %}
     <p itemprop="knowsAbout">{{ i18n_data.hobbies.content }}</p>
-</section>
+{% endblock content %}

myresume/templates/myresume/about/languages.html

@@ -1,9 +1,13 @@
+{% extends "myresume/about/_base_section.html" %}
+
 {% load myresume_tags %}
 
-<section>
-    {% svg_icon "languages" classes="size-8 print:size-6" %}
-    {% about_section_title i18n_data.languages.title %}
+{% block caption %}
+    {% about_section_caption i18n_data.languages.title icon="languages" %}
+{% endblock caption %}
+
+{% block content %}
     {% for lang in i18n_data.languages.list %}
         <p itemprop="knowsLanguage">{{ lang }}</p>
     {% endfor %}
-</section>
+{% endblock content %}

myresume/templates/myresume/about/open_source.html

@@ -1,13 +1,17 @@
+{% extends "myresume/about/_base_section.html" %}
+
 {% load myresume_tags %}
 
-<section>
-    {% svg_icon "open-source" classes="size-8 print:size-6" %}
-    {% about_section_title i18n_data.open_source_projects.title %}
+{% block caption %}
+    {% about_section_caption i18n_data.open_source_projects.title icon="open-source" %}
+{% endblock caption %}
+
+{% block content %}
     <p>
         <a class="underline"
            href="https://github.com/{{ bio_data.github_id }}"
            itemprop="sameAs"
            target="_blank"
            rel="noopener">github.com/{{ bio_data.github_id }}</a>
     </p>
-</section>
+{% endblock content %}

myresume/templates/myresume/about/side_projects.html

@@ -1,7 +1,11 @@
+{% extends "myresume/about/_base_section.html" %}
+
 {% load myresume_tags %}
 
-<section>
-    {% svg_icon "side-projects" classes="size-8 print:size-6" %}
-    {% about_section_title i18n_data.side_projects.title %}
+{% block caption %}
+    {% about_section_caption i18n_data.side_projects.title icon="side-projects" %}
+{% endblock caption %}
+
+{% block content %}
     <p itemprop="owns">{{ i18n_data.side_projects.content|safe }}</p>
-</section>
+{% endblock content %}

myresume/templates/myresume/about/tags/_about_section_caption.html

@@ -0,0 +1,6 @@
+{% load myresume_tags %}
+
+<div class="flex items-center mb-1">
+    {% svg_icon icon classes="-ml-0.5 inline-block size-8 print:size-6" %}
+    <span class="inline-block ml-1" {{ itemprop_attr }}>{{ title }}</span>
+</div>

myresume/templates/myresume/about/teaching.html

@@ -1,7 +1,11 @@
+{% extends "myresume/about/_base_section.html" %}
+
 {% load myresume_tags %}
 
-<section>
-    {% svg_icon "teaching" classes="size-8 print:size-6" %}
-    {% about_section_title i18n_data.teaching.title %}
+{% block caption %}
+    {% about_section_caption i18n_data.teaching.title icon="teaching" %}
+{% endblock caption %}
+
+{% block content %}
     <p>{{ i18n_data.teaching.content|safe }}</p>
-</section>
+{% endblock content %}

myresume/templates/myresume/main.html

@@ -1,11 +1,11 @@
 {% load myresume_tags %}
 
 <main class="w-full p-1 md:p-6 print:p-2 {% layout_debug border_color="purple-800" %}">
-    <div class="mt-14 mb-8 md:!mt-2 print:mb-1">
-        <h1 class="-ml-1 my-2 text-5xl md:text-6xl font-medium {% theme element_id="TITLE" %} md:-ml-2 print:!text-5xl print:my-0">
+    <div class="mt-14 mb-8 md:!mt-2">
+        <h1 class="-ml-1 mb-2 text-5xl md:text-6xl font-medium {% theme element_id="TITLE" %} md:-ml-2 print:!text-5xl print:mb-1">
             {{ bio_data.name }}
         </h1>
-        <h2 class="my-2 text-lg font-pixel {% theme element_id="SUBTITLE" %} print:text-sm print:my-1">
+        <h2 class="-ml-0.5 my-2 text-2xl font-bold {% theme element_id="SUBTITLE" %} print:text-lg print:my-1">
             {{ document_data.subtitle }}
         </h2>
     </div>

myresume/templates/myresume/main/_base_section.html

@@ -1,4 +1,4 @@
-<section class="mb-8 print:text-sm print:my-3">
+<section class="mb-8 print:text-sm">
     {% block title %}
     {% endblock title %}
 

myresume/templates/myresume/main/job_experience.html

@@ -7,9 +7,9 @@
 {% endblock title %}
 
 {% block content %}
-    <ul class="pl-4 pr-1 list-disc sm:pr-0 print:text-sm print:pl-4">
+    <ul class="pl-6 list-disc sm:pr-0 print:text-sm print:pl-4">
         {% for job in jobs_data.jobs %}
-            <li class="mb-1 {% if job.not_on_pdf %}print:hidden{% endif %}"
+            <li class="mb-1.5 {% if job.not_on_pdf %}print:hidden{% endif %}"
                 {% if job.organisation %} itemscope itemtype="https://schema.org/Organization" itemprop="{{ job.current|yesno:"worksFor,alumniOf" }}" {% endif %}>
                 {% if job.organisation %}
                     <meta itemprop="name" content="{{ job.organisation.name }}" />

myresume/templates/myresume/main/main_skills.html

@@ -7,13 +7,13 @@
 {% endblock title %}
 
 {% block content %}
-    <div class="p-2 print:p-1">
+    <div class="ml-1 print:!-ml-1">
         <div class="grid grid-cols-2 gap-5 md:grid-cols-3 print:gap-2">
             {% for tech in tech_data.main %}
                 {% main_section_main_tech tech %}
             {% endfor %}
         </div>
-        <div class="mt-8 print:mt-2">
+        <div class="mt-8 print:mt-4">
             <h4 class="text-lg mb-2 print:text-base print:mb-1">
                 {{ i18n_data.captions.other_skills }}
             </h4>

myresume/templates/myresume/main/projects.html

@@ -7,9 +7,9 @@
 {% endblock title %}
 
 {% block content %}
-    <ul class="pl-4 pr-1 list-disc sm:pr-0 print:text-sm print:pl-4">
+    <ul class="pl-6 pr-1 list-disc sm:pr-0 print:text-sm  print:pl-4">
         {% for project in projects_data.projects %}
-            <li class="mb-1 {% if project.not_on_pdf %}print:hidden{% endif %}">
+            <li class="mb-1.5 {% if project.not_on_pdf %}print:hidden{% endif %}">
                 <span class="font-bold">{{ project.title }}:</span>
                 <span class="*:decoration-dotted *:underline-offset-2">
                     {{ project.content|processed_project_content|safe }}

myresume/templates/myresume/main/tags/main_section_title.html

@@ -1,6 +1,6 @@
 {% load myresume_tags %}
 
-<h3 class="flex items-center text-3xl mt-1 mb-4 text-bold {% theme element_id="MAIN_SECTION_TITLE" %} md:-ml-2 md:text-4xl print:!text-lg print:!mt-2 print:!mb-1">
+<h3 class="flex items-center text-3xl -ml-2 mt-1 mb-4 text-bold {% theme element_id="MAIN_SECTION_TITLE" %} md:text-4xl print:!text-lg print:!-ml-3 print:!mt-1 print:!mb-3">
     <span class="size-10 aspect-square mr-2 flex justify-center items-center rounded-full {% theme element_id="MAIN_SECTION_TITLE_ICON" %} print:!size-8">
         {% svg_icon icon classes="size-6 print:!size-5" %}
     </span>

myresume/templatetags/myresume_tags.py

@@ -50,6 +50,15 @@ def svg_icon(icon: str, *, classes: str = "size-6"):
     )
 
 
+@register.inclusion_tag("myresume/about/tags/_about_section_caption.html")
+def about_section_caption(title: str, *, icon: str, itemprop: str | None = None):
+    return {
+        "title": title,
+        "icon": icon,
+        "itemprop_attr": f'itemprop="{itemprop}"' if itemprop else "",
+    }
+
+
 @register.simple_tag
 def about_section_icon(icon: str):
     return mark_safe(f'<img src="{static(icon)}" width="40" height="40" alt="">')