Demo animation effect for new home page
To add this widget to a web page, you need:
- Include CSS and JS files (see CDN links)
- Insert
<PPSWidget></PPSWidget>to right place on the web page
Example:
<html>
<head>
<title>Hello</title>
<link rel="stylesheet" href="https://greenglobal.github.io/ppsloop/ppsloop.css">
</head>
<body>
<!-- add widget here -->
<PPSWidget id="widgetTechTeam" image-path="/path/to/images/dir/" lang="en"></PPSWidget>
<!-- or display people only version -->
<PPSWidget type="simple" project="escope" image-path="/path/to/images/dir/"></PPSWidget>
<script src="https://greenglobal.github.io/ppsloop/ppsloop.js"></script>
</body>
</html>
By adding this widget, you got a global object PPSW with the following methods:
Return an array which contains the list of people.
Return list of projects.
Return list of tech stacks.
Return people who has the given skill.
Ex:
let whoCanUseAngular = PPSW.getPeopleBySkill('angular');
console.log(whoCanUseAngular);
Return an array of people who has the given skill.
Ex:
let whatBuiltWithAngular = PPSW.getProjectStacks('angular');
console.log(whatBuiltWithAngular);
Return an array of people who involved in the given project.
Ex:
let whoInvolveEscope = PPSW.getProjectMembers('Escope');
console.log(whoInvolveEscope);
Start initializing with given data. This method can be called just once. The second call does nothing.
PPSW.init(data);
Return true if init() has been called at least once early.
-
Dev (fast update)
-
Production (stable)
git clone https://github.com/greenglobal/ppsloop.git
cd ppsloop
npm i
npm start
If everything goes well, it would build a compiled version to "/dist", open at 8080 and start watching changes.
To dev, just modify source codes from /src, then reload webpage to see updates.
To build, run:
npm run build
The last result will be saved into "/docs".
The MIT License (MIT)