-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
147 lines (145 loc) · 9.62 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
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="theme-color" content="#2a0349">
<title>njmcode | web developer & tech lead</title>
<link rel="shortcut icon" href="dist/assets/img/icon-48.png">
<style>
/* Normalize.min.css */
progress,sub,sup{vertical-align:baseline}button,hr,input{overflow:visible}html{font-family:sans-serif;line-height:1.15;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0} figcaption, menu,article,aside,details,figure,footer,header,main,nav,section,summary{display:block}audio,canvas,progress,video{display:inline-block}audio:not([controls]){display:none;height:0} [hidden],template{display:none}a{background-color:transparent;-webkit-text-decoration-skip:objects}a:active,a:hover{outline-width:0}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}b,strong{font-weight:bolder}dfn{font-style:italic}h1{font-size:2em;margin:.67em 0}mark{background-color:#ff0;color:#000}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative}sub{bottom:-.25em}sup{top:-.5em}img{border-style:none}svg:not(:root){overflow:hidden}code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em}figure{margin:1em 40px}hr{box-sizing:content-box;height:0}button,input,optgroup,select,textarea{font:inherit;margin:0}optgroup{font-weight:700}button,input{}button,select{text-transform:none}[type=submit], [type=reset],button,html [type=button]{-webkit-appearance:button}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:none;padding:0}[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring{outline:ButtonText dotted 1px}fieldset{border:1px solid silver;margin:0 2px;padding:.35em .625em .75em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}textarea{overflow:auto}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-cancel-button,[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-input-placeholder{color:inherit;opacity:.54}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}
/* Critical path styling goes here */
</style>
<link rel="stylesheet" href="dist/css/main.css">
<link rel="manifest" href="manifest.json">
</head>
<body>
<div id="baseline-grid"></div>
<div id="wrap">
<header>
<h1><span class="dec" role="presentation">.:.</span> <span class="sitename">njmcode</span> <span class="dec" role="presentation">.:.</span></h1>
<div class="overview">
<p><strong>Neil McCallion</strong> - web developer, tech lead, evangelist and cake eater.</p>
<p>Senior JavaScript Engineer at the awesome <a href="https://shopkeep.com" target="_blank">ShopKeep</a>.</p>
</div>
</header>
<nav role="navigation">
<h2>Navigation</h2>
<ul>
<li><a href="#contact">Contact</a></li>
<li><a href="#work">Work</a></li>
<li><a href="#skills">Skills</a></li>
<li><a href="#info">Info</a></li>
</ul>
</nav>
<div id="main" role="main">
<section id="s-contact">
<a name="contact"></a>
<h2>Contact</h2>
<ul>
<li><a href="https://twitter.com/njmcode" target="_blank">@njmcode on Twitter</a> </li>
<li><a href="https://codepen.io/njmcode" target="_blank">njmcode on CodePen</a></li>
<li><a href="https://github.com/njmcode" target="_blank">njmcode on GitHub</a></li>
<li>skipley at hotmail dot com</li>
</ul>
</section>
<section id="s-work">
<a name="work"></a>
<h2>Work <small>(public)</small></h2>
<h3>As developer</h3>
<a class="img-link" href="https://codepen.io/collection/nbGQxZ/" target="_blank" title="Demoscene collection on CodePen">
<img src="dist/assets/img/cp-demoscene-640.png" width="320" alt="Screenshot of Demoscene collection on CodePen">
</a>
<ul>
<li><a href="https://moo.la/" target="_blank">Moola</a> - investment platform web app</li>
<li><a href="https://codepen.io/njmcode/" target="_blank">Codepen</a> - regular experiments and tinkering</li>
<li><a href="https://github.com/njmcode/modular-drum-app" target="_blank">Rassvet</a> modular drum machine (as seen in net magazine #268)</li>
<li><a href="http://globalgamejam.org/2016/games/digimancers" target="_blank">Digimancers</a> (Global Game Jam 2016 hack, winner of Belfast meetup)</li>
<li><a href="https://rehabstudio.com/work/anyone-for-fuball/" target="_blank">Fusball+</a> for Google+ Hangouts</li>
<li><a href="https://rehabstudio.com/work/blank-dedicate-a-frame/" target="_blank">Blank Dedicate A Frame</a> for Disney <small>[inactive]</small></li>
<li><a href="https://rehabstudio.com/work/nothing-but-wiiings-editions/" target="_blank">Wiiings Editions</a> for Red Bull <small>[inactive]</small></li>
<li><a href="https://github.com/njmcode" target="_blank">GitHub</a> personal repos</li>
</ul>
<h3>As technical lead / producer</h3>
<a class="img-link" href="http://againstviolentextremism.org" target="_blank" title="Against Violent Extremism website">
<img src="dist/assets/img/ave-640.png" width="320" alt="Screenshot of Against Violent Extremism websiten">
</a>
<ul>
<li><a href="https://rehabstudio.com/" target="_blank">rehabstudio.com</a></li>
<li><a href="http://againstviolentextremism.org" target="_blank">Against Violent Extremism</a> for ISD</li>
<li><a href="https://github.com/rehabstudio/fe-skeleton" target="_blank">+rehabstudio FE Skeleton</a></li>
</ul>
<p>Much of my output over the past decade has been super-secret stuff for clients, so it can't be shown here.
<a href="#contact">Hit me up</a> if you wish to discuss the nature of this work in more detail.</p>
</section>
<section id="s-skills">
<a name="skills"></a>
<h2>Skills</h2>
<h3>Web application development</h3>
<ul>
<li>Senior JavaScript Engineer, ShopKeep (2017-present)</li>
<li>UI Developer (Senior), Moola (2016-2017)</li>
<li>Head of Frontend Development, +rehabstudio (2014-2016)</li>
<li>Senior Developer / Project Lead, +rehabstudio (2011-2014)</li>
<li>JavaScript architecture (ES6), patterns, and modular design</li>
<li>Experience with React + Redux/Flux, Angular, Backbone, and other frameworks</li>
<li>Former lead developer on production projects for Google, YouTube, Disney, HBO, Red Bull, Samsung, and more</li>
<li>High performance, including payload splitting, first-render, jank-busting, and critical path optimization</li>
<li>Progressive web app strategies & techniques: offline, Home Screen etc</li>
<li>Progressive enhancement, including no-js base builds</li>
<li>Accessibility and internationalization patterns</li>
<li>Build tooling, scripting and configuration (Webpack, Gulp, etc)</li>
<li>Unit testing, integration testing, browser automation, CI/CD (Jenkins etc)</li>
<li>Experience in Python, Node, Ruby and PHP server-side development</li>
<li>Git repo management, gitflow model, pull request policy creation, code review, etc</li>
<li>Creative development via CSS3, Canvas, WebGL and Web Audio API</li>
<li>Browser game development via Phaser, ThreeJS etc</li>
<li>Functional & technical specifications, documentation writing, etc</li>
</ul>
<h3>Team, project & community leadership</h3>
<ul>
<li>Co-organizer & community manager, <a href="https://www.meetup.com/Belfast-JS/" target="_blank">BelfastJS</a> (2015-present)</li>
<li>Project scheduling, estimation, scrum mastering and resource management</li>
<li>JIRA management & configuration</li>
<li>Technical contact for clients and third-party agencies</li>
<li>Recruitment and developer outreach</li>
<li>Staff welfare and events organization</li>
</ul>
<h3>Mentorship & evangelism</h3>
<ul>
<li>Experience in developing training programs, night classes, and mentorship for junior developers, interns and placement students</li>
<li>Advocate for industry diversity, performance, accessibility, offline, and the web platform in general</li>
<li>Frequent game jam / hackathon participant</li>
<li>Published in net magazine #268: <a href="https://github.com/njmcode/modular-drum-app" target="_blank">modular development & web audio</a></li>
<li>Guest speaker for IMD and CompSci events at QUB and UUJ</li>
</ul>
</section>
<section id="s-info">
<a name="info"></a>
<h2>Other info</h2>
<p>Educated to degree level (BA Hons). Able and willing to travel.</p>
<p>Full references available on request.</p>
<p>I ♥ cake, game playing & development, making music, (occasionally) working out, pro wrestling, cinema, and general tinkering.</p>
<p>I also <a href="https://njmcode.github.io/blog">very occasionally write</a> about the above.</p>
<div id="share">
<h3>Share me</h3>
<ul>
<li><a href="https://twitter.com/intent/tweet?text=Cake+and+JavaScript+-+https%3A%2F%2Fnjmcode.github.io&via=njmcode" target="_blank">via Twitter</a>
<li><a href="https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fnjmcode.github.io%2F" target="_blank">via Facebook</a></li>
</ul>
</div>
</section>
<aside id="to-top">
<a href="#">^ top</a>
</aside>
</div>
<footer>
<p>©2016 njmcode.</p>
</footer>
</div>
<link rel="stylesheet" href="dist/css/bp.css">
<link rel="stylesheet" href="dist/css/noncrit.css">
<script src="dist/js/app.min.js"></script>
</body>
</html>