Google meets Portfolio

google-meets-portfolio.markdown

Google meets Portfolio

After seeing the amazing pen from @Olivia Ng this is my attempt on the google meets interface.

You can "send me" messages in the chat tab.

Warning: You won't actually be sending me any messages.

A Pen by Acampbell on CodePen.

License.

index.pug

-
  var work_list = [
    {
      icon: "🛠️", 
      text: "A few months ago I joined the solutions team at my company, and what we do is to ship products to help our co-workers to get task done easily"
    },
    {
      icon: "⚙️", 
      text: "Lately I've been using Javascript and React. I'm learning  Python and Django"
    },
    {
      icon: "🗺️", 
      text: "Maps are in the radar for me as well so I've tried Leaflet, Mapbox and Carto"
    },
    {
      icon: "🧳", 
      text: "There are plenty of stuff in my baggage. I've tried different languages, tools, patterns, frameworks... But I don't consider myself an expert so I try and not to mention everything I've used"
    }
  ]
  var education_list = [
    {
        icon: "🎓", 
        text: "I got my degree as a computer science engineer at <span class='place'>La Laguna University (Tenerife) </span> in <span class='year'>2016</span>"
    },
    {
        icon: "📱", 
        text: "I got my masters degree in mobile apps development at <span class='place'>Pontificia University (Salamanca)</span> in <span class='year'>2017</span>"
    },
    {
        icon: "💬", 
        text: "I speak Spanish and I try to communicate in English as well. My speaking is a bit better than my writting. You can check that's not very difficult tho"
    },
    {
        icon: "📋", 
        text: "I try to learn new things but, I definitely don't force myself to it"
    }
  ]
  
  var hobbies_list = [
    {
        icon: "🏃🏻‍♀️", 
        text: "I'm a huge sports fan. I love riding my bike and I practice ultimate frisbee (Yes, it is a real sport)"
    },
    {
        icon: "📺", 
        text: "As I said, I'm a big sports fan so nothing like a couch marathon with a blanket and a onesie!"
    },
    {
        icon: "👩🏻‍🍳", 
        text: "I'm not a cook, but I manage to get some stuff done. I love trying out veggie food"
    },
    {
        icon: "👩🏻‍💻", 
        text: "I really enjoy coding, specially at night time. I have to be careful tho, since I've stayed coding overnight several times"
    },
    {
        icon: "🧶", 
        text: "I like embroidery, I've customized a lot of my shirts"
    },
  ]
  
  var sideprojects_list = [
    {
      title: "Blood types compatibility: ",
      description: "In this tool you can easily check the compatibility between blood types",
      item_link: "https://donatinghelps.com",
      img_link: "https://raw.githubusercontent.com/RominaMartin/RominaMartin.github.io/master/assets/blood_donors.gif" 
    },
    {
        title: "Year in pixels: ",
        description: "Keep track of your days this year. LocalStorage used to keep track of it",
        item_link: "https://codepen.io/RominaMartin/full/NewZrZ",
        img_link: "https://raw.githubusercontent.com/RominaMartin/RominaMartin.github.io/master/assets/year_in_pixels.png" 
    },
    {
        title: "Monthly word: ",
        description: "Assign a word to define each of your months. LocalStorage used to keep track of it",
        item_link: "https://codepen.io/RominaMartin/full/eYmEVde",
        img_link: "https://raw.githubusercontent.com/RominaMartin/RominaMartin.github.io/master/assets/monthly_words.png"
    },
    {
        title: "Followers count: ",
        description: "Set your twitter handle and check out how a ball drops for every follower you have ",
        item_link: "https://codepen.io/RominaMartin/full/wxYJaZ",
        img_link: "https://raw.githubusercontent.com/RominaMartin/RominaMartin.github.io/master/assets/follower_check.gif"
    }
  ]
  
  var users_list = [
    { cat_class: "work", icon: "work", name: "Work" },
    { cat_class: "education", icon: "school", name: "Education" },
    { cat_class: "sideprojects", icon: "emoji_objects", name: "Side projects" },
    { cat_class: "hobbies", icon: "public", name: "Hobbies" }
  ]
  
mixin icon_category(list)
  each val in list
    .icon_container
      div= val.icon
      span !{val.text}

mixin image_category(list)
  each val in list
    a.icon_container(target="_blank", href=val.item_link)
      div
        img.sp_img(src=val.img_link, alt=val.title)
      span
        span.place= val.title
        span= val.description

mixin user_display
  each val in users_list
    .category(class=val.cat_class)
      .image
        i.material-icons.cat= val.icon
        i.material-icons.mic mic_off
        .overlay
      span.cat_name= val.name
      i.cat_arrow.material-icons arrow_forward_ios

