Skip to content

Commit c9945fb

Browse files
juanpms2juanpms2
authored
Merge pull request #299 from AbelDeTena/epic/cv-jedi-minimalism-#282-create-header-section
created first structure of cv-jedi-minimalist and his header section
2 parents eb72011 + 255c21e commit c9945fb

33 files changed

+484
-3
lines changed

‎apps/react-app/src/pods/template-export/components/export-config/export-config.component.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@ interface Props {
1717
}
1818

1919
const DOWNLOAD_MESSAGE_TIMEOUT = 2500;
20-
const DESING_OPTIONS: TemplateCV[] = ['Sith Elegance', 'Galactic CleanTech'];
20+
const DESING_OPTIONS: TemplateCV[] = ['Sith Elegance', 'Galactic CleanTech', 'Jedi minimalism'];
2121
const LANGUAGE_OPTIONS: Language[] = ['es', 'en'];
2222

2323
export const ExportConfig: React.FC<Props> = props => {

‎packages/manfred2html/src/engine/cv-jedi-minimalism/html-parts/header-element-end/header-element-end.ejs

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
</header>

‎packages/manfred2html/src/engine/cv-jedi-minimalism/html-parts/header-element-end/header-element-end.part.ts

+4
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
import ejs from 'ejs';
2+
import headerElementEndTemplate from './header-element-end.ejs?raw';
3+
4+
export const generateHeaderElementEnd = (): string => ejs.render(headerElementEndTemplate);

‎packages/manfred2html/src/engine/cv-jedi-minimalism/html-parts/header-element-end/index.ts

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
export * from './header-element-end.part';

‎packages/manfred2html/src/engine/cv-jedi-minimalism/html-parts/header-element-start/header-element-start.ejs

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
<header>

‎packages/manfred2html/src/engine/cv-jedi-minimalism/html-parts/header-element-start/header-element-start.part.ts

+4
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
import ejs from 'ejs';
2+
import headerElementStartTemplate from './header-element-start.ejs?raw';
3+
4+
export const generateHeaderElementStart = (): string => ejs.render(headerElementStartTemplate);

‎packages/manfred2html/src/engine/cv-jedi-minimalism/html-parts/header-element-start/index.ts

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
export * from './header-element-start.part';

‎packages/manfred2html/src/engine/cv-jedi-minimalism/html-parts/header-section/header-section.ejs

+6
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
<%_ if (profile && profile !== 'undefined' ) { -%>
2+
<h1><%= profile?.name %> <br /><span><%= profile?.surnames %></span></h1>
3+
<h2 ><%= profile?.title %></h2>
4+
<%_ } -%>
5+
6+

‎packages/manfred2html/src/engine/cv-jedi-minimalism/html-parts/header-section/header-section.part.ts

+18
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
import { ManfredAwesomicCV } from '@/model';
2+
import { ProfileSectionVm, mapFromMacCvToProfileSectionVm } from '@lemoncode/manfred-common/profile-section';
3+
import headerSection from './header-section.ejs?raw';
4+
import ejs from 'ejs';
5+
6+
export const generateHeaderSection = (cv: ManfredAwesomicCV): string => {
7+
const profileSectionVm = mapFromMacCvToProfileSectionVm(cv);
8+
9+
return generateHeaderSectionInner(profileSectionVm);
10+
};
11+
12+
const generateHeaderSectionInner = (profileSectionVm: ProfileSectionVm): string => {
13+
const rootObject = {
14+
profile: profileSectionVm,
15+
};
16+
17+
return ejs.render(headerSection, rootObject);
18+
};

‎packages/manfred2html/src/engine/cv-jedi-minimalism/html-parts/header-section/index.ts

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
export * from './header-section.part';

‎packages/manfred2html/src/engine/cv-jedi-minimalism/html-parts/html-document-end/html-document-end.ejs

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
</div>
2+
</body>
3+
</html>

‎packages/manfred2html/src/engine/cv-jedi-minimalism/html-parts/html-document-end/html-document-end.part.ts

+4
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
import ejs from 'ejs';
2+
import htmlDocumentEndTemplate from './html-document-end.ejs?raw';
3+
4+
export const generateHtmlDocumentEnd = (): string => ejs.render(htmlDocumentEndTemplate);

‎packages/manfred2html/src/engine/cv-jedi-minimalism/html-parts/html-document-end/index.ts

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
export * from './html-document-end.part';

‎packages/manfred2html/src/engine/cv-jedi-minimalism/html-parts/html-document-start/html-document-start.ejs

+294
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,294 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<link rel="preconnect" href="https://fonts.googleapis.com" />
7+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
8+
<link
9+
href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap"
10+
rel="stylesheet"
11+
/>
12+
<title>CV Manfred Export</title>
13+
<style>
14+
/* css vars */
15+
:root {
16+
/* spacing */
17+
--spacing_base: 4px;
18+
--spacing_2: calc(var(--spacing_base) / 2);
19+
--spacing_8: calc(var(--spacing_base) * 2);
20+
--spacing_12: calc(var(--spacing_base) * 3);
21+
--spacing_16: calc(var(--spacing_base) * 4);
22+
--spacing_24: calc(var(--spacing_base) * 6);
23+
--spacing_32: calc(var(--spacing_base) * 8);
24+
--spacing_48: calc(var(--spacing_base) * 12);
25+
--spacing_64: calc(var(--spacing_base) * 16);
26+
27+
/* colors */
28+
--primary_color: <%= color -%>; /* only this color can be changed */
29+
--BgColor: #fbfbfa;
30+
--white_color: #fefefe;
31+
--gray_color_900: #5c5a58;
32+
--gray_color_700: #9b9894;
33+
--gray_color_600: #c6c3be;
34+
--gray_color_500: #dad6d1;
35+
--black_color: #0d1418;
36+
}
37+
/* General styles */
38+
* {
39+
margin: 0;
40+
padding: 0;
41+
box-sizing: border-box;
42+
}
43+
html {
44+
font-family: Inter, sans-serif;
45+
font-size: 16px;
46+
color: var(--primary_color);
47+
font-style: normal;
48+
background-color: var(--BgColor);
49+
}
50+
.root__container {
51+
background-color: var(--white_color);
52+
display: grid;
53+
grid-template-columns: 1fr;
54+
min-height: 100vh;
55+
padding: var(--spacing_48) var(--spacing_24);
56+
}
57+
body {
58+
margin: 0;
59+
}
60+
/* General styles - typography */
61+
h1 {
62+
font-size: 32px;
63+
font-weight: 800;
64+
text-transform: capitalize;
65+
}
66+
h2 {
67+
font-size: 14px;
68+
font-weight: 600;
69+
text-transform: uppercase;
70+
letter-spacing: 1.4px;
71+
word-wrap: break-word;
72+
}
73+
h3 {
74+
font-size: 12px;
75+
font-weight: 600;
76+
text-transform: uppercase;
77+
letter-spacing: 1.2px;
78+
word-wrap: break-word;
79+
}
80+
/* header - styles */
81+
header {
82+
font-family: Montserrat;
83+
word-wrap: break-word;
84+
display: flex;
85+
flex-direction: column;
86+
gap: var(--spacing_12);
87+
}
88+
89+
/* aside - styles */
90+
aside {
91+
display: flex;
92+
flex-direction: column;
93+
padding: var(--spacing_48) 0;
94+
gap: var(--spacing_12);
95+
}
96+
.aside__container {
97+
display: flex;
98+
flex-direction: column;
99+
gap: var(--spacing_8);
100+
}
101+
.aside__container__item {
102+
font-size: 11px;
103+
font-family: Inter;
104+
font-weight: 500;
105+
word-wrap: break-word;
106+
color: var(--gray_color_900);
107+
display: flex;
108+
gap: var(--spacing_8);
109+
}
110+
111+
.aside__container__item > :first-child {
112+
display: flex;
113+
justify-content: center;
114+
align-items: center;
115+
min-width: 20px;
116+
max-width: 50px;
117+
}
118+
119+
.aside__container__item a {
120+
text-decoration: none;
121+
color: inherit;
122+
}
123+
/* main - styles */
124+
main {
125+
display: flex;
126+
flex-direction: column;
127+
}
128+
hr {
129+
margin-top: var(--spacing_24);
130+
margin-bottom: var(--spacing_24);
131+
border-color: rgba(218, 214, 209, 0.3);
132+
}
133+
section {
134+
display: flex;
135+
flex-direction: column;
136+
gap: var(--spacing_12);
137+
}
138+
.section__content {
139+
color: var(--gray_color_900);
140+
font-size: 12px;
141+
font-family: Inter;
142+
font-weight: 500;
143+
line-height: 16px;
144+
word-wrap: break-word;
145+
}
146+
147+
/* languages section */
148+
.section__languages {
149+
color: var(--gray_color_900);
150+
font-size: 12px;
151+
font-family: Inter;
152+
font-weight: 500;
153+
line-height: 16px;
154+
word-wrap: break-word;
155+
display: flex;
156+
flex-direction: column;
157+
gap: var(--spacing_12);
158+
padding: 0 var(--spacing_8);
159+
}
160+
.section__languages__item {
161+
display: flex;
162+
align-items: center;
163+
}
164+
165+
.section__languages__item > :first-child {
166+
min-width: 100px;
167+
max-width: 150px;
168+
}
169+
170+
.section__languages__item > :last-child {
171+
display: flex;
172+
min-width: 150px;
173+
flex-direction: column;
174+
align-items: flex-end;
175+
gap: var(--spacing_base);
176+
}
177+
178+
.section__languages__sub {
179+
color: var(--gray_color_600);
180+
font-size: 10px;
181+
font-family: Inter;
182+
font-weight: 500;
183+
word-wrap: break-word;
184+
}
185+
186+
/* skills section */
187+
ul {
188+
padding-left: var(--spacing_24);
189+
}
190+
li:not(:last-child) {
191+
margin-bottom: var(--spacing_8);
192+
}
193+
194+
/* education section */
195+
.section__education {
196+
display: flex;
197+
flex-direction: column;
198+
gap: var(--spacing_12);
199+
}
200+
201+
.section__education > div {
202+
display: flex;
203+
flex-direction: column;
204+
gap: var(--spacing_base);
205+
}
206+
207+
.section__education div p:first-child {
208+
color: var(--gray_color_700);
209+
font-size: 12px;
210+
font-family: Inter;
211+
font-weight: 500;
212+
line-height: 16px;
213+
word-wrap: break-word;
214+
}
215+
216+
.section__education div p:nth-child(2) {
217+
color: var(--primary_color);
218+
font-size: 12px;
219+
font-family: Inter;
220+
font-weight: 600;
221+
line-height: 16px;
222+
word-wrap: break-word;
223+
}
224+
225+
/* experiencie section */
226+
.section__experiencie {
227+
display: flex;
228+
flex-direction: column;
229+
}
230+
article {
231+
display: flex;
232+
flex-direction: column;
233+
gap: var(--spacing_12);
234+
}
235+
236+
article header {
237+
display: flex;
238+
gap: var(--spacing_base);
239+
}
240+
241+
article > header > h3 {
242+
font-family: Inter;
243+
font-size: 12px;
244+
font-style: normal;
245+
font-weight: 600;
246+
line-height: normal;
247+
letter-spacing: inherit;
248+
text-transform: inherit;
249+
color: var(--primary_color);
250+
}
251+
252+
.separator::before {
253+
content: '|';
254+
margin-right: var(--spacing_8);
255+
margin-left: var(--spacing_8);
256+
}
257+
258+
@media (min-width: 728px) {
259+
.root__container {
260+
grid-template-columns: 1fr 1fr;
261+
align-items: start;
262+
max-width: 1024px;
263+
justify-content: space-between;
264+
margin: auto;
265+
}
266+
.root__container::before {
267+
content: '';
268+
position: fixed;
269+
top: 0;
270+
left: 50%;
271+
width: 1px;
272+
height: 100vh;
273+
background-color: var(--gray_color_500);
274+
transform: translateX(-50%);
275+
}
276+
.left {
277+
grid-column: 1 / 2;
278+
padding: 0 var(--spacing_24);
279+
}
280+
281+
.right {
282+
grid-column: 2 / 3;
283+
padding: 0 var(--spacing_24);
284+
}
285+
.hide {
286+
display: none;
287+
}
288+
}
289+
</style>
290+
</head>
291+
<body>
292+
<div class="root__container">
293+
294+

‎packages/manfred2html/src/engine/cv-jedi-minimalism/html-parts/html-document-start/html-document-start.part.ts

+26
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
import ejs from 'ejs';
2+
import { HexColor, HexColorJedi } from '@/model';
3+
import htmlDocumentStartTemplate from './html-document-start.ejs?raw';
4+
5+
export const generateHtmlDocumentStart = (color: HexColor): string => {
6+
const jediColor = () => {
7+
switch (color) {
8+
case HexColor.default:
9+
return '#11383A';
10+
case HexColor.red:
11+
return '#6A0B18';
12+
case HexColor.green:
13+
return '#0D5127';
14+
case HexColor.orange:
15+
return '#5F2816';
16+
case HexColor.yellow:
17+
return '#66570C';
18+
case HexColor.dark:
19+
return '#0D1418';
20+
default:
21+
return '#11383A';
22+
}
23+
};
24+
25+
return ejs.render(htmlDocumentStartTemplate, { color: jediColor() });
26+
};

‎packages/manfred2html/src/engine/cv-jedi-minimalism/html-parts/html-document-start/index.ts

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
export * from './html-document-start.part';

‎packages/manfred2html/src/engine/cv-jedi-minimalism/html-parts/index.ts

+9
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
export * from './html-document-start';
2+
export * from './html-document-end';
3+
export * from './left-side-start';
4+
export * from './left-side-end';
5+
export * from './header-element-start';
6+
export * from './header-element-end';
7+
export * from './header-section';
8+
export * from './right-side-start';
9+
export * from './right-side-end';

0 commit comments

Comments
 (0)