Skip to content

Commit b638f10

Browse files
author
James Harris
committed
d3 visualisation for skills
Started mobile responsive design
1 parent a1e1086 commit b638f10

File tree

10 files changed

+784
-273
lines changed

10 files changed

+784
-273
lines changed

Diff for: ‎js/skills.json

+77
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,77 @@
1+
{
2+
"name": "skills",
3+
"children": [
4+
{
5+
"name": "programming",
6+
"children": [
7+
{"name": "JavaScript", "size": 95},
8+
{"name": "TypeScript", "size": 80},
9+
{"name": "HTML 5", "size": 100},
10+
{"name": "CSS 3", "size": 90},
11+
{"name": "PHP 7", "size": 70},
12+
{"name": "C++", "size": 40},
13+
{"name": "Ruby", "size": 30},
14+
{"name": "Python", "size": 35}
15+
]
16+
},
17+
{
18+
"name": "frameworks",
19+
"children": [
20+
{"name": "AngularJS", "size": 100},
21+
{"name": "jQuery", "size": 80},
22+
{"name": "Bootstrap", "size": 90},
23+
{"name": "Bulma", "size": 80},
24+
{"name": "Gulp", "size": 90},
25+
{"name": "Webpack", "size": 30},
26+
{"name": "NodeJS", "size": 60}
27+
]
28+
},
29+
{
30+
"name": "design",
31+
"children": [
32+
{"name": "Photoshop", "size": 70},
33+
{"name": "Sketch", "size": 80},
34+
{"name": "Mobile first", "size": 98},
35+
{"name": "SVG", "size": 70},
36+
{"name": "UX", "size": 80},
37+
{"name": "D3", "size": 60}
38+
]
39+
},
40+
{
41+
"name": "process",
42+
"children": [
43+
{"name": "Agile Scrum", "size": 90},
44+
{"name": "CI Delivery", "size": 90},
45+
{"name": "TDD", "size": 40},
46+
{"name": "Architecture", "size": 90},
47+
{"name": "GIT", "size": 70},
48+
{"name": "User testing", "size": 80},
49+
{"name": "Code quality", "size": 90}
50+
]
51+
},
52+
{
53+
"name": "infrastructure",
54+
"children": [
55+
{"name": "Servers", "size": 90},
56+
{"name": "Linux", "size": 80},
57+
{"name": "Security", "size": 60}
58+
]
59+
},
60+
{
61+
"name": "other",
62+
"children": [
63+
{"name": "SEO", "size": 60},
64+
{"name": "OO Dev", "size": 70},
65+
{"name": "REST API", "size": 80},
66+
{"name": "MVC", "size": 50}
67+
]
68+
},
69+
{
70+
"name": "compliance",
71+
"children": [
72+
{"name": "Accessibility", "size": 95},
73+
{"name": "il8n", "size": 40}
74+
]
75+
}
76+
]
77+
}

Diff for: ‎package.json