.container
  .main_container
    .page.main.active
      img(
        src="https://raw.githubusercontent.com/RominaMartin/RominaMartin.github.io/master/assets/profile.jpg",
        alt="Romina's profile picture"
      )
      h2
        | Hi there! I'm Romina
      p
        | I'm a computer science engineer working as a developer
        a(target="_blank", href="https://twitter.com/uDataAnalytics") @urbanDataAnalytics
      p I'm an introvert so you'll probably catch me with my 🎧 on most of the time
      p I live between Madrid 🏙️ and the Canary Islands 🌴
    .page.work
      h2 Work 👩🏻‍💻
      +icon_category(work_list)
    .page.education
      h2 Education 📚
      +icon_category(education_list)
    .page.sideprojects
      h2 Side projects 🚀
      +image_category(sideprojects_list)
      p
        | You can also check the stuff I've done lately at my
        |
        a(target="_blank", href="https://codepen.io/RominaMartin") codepen
        |
        | profile
    .page.hobbies
      h2 Hobbies 🤙
      +icon_category(hobbies_list)

    .social
      a(target="_blank", href="https://twitter.io/rominamartinlib") Twiter
      a(target="_blank", href="https://codepen.io/RominaMartin") Codepen
      a(target="_blank", href="https://github.com/RominaMartin") Github
  .info_container
    .navbar
      .bottom.main
      .people.selected
        i.material-icons-outlined group
        span.pc People
        span (5)
      .msg
        i.material-icons-outlined chat
        span.pc Chat
      .info.mob
        i.material-icons-outlined info
    .users.active
      .category.main.selected
        .image
          img(
            src="https://raw.githubusercontent.com/RominaMartin/RominaMartin.github.io/master/assets/profile.jpg",
            alt="Romina's profile picture"
          )
          i.material-icons.mic more_horiz
          .overlay
        span.cat_name Romina Martin
      +user_display
    .msg_container
      .messages
        div
          p
            b Romina
            span#time 11:20
          p
            | &#x26A0;&#xFE0F; This won&apos;t send me any messages
          p
            | You can contact me via
            |
            a(href="https://twitter.com/rominamartinlib") twitter
            |
            | or
            |
            a(href="https://linkedin.com/in/rominamartinlib") linkedin
      .send
        input(type="text", placeholder="Send a message to Romina")
        a(target="_blank", href="")
          i.material-icons send

script.js

const MIC_OFF = "mic_off";
const MIC_ON = "more_horiz";
const TWITTER_BASE =
  "https://twitter.com/intent/tweet?text=Hello%20@rominamartinlib%20";

window.addEventListener("load", () => {
  const users = document.querySelector("div.users");
  const profile = document.querySelector("div.navbar .people");
  const msg = document.querySelector("div.navbar .msg");
  const msgContainer = document.querySelector("div.msg_container");
  const bottom = document.querySelector(".bottom");
  const sendMessageIcon = document.querySelector(".msg_container .send i");
  const currentMessage = document.querySelector(".msg_container .send input");
  const messagesList = document.querySelector(".msg_container .messages");

  let lastTime = null;

  const sixtySecElapsed = () => {
    let current = new Date();

    if (lastTime === null || (current - lastTime) / 1000 > 60) {
      lastTime = current;
      return true;
    }

    lastTime = current;
    return false;
  };

  const getFormatedTime = () =>
    lastTime ? `${lastTime.getHours()}:${lastTime.getMinutes()}` : "";
  const getCurrentTime = () => {
    let current = new Date();
    return `${current.getHours()}:${current.getMinutes()}`;
  };

  const displayMain = (name) => {
    document
      .querySelector(".main_container .active")
      .classList.toggle("active");
    let current = document.querySelector(`.main_container  .${name}`);
    current.classList.add("active");
  };

  const navbarDisplay = (e) => {
    if (e.target.classList.contains("people")) {
      users.classList.add("active");
      profile.classList.add("selected");
      bottom.classList.add("main");
      msgContainer.classList.remove("active");
      msg.classList.remove("selected");
      bottom.classList.remove("msg");
    } else {
      msgContainer.classList.add("active");
      msg.classList.add("selected");
      bottom.classList.add("msg");
      users.classList.remove("active");
      profile.classList.remove("selected");
      bottom.classList.remove("main");
    }
  };

  const userSelected = (e) => {
    let prev = document.querySelector("div.users .selected");
    prev.classList.remove("selected");
    prev.querySelector(".mic").innerText = MIC_OFF;

    let current = e.target;
    current.classList.add("selected");
    current.querySelector(".mic").innerText = MIC_ON;

    displayMain(current.classList[1]);
  };

  const sendMessage = (e) => {
    if (
      (e.type === "click" || e.which === 13) &&
      currentMessage.value.length > 0
    ) {
      let newMessage = document.createElement("div");

      if (sixtySecElapsed()) {
        let dateTag = document.createElement("p");
        dateTag.innerHTML = `<b>You</b> <span>${getFormatedTime()}</span>`;
        let message = document.createElement("p");
        newMessage.appendChild(dateTag);
        message.innerText = currentMessage.value;
        newMessage.appendChild(message);
      } else {
        newMessage.innerText = currentMessage.value;
      }

      messagesList.appendChild(newMessage);
      currentMessage.value = "";
    }
  };

  const addListeners = () => {
    for (let i = 0; i < users.children.length; i++) {
      users.children[i].addEventListener("click", userSelected);
    }

    profile.addEventListener("click", navbarDisplay);
    msg.addEventListener("click", navbarDisplay);

    currentMessage.addEventListener("keypress", sendMessage);
    sendMessageIcon.addEventListener("click", sendMessage);
  };

  document.getElementById("time").innerText = getCurrentTime();
  addListeners();
});

