jsonresume-theme-bold-header-statement 1.0.0 → 1.1.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +28 -0
- package/LICENSE +21 -0
- package/dist/index.js +6448 -0
- package/dist/style.css +139 -0
- package/package.json +20 -3
- package/src/Resume.jsx +457 -5
- package/vite.config.js +33 -0
- package/src/components/EducationSection.jsx +0 -75
- package/src/components/Header.jsx +0 -80
- package/src/components/ProjectsSection.jsx +0 -96
- package/src/components/SkillsSection.jsx +0 -64
- package/src/components/WorkSection.jsx +0 -119
- /package/src/{index.js → index.jsx} +0 -0
|
@@ -1,75 +0,0 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
import styled from 'styled-components';
|
|
3
|
-
import { Section, SectionTitle, DateRange } from '@resume/core';
|
|
4
|
-
|
|
5
|
-
const StyledSectionTitle = styled(SectionTitle)`
|
|
6
|
-
font-size: 14px;
|
|
7
|
-
font-weight: 700;
|
|
8
|
-
color: #0f766e;
|
|
9
|
-
text-transform: uppercase;
|
|
10
|
-
letter-spacing: 2px;
|
|
11
|
-
margin: 60px 0 32px 0;
|
|
12
|
-
padding-bottom: 12px;
|
|
13
|
-
border-bottom: 3px solid #0f766e;
|
|
14
|
-
`;
|
|
15
|
-
|
|
16
|
-
const ContentBlock = styled.div`
|
|
17
|
-
margin-bottom: 50px;
|
|
18
|
-
background: #fafafa;
|
|
19
|
-
padding: 32px;
|
|
20
|
-
border-radius: 8px;
|
|
21
|
-
border-left: 4px solid #0f766e;
|
|
22
|
-
|
|
23
|
-
&:last-child {
|
|
24
|
-
margin-bottom: 0;
|
|
25
|
-
}
|
|
26
|
-
|
|
27
|
-
@media print {
|
|
28
|
-
background: white;
|
|
29
|
-
border: 1px solid #e5e7eb;
|
|
30
|
-
padding: 24px;
|
|
31
|
-
}
|
|
32
|
-
`;
|
|
33
|
-
|
|
34
|
-
const Institution = styled.h3`
|
|
35
|
-
font-size: 20px;
|
|
36
|
-
font-weight: 700;
|
|
37
|
-
color: #111827;
|
|
38
|
-
margin: 0 0 8px 0;
|
|
39
|
-
`;
|
|
40
|
-
|
|
41
|
-
const Degree = styled.div`
|
|
42
|
-
font-size: 16px;
|
|
43
|
-
color: #4b5563;
|
|
44
|
-
margin-bottom: 8px;
|
|
45
|
-
font-weight: 400;
|
|
46
|
-
`;
|
|
47
|
-
|
|
48
|
-
const EducationDate = styled.div`
|
|
49
|
-
font-size: 14px;
|
|
50
|
-
color: #6b7280;
|
|
51
|
-
text-transform: uppercase;
|
|
52
|
-
letter-spacing: 1px;
|
|
53
|
-
`;
|
|
54
|
-
|
|
55
|
-
export function EducationSection({ education }) {
|
|
56
|
-
if (!education?.length) return null;
|
|
57
|
-
|
|
58
|
-
return (
|
|
59
|
-
<Section>
|
|
60
|
-
<StyledSectionTitle>Education</StyledSectionTitle>
|
|
61
|
-
{education.map((edu, index) => (
|
|
62
|
-
<ContentBlock key={index}>
|
|
63
|
-
<Institution>{edu.institution}</Institution>
|
|
64
|
-
<Degree>
|
|
65
|
-
{edu.studyType} in {edu.area}
|
|
66
|
-
{edu.score && ` • ${edu.score}`}
|
|
67
|
-
</Degree>
|
|
68
|
-
<EducationDate>
|
|
69
|
-
<DateRange startDate={edu.startDate} endDate={edu.endDate} />
|
|
70
|
-
</EducationDate>
|
|
71
|
-
</ContentBlock>
|
|
72
|
-
))}
|
|
73
|
-
</Section>
|
|
74
|
-
);
|
|
75
|
-
}
|
|
@@ -1,80 +0,0 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
import styled from 'styled-components';
|
|
3
|
-
import { ContactInfo } from '@resume/core';
|
|
4
|
-
|
|
5
|
-
const HeaderSection = styled.header`
|
|
6
|
-
width: 100%;
|
|
7
|
-
background: linear-gradient(135deg, #0f766e 0%, #0d9488 100%);
|
|
8
|
-
padding: 80px 60px;
|
|
9
|
-
margin-bottom: 60px;
|
|
10
|
-
position: relative;
|
|
11
|
-
overflow: hidden;
|
|
12
|
-
|
|
13
|
-
&::before {
|
|
14
|
-
content: '';
|
|
15
|
-
position: absolute;
|
|
16
|
-
top: 0;
|
|
17
|
-
right: 0;
|
|
18
|
-
width: 300px;
|
|
19
|
-
height: 300px;
|
|
20
|
-
background: rgba(255, 255, 255, 0.05);
|
|
21
|
-
border-radius: 50%;
|
|
22
|
-
transform: translate(30%, -30%);
|
|
23
|
-
}
|
|
24
|
-
|
|
25
|
-
@media print {
|
|
26
|
-
padding: 60px 40px;
|
|
27
|
-
background: #0f766e;
|
|
28
|
-
}
|
|
29
|
-
`;
|
|
30
|
-
|
|
31
|
-
const Name = styled.h1`
|
|
32
|
-
font-size: 4rem;
|
|
33
|
-
font-weight: 900;
|
|
34
|
-
color: white;
|
|
35
|
-
margin: 0 0 16px 0;
|
|
36
|
-
letter-spacing: -2px;
|
|
37
|
-
line-height: 1;
|
|
38
|
-
text-transform: uppercase;
|
|
39
|
-
position: relative;
|
|
40
|
-
z-index: 1;
|
|
41
|
-
|
|
42
|
-
@media print {
|
|
43
|
-
font-size: 3.5rem;
|
|
44
|
-
}
|
|
45
|
-
`;
|
|
46
|
-
|
|
47
|
-
const Label = styled.div`
|
|
48
|
-
font-size: 1.5rem;
|
|
49
|
-
color: rgba(255, 255, 255, 0.95);
|
|
50
|
-
margin-bottom: 32px;
|
|
51
|
-
font-weight: 300;
|
|
52
|
-
letter-spacing: 0.5px;
|
|
53
|
-
position: relative;
|
|
54
|
-
z-index: 1;
|
|
55
|
-
`;
|
|
56
|
-
|
|
57
|
-
const StyledContactInfo = styled(ContactInfo)`
|
|
58
|
-
font-size: 16px;
|
|
59
|
-
position: relative;
|
|
60
|
-
z-index: 1;
|
|
61
|
-
|
|
62
|
-
a {
|
|
63
|
-
color: white;
|
|
64
|
-
font-weight: 400;
|
|
65
|
-
}
|
|
66
|
-
|
|
67
|
-
span {
|
|
68
|
-
color: rgba(255, 255, 255, 0.9);
|
|
69
|
-
}
|
|
70
|
-
`;
|
|
71
|
-
|
|
72
|
-
export function Header({ basics }) {
|
|
73
|
-
return (
|
|
74
|
-
<HeaderSection>
|
|
75
|
-
<Name>{basics.name}</Name>
|
|
76
|
-
{basics.label && <Label>{basics.label}</Label>}
|
|
77
|
-
<StyledContactInfo basics={basics} />
|
|
78
|
-
</HeaderSection>
|
|
79
|
-
);
|
|
80
|
-
}
|
|
@@ -1,96 +0,0 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
import styled from 'styled-components';
|
|
3
|
-
import { Section, SectionTitle } from '@resume/core';
|
|
4
|
-
|
|
5
|
-
const StyledSectionTitle = styled(SectionTitle)`
|
|
6
|
-
font-size: 14px;
|
|
7
|
-
font-weight: 700;
|
|
8
|
-
color: #0f766e;
|
|
9
|
-
text-transform: uppercase;
|
|
10
|
-
letter-spacing: 2px;
|
|
11
|
-
margin: 60px 0 32px 0;
|
|
12
|
-
padding-bottom: 12px;
|
|
13
|
-
border-bottom: 3px solid #0f766e;
|
|
14
|
-
`;
|
|
15
|
-
|
|
16
|
-
const ContentBlock = styled.div`
|
|
17
|
-
margin-bottom: 50px;
|
|
18
|
-
background: #fafafa;
|
|
19
|
-
padding: 32px;
|
|
20
|
-
border-radius: 8px;
|
|
21
|
-
border-left: 4px solid #0f766e;
|
|
22
|
-
|
|
23
|
-
&:last-child {
|
|
24
|
-
margin-bottom: 0;
|
|
25
|
-
}
|
|
26
|
-
|
|
27
|
-
@media print {
|
|
28
|
-
background: white;
|
|
29
|
-
border: 1px solid #e5e7eb;
|
|
30
|
-
padding: 24px;
|
|
31
|
-
}
|
|
32
|
-
`;
|
|
33
|
-
|
|
34
|
-
const Position = styled.h3`
|
|
35
|
-
font-size: 22px;
|
|
36
|
-
font-weight: 700;
|
|
37
|
-
color: #111827;
|
|
38
|
-
margin: 0 0 8px 0;
|
|
39
|
-
letter-spacing: -0.5px;
|
|
40
|
-
`;
|
|
41
|
-
|
|
42
|
-
const WorkSummary = styled.p`
|
|
43
|
-
margin: 16px 0;
|
|
44
|
-
color: #4b5563;
|
|
45
|
-
line-height: 1.7;
|
|
46
|
-
font-size: 16px;
|
|
47
|
-
font-weight: 300;
|
|
48
|
-
`;
|
|
49
|
-
|
|
50
|
-
const Highlights = styled.ul`
|
|
51
|
-
margin: 16px 0 0 0;
|
|
52
|
-
padding-left: 24px;
|
|
53
|
-
list-style-type: none;
|
|
54
|
-
|
|
55
|
-
li {
|
|
56
|
-
margin: 10px 0;
|
|
57
|
-
color: #374151;
|
|
58
|
-
line-height: 1.7;
|
|
59
|
-
font-weight: 300;
|
|
60
|
-
position: relative;
|
|
61
|
-
padding-left: 8px;
|
|
62
|
-
|
|
63
|
-
&::before {
|
|
64
|
-
content: '▸';
|
|
65
|
-
position: absolute;
|
|
66
|
-
left: -16px;
|
|
67
|
-
color: #0f766e;
|
|
68
|
-
font-weight: 700;
|
|
69
|
-
}
|
|
70
|
-
}
|
|
71
|
-
`;
|
|
72
|
-
|
|
73
|
-
export function ProjectsSection({ projects }) {
|
|
74
|
-
if (!projects?.length) return null;
|
|
75
|
-
|
|
76
|
-
return (
|
|
77
|
-
<Section>
|
|
78
|
-
<StyledSectionTitle>Projects</StyledSectionTitle>
|
|
79
|
-
{projects.map((project, index) => (
|
|
80
|
-
<ContentBlock key={index}>
|
|
81
|
-
<Position>{project.name}</Position>
|
|
82
|
-
{project.description && (
|
|
83
|
-
<WorkSummary>{project.description}</WorkSummary>
|
|
84
|
-
)}
|
|
85
|
-
{project.highlights?.length > 0 && (
|
|
86
|
-
<Highlights>
|
|
87
|
-
{project.highlights.map((highlight, i) => (
|
|
88
|
-
<li key={i}>{highlight}</li>
|
|
89
|
-
))}
|
|
90
|
-
</Highlights>
|
|
91
|
-
)}
|
|
92
|
-
</ContentBlock>
|
|
93
|
-
))}
|
|
94
|
-
</Section>
|
|
95
|
-
);
|
|
96
|
-
}
|
|
@@ -1,64 +0,0 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
import styled from 'styled-components';
|
|
3
|
-
import { Section, SectionTitle } from '@resume/core';
|
|
4
|
-
|
|
5
|
-
const StyledSectionTitle = styled(SectionTitle)`
|
|
6
|
-
font-size: 14px;
|
|
7
|
-
font-weight: 700;
|
|
8
|
-
color: #0f766e;
|
|
9
|
-
text-transform: uppercase;
|
|
10
|
-
letter-spacing: 2px;
|
|
11
|
-
margin: 60px 0 32px 0;
|
|
12
|
-
padding-bottom: 12px;
|
|
13
|
-
border-bottom: 3px solid #0f766e;
|
|
14
|
-
`;
|
|
15
|
-
|
|
16
|
-
const SkillsGrid = styled.div`
|
|
17
|
-
display: grid;
|
|
18
|
-
grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
|
|
19
|
-
gap: 24px;
|
|
20
|
-
`;
|
|
21
|
-
|
|
22
|
-
const SkillCategory = styled.div`
|
|
23
|
-
padding: 24px;
|
|
24
|
-
background: white;
|
|
25
|
-
border-radius: 8px;
|
|
26
|
-
border: 2px solid #0f766e;
|
|
27
|
-
transition: transform 0.2s;
|
|
28
|
-
`;
|
|
29
|
-
|
|
30
|
-
const SkillName = styled.h4`
|
|
31
|
-
font-size: 16px;
|
|
32
|
-
font-weight: 700;
|
|
33
|
-
color: #0f766e;
|
|
34
|
-
margin: 0 0 12px 0;
|
|
35
|
-
text-transform: uppercase;
|
|
36
|
-
letter-spacing: 1px;
|
|
37
|
-
`;
|
|
38
|
-
|
|
39
|
-
const SkillTags = styled.div`
|
|
40
|
-
font-size: 14px;
|
|
41
|
-
color: #6b7280;
|
|
42
|
-
line-height: 1.6;
|
|
43
|
-
font-weight: 300;
|
|
44
|
-
`;
|
|
45
|
-
|
|
46
|
-
export function SkillsSection({ skills }) {
|
|
47
|
-
if (!skills?.length) return null;
|
|
48
|
-
|
|
49
|
-
return (
|
|
50
|
-
<Section>
|
|
51
|
-
<StyledSectionTitle>Skills</StyledSectionTitle>
|
|
52
|
-
<SkillsGrid>
|
|
53
|
-
{skills.map((skill, index) => (
|
|
54
|
-
<SkillCategory key={index}>
|
|
55
|
-
<SkillName>{skill.name}</SkillName>
|
|
56
|
-
{skill.keywords?.length > 0 && (
|
|
57
|
-
<SkillTags>{skill.keywords.join(', ')}</SkillTags>
|
|
58
|
-
)}
|
|
59
|
-
</SkillCategory>
|
|
60
|
-
))}
|
|
61
|
-
</SkillsGrid>
|
|
62
|
-
</Section>
|
|
63
|
-
);
|
|
64
|
-
}
|
|
@@ -1,119 +0,0 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
import styled from 'styled-components';
|
|
3
|
-
import { Section, SectionTitle, DateRange } from '@resume/core';
|
|
4
|
-
|
|
5
|
-
const StyledSectionTitle = styled(SectionTitle)`
|
|
6
|
-
font-size: 14px;
|
|
7
|
-
font-weight: 700;
|
|
8
|
-
color: #0f766e;
|
|
9
|
-
text-transform: uppercase;
|
|
10
|
-
letter-spacing: 2px;
|
|
11
|
-
margin: 60px 0 32px 0;
|
|
12
|
-
padding-bottom: 12px;
|
|
13
|
-
border-bottom: 3px solid #0f766e;
|
|
14
|
-
`;
|
|
15
|
-
|
|
16
|
-
const ContentBlock = styled.div`
|
|
17
|
-
margin-bottom: 50px;
|
|
18
|
-
background: #fafafa;
|
|
19
|
-
padding: 32px;
|
|
20
|
-
border-radius: 8px;
|
|
21
|
-
border-left: 4px solid #0f766e;
|
|
22
|
-
|
|
23
|
-
&:last-child {
|
|
24
|
-
margin-bottom: 0;
|
|
25
|
-
}
|
|
26
|
-
|
|
27
|
-
@media print {
|
|
28
|
-
background: white;
|
|
29
|
-
border: 1px solid #e5e7eb;
|
|
30
|
-
padding: 24px;
|
|
31
|
-
}
|
|
32
|
-
`;
|
|
33
|
-
|
|
34
|
-
const WorkHeader = styled.div`
|
|
35
|
-
margin-bottom: 16px;
|
|
36
|
-
`;
|
|
37
|
-
|
|
38
|
-
const Position = styled.h3`
|
|
39
|
-
font-size: 22px;
|
|
40
|
-
font-weight: 700;
|
|
41
|
-
color: #111827;
|
|
42
|
-
margin: 0 0 8px 0;
|
|
43
|
-
letter-spacing: -0.5px;
|
|
44
|
-
`;
|
|
45
|
-
|
|
46
|
-
const Company = styled.div`
|
|
47
|
-
font-size: 18px;
|
|
48
|
-
color: #0f766e;
|
|
49
|
-
font-weight: 500;
|
|
50
|
-
margin-bottom: 8px;
|
|
51
|
-
`;
|
|
52
|
-
|
|
53
|
-
const DateText = styled.div`
|
|
54
|
-
font-size: 14px;
|
|
55
|
-
color: #6b7280;
|
|
56
|
-
font-weight: 400;
|
|
57
|
-
text-transform: uppercase;
|
|
58
|
-
letter-spacing: 1px;
|
|
59
|
-
`;
|
|
60
|
-
|
|
61
|
-
const WorkSummary = styled.p`
|
|
62
|
-
margin: 16px 0;
|
|
63
|
-
color: #4b5563;
|
|
64
|
-
line-height: 1.7;
|
|
65
|
-
font-size: 16px;
|
|
66
|
-
font-weight: 300;
|
|
67
|
-
`;
|
|
68
|
-
|
|
69
|
-
const Highlights = styled.ul`
|
|
70
|
-
margin: 16px 0 0 0;
|
|
71
|
-
padding-left: 24px;
|
|
72
|
-
list-style-type: none;
|
|
73
|
-
|
|
74
|
-
li {
|
|
75
|
-
margin: 10px 0;
|
|
76
|
-
color: #374151;
|
|
77
|
-
line-height: 1.7;
|
|
78
|
-
font-weight: 300;
|
|
79
|
-
position: relative;
|
|
80
|
-
padding-left: 8px;
|
|
81
|
-
|
|
82
|
-
&::before {
|
|
83
|
-
content: '▸';
|
|
84
|
-
position: absolute;
|
|
85
|
-
left: -16px;
|
|
86
|
-
color: #0f766e;
|
|
87
|
-
font-weight: 700;
|
|
88
|
-
}
|
|
89
|
-
}
|
|
90
|
-
`;
|
|
91
|
-
|
|
92
|
-
export function WorkSection({ work }) {
|
|
93
|
-
if (!work?.length) return null;
|
|
94
|
-
|
|
95
|
-
return (
|
|
96
|
-
<Section>
|
|
97
|
-
<StyledSectionTitle>Experience</StyledSectionTitle>
|
|
98
|
-
{work.map((job, index) => (
|
|
99
|
-
<ContentBlock key={index}>
|
|
100
|
-
<WorkHeader>
|
|
101
|
-
<Position>{job.position}</Position>
|
|
102
|
-
{job.name && <Company>{job.name}</Company>}
|
|
103
|
-
<DateText>
|
|
104
|
-
<DateRange startDate={job.startDate} endDate={job.endDate} />
|
|
105
|
-
</DateText>
|
|
106
|
-
</WorkHeader>
|
|
107
|
-
{job.summary && <WorkSummary>{job.summary}</WorkSummary>}
|
|
108
|
-
{job.highlights?.length > 0 && (
|
|
109
|
-
<Highlights>
|
|
110
|
-
{job.highlights.map((highlight, i) => (
|
|
111
|
-
<li key={i}>{highlight}</li>
|
|
112
|
-
))}
|
|
113
|
-
</Highlights>
|
|
114
|
-
)}
|
|
115
|
-
</ContentBlock>
|
|
116
|
-
))}
|
|
117
|
-
</Section>
|
|
118
|
-
);
|
|
119
|
-
}
|
|
File without changes
|