From fe6ce4cfd0777ca04a80200b0aa0a7421ca0116d Mon Sep 17 00:00:00 2001
From: Luiz Gonzaga <lfilho@gmail.com>
Date: Fri, 16 Aug 2024 12:04:10 -0700
Subject: [PATCH] feat: change header style and shorten it

---
 src/components/cv/css/base.css              |  15 ---
 src/components/cv/cvData.ts                 |  10 +-
 src/components/cv/sections/header/index.tsx | 110 ++++++++++----------
 src/components/cv/sections/header/style.css |  30 +++++-
 4 files changed, 88 insertions(+), 77 deletions(-)

diff --git a/src/components/cv/css/base.css b/src/components/cv/css/base.css
index 4a35416..7eb839b 100644
--- a/src/components/cv/css/base.css
+++ b/src/components/cv/css/base.css
@@ -60,17 +60,6 @@ h2 {
     line-height: 1.3rem;
 }
 
-h1 {
-    font-size: 2rem;
-    color: var(--highlight-black);
-    border-bottom: 0.2rem solid #008cba;
-    padding-bottom: 1rem;
-    font-weight: bold;
-    letter-spacing: -0.15rem;
-    font-variant-ligatures: common-ligatures;
-    line-height: 1em;
-}
-
 h2 {
     border-bottom: 0.15rem solid #008cba;
     margin: 1.3rem 0;
@@ -114,10 +103,6 @@ h6 {
     position: relative;
 }
 
-header {
-    min-height: 14em;
-}
-
 .header-link {
     position: absolute;
     left: -1.5em;
diff --git a/src/components/cv/cvData.ts b/src/components/cv/cvData.ts
index f335344..58c8289 100644
--- a/src/components/cv/cvData.ts
+++ b/src/components/cv/cvData.ts
@@ -17,21 +17,21 @@ export const cvData: CVData = {
             email: 'lfilho@gmail.com',
             linkedin: {
                 href: 'https://linkedin.com/in/luizgonzaga',
-                display: '/luizgonzaga',
+                display: 'linkedin.com/in/luizgonzaga',
             },
             topmate: {
                 href: 'https://topmate.io/luizgonzaga',
-                display: '/luizgonzaga',
+                display: 'topmate.io/luizgonzaga',
             },
             // twitter: {
             //     href: 'https://twitter.com/luizmarelo',
-            //     display: '/luizmarelo',
+            //     display: 'twitter.com/luizmarelo',
             // },
             speakerdeck: {
                 href: 'https://speakerdeck.com/lfilho',
-                display: '/lfilho',
+                display: 'speakerdeck.com/lfilho',
             },
-            github: { href: 'https://github.com/lfilho', display: '/lfilho' },
+            github: { href: 'https://github.com/lfilho', display: 'github.com/lfilho' },
         },
         introduction: [
             `A brazillian-canadian people-first leader building impactful products and high-performing teams for ~{{CAREER_TENURE}} years.`,
diff --git a/src/components/cv/sections/header/index.tsx b/src/components/cv/sections/header/index.tsx
index 77e3697..3a2a01c 100644
--- a/src/components/cv/sections/header/index.tsx
+++ b/src/components/cv/sections/header/index.tsx
@@ -44,73 +44,73 @@ export default class Header extends Component {
                     <span className='p-family-name'>{name.last}</span>
                     <span className='p-honorific-suffix'>, {name.title}</span>
                 </h1>
-
-                <main>
-                    <aside>
-                        <section className='contacts'>
-                            <div className='contact adr'>
-                                <FontAwesomeIcon icon={faMapMarkerAlt} fixedWidth />
-                                <span className='p-locality'>{location.city}</span>
-                                <span>, </span>
-                                <span className='p-country-name'>{location.country}</span>
-                            </div>
-                            {/*
-                            <div className='contact phone'>
+                <aside>
+                    <ul className='contacts'>
+                        <li className='contact adr'>
+                            <FontAwesomeIcon icon={faMapMarkerAlt} fixedWidth />
+                            <span className='p-locality'>{location.city}</span>
+                            <span>, </span>
+                            <span className='p-country-name'>{location.country}</span>
+                        </li>
+                        {/*
+                            <li className='contact phone'>
                                 <i className='fa fa-fw fa-mobile'></i>
                                 <span>
                                     <a className='p-tel' href={'tel:+' + phone.raw}>{phone.formatted}</a>
                                 </span>
-                            </div>
+                            </li>
                             */}
-                            <div className='contact website'>
-                                <FontAwesomeIcon icon={faHome} fixedWidth />
-                                <span>
-                                    <a className='u-url' href={contact.url.href}>
-                                        {contact.url.display}
-                                    </a>
-                                </span>
-                            </div>
-                            <div className='contact mail'>
-                                <FontAwesomeIcon icon={faEnvelope} fixedWidth />
-                                <span>
-                                    <a className='u-email' href={'mailto:' + contact.email}>
-                                        {contact.email}
-                                    </a>
-                                </span>
-                            </div>
-                            <div className='linkedin'>
-                                <FontAwesomeIcon icon={faLinkedin} fixedWidth />
-                                <a className='url' href={contact.linkedin.href}>
-                                    {contact.linkedin.display}
+                        <li className='contact website'>
+                            <FontAwesomeIcon icon={faHome} fixedWidth />
+                            <span>
+                                <a className='u-url' href={contact.url.href}>
+                                    {contact.url.display}
                                 </a>
-                            </div>
-                            <div className='topmate'>
-                                <FontAwesomeIcon icon={faHandshake} fixedWidth />
-                                <a className='url' href={contact.topmate.href}>
-                                    {contact.topmate.display}
+                            </span>
+                        </li>
+                        <li className='contact mail'>
+                            <FontAwesomeIcon icon={faEnvelope} fixedWidth />
+                            <span>
+                                <a className='u-email' href={'mailto:' + contact.email}>
+                                    {contact.email}
                                 </a>
-                            </div>
+                            </span>
+                        </li>
+                        <li className='linkedin'>
+                            <FontAwesomeIcon icon={faLinkedin} fixedWidth />
+                            <a className='url' href={contact.linkedin.href}>
+                                {contact.linkedin.display}
+                            </a>
+                        </li>
+                        <li className='topmate'>
+                            <FontAwesomeIcon icon={faHandshake} fixedWidth />
+                            <a className='url' href={contact.topmate.href}>
+                                {contact.topmate.display}
+                            </a>
+                        </li>
 
-                            {/* <div className='twitter'>
+                        {/* <li className='twitter'>
                                 <FontAwesomeIcon icon={faTwitter} fixedWidth />
                                 <a className='url' href={contact.twitter.href}>
                                     {contact.twitter.display}
                                 </a>
-                            </div> */}
-                            <div className='speakerdeck'>
-                                <FontAwesomeIcon icon={faChalkboardTeacher} fixedWidth />
-                                <a className='url' href={contact.speakerdeck.href}>
-                                    {contact.speakerdeck.display}
-                                </a>
-                            </div>
-                            <div className='github'>
-                                <FontAwesomeIcon icon={faGithub} fixedWidth />
-                                <a className='url' href={contact.github.href}>
-                                    {contact.github.display}
-                                </a>
-                            </div>
-                        </section>
-                    </aside>
+                            </li> */}
+                        <li className='speakerdeck'>
+                            <FontAwesomeIcon icon={faChalkboardTeacher} fixedWidth />
+                            <a className='url' href={contact.speakerdeck.href}>
+                                {contact.speakerdeck.display}
+                            </a>
+                        </li>
+                        <li className='github'>
+                            <FontAwesomeIcon icon={faGithub} fixedWidth />
+                            <a className='url' href={contact.github.href}>
+                                {contact.github.display}
+                            </a>
+                        </li>
+                    </ul>
+                </aside>
+
+                <main>
                     {introParagraphs}
                     {linkToAlternateVersion}
                 </main>
diff --git a/src/components/cv/sections/header/style.css b/src/components/cv/sections/header/style.css
index b7c42f7..1917d9f 100644
--- a/src/components/cv/sections/header/style.css
+++ b/src/components/cv/sections/header/style.css
@@ -1,5 +1,31 @@
+h1 {
+    font-size: 2rem;
+    color: var(--highlight-black);
+    /* padding-bottom: 1rem; */
+    margin: 0;
+    font-weight: bold;
+    letter-spacing: -0.15rem;
+    font-variant-ligatures: common-ligatures;
+    line-height: 1em;
+}
+
 .vcard aside {
-    float: left;
-    margin: 0 2rem 1.5rem 0;
+    margin: 0.5rem auto 0.9rem auto;
+    padding: 0 0 0.5rem 0;
     color: var(--highlight-black);
+    border-bottom: 0.2rem solid #008cba;
+}
+.vcard ul {
+    list-style-type: none;
+    margin: 0;
+    padding: 0;
+}
+
+.vcard li {
+    display: inline-block;
+    margin: 0 1rem 0 0;
+    padding: 0;
+    font-size: 0.85rem;
+}
+header main {
 }