-
Notifications
You must be signed in to change notification settings - Fork 6
/
index.html
217 lines (179 loc) · 8.07 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
<!DOCTYPE html>
<head>
<title>Pure CSS Skills Diagram</title>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width,initial-scale=1">
<link href="css/demo.css" rel="stylesheet" />
<link href="css/ladda.css" rel="stylesheet" />
<link href="css/rainbow.github.css" rel="stylesheet" />
<link href="css/skills-diagram.css" rel="stylesheet" />
</head>
<body class="cf">
<h1 class="center">CSS Skills Diagram</h1>
<h2>Key features:</h2>
<ul>
<li>Mobile-ready</li>
<li>Core is done in pure CSS</li>
<li>Pieces are not tightly coupled</li>
<li>Can easily work with external data sources</li>
</ul>
<h2>Live data demo</h2>
<p>This demo is powered with a tiny Javascript that retrieves data from
<a href="http://coderbits.com">coderbits.com</a> profile <a href="https://coderbits.com/api">API</a> and pushes it into the diagram. See it in action:</p>
<p class="tip"><strong>Tip:</strong> diagram will look different every time you submit the form</p>
<form id="cb-diagram-form">
<label for="cb-subject">Display</label>
<select id="cb-subject">
<option value="skills">Skills</option>
<option value="languages">Languages</option>
<option value="environments">Environments</option>
<option value="frameworks">Frameworks</option>
<option value="tools">Tools</option>
<option value="interests">Interests</option>
<option value="traits">Traits</option>
<option value="areas">Areas</option>
</select>
<label for="cb-username">of coderbits.com/</label>
<input type="text" id="cb-username" placeholder="<coderbits username>" />
<button class="ladda-button red zoom-in">
<span class="ladda-label">Submit</span>
<span class="ladda-spinner"></span>
</button>
</form>
<dl class="skills-diagram" data-cb-username="scott" data-cb-subject="languages"></dl>
<h3>Usage</h3>
<ol>
<li>Download and include <a href="http://sergeylukin.com/css-skills-diagram/css/skills-diagram.css">skills-diagram.css</a>
<pre><code data-language="html"><link rel="stylesheet"
href="/css/skills-diagram.css" /></code></pre>
</li>
<li>Download and include <a
href="http://sergeylukin.com/css-skills-diagram/js/skills-diagram.coderbits.js">skills-diagram.coderbits.js</a> (requires jQuery)
<pre><code data-language="html"><script src="/js/skills-diagram.coderbits.js"></script></code></pre>
</li>
<li>Wherever you wish to show the diagram widget, include following HTML:
<pre><code data-language="html"><dl class="skills-diagram" data-cb-username="USERNAME" data-cb-subject="SUBJECT"></dl>
</code></pre>
Replace username and subject accordingly. Subject is one of following at
the moment of writing (refer to API to see if there are more):
<code>skills, languages, environments, frameworks, tools, interests, traits, areas</code>
</li>
</ol>
<h2>Static Demo</h2>
<p>And this is just a simple static HTML/CSS example based on hard-coded data.</p>
<dl class="skills-diagram">
<dt class="skill-5">UNIX</dt>
<dd>5</dd>
<dt class="skill-10">Ruby</dt>
<dd>10</dd>
<dt class="skill-3">Java</dt>
<dd>3</dd>
<dt class="skill-8">PHP</dt>
<dd>8</dd>
<dt class="skill-4">RegEx</dt>
<dd>4</dd>
<dt class="skill-6">HTML5</dt>
<dd>6</dd>
<dt class="skill-7">JavaScript</dt>
<dd>7</dd>
<dt class="skill-9">CSS</dt>
<dd>9</dd>
<dt class="skill-2">C#</dt>
<dd>2</dd>
</dl>
<h3>Usage</h3>
<ol>
<li>Download and include <a href="http://sergeylukin.com/css-skills-diagram/css/skills-diagram.css">skills-diagram.css</a>
<pre><code data-language="html"><link rel="stylesheet"
href="/css/skills-diagram.css" /></code></pre>
</li>
<li>Wherever you wish to show the diagram, include HTML similar to following:
<pre><code data-language="html"><dl class="skills-diagram">
<dt class="skill-5">UNIX</dt>
<dd>5</dd>
<dt class="skill-10">Ruby</dt>
<dd>10</dd>
<dt class="skill-3">Java</dt>
<dd>3</dd>
<dt class="skill-8">PHP</dt>
<dd>8</dd>
<dt class="skill-4">RegEx</dt>
<dd>4</dd>
<dt class="skill-6">HTML5</dt>
<dd>6</dd>
<dt class="skill-7">JavaScript</dt>
<dd>7</dd>
<dt class="skill-9">CSS</dt>
<dd>9</dd>
<dt class="skill-2">C#</dt>
<dd>2</dd>
</dl></code></pre>
</li>
</ol>
<h2>Thanks to</h2>
<ul>
<li><a href="http://executebook.com">ExecuteBook</a> for being so
inspirational! I did this experiment right after reading it.</li>
<li><a href="https://coderbits.com/scott">Scott Smith</a> for
great <a href="https://coderbits.com/api">coderbits API</a>
and for the idea to connect this diagram to it</li>
<li><a href="https://coderbits.com/nedzadarek">Darek Nędza</a> for
intensive testing</a></li>
<li><a href="https://plus.google.com/107807505287232434305/about">Vernon
Adams</a> for lovely font "Oswald" I'm using on this page</a></li>
<li><a href="http://subtlepatterns.com/">subtlepatterns.com</a> for lovely
texture I'm using here for background.</li>
<li>..and everyone who was giving their feedback. Thank you all!</li>
</ul>
<h2>TODO</h2>
<ul>
<li>Add caption on hover</li>
<li>Support multi lines</li>
<li>Drop jQuery from skills-diagram.coderbits.js</li>
<li>Find a way to render relatively small values</li>
</ul>
<p>This page is constantly updated and is directly connected to <a
href="https://github.com/sergeylukin/css-skills-diagram">Github repo</a>. Any
contribution is appreciated.</p>
<footer>
<small>Created by <a href="http://sergeylukin.com">Sergey Lukin</a> / <a href="http://twitter.com/sergey_lukin">@sergey_lukin</a></small>
</footer>
<div id="disqus_thread"></div>
<noscript>Please enable JavaScript to view the <a href="http://disqus.com/?ref_noscript">comments powered by Disqus.</a></noscript>
<script type="text/javascript">
var disqus_shortname = 'sergeylukin',
disqus_identifier = '/css-skills-diagram';
/* * * DON'T EDIT BELOW THIS LINE * * */
(function() {
var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
dsq.src = '//' + disqus_shortname + '.disqus.com/embed.js';
(document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
})();
</script>
<div class="social-buttons">
<!-- Twitter button -->
<a href="https://twitter.com/share" class="twitter-share-button" data-via="sergey_lukin" data-hashtags="css">Tweet</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
<!-- Google Plus button -->
<div class="g-plusone" data-size="medium"></div>
<script type="text/javascript">(function() {var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;po.src = 'https://apis.google.com/js/plusone.js';var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);})();</script>
</div>
<!-- GitHub fork ribbon -->
<a href="https://github.com/sergeylukin/css-skills-diagram" id="github"><img style="position: absolute; top: 0; right: 0; border: 0;" src="http://s3.amazonaws.com/github/ribbons/forkme_right_darkblue_121621.png" alt="Fork me on GitHub" /></a>
<!-- Resize img -->
<img src="img/resize.png" alt="Resize me!" id="resize" />
<!-- Rainbow Syntax Highlighter -->
<script src="js/rainbow-custom.min.js"></script>
<!-- Ladda button -->
<script src="js/ladda.js"></script>
<script src="js/spin.js"></script>
<script src="js/jquery-1.10.1.min.js"></script>
<!-- SkillsDiagram for Coderbits.com -->
<script src="js/skills-diagram.coderbits.js"></script>
<!-- Demo app script -->
<script src="js/demo.js"></script>
<!-- Analytics -->
<script type="text/javascript">var _gaq = _gaq || [];_gaq.push(['_setAccount', 'UA-31126253-1']);_gaq.push(['_trackPageview']);(function() {var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);})();</script>
</body>
</html>