Skip to content

Commit d0916a8

Browse files
DibeoDibeo
committed
feat: only full field visible
1 parent 138d708 commit d0916a8

File tree

6 files changed

+1022
-1003
lines changed

6 files changed

+1022
-1003
lines changed

‎src/features/cv-preview/themes/ClassicTheme.tsx‎

Lines changed: 157 additions & 158 deletions
Original file line numberDiff line numberDiff line change
@@ -2,170 +2,169 @@ import type { CVData } from "../../../core/domain/cv.types";
22
import { useTranslation } from "react-i18next";
33

44
export const ClassicTheme = ({ data }: { data: CVData }) => {
5-
const { t } = useTranslation("theme", {
6-
lng: data.metadata.language || "fr",
7-
});
5+
const { t } = useTranslation("theme", {
6+
lng: data.metadata.language || "fr",
7+
});
88

9-
return (
10-
<div
11-
className="p-16 h-full min-h-[297mm] flex flex-col font-serif bg-white text-slate-900"
12-
id="cv-to-print"
13-
>
14-
<header className="text-center border-b-2 border-slate-900 pb-6 mb-8">
15-
<h1 className="text-4xl font-bold tracking-tight uppercase mb-2">
16-
{data.personalInfo.fullName || t("defaultName")}
17-
</h1>
18-
<p className="text-xl text-slate-700 font-medium uppercase tracking-[0.2em] mb-4">
19-
{data.personalInfo.title || t("defaultTitle")}
20-
</p>
9+
return (
10+
<div
11+
className="p-16 h-full min-h-[297mm] flex flex-col font-serif bg-white text-slate-900"
12+
id="cv-to-print">
13+
<header className="text-center border-b-2 border-slate-900 pb-6 mb-8">
14+
<h1 className="text-4xl font-bold tracking-tight uppercase mb-2">
15+
{data.personalInfo.fullName || t("defaultName")}
16+
</h1>
17+
<p className="text-xl text-slate-700 font-medium uppercase tracking-[0.2em] mb-4">
18+
{data.personalInfo.title || t("defaultTitle")}
19+
</p>
2120

22-
<div className="flex flex-wrap justify-center gap-x-3 gap-y-1 text-[10px] text-slate-600 max-w-2xl mx-auto">
23-
{data.personalInfo.contacts.map((c, i) => (
24-
<span key={c.id} className="flex items-center">
25-
<span className="font-bold uppercase">{c.label}:</span>&nbsp;
26-
{c.value}
27-
{(i < data.personalInfo.contacts.length - 1 ||
28-
data.personalInfo.socials.length > 0) && (
29-
<span className="ml-3 text-slate-300">|</span>
30-
)}
31-
</span>
32-
))}
33-
{data.personalInfo.socials.map((s, i) => (
34-
<span key={s.id} className="flex items-center">
35-
<span className="font-bold uppercase">{s.platform}:</span>&nbsp;
36-
<span className="italic">
37-
{s.url.replace(/^https?:\/\//, "")}
38-
</span>
39-
{i < data.personalInfo.socials.length - 1 && (
40-
<span className="ml-3 text-slate-300">|</span>
41-
)}
42-
</span>
43-
))}
44-
</div>
45-
</header>
21+
<div className="flex flex-wrap justify-center gap-x-3 gap-y-1 text-[10px] text-slate-600 max-w-2xl mx-auto">
22+
{data.personalInfo.contacts.map((c, i) => (
23+
<span key={c.id} className="flex items-center">
24+
<span className="font-bold uppercase">{c.label}:</span>&nbsp;
25+
{c.value}
26+
{(i < data.personalInfo.contacts.length - 1 ||
27+
data.personalInfo.socials.length > 0) && (
28+
<span className="ml-3 text-slate-300">|</span>
29+
)}
30+
</span>
31+
))}
32+
{data.personalInfo.socials.map((s, i) => (
33+
<span key={s.id} className="flex items-center">
34+
<span className="font-bold uppercase">{s.platform}:</span>&nbsp;
35+
<span className="italic">
36+
{s.url.replace(/^https?:\/\//, "")}
37+
</span>
38+
{i < data.personalInfo.socials.length - 1 && (
39+
<span className="ml-3 text-slate-300">|</span>
40+
)}
41+
</span>
42+
))}
43+
</div>
44+
</header>
4645

47-
<div className="space-y-8">
48-
{data.personalInfo.summary && (
49-
<section>
50-
<h2 className="text-xs font-bold uppercase tracking-widest border-b border-slate-300 mb-3">
51-
{t("sections.summary")}
52-
</h2>
53-
<p className="text-[12px] text-slate-700 leading-relaxed text-justify">
54-
{data.personalInfo.summary}
55-
</p>
56-
</section>
57-
)}
46+
<div className="space-y-8">
47+
{data.personalInfo.summary && (
48+
<section>
49+
<h2 className="text-xs font-bold uppercase tracking-widest border-b border-slate-300 mb-3">
50+
{t("sections.summary")}
51+
</h2>
52+
<p className="text-[12px] text-slate-700 leading-relaxed text-justify">
53+
{data.personalInfo.summary}
54+
</p>
55+
</section>
56+
)}
5857

59-
<section>
60-
<h2 className="text-xs font-bold uppercase tracking-widest border-b border-slate-300 mb-4">
61-
{t("sections.experience")}
62-
</h2>
63-
<div className="space-y-6">
64-
{data.experiences.map((exp) => (
65-
<div key={exp.id}>
66-
<div className="flex justify-between items-baseline mb-1">
67-
<h3 className="text-[13px] font-bold">
68-
{exp.company.toUpperCase()} —{" "}
69-
<span className="italic font-serif">{exp.role}</span>
70-
</h3>
71-
<span className="text-[10px] font-bold uppercase tabular-nums">
72-
{exp.startDate} — {exp.endDate}
73-
</span>
74-
</div>
75-
{exp.description && (
76-
<p className="text-[11px] text-slate-600 mb-2 italic">
77-
{exp.description}
78-
</p>
79-
)}
80-
<ul className="list-disc ml-5 space-y-1">
81-
{exp.mission.map((m, idx) => (
82-
<li key={idx} className="text-[11px] text-slate-700 pl-1">
83-
{m}
84-
</li>
85-
))}
86-
</ul>
87-
</div>
88-
))}
89-
</div>
90-
</section>
58+
{data.experiences.length > 0 && (
59+
<section>
60+
<h2 className="text-xs font-bold uppercase tracking-widest border-b border-slate-300 mb-4">
61+
{t("sections.experience")}
62+
</h2>
63+
<div className="space-y-6">
64+
{data.experiences.map((exp) => (
65+
<div key={exp.id}>
66+
<div className="flex justify-between items-baseline mb-1">
67+
<h3 className="text-[13px] font-bold">
68+
{exp.company.toUpperCase()} —{" "}
69+
<span className="italic font-serif">{exp.role}</span>
70+
</h3>
71+
<span className="text-[10px] font-bold uppercase tabular-nums">
72+
{exp.startDate} — {exp.endDate}
73+
</span>
74+
</div>
75+
{exp.description && (
76+
<p className="text-[11px] text-slate-600 mb-2 italic">
77+
{exp.description}
78+
</p>
79+
)}
80+
<ul className="list-disc ml-5 space-y-1">
81+
{exp.mission.map((m, idx) => (
82+
<li key={idx} className="text-[11px] text-slate-700 pl-1">
83+
{m}
84+
</li>
85+
))}
86+
</ul>
87+
</div>
88+
))}
89+
</div>
90+
</section>
91+
)}
9192

92-
{data.educations.length > 0 && (
93-
<section>
94-
<h2 className="text-xs font-bold uppercase tracking-widest border-b border-slate-300 mb-4">
95-
{t("sections.education")}
96-
</h2>
97-
<div className="space-y-4">
98-
{data.educations.map((edu) => (
99-
<div
100-
key={edu.id}
101-
className="flex justify-between items-baseline"
102-
>
103-
<div>
104-
<h3 className="text-[12px] font-bold">{edu.degree}</h3>
105-
<p className="text-[11px] italic text-slate-600">
106-
{edu.school}
107-
</p>
108-
</div>
109-
<span className="text-[10px] font-bold tabular-nums">
110-
{edu.year}
111-
</span>
112-
</div>
113-
))}
114-
</div>
115-
</section>
116-
)}
93+
{data.educations.length > 0 && (
94+
<section>
95+
<h2 className="text-xs font-bold uppercase tracking-widest border-b border-slate-300 mb-4">
96+
{t("sections.education")}
97+
</h2>
98+
<div className="space-y-4">
99+
{data.educations.map((edu) => (
100+
<div
101+
key={edu.id}
102+
className="flex justify-between items-baseline">
103+
<div>
104+
<h3 className="text-[12px] font-bold">{edu.degree}</h3>
105+
<p className="text-[11px] italic text-slate-600">
106+
{edu.school}
107+
</p>
108+
</div>
109+
<span className="text-[10px] font-bold tabular-nums">
110+
{edu.year}
111+
</span>
112+
</div>
113+
))}
114+
</div>
115+
</section>
116+
)}
117117

118-
<div className="grid grid-cols-2 gap-8">
119-
{data.skills.length > 0 && (
120-
<section>
121-
<h2 className="text-xs font-bold uppercase tracking-widest border-b border-slate-300 mb-3">
122-
{t("sections.skills")}
123-
</h2>
124-
<p className="text-[11px] text-slate-700 leading-relaxed">
125-
{data.skills.join(" • ")}
126-
</p>
127-
</section>
128-
)}
118+
<div className="grid grid-cols-2 gap-8">
119+
{data.skills.length > 0 && (
120+
<section>
121+
<h2 className="text-xs font-bold uppercase tracking-widest border-b border-slate-300 mb-3">
122+
{t("sections.skills")}
123+
</h2>
124+
<p className="text-[11px] text-slate-700 leading-relaxed">
125+
{data.skills.join(" • ")}
126+
</p>
127+
</section>
128+
)}
129129

130-
{data.languages.length > 0 && (
131-
<section>
132-
<h2 className="text-xs font-bold uppercase tracking-widest border-b border-slate-300 mb-3">
133-
{t("sections.languages")}
134-
</h2>
135-
<div className="space-y-1">
136-
{data.languages.map((lang) => (
137-
<p key={lang.id} className="text-[11px] text-slate-700">
138-
<span className="font-bold">{lang.name}</span> :{" "}
139-
<span className="italic">{lang.level}</span>
140-
</p>
141-
))}
142-
</div>
143-
</section>
144-
)}
145-
</div>
130+
{data.languages.length > 0 && (
131+
<section>
132+
<h2 className="text-xs font-bold uppercase tracking-widest border-b border-slate-300 mb-3">
133+
{t("sections.languages")}
134+
</h2>
135+
<div className="space-y-1">
136+
{data.languages.map((lang) => (
137+
<p key={lang.id} className="text-[11px] text-slate-700">
138+
<span className="font-bold">{lang.name}</span> :{" "}
139+
<span className="italic">{lang.level}</span>
140+
</p>
141+
))}
142+
</div>
143+
</section>
144+
)}
145+
</div>
146146

147-
{data.certifications.length > 0 && (
148-
<section>
149-
<h2 className="text-xs font-bold uppercase tracking-widest border-b border-slate-300 mb-3">
150-
{t("sections.certifications")}
151-
</h2>
152-
<ul className="grid grid-cols-1 gap-1">
153-
{data.certifications.map((cert) => (
154-
<li
155-
key={cert.id}
156-
className="text-[11px] text-slate-700 flex justify-between"
157-
>
158-
<span>
159-
<span className="font-bold">{cert.name}</span>
160-
{cert.issuer && ` — ${cert.issuer}`}
161-
</span>
162-
<span className="font-bold tabular-nums">{cert.year}</span>
163-
</li>
164-
))}
165-
</ul>
166-
</section>
167-
)}
168-
</div>
169-
</div>
170-
);
147+
{data.certifications.length > 0 && (
148+
<section>
149+
<h2 className="text-xs font-bold uppercase tracking-widest border-b border-slate-300 mb-3">
150+
{t("sections.certifications")}
151+
</h2>
152+
<ul className="grid grid-cols-1 gap-1">
153+
{data.certifications.map((cert) => (
154+
<li
155+
key={cert.id}
156+
className="text-[11px] text-slate-700 flex justify-between">
157+
<span>
158+
<span className="font-bold">{cert.name}</span>
159+
{cert.issuer && ` — ${cert.issuer}`}
160+
</span>
161+
<span className="font-bold tabular-nums">{cert.year}</span>
162+
</li>
163+
))}
164+
</ul>
165+
</section>
166+
)}
167+
</div>
168+
</div>
169+
);
171170
};

0 commit comments

Comments
 (0)