<!-- Content -->
<div class="wrapper">
  <main>
    <header>
      <h1>Guillermo Rodas is a Full-stack JavaScript Engineer from Colombia.</h1> 
      <strong>🇸🇪 Currently living in Stockholm, Sweden.</strong>
    </header>
    <p>Overall in his career, he has witnessed how JavaScript is changing the way we build software in the present and how it is influencing the future.</p>
    <p>
      He has worked mostly as a front-end developer on many UI/UX projects. However, don't hesitate in asking him about architecture, brainstorming, product design, Node.js and even about how to learn new things every day.
    </p>
  </main>

  <!-- footer -->
  <footer></footer>
</div>

/**
 * index.scss
 * - Add any styles you want here!
 */
:root {
  --primary-color: tomato;
}

html,
body {
  margin: 0;
  padding: 0;
  height: 100%;
}

body {
  background: #f5f5f5;
  color: #566b78;
  font-family: "Helvetica", "Arial", sans-serif;
  line-height: 1.5;
}

h1 {
  margin-top: 1em;
  margin-bottom: 0.75em;
  line-height: 1.25;
}

h1,
h2,
strong {
  color: #333;
}

main {
  margin: 0 auto;
  max-width: 40em;
}

footer {
  display: flex;
  justify-content: center;
  background: #17171a;
  padding: 1em;
  margin-top: 2em;
}

ul {
  display: flex;
  justify-content: center;
  list-style: none;
}

ul > li {
  margin: 0 10px;
}

a {
  display: block;
  color: var(--primary-color);
}

.wrapper {
  min-height: 100%;
  display: grid;
  grid-template-rows: auto 1fr auto;
}

// Importamos lit-html (solo esta disponible como modulo)
import {html, render} from 'https://unpkg.com/lit-html@1.2.1/lit-html.js';

const linkList = [
  {
    url: "index.html",
    text: "Home"
  },
  {
    url: "https://www.twitter.com/glrodasz",
    text: "Twitter"
  },
  {
    url: "https://www.linkedin.com/in/guillermorodas",
    text: "LinkedIn"
  },
  {
    url: "https://github.com/glrodasz",
    text: "GitHub"
  }
];


// Declaramos nuestro template esta vez usando un map
const footerTemplate = html`
  <ul>
    ${linkList.map(({ url, text}) => html`<li><a target="_blank" href=${url}>${text}</a></li>`)}
  </ul>
`;

// Seleccionamos nuestro footer
const footer = document.querySelector('footer')
// Agregamos nuestro template al footer de nuestro documento
render(footerTemplate, footer);