Przejdź do treści
← Portfolio

Case study

Strona i CV dla prawniczki

Dwujęzyczna strona osobista i dopasowane do niej jednostronicowe CV dla Barbary Majewskiej, prawniczki z kwalifikacją LPC, specjalizującej się w szkodach na osobie i rozwiązywaniu sporów. Jeden zestaw treści zasila stronę i oba PDF-y, po angielsku i po polsku.

Klient
Barbara Majewska, barbara-majewska.com
Rola
Redakcja treści, projekt, wdrożenie, generowanie CV i publikacja
Typ
Strona osobista z CV do pobrania
Stack
Astro, Vercel, headless Chrome
Status
Działa pod barbara-majewska.com ↗

Górna część barbara-majewska.com na komputerze: imię i nazwisko, kwalifikacje, portret i przycisk pobierania CV

Problem

CV prawnika czyta się w dwóch miejscach. Rekruter otwiera PDF z załącznika. Partner w kancelarii wpisuje nazwisko w Google. Oba miejsca muszą opowiadać tę samą historię i oba muszą wyglądać jak wizytówka kogoś, kto dba o szczegóły.

Barbara pracuje w Wielkiej Brytanii, ale część jej zawodowych kontaktów jest polska. Utrzymywanie ręcznie dwóch wersji językowych strony i dwóch wersji CV to cztery dokumenty. Po pierwszej zmianie jeden z nich zawsze jest nieaktualny.

Do tego dochodził ton. Rekrutacja prawnicza jest konserwatywna. Strona miała wyglądać spokojnie i rozważnie, a nie jak landing page startupu.

Rozwiązanie

Jedna strona, ułożona tak, jak rekruter czyta CV.

  1. Kim jest. Imię i nazwisko, kwalifikacje (LLM Legal Practice Course z wyróżnieniem, LLB Hons) i obecne stanowisko, razem z portretem, zanim ktokolwiek przewinie stronę.
  2. Liczby, które mają znaczenie. Cztery wartości z obecnej pracy: liczba spraw rozwiązywanych rocznie, liczba prowadzonych spraw, miejsce w rankingu działu i ocena z LLM.
  3. Profil. Dwa krótkie akapity o tym, czym się zajmuje i skąd ma międzynarodowe doświadczenie, w tym staż w WIPO w Genewie.
  4. Doświadczenie. Oś czasu z obowiązkami i osiągnięciami rozdzielonymi od siebie, żeby osiągnięcia nie ginęły wśród punktów.
  5. Edukacja, kompetencje i języki. Krótkie karty, które da się przejrzeć wzrokiem.
  6. Kontakt. Bezpośredni e-mail i telefon oraz pobieranie CV.

Nagłówki są złożone krojem Cormorant Garamond, tekst krojem Inter, na granacie, ciepłym tle w kolorze papieru i z jednym złotym akcentem. Całość przypomina papier firmowy kancelarii, a nie szablon.

Sekcja doświadczenia: oś czasu z kluczowymi osiągnięciami oddzielonymi od codziennych obowiązków

Dwa języki, jedno źródło

Każdy tekst istnieje w jednym miejscu jako para: angielski i polski. Strona ładuje się po angielsku i przełącza na polski w miejscu, bez przeładowania i bez osobnego adresu. Wybór jest zapamiętywany, a przeglądarki ustawione na polski od razu dostają wersję polską.

Przycisk Pobierz CV też podąża za językiem. Kto czyta po polsku, dostaje polski PDF. Plik zapisuje się jako „Barbara Majewska CV.pdf”, a nie jako nazwa z myślnikami, bo trafia do folderu pobranych rekrutera obok pięćdziesięciu innych.

Ta sama strona po przełączeniu na polski, bez przeładowania i z polskim CV pod przyciskiem pobierania

CV generowane, a nie składane ręcznie

CV nie jest dokumentem Worda. Mały skrypt w Node bierze tę samą treść, składa z niej stronę A4 w HTML i drukuje ją do PDF w headless Chrome, raz po angielsku i raz po polsku. Typografia, kolory i portret są takie same jak na stronie.

Dzięki temu eksperymentowanie było tanie. Zanim wybraliśmy wersję ostateczną, wygenerowaliśmy ponad sześćdziesiąt wariantów: pięć schematów kolorystycznych, kilka kadrów i teł zdjęcia, wersje z portretem i bez. Łatwiej wybierać spośród prawdziwych PDF-ów niż spośród opisów.

Gdy coś się zmienia, na przykład awans albo ukończony program rozwojowy, treść poprawia się raz, a oba PDF-y i strona budują się z niej na nowo.

Angielskie CV A4 wygenerowane w headless Chrome; dane kontaktowe zamazane na potrzeby case study

Jak to jest zbudowane

Strona jest generowana statycznie w Astro i hostowana na Vercelu, z wdrożeniem z Gita przy każdym pushu. Przeglądarka dostaje jeden plik HTML z kilkoma linijkami skryptu do przełącznika języka, menu mobilnego i animacji przy przewijaniu. Nie ma frameworka po stronie klienta ani zewnętrznego JavaScriptu.

Nie ma cookies, analityki ani śledzenia, więc nie ma też banera cookies. Ścisła polityka Content Security Policy, HSTS z preload i standardowe nagłówki zabezpieczające są ustawione na brzegu sieci. Animacje respektują ustawienie ograniczonego ruchu, a układ projektowany był najpierw pod telefony, bo tam otwiera się link z LinkedIna.

Strona na telefonie, gdzie otwiera się większość linków z LinkedIna

Co to zmienia

Barbara ma jeden adres do wpisania w aplikacjach, na LinkedInie i w stopce maila oraz CV, które zawsze się z nim zgadza. Rekruterzy w obu językach dostają tę samą historię we własnym języku, bez proszenia o tłumaczenie.

Utrzymanie aktualności przestało być projektem. Ostatnia aktualizacja dodała portret na stronie i w CV oraz polską wersję CV w jednej zmianie.

Strona działa pod adresem barbara-majewska.com.

Potrzebujesz podobnego rozwiązania?

Napisz do mnie ↗