Skip to content

Commit fe6ce4c

Browse files
lfilholfilho
committed
feat: change header style and shorten it
1 parent c96ae3e commit fe6ce4c

File tree

4 files changed

+88
-77
lines changed

4 files changed

+88
-77
lines changed

‎src/components/cv/css/base.css

-15
Original file line numberDiff line numberDiff line change
@@ -60,17 +60,6 @@ h2 {
6060
line-height: 1.3rem;
6161
}
6262

63-
h1 {
64-
font-size: 2rem;
65-
color: var(--highlight-black);
66-
border-bottom: 0.2rem solid #008cba;
67-
padding-bottom: 1rem;
68-
font-weight: bold;
69-
letter-spacing: -0.15rem;
70-
font-variant-ligatures: common-ligatures;
71-
line-height: 1em;
72-
}
73-
7463
h2 {
7564
border-bottom: 0.15rem solid #008cba;
7665
margin: 1.3rem 0;
@@ -114,10 +103,6 @@ h6 {
114103
position: relative;
115104
}
116105

117-
header {
118-
min-height: 14em;
119-
}
120-
121106
.header-link {
122107
position: absolute;
123108
left: -1.5em;

‎src/components/cv/cvData.ts

+5-5
Original file line numberDiff line numberDiff line change
@@ -17,21 +17,21 @@ export const cvData: CVData = {
1717
email: '[email protected]',
1818
linkedin: {
1919
href: 'https://linkedin.com/in/luizgonzaga',
20-
display: '/luizgonzaga',
20+
display: 'linkedin.com/in/luizgonzaga',
2121
},
2222
topmate: {
2323
href: 'https://topmate.io/luizgonzaga',
24-
display: '/luizgonzaga',
24+
display: 'topmate.io/luizgonzaga',
2525
},
2626
// twitter: {
2727
// href: 'https://twitter.com/luizmarelo',
28-
// display: '/luizmarelo',
28+
// display: 'twitter.com/luizmarelo',
2929
// },
3030
speakerdeck: {
3131
href: 'https://speakerdeck.com/lfilho',
32-
display: '/lfilho',
32+
display: 'speakerdeck.com/lfilho',
3333
},
34-
github: { href: 'https://github.com/lfilho', display: '/lfilho' },
34+
github: { href: 'https://github.com/lfilho', display: 'github.com/lfilho' },
3535
},
3636
introduction: [
3737
`A brazillian-canadian people-first leader building impactful products and high-performing teams for ~{{CAREER_TENURE}} years.`,

‎src/components/cv/sections/header/index.tsx

+55-55
Original file line numberDiff line numberDiff line change
@@ -44,73 +44,73 @@ export default class Header extends Component {
4444
<span className='p-family-name'>{name.last}</span>
4545
<span className='p-honorific-suffix'>, {name.title}</span>
4646
</h1>
47-
48-
<main>
49-
<aside>
50-
<section className='contacts'>
51-
<div className='contact adr'>
52-
<FontAwesomeIcon icon={faMapMarkerAlt} fixedWidth />
53-
<span className='p-locality'>{location.city}</span>
54-
<span>, </span>
55-
<span className='p-country-name'>{location.country}</span>
56-
</div>
57-
{/*
58-
<div className='contact phone'>
47+
<aside>
48+
<ul className='contacts'>
49+
<li className='contact adr'>
50+
<FontAwesomeIcon icon={faMapMarkerAlt} fixedWidth />
51+
<span className='p-locality'>{location.city}</span>
52+
<span>, </span>
53+
<span className='p-country-name'>{location.country}</span>
54+
</li>
55+
{/*
56+
<li className='contact phone'>
5957
<i className='fa fa-fw fa-mobile'></i>
6058
<span>
6159
<a className='p-tel' href={'tel:+' + phone.raw}>{phone.formatted}</a>
6260
</span>
63-
</div>
61+
</li>
6462
*/}
65-
<div className='contact website'>
66-
<FontAwesomeIcon icon={faHome} fixedWidth />
67-
<span>
68-
<a className='u-url' href={contact.url.href}>
69-
{contact.url.display}
70-
</a>
71-
</span>
72-
</div>
73-
<div className='contact mail'>
74-
<FontAwesomeIcon icon={faEnvelope} fixedWidth />
75-
<span>
76-
<a className='u-email' href={'mailto:' + contact.email}>
77-
{contact.email}
78-
</a>
79-
</span>
80-
</div>
81-
<div className='linkedin'>
82-
<FontAwesomeIcon icon={faLinkedin} fixedWidth />
83-
<a className='url' href={contact.linkedin.href}>
84-
{contact.linkedin.display}
63+
<li className='contact website'>
64+
<FontAwesomeIcon icon={faHome} fixedWidth />
65+
<span>
66+
<a className='u-url' href={contact.url.href}>
67+
{contact.url.display}
8568
</a>
86-
</div>
87-
<div className='topmate'>
88-
<FontAwesomeIcon icon={faHandshake} fixedWidth />
89-
<a className='url' href={contact.topmate.href}>
90-
{contact.topmate.display}
69+
</span>
70+
</li>
71+
<li className='contact mail'>
72+
<FontAwesomeIcon icon={faEnvelope} fixedWidth />
73+
<span>
74+
<a className='u-email' href={'mailto:' + contact.email}>
75+
{contact.email}
9176
</a>
92-
</div>
77+
</span>
78+
</li>
79+
<li className='linkedin'>
80+
<FontAwesomeIcon icon={faLinkedin} fixedWidth />
81+
<a className='url' href={contact.linkedin.href}>
82+
{contact.linkedin.display}
83+
</a>
84+
</li>
85+
<li className='topmate'>
86+
<FontAwesomeIcon icon={faHandshake} fixedWidth />
87+
<a className='url' href={contact.topmate.href}>
88+
{contact.topmate.display}
89+
</a>
90+
</li>
9391

94-
{/* <div className='twitter'>
92+
{/* <li className='twitter'>
9593
<FontAwesomeIcon icon={faTwitter} fixedWidth />
9694
<a className='url' href={contact.twitter.href}>
9795
{contact.twitter.display}
9896
</a>
99-
</div> */}
100-
<div className='speakerdeck'>
101-
<FontAwesomeIcon icon={faChalkboardTeacher} fixedWidth />
102-
<a className='url' href={contact.speakerdeck.href}>
103-
{contact.speakerdeck.display}
104-
</a>
105-
</div>
106-
<div className='github'>
107-
<FontAwesomeIcon icon={faGithub} fixedWidth />
108-
<a className='url' href={contact.github.href}>
109-
{contact.github.display}
110-
</a>
111-
</div>
112-
</section>
113-
</aside>
97+
</li> */}
98+
<li className='speakerdeck'>
99+
<FontAwesomeIcon icon={faChalkboardTeacher} fixedWidth />
100+
<a className='url' href={contact.speakerdeck.href}>
101+
{contact.speakerdeck.display}
102+
</a>
103+
</li>
104+
<li className='github'>
105+
<FontAwesomeIcon icon={faGithub} fixedWidth />
106+
<a className='url' href={contact.github.href}>
107+
{contact.github.display}
108+
</a>
109+
</li>
110+
</ul>
111+
</aside>
112+
113+
<main>
114114
{introParagraphs}
115115
{linkToAlternateVersion}
116116
</main>

‎src/components/cv/sections/header/style.css

+28-2
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,31 @@
1+
h1 {
2+
font-size: 2rem;
3+
color: var(--highlight-black);
4+
/* padding-bottom: 1rem; */
5+
margin: 0;
6+
font-weight: bold;
7+
letter-spacing: -0.15rem;
8+
font-variant-ligatures: common-ligatures;
9+
line-height: 1em;
10+
}
11+
112
.vcard aside {
2-
float: left;
3-
margin: 0 2rem 1.5rem 0;
13+
margin: 0.5rem auto 0.9rem auto;
14+
padding: 0 0 0.5rem 0;
415
color: var(--highlight-black);
16+
border-bottom: 0.2rem solid #008cba;
17+
}
18+
.vcard ul {
19+
list-style-type: none;
20+
margin: 0;
21+
padding: 0;
22+
}
23+
24+
.vcard li {
25+
display: inline-block;
26+
margin: 0 1rem 0 0;
27+
padding: 0;
28+
font-size: 0.85rem;
29+
}
30+
header main {
531
}

0 commit comments

Comments
 (0)