mirror of
https://github.com/Decentralized-ID/decentralized-id.github.io.git
synced 2024-12-17 19:44:31 -05:00
Merge pull request #4 from CryptoKass/master
Particle banner for homepage
This commit is contained in:
commit
d998e9277b
251
Gemfile.lock
Normal file
251
Gemfile.lock
Normal file
@ -0,0 +1,251 @@
|
||||
GEM
|
||||
remote: https://rubygems.org/
|
||||
specs:
|
||||
activesupport (4.2.10)
|
||||
i18n (~> 0.7)
|
||||
minitest (~> 5.1)
|
||||
thread_safe (~> 0.3, >= 0.3.4)
|
||||
tzinfo (~> 1.1)
|
||||
addressable (2.5.2)
|
||||
public_suffix (>= 2.0.2, < 4.0)
|
||||
coffee-script (2.4.1)
|
||||
coffee-script-source
|
||||
execjs
|
||||
coffee-script-source (1.11.1)
|
||||
colorator (1.1.0)
|
||||
commonmarker (0.17.13)
|
||||
ruby-enum (~> 0.5)
|
||||
concurrent-ruby (1.1.5)
|
||||
dnsruby (1.61.2)
|
||||
addressable (~> 2.5)
|
||||
em-websocket (0.5.1)
|
||||
eventmachine (>= 0.12.9)
|
||||
http_parser.rb (~> 0.6.0)
|
||||
ethon (0.12.0)
|
||||
ffi (>= 1.3.0)
|
||||
eventmachine (1.2.7)
|
||||
execjs (2.7.0)
|
||||
faraday (0.15.4)
|
||||
multipart-post (>= 1.2, < 3)
|
||||
ffi (1.10.0)
|
||||
forwardable-extended (2.6.0)
|
||||
gemoji (3.0.0)
|
||||
github-pages (197)
|
||||
activesupport (= 4.2.10)
|
||||
github-pages-health-check (= 1.16.1)
|
||||
jekyll (= 3.7.4)
|
||||
jekyll-avatar (= 0.6.0)
|
||||
jekyll-coffeescript (= 1.1.1)
|
||||
jekyll-commonmark-ghpages (= 0.1.5)
|
||||
jekyll-default-layout (= 0.1.4)
|
||||
jekyll-feed (= 0.11.0)
|
||||
jekyll-gist (= 1.5.0)
|
||||
jekyll-github-metadata (= 2.12.1)
|
||||
jekyll-mentions (= 1.4.1)
|
||||
jekyll-optional-front-matter (= 0.3.0)
|
||||
jekyll-paginate (= 1.1.0)
|
||||
jekyll-readme-index (= 0.2.0)
|
||||
jekyll-redirect-from (= 0.14.0)
|
||||
jekyll-relative-links (= 0.6.0)
|
||||
jekyll-remote-theme (= 0.3.1)
|
||||
jekyll-sass-converter (= 1.5.2)
|
||||
jekyll-seo-tag (= 2.5.0)
|
||||
jekyll-sitemap (= 1.2.0)
|
||||
jekyll-swiss (= 0.4.0)
|
||||
jekyll-theme-architect (= 0.1.1)
|
||||
jekyll-theme-cayman (= 0.1.1)
|
||||
jekyll-theme-dinky (= 0.1.1)
|
||||
jekyll-theme-hacker (= 0.1.1)
|
||||
jekyll-theme-leap-day (= 0.1.1)
|
||||
jekyll-theme-merlot (= 0.1.1)
|
||||
jekyll-theme-midnight (= 0.1.1)
|
||||
jekyll-theme-minimal (= 0.1.1)
|
||||
jekyll-theme-modernist (= 0.1.1)
|
||||
jekyll-theme-primer (= 0.5.3)
|
||||
jekyll-theme-slate (= 0.1.1)
|
||||
jekyll-theme-tactile (= 0.1.1)
|
||||
jekyll-theme-time-machine (= 0.1.1)
|
||||
jekyll-titles-from-headings (= 0.5.1)
|
||||
jemoji (= 0.10.2)
|
||||
kramdown (= 1.17.0)
|
||||
liquid (= 4.0.0)
|
||||
listen (= 3.1.5)
|
||||
mercenary (~> 0.3)
|
||||
minima (= 2.5.0)
|
||||
nokogiri (>= 1.8.5, < 2.0)
|
||||
rouge (= 2.2.1)
|
||||
terminal-table (~> 1.4)
|
||||
github-pages-health-check (1.16.1)
|
||||
addressable (~> 2.3)
|
||||
dnsruby (~> 1.60)
|
||||
octokit (~> 4.0)
|
||||
public_suffix (~> 3.0)
|
||||
typhoeus (~> 1.3)
|
||||
html-pipeline (2.10.0)
|
||||
activesupport (>= 2)
|
||||
nokogiri (>= 1.4)
|
||||
http_parser.rb (0.6.0)
|
||||
i18n (0.9.5)
|
||||
concurrent-ruby (~> 1.0)
|
||||
jekyll (3.7.4)
|
||||
addressable (~> 2.4)
|
||||
colorator (~> 1.0)
|
||||
em-websocket (~> 0.5)
|
||||
i18n (~> 0.7)
|
||||
jekyll-sass-converter (~> 1.0)
|
||||
jekyll-watch (~> 2.0)
|
||||
kramdown (~> 1.14)
|
||||
liquid (~> 4.0)
|
||||
mercenary (~> 0.3.3)
|
||||
pathutil (~> 0.9)
|
||||
rouge (>= 1.7, < 4)
|
||||
safe_yaml (~> 1.0)
|
||||
jekyll-avatar (0.6.0)
|
||||
jekyll (~> 3.0)
|
||||
jekyll-coffeescript (1.1.1)
|
||||
coffee-script (~> 2.2)
|
||||
coffee-script-source (~> 1.11.1)
|
||||
jekyll-commonmark (1.3.1)
|
||||
commonmarker (~> 0.14)
|
||||
jekyll (>= 3.7, < 5.0)
|
||||
jekyll-commonmark-ghpages (0.1.5)
|
||||
commonmarker (~> 0.17.6)
|
||||
jekyll-commonmark (~> 1)
|
||||
rouge (~> 2)
|
||||
jekyll-default-layout (0.1.4)
|
||||
jekyll (~> 3.0)
|
||||
jekyll-feed (0.11.0)
|
||||
jekyll (~> 3.3)
|
||||
jekyll-gist (1.5.0)
|
||||
octokit (~> 4.2)
|
||||
jekyll-github-metadata (2.12.1)
|
||||
jekyll (~> 3.4)
|
||||
octokit (~> 4.0, != 4.4.0)
|
||||
jekyll-include-cache (0.2.0)
|
||||
jekyll (>= 3.7, < 5.0)
|
||||
jekyll-mentions (1.4.1)
|
||||
html-pipeline (~> 2.3)
|
||||
jekyll (~> 3.0)
|
||||
jekyll-optional-front-matter (0.3.0)
|
||||
jekyll (~> 3.0)
|
||||
jekyll-paginate (1.1.0)
|
||||
jekyll-readme-index (0.2.0)
|
||||
jekyll (~> 3.0)
|
||||
jekyll-redirect-from (0.14.0)
|
||||
jekyll (~> 3.3)
|
||||
jekyll-relative-links (0.6.0)
|
||||
jekyll (~> 3.3)
|
||||
jekyll-remote-theme (0.3.1)
|
||||
jekyll (~> 3.5)
|
||||
rubyzip (>= 1.2.1, < 3.0)
|
||||
jekyll-sass-converter (1.5.2)
|
||||
sass (~> 3.4)
|
||||
jekyll-seo-tag (2.5.0)
|
||||
jekyll (~> 3.3)
|
||||
jekyll-sitemap (1.2.0)
|
||||
jekyll (~> 3.3)
|
||||
jekyll-swiss (0.4.0)
|
||||
jekyll-theme-architect (0.1.1)
|
||||
jekyll (~> 3.5)
|
||||
jekyll-seo-tag (~> 2.0)
|
||||
jekyll-theme-cayman (0.1.1)
|
||||
jekyll (~> 3.5)
|
||||
jekyll-seo-tag (~> 2.0)
|
||||
jekyll-theme-dinky (0.1.1)
|
||||
jekyll (~> 3.5)
|
||||
jekyll-seo-tag (~> 2.0)
|
||||
jekyll-theme-hacker (0.1.1)
|
||||
jekyll (~> 3.5)
|
||||
jekyll-seo-tag (~> 2.0)
|
||||
jekyll-theme-leap-day (0.1.1)
|
||||
jekyll (~> 3.5)
|
||||
jekyll-seo-tag (~> 2.0)
|
||||
jekyll-theme-merlot (0.1.1)
|
||||
jekyll (~> 3.5)
|
||||
jekyll-seo-tag (~> 2.0)
|
||||
jekyll-theme-midnight (0.1.1)
|
||||
jekyll (~> 3.5)
|
||||
jekyll-seo-tag (~> 2.0)
|
||||
jekyll-theme-minimal (0.1.1)
|
||||
jekyll (~> 3.5)
|
||||
jekyll-seo-tag (~> 2.0)
|
||||
jekyll-theme-modernist (0.1.1)
|
||||
jekyll (~> 3.5)
|
||||
jekyll-seo-tag (~> 2.0)
|
||||
jekyll-theme-primer (0.5.3)
|
||||
jekyll (~> 3.5)
|
||||
jekyll-github-metadata (~> 2.9)
|
||||
jekyll-seo-tag (~> 2.0)
|
||||
jekyll-theme-slate (0.1.1)
|
||||
jekyll (~> 3.5)
|
||||
jekyll-seo-tag (~> 2.0)
|
||||
jekyll-theme-tactile (0.1.1)
|
||||
jekyll (~> 3.5)
|
||||
jekyll-seo-tag (~> 2.0)
|
||||
jekyll-theme-time-machine (0.1.1)
|
||||
jekyll (~> 3.5)
|
||||
jekyll-seo-tag (~> 2.0)
|
||||
jekyll-titles-from-headings (0.5.1)
|
||||
jekyll (~> 3.3)
|
||||
jekyll-watch (2.2.1)
|
||||
listen (~> 3.0)
|
||||
jemoji (0.10.2)
|
||||
gemoji (~> 3.0)
|
||||
html-pipeline (~> 2.2)
|
||||
jekyll (~> 3.0)
|
||||
kramdown (1.17.0)
|
||||
liquid (4.0.0)
|
||||
listen (3.1.5)
|
||||
rb-fsevent (~> 0.9, >= 0.9.4)
|
||||
rb-inotify (~> 0.9, >= 0.9.7)
|
||||
ruby_dep (~> 1.2)
|
||||
mercenary (0.3.6)
|
||||
mini_portile2 (2.4.0)
|
||||
minima (2.5.0)
|
||||
jekyll (~> 3.5)
|
||||
jekyll-feed (~> 0.9)
|
||||
jekyll-seo-tag (~> 2.1)
|
||||
minitest (5.11.3)
|
||||
multipart-post (2.0.0)
|
||||
nokogiri (1.10.2)
|
||||
mini_portile2 (~> 2.4.0)
|
||||
octokit (4.14.0)
|
||||
sawyer (~> 0.8.0, >= 0.5.3)
|
||||
pathutil (0.16.2)
|
||||
forwardable-extended (~> 2.6)
|
||||
public_suffix (3.0.3)
|
||||
rb-fsevent (0.10.3)
|
||||
rb-inotify (0.10.0)
|
||||
ffi (~> 1.0)
|
||||
rouge (2.2.1)
|
||||
ruby-enum (0.7.2)
|
||||
i18n
|
||||
ruby_dep (1.5.0)
|
||||
rubyzip (1.2.2)
|
||||
safe_yaml (1.0.5)
|
||||
sass (3.7.3)
|
||||
sass-listen (~> 4.0.0)
|
||||
sass-listen (4.0.0)
|
||||
rb-fsevent (~> 0.9, >= 0.9.4)
|
||||
rb-inotify (~> 0.9, >= 0.9.7)
|
||||
sawyer (0.8.1)
|
||||
addressable (>= 2.3.5, < 2.6)
|
||||
faraday (~> 0.8, < 1.0)
|
||||
terminal-table (1.8.0)
|
||||
unicode-display_width (~> 1.1, >= 1.1.1)
|
||||
thread_safe (0.3.6)
|
||||
typhoeus (1.3.1)
|
||||
ethon (>= 0.9.0)
|
||||
tzinfo (1.2.5)
|
||||
thread_safe (~> 0.1)
|
||||
unicode-display_width (1.5.0)
|
||||
|
||||
PLATFORMS
|
||||
ruby
|
||||
|
||||
DEPENDENCIES
|
||||
github-pages
|
||||
jekyll-include-cache
|
||||
|
||||
BUNDLED WITH
|
||||
2.0.1
|
6
assets/particle-banner/particleBanner.html
Normal file
6
assets/particle-banner/particleBanner.html
Normal file
@ -0,0 +1,6 @@
|
||||
<div class="did-title">
|
||||
<div class="content">
|
||||
<h1>Decentralized Identity</h1>
|
||||
</div>
|
||||
<canvas id="did-canvas"></canvas>
|
||||
</div>
|
28
assets/particle-banner/particles.css
Normal file
28
assets/particle-banner/particles.css
Normal file
@ -0,0 +1,28 @@
|
||||
.did-title {
|
||||
font-family: sans-serif;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 200px;
|
||||
text-align: center;
|
||||
vertical-align: middle;
|
||||
color:#0f477e;
|
||||
overflow: visible;
|
||||
font-size: 2em;
|
||||
}
|
||||
|
||||
.did-title .content{
|
||||
z-index: 100;
|
||||
position:absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%,-50%);
|
||||
text-shadow: 0px 0px 10px #f0fff0, 0px 0px 20px #f0fff0;
|
||||
}
|
||||
|
||||
.did-title canvas{
|
||||
position:absolute;
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
151
assets/particle-banner/particles.js
Normal file
151
assets/particle-banner/particles.js
Normal file
@ -0,0 +1,151 @@
|
||||
// Kass's Customizable Node/Particles Title
|
||||
|
||||
// settings:
|
||||
const canvasName = "did-canvas"
|
||||
const maxNodes = 40 // using too many will impact performance.
|
||||
const nodeMinSize = 3
|
||||
const nodeMaxSize = 4
|
||||
const nodeMinSpeed = 0.02
|
||||
const nodeMaxSpeed = 0.3
|
||||
const nodeMaxConnections = 20
|
||||
const connectionThickness = 2;
|
||||
const connectionDist = 102
|
||||
const connectionColor = "#0f477e"
|
||||
const nodeColors = ['#0f477e'] // you may enter multiple colors ["#65c665", "#40a040"]
|
||||
const warpEdges = false // if false nodes will bounce off the edges
|
||||
const useIcon = false // if false then colored circles will be used
|
||||
const iconPath = "https://image.flaticon.com/icons/png/128/137/137068.png"
|
||||
const iconScale = 6
|
||||
const useTrail = false
|
||||
const backgroundColor = "#222222"
|
||||
// another example can be found here https://codepen.io/cryptokass/pen/mgbajy?editors=0010
|
||||
|
||||
// canvas reference:
|
||||
var canvas = document.getElementById(canvasName)
|
||||
var ctx = canvas.getContext('2d')
|
||||
|
||||
// store canvas size:
|
||||
let canvasHeight = +getComputedStyle(canvas).getPropertyValue("height").slice(0, -2);
|
||||
let canvasWidth = +getComputedStyle(canvas).getPropertyValue("width").slice(0, -2);
|
||||
|
||||
canvas.height = canvasHeight
|
||||
canvas.width = canvasWidth
|
||||
|
||||
// setup image
|
||||
var img = new Image()
|
||||
img.src = iconPath
|
||||
|
||||
// animation frame compatibility:
|
||||
window.requestAnimFrame = function()
|
||||
{
|
||||
return (
|
||||
window.requestAnimationFrame ||
|
||||
window.webkitRequestAnimationFrame ||
|
||||
window.mozRequestAnimationFrame ||
|
||||
window.oRequestAnimationFrame ||
|
||||
window.msRequestAnimationFrame ||
|
||||
function(callback) { window.setTimeout(callback, 1000 / 60) }
|
||||
);
|
||||
}();
|
||||
|
||||
// node class
|
||||
function Node(){
|
||||
|
||||
this.size = nodeMinSize + Math.random() * (nodeMaxSize-nodeMinSize)
|
||||
this.x = canvasWidth * Math.random()
|
||||
this.y = canvasHeight * Math.random()
|
||||
this.color = nodeColors[Math.floor(Math.random()*nodeColors.length)]
|
||||
this.connections = 0
|
||||
|
||||
// calculate starting velocity
|
||||
let speed = nodeMinSpeed + Math.random() * (nodeMaxSpeed-nodeMinSpeed)
|
||||
let theta = Math.random() * Math.PI * 2
|
||||
this.velocity = {x:speed * Math.sin(theta), y:speed * Math.cos(theta)}
|
||||
|
||||
// move this node
|
||||
this.move = function(){
|
||||
if (this.x + this.velocity.x >= canvas.width || this.x + this.velocity.x <= 0){
|
||||
if (warpEdges){
|
||||
this.x = (this.x + this.velocity.x >= canvas.width ) ? 0 : canvas.width
|
||||
} else {
|
||||
this.velocity.x = -this.velocity.x
|
||||
}
|
||||
}
|
||||
if (this.y + this.velocity.y >= canvas.height || this.y + this.velocity.y <= 0)
|
||||
{
|
||||
if (warpEdges) {
|
||||
this.y = (this.y + this.velocity.y >= canvas.height ) ? 0 : canvas.height
|
||||
} else {
|
||||
this.velocity.y = -this.velocity.y
|
||||
}
|
||||
|
||||
}
|
||||
this.x += this.velocity.x
|
||||
this.y += this.velocity.y
|
||||
this.connections = 0
|
||||
}
|
||||
|
||||
// draw this nodes connections
|
||||
this.drawConnections = function(index){
|
||||
for (let i=index+1; i < nodes.length; i++){
|
||||
let node = nodes[i]
|
||||
let dist = Math.sqrt(Math.pow(this.x - node.x,2) + Math.pow(this.y - node.y,2))
|
||||
|
||||
if (dist < connectionDist && node.connections < nodeMaxConnections && this.connections < nodeMaxConnections){
|
||||
ctx.globalAlpha = 1-dist/connectionDist
|
||||
ctx.beginPath()
|
||||
ctx.moveTo(this.x,this.y)
|
||||
ctx.lineTo(node.x, node.y)
|
||||
ctx.lineWidth = connectionThickness
|
||||
ctx.strokeStyle = connectionColor
|
||||
ctx.stroke()
|
||||
ctx.closePath()
|
||||
node.connections++
|
||||
this.connections++
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
this.draw = function(){
|
||||
ctx.globalAlpha = 1
|
||||
if (useIcon){
|
||||
let _size = this.size * iconScale
|
||||
let dx = this.x - _size/2
|
||||
let dy = this.y - _size/2
|
||||
ctx.drawImage(img, dx, dy, _size, _size)
|
||||
}else{
|
||||
ctx.beginPath()
|
||||
ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2)
|
||||
ctx.fillStyle = this.color
|
||||
ctx.fill()
|
||||
ctx.closePath()
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
var nodes = []
|
||||
for (let i=0; i < maxNodes; i++){
|
||||
var node = new Node()
|
||||
nodes.push(node)
|
||||
}
|
||||
|
||||
function tick(){
|
||||
if (useTrail){
|
||||
ctx.globalAlpha = 0.1
|
||||
ctx.rect(0,0,canvas.width, canvas.height)
|
||||
ctx.fillStyle = backgroundColor
|
||||
ctx.fill()
|
||||
}else{
|
||||
ctx.clearRect(0, 0, canvas.width, canvas.height)
|
||||
}
|
||||
for (let i=0; i < maxNodes; i++){
|
||||
nodes[i].drawConnections(i)
|
||||
}
|
||||
for (let i=0; i < maxNodes; i++){
|
||||
nodes[i].draw()
|
||||
nodes[i].move()
|
||||
}
|
||||
requestAnimFrame(tick);
|
||||
}
|
||||
|
||||
requestAnimFrame(tick);
|
11
index.md
11
index.md
@ -7,8 +7,15 @@ twitter:
|
||||
image : "https://infominer.id/DIDecentralized/assets/img/didecentral.png"
|
||||
---
|
||||
|
||||
<center><img src="assets/img/didecentral.png"/></center>
|
||||
|
||||
<!--<center><img src="assets/img/didecentral.png"/></center>-->
|
||||
<div class="did-title">
|
||||
<div class="content">
|
||||
<h1>Decentralized Identity</h1>
|
||||
</div>
|
||||
<canvas id="did-canvas"></canvas>
|
||||
</div>
|
||||
<link rel="stylesheet" type="text/css" href="/DIDecentralized/assets/particle-banner/particles.css">
|
||||
<script src="/DIDecentralized/assets/particle-banner/particles.js"></script>
|
||||
|
||||
>A good self‐sovereign identity system will allow individuals to directly influence how companies, governments, and others correlate our interactions across different services and locations by default. It won’t fix all identity problems nor preclude alternative identity approaches, but it will put the individual in control of most uses of identity and give organizations a simpler, easier, more ethical way to use identity to improve how they provide services and products. When successful, it will not only enable individuals to exercise greater control over how companies and governments keep track of us, it will also illuminate those situations where self‐sovereign identity is restricted, facilitating a conversation about when and where such limits are appropriate. [Joe Andrieu -A Technology‐Free Definition of Self‐Sovereign Identity](https://github.com/jandrieu/rebooting-the-web-of-trust-fall2016/blob/master/topics-and-advance-readings/a-technology-free-definition-of-self-sovereign-identity.pdf)
|
||||
|
||||
|
Loading…
Reference in New Issue
Block a user