<!-- 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>

<template id="list-item">
  <li>
    <a target="_blank"></a>
  </li>
</template>

/**
 * 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;
}

function ready(cb) {
  document.addEventListener("DOMContentLoaded", cb);
}

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"
  }
];

function createList() {
  // Creamos una elemento tipo lista no-ordenada
  const unorderedList = document.createElement("ul");
  // Seleccionamos nuestro template
  const listItemTemplate = document.getElementById("list-item");

  // Iteramos nuestra lista de links
  linkList.forEach((link) => {
    // Clonamos el template

    const listItemClone = listItemTemplate.content.cloneNode(true)   
    const linkElement = listItemClone.querySelector('a')
    
    linkElement.textContent = link.text;
    linkElement.href = link.url;
    
    unorderedList.appendChild(listItemClone);
  });

  return unorderedList;
}

function renderFooter() {
  // Creamos la lista no-ordenada
  const list = createList();
  // Seleccionamos el footer
  const footer = document.querySelector("footer");
  // Agregamos nuestra lista no-ordenada al footer
  footer.appendChild(list);
}

// Cuando nuestro contenido este listo pintamos el footer
ready(renderFooter);