+2
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,9 @@
1414
"author": "James Harris",
1515
"license": "Standard",
1616
"dependencies": {
17+
"@types/d3": "^4.5.0",
1718
"@types/jquery": "^2.0.34",
19+
"d3": "^4.5.0",
1820
"jquery": "^3.1.1"
1921
},
2022
"devDependencies": {

Diff for: ‎src/css/app.css

+66-35
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

Diff for: ‎src/index.html

+11-199
Original file line numberDiff line numberDiff line change
@@ -35,10 +35,11 @@
3535

3636
<div class="row">
3737

38-
<div class="col-xs-12 col-sm-3">
38+
<div class="col-xs-12 col-md-3 last-xs first-md">
3939
<nav>
40-
<img src="/src/img/profile-photo.png" class="img-responsive profile-photo" alt="Profile photo">
41-
40+
<div class="profile-photo">
41+
<img src="/src/img/profile-photo.png" class="img-responsive" alt="Profile photo">
42+
</div>
4243
<h3>Contact Me</h3>
4344

4445
<address>
@@ -179,7 +180,7 @@ <h3>References</h3>
179180
</nav>
180181
</div>
181182

182-
<div class="col-xs-12 col-sm-9 col-lg-7 col-lg-offset-1">
183+
<div class="col-xs-12 col-md-9 col-lg-7 col-lg-offset-1 first-xs last-md">
183184

184185
<main>
185186
<header>
@@ -324,203 +325,13 @@ <h4>APPLICATION / SOLUTIONS ARCHITECT</h4>
324325
</div>
325326

326327
<section class="skills">
327-
<h3>HOW WELL I KNOW MY STUFF</h3>
328-
329-
<div class="row">
330-
<div class="col-xs-5">
331-
<ul class="skills-list right-align">
332-
<li>
333-
JavaScript
334-
<span class="meter" data-value="100">
335-
<span class="inner"></span>
336-
</span>
337-
</li>
338-
<li>
339-
HTML 5
340-
<span class="meter" data-value="100">
341-
<span class="inner"></span>
342-
</span>
343-
</li>
344-
<li>
345-
CSS 3
346-
<span class="meter" data-value="100">
347-
<span class="inner"></span>
348-
</span>
349-
</li>
350-
<li>
351-
PHP 7
352-
<span class="meter" data-value="80">
353-
<span class="inner"></span>
354-
</span>
355-
</li>
356-
<li>
357-
MySQL
358-
<span class="meter" data-value="80">
359-
<span class="inner"></span>
360-
</span>
361-
</li>
362-
<li>
363-
Linux
364-
<span class="meter" data-value="80">
365-
<span class="inner"></span>
366-
</span>
367-
</li>
368-
<li>
369-
GIT
370-
<span class="meter" data-value="80">
371-
<span class="inner"></span>
372-
</span>
373-
</li>
374-
<li>
375-
Bootstrap / Bulma
376-
<span class="meter" data-value="100">
377-
<span class="inner"></span>
378-
</span>
379-
</li>
380-
<li>
381-
OO Coding
382-
<span class="meter" data-value="80">
383-
<span class="inner"></span>
384-
</span>
385-
</li>
386-
<li>
387-
TDD / Testing
388-
<span class="meter" data-value="80">
389-
<span class="inner"></span>
390-
</span>
391-
</li>
392-
<li>
393-
HTTP 1.1 / 2.0
394-
<span class="meter" data-value="80">
395-
<span class="inner"></span>
396-
</span>
397-
</li>
398-
<li>
399-
Photoshop / Sketch
400-
<span class="meter" data-value="60">
401-
<span class="inner"></span>
402-
</span>
403-
</li>
404-
<li>
405-
Build tools
406-
<span class="meter" data-value="80">
407-
<span class="inner"></span>
408-
</span>
409-
</li>
410-
<li>
411-
NodeJS
412-
<span class="meter" data-value="70">
413-
<span class="inner"></span>
414-
</span>
415-
</li>
416-
<li>
417-
Systems Design
418-
<span class="meter" data-value="60">
419-
<span class="inner"></span>
420-
</span>
421-
</li>
422-
</ul>
423-
</div>
424-
425-
<div class="col-xs-2 center-xs">
426-
<span class="line"></span>
427-
</div>
328+
<h3>WHAT ARE MY STRENGTHS?</h3>
428329

429-
<div class="col-xs-5">
430-
<ul class="skills-list">
431-
<li>
432-
<span class="meter" data-value="100">
433-
<span class="inner"></span>
434-
</span>
435-
Angular JS
436-
</li>
437-
<li>
438-
<span class="meter" data-value="100">
439-
<span class="inner"></span>
440-
</span>
441-
JQuery
442-
</li>
443-
<li>
444-
<span class="meter" data-value="100">
445-
<span class="inner"></span>
446-
</span>
447-
RESTFul API&rsquo;s
448-
</li>
449-
<li>
450-
<span class="meter" data-value="100">
451-
<span class="inner"></span>
452-
</span>
453-
Ajax
454-
</li>
455-
<li>
456-
<span class="meter" data-value="80">
457-
<span class="inner"></span>
458-
</span>
459-
MVC
460-
</li>
461-
<li>
462-
<span class="meter" data-value="80">
463-
<span class="inner"></span>
464-
</span>
465-
DB Design
466-
</li>
467-
<li>
468-
<span class="meter" data-value="60">
469-
<span class="inner"></span>
470-
</span>
471-
i8ln Design
472-
</li>
473-
<li>
474-
<span class="meter" data-value="80">
475-
<span class="inner"></span>
476-
</span>
477-
SEO
478-
</li>
479-
<li>
480-
<span class="meter" data-value="80">
481-
<span class="inner"></span>
482-
</span>
483-
UX Design
484-
</li>
485-
<li>
486-
<span class="meter" data-value="80">
487-
<span class="inner"></span>
488-
</span>
489-
Agile Scrum
490-
</li>
491-
<li>
492-
<span class="meter" data-value="100">
493-
<span class="inner"></span>
494-
</span>
495-
Mobile dev
496-
</li>
497-
<li>
498-
<span class="meter" data-value="60">
499-
<span class="inner"></span>
500-
</span>
501-
Modeling
502-
</li>
503-
<li>
504-
<span class="meter" data-value="60">
505-
<span class="inner"></span>
506-
</span>
507-
CI &amp; Delivery
508-
</li>
509-
<li>
510-
<span class="meter" data-value="80">
511-
<span class="inner"></span>
512-
</span>
513-
Servers
514-
</li>
515-
<li>
516-
<span class="meter" data-value="90">
517-
<span class="inner"></span>
518-
</span>
519-
TypeScript
520-
</li>
521-
</ul>
522-
</div>
330+
<div class="chart-container">
331+
<svg version="1.1" id="wp-chart" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 650 650" class="skills-chart">
332+
</svg>
523333
</div>
334+
524335
</section>
525336

526337
<div class="divider">
@@ -534,6 +345,7 @@ <h3>HOW WELL I KNOW MY STUFF</h3>
534345

535346
<!-- build:js js/app.min.js -->
536347
<script src="../node_modules/jquery/dist/jquery.js" type="text/javascript" charset="utf-8"></script>
348+
<script src="../node_modules/d3/build/d3.js" type="text/javascript" charset="utf-8"></script>
537349
<script src="js/app.js" type="text/javascript" charset="utf-8"></script>
538350
<!-- endbuild -->
539351
<script type="text/javascript" src="https://secure.skypeassets.com/i/scom/js/skype-uri.js"></script>

0 commit comments

Comments
 (0)