wizardamigos / profiles

Fork to make your profile

.github

Learning the magical literacy of the future

profiles's Issues

AMA (ask me anything)

---

[feature] search & filter bar concept

• this https://codepen.io/gzabrisk/pen/rLBwk and this https://codepen.io/ewiener/pen/eZgaaW
  • a good start, but we really need to think what are all the details we need :-)
  • i'll also search and maybe create a codepen ... but a good start

---

What are all the "features" we want to be able to do? How do we want to interact with the profiles? :-)

• related: #10

AMA

{
    "username": "yesthisisjose",
    "name":"José Topete",
    "projects": [
    ],
    "background": [
        "English tutor",
        "Salesperson",
        "Social researcher 5 years"
    ],
    "interests":[
        "MEAN Full-stack",
        "blockchain",
        "mining",
        "remote work"
    ],
    "github": "https://github.com/yesthisisjose"
}
  

[feature] user private gitter message iframe

if the user profile card is expanded or flipped, there should be a way to send a private gitter message to the user, by embedding it in a small iframe in the user profile card.

https://gitter.im/{{username}}/~embed

example:
https://gitter.im/serapath/~embed

[feature] user activity feed from github

to retrieve all recent user activities of the projects a user lists in his config.json and display it as a list of links to click and open the user activity on github in a new tab

v1.1.0 (future)

• list all project

[feature] animated card gallery component

the searchbar filters and searches and does all kinds of stuff ... and then gives updated filtered data to the "gallery component" so that the user can see a nice result
...

example code from brainstorming:

var wizard_gallery = require('wizard_gallery')
var wizard_searchbar = require('wizard_searchbar')
var get_github_data = require('get-github-data')
var bel = require('bel')

// usage example
get_github_data(function (data) {
   var searchbar = wizard_searchbar(data)
   var gallery = wizard_gallery()
   

   // gallery.update(data)

   searchbar.on(gallery)
   
   var app = bel`
     <div class="wizardpage">
       ${searchbar.render()}
       ${gallery.render()}
     </div>
   `
   document.body.appendChild(app)
})

/**********************************************************************
  gallery.js (module internals) [example]
**********************************************************************/
module.exports = gallery

var _data
var dom

function gallery (data) {
   _data = data
   var api = {
     update: function (newdata) {
       _data = newdata
        var tmp = template(_data)
        dom.parentElement.replaceElement(tmp, dom)
        dom = tmp
     }
     render: function () {
        dom = template(_data)
        return dom
     }
   }
   return api
}
/**********************************************************************
  searchbar.js (module internals) [example]
**********************************************************************/
var _data = {}
var listteners = []
var searchbar = {
   on: function (gallery) {
      listeners.push(gallery)
   },
   trigger: function (data) {
     listeners.forEach(gallery => gallery.update(_data)
   }
}


input.addEventListener('change', function (event) {
   var userinput = event.target.value
   _data.selection = userinput
   searchbar.trigger(_data)
})

[feature] search & filter bar javascript logic

to make the search & filter bar do something

• related: #7

[feature] profile card

• 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

[feature] retrieve `config.json` profile data from github

1. Use ajax request to retrieve data
2. cache the data in localstorage (or indexDB)
3. use etag to check if data updates are available

v1.0.0 (next)

http://wizardamigos.com/profiles/

TODOs for version 1.0.0

(if you want to work on an issue - just got to the issue and assign it to you 👍

• profiles page concept #6
  • responsive layout of many profile cards #14
  • retrieve config.json data from github profiles #9 @kiecoo
• search & filter bar visual interaction concept #7 @jameslin3263
  • search & filter bar javascript logic #10 @jameslin3263
• profile card #8 @Yugalitree @TzuYuanLiu
  • user recent activity feed #12
  • add user private gitter message chat #13 @kiecoo
• user card gallery [feature] animated card gallery component
  • #15 @JamesLin @tzuyuan

[feature] profiles page design concept

I have a idea to improve the layout which could recognize everyone more easily. ( maybe add everyone's photo or other methods. )
And create a group view to see everyone in which group and do what project now.

[feature] responsive layout of many profile cards