style.scss

$bg_color: #ffffff;
$title_color: #00263b;
$content_color: #888;

$icon_color: #5f6368;
$selected_icon_color: #00796b;
$active_panel: rgba(0, 121, 107, 0.025);
$hover_panel_color: rgba(0, 121, 107, 0.1);
$names_color: #202124;
$profile_pict_size: 35px;

$work_bg: #33691e;
$education_bg: #f4906b;
$sp_bg: #3858fe;
$hobbies_bg: #00c7ae;

$mic_color: #d93025;
$mic_active_color: #64ffda;

body {
  width: 100%;
  height: 100%;
  position: absolute;
  font-family: "Roboto", arial, sans-serif;
}
.pc {
  display: none;
}
.container {
  width: 100%;
  height: 100%;
  display: grid;
  position: relative;
  grid-template-rows: 50% 50%;
  overflow-x: hidden;

  a {
    text-decoration: unset;
    color: $selected_icon_color;
  }

  .main_container {
    display: grid;
    align-items: center;
    background-color: $bg_color;
    position: relative;
    overflow-y: auto;

    h2 {
      color: $title_color;
      text-align: center;
      font-size: 2em;
    }
    p {
      color: $content_color;
      padding: 0.5em 2em;
      text-align: center;
    }

    .page {
      position: absolute;
      height: 100%;
      display: none;
      width: 100%;
      align-items: center;

      &.main {
        text-align: center;
        position: relative;
        height: auto;

        &.active {
          display: block;
        }

        img {
          width: 20%;
          border-radius: 50%;
          border: 1px solid $title_color;
          padding: 2px;
        }
      }
    }

    .hobbies,
    .education,
    .work,
    .sideprojects {
      justify-content: center;
      grid-template-rows: 4em repeat(4, minmax(70px, 100px));
      grid-gap: 10px;
      display: none;
      grid-template-columns: minmax(200px, 600px);

      &.active {
        display: grid;
      }

      .icon_container {
        display: flex;
        height: 100%;
        justify-self: left;
        text-align: justify;
        font-size: 1em;
        padding: 0 10px;

        div {
          width: 20%;
          height: 100%;
          font-size: 3em;
          display: flex;
          align-items: center;

          img {
            position: relative;
            border: 2px solid #ccc;
            width: 100%;
          }
        }

        & > span {
          color: $content_color;
          padding: 0 15px;
          align-self: center;
          width: 80%;
        }

        .place {
          font-weight: bold;
          color: $title_color;
        }
        .year {
          font-weight: bold;
        }
      }
    }

    .hobbies {
      grid-template-rows: 4em repeat(5, minmax(70px, 100px));
    }
  }
  .social {
    position: fixed;
    bottom: 0;
    width: 100%;
    text-align: center;

    a {
      padding: 0 5px;
      font-size: 1em;
      text-decoration: unset;
      color: $icon_color;

      &:hover {
        color: $selected_icon_color;
      }
    }
  }
  .info_container {
    display: grid;
    grid-template-rows: 50px 1fr;
    background: #f8f9fa;

    &:hover {
      cursor: pointer;
    }

    .navbar {
      display: grid;
      width: 100%;
      grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
      border-bottom: 1px solid #f1f3f4;
      align-items: center;
      z-index: 1;
      position: relative;

      div {
        color: $icon_color;
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;

        &:hover {
          cursor: pointer;
          background: $hover_panel_color;
        }

        &.mob {
          pointer-events: none;
        }

        span {
          font-size: 0.75em;
        }

        i,
        span {
          pointer-events: none;
        }
      }

      div.selected {
        color: $selected_icon_color;
      }

      div.bottom {
        position: absolute;
        bottom: 0;
        height: 3px;
        background: $selected_icon_color;
        border-radius: 3px 3px 0 0;
        transition: all 0.25s linear;
        width: 10%;

        &.main {
          left: 12%;
        }

        &.msg {
          left: 45%;
        }
      }
    }
  }
  .users {
    width: 100%;
    display: none;
    grid-template-rows: repeat(6, 1fr);

    &.active {
      display: grid;
    }

    .category {
      display: grid;
      grid-template-columns: 0.2fr 0.8fr;
      align-items: center;
      position: relative;

      .cat_arrow {
        position: absolute;
        right: 20px;
        color: $content_color;
        font-size: 1em;

        &:hover {
          color: $selected_icon_color;
          pointer-events: none;
        }
      }

      &.work .image i.cat {
        background-color: $work_bg;
      }
      &.education .image i.cat {
        background-color: $education_bg;
      }
      &.sideprojects .image i.cat {
        background-color: $sp_bg;
      }
      &.hobbies .image i.cat {
        background-color: $hobbies_bg;
      }

      .image {
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
        background-color: $active_panel;

        &:active {
          pointer-events: none;
        }

        &:hover {
          background-color: $hover_panel_color;
        }

        img,
        i.cat {
          width: $profile_pict_size;
          height: $profile_pict_size;
          border-radius: 50%;
          color: #f8f9fa;
        }
        i.cat {
          display: flex;
          align-items: center;
          justify-content: center;
        }

        i.mic {
          position: absolute;
          right: 0;
          bottom: 0;
          font-size: 1em;
          color: $mic_color;
        }
      }

      .cat_name {
        height: 100%;
        display: flex;
        align-items: center;
        padding-left: 5%;
        font-size: 0.75em;

        &:hover {
          pointer-events: none;
          background: rgba(60, 64, 67, 0.04);
        }
      }

      &.selected {
        .overlay {
          position: absolute;
          width: 100%;
          height: 100%;
          background: $names_color;
          opacity: 0.7;
          z-index: 0;
        }
        i.mic {
          z-index: 1;
          color: $mic_active_color;
        }
      }
    }
  }
  .msg_container {
    display: none;
    cursor: default;
    overflow-y: auto;

    &.active {
      display: grid;
      grid-template-rows: 1fr 5em;
    }

    .messages {
      padding: 14px 24px;
      word-break: break-word;

      div p:first-child {
        padding-top: 20px;
      }

      p {
        color: $names_color;
        margin: 5px 0;
      }
      #time {
        color: $content_color;
      }
      i {
        font-size: 1em;
      }
    }

    div.send {
      display: flex;
      align-items: center;
      justify-content: center;
      align-self: center;
      height: 100%;
      border-top: 1px solid #f1f3f4;

      input {
        width: 70%;
        padding: 10px;
        outline: none;
        border: none;
        border-bottom: 1px solid #ccc;
        background: transparent;
      }

      i {
        color: $icon_color;
        padding: 10px;

        &:hover {
          color: $selected_icon_color;
          cursor: pointer;
        }
      }
    }
  }
}

@media only screen and (min-width: 768px) {
  .page {
    font-size: 1.25em;
  }
  .mob {
    display: none !important;
  }
  .pc {
    display: block;
  }

  span.pc {
    padding: 0 0.2em;
  }

  .container.msg_container {
    position: absolute;
    right: 0;
    width: 100%;
    top: 50px;
    height: calc(100% - 50px);
  }

  .container .msg_container div.send {
    align-self: end;
  }

  .container {
    grid-template-columns: 1fr 320px;
    grid-template-rows: 1fr;

    div.info_container .navbar div.bottom {
      width: 91px;
      &.main {
        left: 34.5px;
      }
      &.msg {
        left: 200px;
      }
    }

    .social {
      bottom: 10px;
      width: calc(100% - 320px);
      height: 1em;
    }
    .container .main_container .page.sideprojects .slides {
      min-width: 400px;
    }

    .users {
      grid-template-rows: repeat(5, 56px);
      .category {
        grid-template-columns: 100px 1fr;
      }
    }
  }
}

styles

<link href="https://fonts.googleapis.com/css?family=Material+Icons|Material+Icons+Outlined" rel="stylesheet" />