My name is Duncan and this is a personal website I've put together to highlight some of my development skills, as well as to present my professional qualifications. I summarize my personal, professional 'brand' as follows:
Adaptable, knowledgeable technologist with an eclectic set of skills and experiences. Focused on connecting the dots between business, software engineers, designers, data scientists, and strategy to build high-value products and solutions. Serves as a ‘translator’ and integrator for cross-functional teams. Believer in servant leadership.
runs0n Web
Custom HTML / CSS / JS + THREE.js. ⓘ
Learn More About This Site
D3 Web
D3.js Powered Site + Reusable Charts. ⓘ
Learn More About D3
Humanitarian Data Exchange
Pro Bono Project for U.N. HDX. ⓘ
Learn More About This Project
Angular Tour of Heroes
Angular Tutorial App. ⓘ
Learn More About the Tutorial
Express Tour of Heroes
Custom Express APIs for Angular Tour of Heroes.
Mongo Tour of Heroes
Custom MongoDB Collection for Angular Tour of Heroes.
This website has been developed primarily using 'pure' HTML, CSS, and JS. With exception of the THREE.js animation (desktop only), all other HTML, CSS, and JS has been written from scratch. The website is deployed via Google's Firebase Hosting. There are a few open source resources I've used as well, deserving of credit and thanks. Performance and testing information is included at the bottom.
The animation of the orb floating in and out of the water is built using THREE.js. The animation is a customization of an example shown on the THREE.js website, which can be found here:
https://threejs.org/examples/?q=water#webgl_shaders_ocean
In terms of specific customizations: I pulled and modified the source code to be stand-alone; I tweaked numerous variables including the sky's turbidity and rayleigh, the sun's azimuth, and the camera and light positions; I modified the objects in the animation; and I removed any unnecessary objects or camera controls to optimize the code and overall performance.
The illustrations in the panels on my portfolio tab are from unDraw, which can be found here:
https://undraw.co/illustrations
The font used for 'runs0n' is called Orbitron, which can be found here:
https://fonts.google.com/specimen/Orbitron?query=orbit
The font used for the rest of the website's text is called Raleway, which can be found here:
https://fonts.google.com/specimen/Raleway?query=rale
I have tested the performance of the website using a combination of Google Chrome's Lighthouse in the Developer Tools and Google PageSpeed Insights. The average overall score from PageSpeed Insights for Desktop is 55 and the score for Mobile is 95. The Lighthouse Desktop average score for Performance is 88, for Accessibility is 93, for Best Practices is 100, and for SEO is 100. The Lighthouse Mobile average score for Performance is 96, for Accessibility is 93, for Best Practices is 100, and for SEO is 100. To verify the Lighthouse scores, you will need to open the Google Chrome Developer Tools, navigate to the Lighthouse tab, and run a Desktop or Mobile report. Both Lighthouse and PageSpeed Insight scores are variable and can fluctuate within some margin for each run. One of my focuses going forward is to improve Desktop performance with the THREE animation.
In addition to testing via PageSpeed Insights and Google Chrome's Lighthouse, I have done cross-browser testing with Firefox, Safari, and Edge. Mobile testing has been completed on a sampling of phone types and sizes.