[feature] profile card

[serapath]

• the hover effect is interesting, however:
  • https://codepen.io/nodws/pen/WwwrjQ?limit=all&page=2&q=team+page
  • maybe it's a bit "too much"? something more playful and less hectic.
  • also it should fit the 8bit pixel design we already have in other projects
  • ...but a hover effect for more details is cool
• https://codepen.io/Aashima/pen/YryzJy?depth=everything&order=popularity&page=5&q=team&show_forks=false
  • same - not bad, but maybe a little bit much :-)
• i like this one a lot - it is more subtle :-) https://codepen.io/andytran/pen/BKOOQy

[serapath]

more inspiration

• http://www.codingamigos.com/
• https://codyhouse.co/demo/bouncy-content-filter/index.html (maybe use backside of profile card?)
• https://codyhouse.co/demo/faq-template/index.html (reveal details onclick)

[serapath]

Example Code:
https://codepen.io/serapath/pen/opydNr?editors=0010

[noraliucode]

May I try on this issue? :)

[ninabreznik]

Just remembered that a while ago I started making profile modules and gallery so maybe this can be reused. It's built in bel and csjs https://codepen.io/ninabreznik/pen/Lymbaq?editors=0011 https://codepen.io/ninabreznik/pen/bWaOqb

…

On Sat, Jan 13, 2018 at 4:48 PM, TzuYuan ***@***.***> wrote: May I try on this issue? :) — You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub <#8 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/ABBsy7R0iFQLOTWWtjLmmooMSwUVSH_Kks5tKG3dgaJpZM4RcUdF> .

-- Nina Breznik *Vision baker at *FairyDust.agency T: @ninabreznik M: +1 510 747 84 39 G: gitter.im/ninabreznik

---------------------------------------------------------------------------------- Check out our work: www.wizardamigos.com www.refugeeswork.com www.codingamigos.com <http://www.zweidesign.co>

[noraliucode]

Fantastic. Will try to compose those codes together.

[serapath]

cool :-)

[ninabreznik]

I also added a first draft of a card https://codepen.io/ninabreznik/pen/JMggRB?editors=0011

Next step is to use @kiecoo 's module for getting the data

[ninabreznik]

@kiecoo So, the next step would be to add your module to my Profile card and then also adapt this profile card a bit more to fit the data nicely.

To use your module inside of Profile card, you need to write in the first lines, next to bel and csjs-inject etc.

var githubData = require('name-of-your-module')

Then if you do

console.log(githubData)

you should see the object you provide through this module into the Profile card

[kiecoo]

I would go ahead to add my module into Profile card~

[kiecoo]

@ninabreznik About the Profile card

【What I am trying to do】
With doing the profile card to make it "flippable" as Alex told me, I am trying using the npm module of bel-card & bel-profile

---

【the problems I met】
I got stuck that I couldn't let "the module of bel-profile &bel-card " run successfully in codepen, could you help me to have a look about what I did wrong?

• (1) bel-profile----inCodepen (the code is that I copied the "index.js"& pasted in codepen)

• (2) bel-card----inCodepen

(the reason of putting in codepen is that I could use codepen to make myself to understand competely detail of these two modules at first so that I could make sure that I would use them in the right situation

[ninabreznik]

@kiecoo I'm reposting the code here

PROFILE CARD 1

var bel = require('bel')
var csjs = require('csjs-inject')

/* --------------------------------------------------------
                          FONTS
---------------------------------------------------------- */

var fonts             = ['https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css', 'https://fonts.googleapis.com/css?family=Ubuntu']
var fontAwesome       = bel`<link href=${fonts[0]} rel='stylesheet' type='text/css'>`
var fontUbuntu        = bel`<link href=${fonts[1]} rel="stylesheet">`
var font_ubuntu       = 'Ubuntu, sans-serif'
document.head.appendChild(fontAwesome)
document.head.appendChild(fontUbuntu)
/* --------------------------------------------------------
                        VARIABLES
---------------------------------------------------------- */
// DATA
var data = {
  "username": "ninabreznik",
  "projects": [
    "http://www.refugeeswork.com",
    "http://www.wizardamigos.com",
    "http://fairydust.agency"
  ],
  "background": [
    "Javascript",
   "Entrepreneurship",
    "Community building"
  ],
  "interests": [
    "p2p web",
    "self employment",
    "javascript",
    "blockchain"
  ],
  "github": "https://github.com/ninabreznik"
}

// VARIABLES
var profileImageUrl   = 'https://nomadlist.com/assets/img/cities/phuket-thailand-500px.jpg'
var githubUrl = data['github']

//  COlORS
var blue = '#365899'
var grey = '#616770'
var lightGrey = '#90949c'

//STATE
var projectsExpanded = false;

// CSS
var css = csjs`
  .main {
    font-family: ${font_ubuntu};
    display: flex;
    align-items: start;
  }
  .button:hover {
    background: none !important;
  }
  .imageContainer {
    display: flex;
  }
  .textContainer {
    margin-left: 5%;
    min-width: 250px;
    line-height: 18px;
  }
  .username {
    font-weight: bold;
    text-decoration: none;
    color: ${blue};
    font-size: 14px;
    font-weight: bold;
    line-height: 20px;
    padding-bottom: 1px;
  }
  .profileImage {
    border-radius: 50%;
    width: 72px;
    height: 72px;
  }
  .background {
    font-size: 0.7em;
  }
  .interests {
    color: ${lightGrey};
    font-size: 12px;
  }
  .interestItems {
    color: ${lightGrey};
    font-size: 12px;
    margin-left: 2px;
  }
  .backgroundItem {
    color: ${grey};
    border: .5px solid ${lightGrey};
    border-radius: 3px;
    padding: 2px;
    font-size: 11px;
    margin-left: 3px;
    align-items: center;
    letter-spacing: -0.01em;
    font-weight: bold;
  }
  .projectsContainer {
    color: ${blue};
    cursor: pointer;
    text-decoration: none;
    font-size: 12px;
  }
  .projectsTitle:hover,
  .username:hover {
    text-decoration: underline;
  }
  .projectList {
    line-height: 25px;
  }
  .projectItem {
    text-decoration: none;
  }
  .line {
    border-top: 1px #dddfe2 solid;
    margin: 5px 0;
  }
`

function profile () {
  return bel`
    <div class=${css.main}>
        <div class=${css.imageContainer}>
          <img src=${profileImageUrl} class=${css.profileImage}>
        </div>
        <div class=${css.textContainer}>
          <a href=${githubUrl} class=${css.username}>@${data['username']}></a>
          ${showBackground(data)}
          ${showProjects(data)}
          ${showInterests(data)}
        </div>
    </div>`
}

/* --------------------------------------------------------
                          HELPERS
  ---------------------------------------------------------- */
function showBackground (data) {
 return bel`
  <div>
    <div class=${css.background}>
      <i class="fa fa-shield" aria-hidden="true"></i>
      ${data['background'].map((el)=>bel`<span class=${css.backgroundItem}>${el + ' '}</span>`)}
    </div>
  </div>`
}

function showProjects (data) {
var len = data['projects'].length
return bel`
  <div>
    <div class=${css.projectsContainer} onclick=${event => showHideProjects(event.currentTarget, data)}>
      <div class=${css.projectsTitle}>${len} projects listed</div>
    </div>
  </div>
`
}

function showHideProjects (el, data) {
console.log(el)
if (projectsExpanded === true) {
  var list = document.querySelector('#list')
  el.removeChild(list)
  projectsExpanded = false
} else {
  var projectList = bel`
    <div class=${css.projectList} id='list'>
      <div class=${css.line}></div>
      ${data['projects'].map((el)=>bel`<div class=${css.projectItem}>${el + ' '}</div>`)}
      <div class=${css.line}></div>
    </div>`
  el.appendChild(projectList)
  projectsExpanded = true
}
}

function showInterests (data) {
return bel`
  <div class=${css.interests}>
    <span class=${css.tag}>List of interests:</span>
    ${data['interests'].map((el)=>bel`<span class=${css.interestItems}>${el + ' '}</span>`)}
  </div>`
}

var html = profile()
document.body.appendChild(html)

PROFILE CARD 2

var bel = require('bel')
var csjs = require('csjs-inject')

/* --------------------------------------------------------
                          FONTS
---------------------------------------------------------- */

var fonts             = ['https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css', 'https://fonts.googleapis.com/css?family=Ubuntu']
var fontAwesome       = bel`<link href=${fonts[0]} rel='stylesheet' type='text/css'>`
var fontUbuntu        = bel`<link href=${fonts[1]} rel="stylesheet">`
var font_ubuntu       = 'Ubuntu, sans-serif'
document.head.appendChild(fontAwesome)
document.head.appendChild(fontUbuntu)
/* --------------------------------------------------------
                        VARIABLES
---------------------------------------------------------- */
// DATA
var data = {
  "username": "ninabreznik",
  "projects": [
    "http://www.refugeeswork.com",
    "http://www.wizardamigos.com",
    "http://fairydust.agency"
  ],
  "background": [
    "Javascript",
   "Entrepreneurship",
    "Community building"
  ],
  "interests": [
    "p2p web",
    "self employment",
    "javascript",
    "blockchain"
  ],
  "github": "https://github.com/ninabreznik"
}

// VARIABLES
var profileImageUrl   = 'https://nomadlist.com/assets/img/cities/phuket-thailand-500px.jpg'
var githubUrl = data['github']

//  COlORS
var blue = '#365899'
var grey = '#616770'
var lightGrey = '#90949c'

//STATE
var projectsExpanded = false;

// CSS
var css = csjs`
  .main {
    font-family: ${font_ubuntu};
    display: flex;
    align-items: start;
  }
  .button:hover {
    background: none !important;
  }
  .imageContainer {
    display: flex;
  }
  .textContainer {
    margin-left: 5%;
    min-width: 250px;
    line-height: 18px;
  }
  .username {
    font-weight: bold;
    text-decoration: none;
    color: ${blue};
    font-size: 14px;
    font-weight: bold;
    line-height: 20px;
    padding-bottom: 1px;
  }
  .profileImage {
    border-radius: 50%;
    width: 72px;
    height: 72px;
  }
  .background {
    font-size: 0.7em;
  }
  .interests {
    color: ${lightGrey};
    font-size: 12px;
  }
  .interestItems {
    color: ${lightGrey};
    font-size: 12px;
    margin-left: 2px;
  }
  .backgroundItem {
    color: ${grey};
    border: .5px solid ${lightGrey};
    border-radius: 3px;
    padding: 2px;
    font-size: 11px;
    margin-left: 3px;
    align-items: center;
    letter-spacing: -0.01em;
    font-weight: bold;
  }
  .projectsContainer {
    color: ${blue};
    cursor: pointer;
    text-decoration: none;
    font-size: 12px;
  }
  .projectsTitle:hover,
  .username:hover {
    text-decoration: underline;
  }
  .projectList {
    line-height: 25px;
  }
  .projectItem {
    text-decoration: none;
  }
  .line {
    border-top: 1px #dddfe2 solid;
    margin: 5px 0;
  }
`

function profile () {
  return bel`
    <div class=${css.main}>
        <div class=${css.imageContainer}>
          <img src=${profileImageUrl} class=${css.profileImage}>
        </div>
        <div class=${css.textContainer}>
          <a href=${githubUrl} class=${css.username}>@${data['username']}></a>
          ${showBackground(data)}
          ${showProjects(data)}
          ${showInterests(data)}
        </div>
    </div>`
}

/* --------------------------------------------------------
                          HELPERS
  ---------------------------------------------------------- */
function showBackground (data) {
 return bel`
  <div>
    <div class=${css.background}>
      <i class="fa fa-shield" aria-hidden="true"></i>
      ${data['background'].map((el)=>bel`<span class=${css.backgroundItem}>${el + ' '}</span>`)}
    </div>
  </div>`
}

function showProjects (data) {
var len = data['projects'].length
return bel`
  <div>
    <div class=${css.projectsContainer} onclick=${event => showHideProjects(event.currentTarget, data)}>
      <div class=${css.projectsTitle}>${len} projects listed</div>
    </div>
  </div>
`
}

function showHideProjects (el, data) {
console.log(el)
if (projectsExpanded === true) {
  var list = document.querySelector('#list')
  el.removeChild(list)
  projectsExpanded = false
} else {
  var projectList = bel`
    <div class=${css.projectList} id='list'>
      <div class=${css.line}></div>
      ${data['projects'].map((el)=>bel`<div class=${css.projectItem}>${el + ' '}</div>`)}
      <div class=${css.line}></div>
    </div>`
  el.appendChild(projectList)
  projectsExpanded = true
}
}

function showInterests (data) {
return bel`
  <div class=${css.interests}>
    <span class=${css.tag}>List of interests:</span>
    ${data['interests'].map((el)=>bel`<span class=${css.interestItems}>${el + ' '}</span>`)}
  </div>`
}

var html = profile()
document.body.appendChild(html)

[serapath]

@kiecoo

The code examples nina has already show how to use the component in the end ... otherwise, let me try to explain whats going on :-)

Your codepens both have module.exports = ....
So it is totally normal that nothing shows.

The whole code defines the component so that you can use it, but you do not use it yet.

So what i recommend and what you need is something like moving the line module.exports = ... to the end of the codepen ...and then basically comment it out and rather just use it :P

// .... lots of lines of code on codepen to define the component ...
// ....
// ....at some point the codepen end and now you have:

// module.exports = card

var el = card()
document.body.appendChild(el)