2017-04-08 08:54:50 +00:00
|
|
|
|
<head>
|
2017-08-11 05:07:27 +00:00
|
|
|
|
<meta name="viewport" content="width=device-width">
|
2017-04-14 07:53:18 +00:00
|
|
|
|
<link rel="stylesheet" href="css/main.css" />
|
2017-08-13 04:13:41 +00:00
|
|
|
|
<link rel="stylesheet" media="screen and (max-width: 700px)" href="css/700.css" />
|
2018-03-22 04:36:00 +00:00
|
|
|
|
<link href="https://fonts.googleapis.com/css?family=Roboto:400,400i,500,500i" rel="stylesheet">
|
2022-07-12 15:15:33 +00:00
|
|
|
|
<title>Fullstack Developer - Portfolio</title>
|
2017-04-08 08:54:50 +00:00
|
|
|
|
</head>
|
|
|
|
|
|
<body>
|
2017-04-14 07:53:18 +00:00
|
|
|
|
<div class="flex-container">
|
2017-04-08 08:54:50 +00:00
|
|
|
|
<header>
|
|
|
|
|
|
<a href="">
|
2017-04-14 07:53:18 +00:00
|
|
|
|
<img class="headshot" alt="Image of John's head." src="images/headshot-round-200.jpg" srcset="" />
|
2017-04-08 08:54:50 +00:00
|
|
|
|
</a>
|
2017-08-14 21:24:53 +00:00
|
|
|
|
<div class="social-links">
|
2018-10-10 16:42:36 +00:00
|
|
|
|
<!--
|
2017-08-14 21:24:53 +00:00
|
|
|
|
<a href="https://www.github.com/bobjohnbob">
|
|
|
|
|
|
<img src="images/GitHub-Mark-64px.png" alt="GitHub Profile">
|
2018-04-02 22:52:32 +00:00
|
|
|
|
</a>
|
2018-10-10 16:42:36 +00:00
|
|
|
|
-->
|
|
|
|
|
|
<a href="https://jshaver.net/resume/">
|
|
|
|
|
|
<img src="images/resume.png" title="Resume" alt="Resume">
|
|
|
|
|
|
</a>
|
2018-04-02 22:52:32 +00:00
|
|
|
|
<a href="https://git.jshaver.net/jshaver">
|
2018-10-10 16:42:36 +00:00
|
|
|
|
<img src="images/gitea-sm.png" title="Gitea Profile" alt="Gitea Profile">
|
2018-04-02 22:52:32 +00:00
|
|
|
|
</a>
|
|
|
|
|
|
<a href="https://www.linkedin.com/in/thejshaver/">
|
2018-10-10 16:42:36 +00:00
|
|
|
|
<img src="images/In-2C-66px-TM.png" title="Linkedin Profile" alt="Linkedin Profile">
|
2018-04-02 22:52:32 +00:00
|
|
|
|
</a>
|
2017-08-14 21:24:53 +00:00
|
|
|
|
</div>
|
|
|
|
|
|
<h1><span class=no-break">John Shaver</span> <span class="no-break">Web Developer</span></h1>
|
2017-04-08 08:54:50 +00:00
|
|
|
|
</header>
|
|
|
|
|
|
<article>
|
2017-08-11 05:07:27 +00:00
|
|
|
|
<section class="section about">
|
2017-04-08 08:54:50 +00:00
|
|
|
|
<h2>About Me</h2>
|
2018-10-10 16:44:59 +00:00
|
|
|
|
<p class="attention">I'm a full-stack engineer with experience building
|
2022-07-23 20:31:54 +00:00
|
|
|
|
and deploying web based applications, building out CI/CD pipelines and
|
|
|
|
|
|
maintaining legacy applications. I am looking for a remote position
|
|
|
|
|
|
building web based software with a team that embraces remote work.</p>
|
2017-04-08 08:54:50 +00:00
|
|
|
|
|
2018-01-31 01:10:55 +00:00
|
|
|
|
<p>I have been working with websites and code since I was a kid and then
|
2022-07-12 15:15:33 +00:00
|
|
|
|
worked 7 years in technical support where I gained a solid understanding
|
2022-07-29 02:38:10 +00:00
|
|
|
|
of the web and how it works under the hood. I have spent the last 9 years
|
2022-07-12 15:15:33 +00:00
|
|
|
|
designing, building, deploying and maintaining javascript and typescript
|
2022-07-23 20:31:54 +00:00
|
|
|
|
applications. I've worked with NodeJS, React, and Serverless.js. I
|
2022-07-12 15:15:33 +00:00
|
|
|
|
enjoy learning better ways to do things, solving difficult problems and
|
|
|
|
|
|
building software that helps people. I live in Moscow Idaho and my
|
2022-07-23 20:31:54 +00:00
|
|
|
|
hobbies include Devops, listening` to podcasts, playing ukulele and,
|
2022-07-12 15:15:33 +00:00
|
|
|
|
especially, spending time with my wife and 4 kids.</p>
|
2017-04-08 08:54:50 +00:00
|
|
|
|
</section>
|
2017-08-11 05:07:27 +00:00
|
|
|
|
<section class="section projects">
|
2017-04-08 08:54:50 +00:00
|
|
|
|
<h2>Recent Software Projects</h2>
|
2022-07-12 15:15:33 +00:00
|
|
|
|
<h3><a href="https://www.economicmodeling.com/skillabi/">Skillabi</a></h3>
|
|
|
|
|
|
<div class="project">
|
|
|
|
|
|
<div class="project-image">
|
2022-07-17 06:46:23 +00:00
|
|
|
|
<img class="main-image" src="images/thumbnails/th_skillabi-1-login.png"/>
|
|
|
|
|
|
<img class="main-image" src="images/thumbnails/th_skillabi-2.gif"/>
|
|
|
|
|
|
<img class="main-image" src="images/thumbnails/th_skillabi-3.webp"/>
|
|
|
|
|
|
<img class="main-image" src="images/thumbnails/th_curricular-skills-api.png"/>
|
2022-07-12 15:15:33 +00:00
|
|
|
|
</div>
|
|
|
|
|
|
<div class="project-info">
|
|
|
|
|
|
<h4>Project Goals</h4>
|
2022-07-23 20:31:54 +00:00
|
|
|
|
<p>Skillabi is a tool to help Higher Education institutions to find
|
|
|
|
|
|
skills that are relivant to their curriculum and in-demand in the
|
|
|
|
|
|
market place so they can adjust they're curriculum to be more
|
|
|
|
|
|
relevant to the developing job market. Skills are parsed from
|
|
|
|
|
|
course data and then compared with skills job postings data for
|
|
|
|
|
|
relevant occupations.</p>
|
2022-07-12 15:15:33 +00:00
|
|
|
|
<h4>My Contributions</h4>
|
|
|
|
|
|
<p>I worked on a 2-3 man team to build a prototype using netlify. We then
|
|
|
|
|
|
itterated on it in 3 phases. The prototype was successful enough
|
|
|
|
|
|
that customers requested to pay to use it (although it chock full
|
|
|
|
|
|
of technical debt on the inside.) When it came time to build a
|
|
|
|
|
|
production version, I took over as the technical lead on the
|
|
|
|
|
|
project. This included designing a new version of the backend APIs
|
2022-07-23 20:31:54 +00:00
|
|
|
|
and leading the reimplementation of the frontend.</p>
|
2022-07-12 15:15:33 +00:00
|
|
|
|
|
|
|
|
|
|
<p>The new APIs for storing curricular data and user profiles
|
|
|
|
|
|
needed to be secure, easy to use, well tested, well documented,
|
|
|
|
|
|
scalable and reliable. We ensured that security was implemeted in
|
|
|
|
|
|
the back end first. We used cognito tokens and JWT claims to scope
|
2022-07-23 20:31:54 +00:00
|
|
|
|
user access by role. We designed api search queries for the a
|
|
|
|
|
|
curricular data that ensured the API could be easily expanded and
|
|
|
|
|
|
would be consistant across endpoints, while still being powerful
|
|
|
|
|
|
enought to do all the searching/filtering that would be needed in
|
|
|
|
|
|
the frontend. We implemented the API on AWS serverless lambdas for
|
2022-07-12 15:15:33 +00:00
|
|
|
|
scalability and reliability and used typescript on serverless.js
|
|
|
|
|
|
for ease of development.</p>
|
|
|
|
|
|
|
|
|
|
|
|
<p>The new frontend was developed with react, written in typescript
|
|
|
|
|
|
and served via cloudfront and s3 for scalabilty, reliability and
|
2022-07-23 20:31:54 +00:00
|
|
|
|
simplicity. It also had to meet the accessiblity requirements of US
|
|
|
|
|
|
and UK educational institutions. I was tasked with implementing
|
|
|
|
|
|
some of the more complicated problems, including realtime
|
|
|
|
|
|
highlighting of skills within a text area as users type (The
|
|
|
|
|
|
parsing of the skills was handled by an external API), and
|
|
|
|
|
|
identifying boilerplate text accross many courses in a curriculum
|
|
|
|
|
|
for parsing. </p>
|
2022-07-12 15:15:33 +00:00
|
|
|
|
<h4>Technologies Used</h4>
|
2022-07-23 20:31:54 +00:00
|
|
|
|
<p>Typescript, Terraform, Gitlab CI, Fugue, OpenId/OAuth, React,
|
|
|
|
|
|
Accessibility, Serverless.js, react-query, JWT, KONG</p>
|
2022-07-12 15:15:33 +00:00
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<h3>Skillsmatch</h3>
|
|
|
|
|
|
<div class="project">
|
|
|
|
|
|
<div class="project-image">
|
2022-07-17 21:14:19 +00:00
|
|
|
|
<img class="main-image" src="images/thumbnails/th_skills-match-img-1.webp"/>
|
|
|
|
|
|
<img class="main-image" src="images/thumbnails/th_skills-match-2.png"/>
|
|
|
|
|
|
<img class="main-image" src="images/thumbnails/th_skills-match-img-3.webp"/>
|
2022-07-12 15:15:33 +00:00
|
|
|
|
</div>
|
|
|
|
|
|
<div class="project-info">
|
|
|
|
|
|
<h4>Project Goals</h4>
|
|
|
|
|
|
<p>Skillsmtch is an web based app that schools can provide to their
|
|
|
|
|
|
students and potential student who are coming back to school after
|
|
|
|
|
|
some time in the workplace. Skillsmatch helps these adult learners
|
|
|
|
|
|
catalogue the skills they already have so they can see what skills
|
|
|
|
|
|
they could then learn to make help with either making themselves
|
|
|
|
|
|
more marketable or shifting careers. It then helps them identify
|
|
|
|
|
|
courses or degrees that could help them to learn and demonstrate
|
|
|
|
|
|
those skills to potential employers.</p>
|
|
|
|
|
|
<h4>My Contributions</h4>
|
|
|
|
|
|
<p>I worked with my team as a newly hired developer at the company
|
|
|
|
|
|
to quickly rebuild the already developed prototype. We build out
|
|
|
|
|
|
out necessary APIs using serverless.js/Mongodb and frontend in
|
|
|
|
|
|
Javascript with React/Redux. I wrote code for, reviewed and QA'd
|
|
|
|
|
|
tickets. I particularly enjoyed teaching new developers and interns
|
|
|
|
|
|
as they were hired, implementing API tests on our new APIs and
|
|
|
|
|
|
building out dev ops systems to automatically deploy to AWS.</p>
|
|
|
|
|
|
<h4>Technologies Used</h4>
|
2022-07-23 20:31:54 +00:00
|
|
|
|
<p>React, Cypress, AWS Elastic Beanstalk, Serverless.js,
|
|
|
|
|
|
Accessibility, Redux, Docker, Codeship CI</p>
|
2022-07-12 15:15:33 +00:00
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<h3>Dash Drop</h3>
|
2018-03-22 04:36:00 +00:00
|
|
|
|
<div class="project">
|
|
|
|
|
|
<div class="project-image">
|
2022-07-17 06:46:23 +00:00
|
|
|
|
<img class="main-image" src="images/thumbnails/th_dashdrop-1.png"/>
|
|
|
|
|
|
<img class="main-image" src="images/thumbnails/th_dashdrop-2.png"/>
|
|
|
|
|
|
<img class="main-image" src="images/thumbnails/th_dashdrop-3.png"/>
|
2018-03-22 04:36:00 +00:00
|
|
|
|
</div>
|
|
|
|
|
|
<div class="project-info">
|
|
|
|
|
|
<h4>Project Goals</h4>
|
|
|
|
|
|
<p>DashDrop is a service to allow dash enthusiasts to automatically
|
|
|
|
|
|
generate and fund promotional wallets to distribute at
|
|
|
|
|
|
conferences and events for the purpose of promoting the dash
|
|
|
|
|
|
currency. The project owners had a new design commisioned for
|
2018-03-22 04:42:26 +00:00
|
|
|
|
the app and needed it implemented quickly.</p>
|
2018-03-22 04:36:00 +00:00
|
|
|
|
<h4>My Contributions</h4>
|
|
|
|
|
|
<p>The app was already built but they needed someone with strong
|
|
|
|
|
|
CSS experience to implement the new design. I implmented the new
|
|
|
|
|
|
design using CSS styles and made some small changes in the
|
|
|
|
|
|
Javascript, where needed, to change the structure of the
|
|
|
|
|
|
interface.</p>
|
|
|
|
|
|
<h4>Technologies Used</h4>
|
2022-07-23 20:31:54 +00:00
|
|
|
|
<p>HTML, CSS, Javascript and some JQuery</p> </div>
|
2018-03-22 04:36:00 +00:00
|
|
|
|
</div>
|
2017-04-14 07:53:18 +00:00
|
|
|
|
<h3>NewVistas Website Platform</h3>
|
|
|
|
|
|
<div class="project">
|
2017-08-11 05:07:27 +00:00
|
|
|
|
<div class="project-image">
|
2022-07-17 06:46:23 +00:00
|
|
|
|
<img class="main-image" src="images/thumbnails/th_newvistas.jpg"/>
|
2017-08-11 05:07:27 +00:00
|
|
|
|
</div>
|
|
|
|
|
|
<div class="project-info">
|
|
|
|
|
|
<h4>Project Goals</h4>
|
|
|
|
|
|
<p>Newvistas needed a replacement platform for
|
|
|
|
|
|
public-facing web content, encouraging communication
|
|
|
|
|
|
between users, managing deliverables from business
|
|
|
|
|
|
managers and allowing business owners and authorized
|
|
|
|
|
|
contributors to update content relevant to their role.
|
|
|
|
|
|
The platform needed to be easily deployable on multiple
|
|
|
|
|
|
domains and allow the maintaining developers to easily
|
|
|
|
|
|
customize styling differently between them.</p>
|
|
|
|
|
|
<h4>My Contributions</h4>
|
|
|
|
|
|
<p>I was the only developer on the project. I built
|
2017-08-13 04:20:25 +00:00
|
|
|
|
both the REST api and the frontend SPA. The REST api
|
|
|
|
|
|
was kept separate so that the project could actually
|
|
|
|
|
|
run separate seamlessly integrated SPAs for each role
|
|
|
|
|
|
it was trying to fill.
|
2017-08-13 04:14:07 +00:00
|
|
|
|
</p>
|
|
|
|
|
|
<p>I designed the dev environment to be quickly and
|
|
|
|
|
|
easily rebuilt and deployed since I would be handing it
|
|
|
|
|
|
off to other devs to maintain. The build process is
|
|
|
|
|
|
designed to ensure optimized page loads and help with
|
2017-08-11 05:07:27 +00:00
|
|
|
|
cross-browser compatibility,while allowing for the
|
|
|
|
|
|
latest libraries and language improvements to be used.
|
|
|
|
|
|
Deploying is fast and easy as well as easily
|
|
|
|
|
|
reversible, leveraging AWS Elastic Beanstalk, EC2 and
|
|
|
|
|
|
S3.</p>
|
|
|
|
|
|
<h4>Technologies Used</h4>
|
|
|
|
|
|
<p>The backend was a rest API built with Node.js and
|
|
|
|
|
|
Express.js. The front end is an isomorphically
|
|
|
|
|
|
rendered SPA built wth React/Redux. The front end is
|
|
|
|
|
|
compiled from ES2016 to ES5 using babel and webpack.
|
|
|
|
|
|
Isomorphic rendering provides fast load times and
|
|
|
|
|
|
ensures search engines can index the public content.
|
|
|
|
|
|
Users authenticate with their AzureAD user via OpenID
|
2017-08-13 04:14:07 +00:00
|
|
|
|
Connect. </p>
|
|
|
|
|
|
<p>Express was used to build out the REST endpoints for
|
|
|
|
|
|
the API mySQL is used via Sequelize.js ORM. Secured
|
|
|
|
|
|
endpoint authorize users based on their user roles and
|
|
|
|
|
|
ownership/roles assigned to different pages/groupings
|
|
|
|
|
|
taking into account assigned roles of parent groupings.
|
|
|
|
|
|
</p>
|
|
|
|
|
|
<p>The development environment is run in vagrant with
|
|
|
|
|
|
virtual box and babel and weback were used to compile
|
|
|
|
|
|
and bundle the front end code. The app runs on
|
|
|
|
|
|
ephemeral ec2 instances and deployed to AWS Elastic
|
|
|
|
|
|
Beanstalk to allow for scalability.</p>
|
2017-08-11 05:07:27 +00:00
|
|
|
|
</div>
|
2017-04-08 08:54:50 +00:00
|
|
|
|
</div>
|
2017-08-11 05:07:27 +00:00
|
|
|
|
<h3>Payzoom Econosystem Platform</h3>
|
2017-04-14 07:53:18 +00:00
|
|
|
|
<div class="project">
|
2017-08-11 05:07:27 +00:00
|
|
|
|
<div class="project-image">
|
2022-07-17 06:46:23 +00:00
|
|
|
|
<img alt="The Payzoom Logo" src="images/thumbnails/th_PayZoom_logo.png"/>
|
|
|
|
|
|
<img class="main-image" alt="Payzoom Software Demo" src="images/thumbnails/th_payzoom.png"/>
|
2017-08-11 05:07:27 +00:00
|
|
|
|
</div>
|
|
|
|
|
|
<div class="project-info">
|
|
|
|
|
|
<h4>Project Goal</h4>
|
|
|
|
|
|
<p>Payzoom is a SaaS that allows a community of small
|
|
|
|
|
|
businesses and funding entities to work together to
|
|
|
|
|
|
work for each other and balance all the payments at the
|
|
|
|
|
|
end of the week including paying employees,
|
|
|
|
|
|
contractors, services fees, and expenses. Participants
|
|
|
|
|
|
need to be able to do work for any company on any
|
|
|
|
|
|
project and bill them accordingly as easily as if they
|
|
|
|
|
|
were working for their own company.</p>
|
|
|
|
|
|
<h4>My Contributions</h4>
|
|
|
|
|
|
<p>I wrote the initial payroll integration with
|
|
|
|
|
|
ZenPayroll to gather weekly totals and pass the
|
|
|
|
|
|
information to ZenPayroll as well as the code to send
|
|
|
|
|
|
and reconcile expense data and documentation to
|
|
|
|
|
|
QuickBooksOnline. Implemented some of the user
|
|
|
|
|
|
interface views including allocating overtime and
|
|
|
|
|
|
attaching files to reports/allocations and the
|
2017-08-13 04:14:07 +00:00
|
|
|
|
associated backend.</p>
|
|
|
|
|
|
<p>While working on the project I also improved the dev
|
|
|
|
|
|
environment from one that required 2 days for a
|
|
|
|
|
|
developer to build a permanent virtualbox image to an
|
|
|
|
|
|
ephemeral environment in Vagrant that could be thrown
|
|
|
|
|
|
away and recreated in less than 20 minutes.</p>
|
2017-08-11 05:07:27 +00:00
|
|
|
|
<h4>Technologies Used</h4>
|
|
|
|
|
|
<p>Vagrant Payzoom was built with NodeJS and MySQL on
|
|
|
|
|
|
the backend and a custom built javascript frontend.
|
|
|
|
|
|
Communication between server and web was done via
|
|
|
|
|
|
websockets and a JSON command/sub/pub api that routed
|
|
|
|
|
|
particular requests/subscriptions to differnt modules
|
|
|
|
|
|
running on the backend. Payroll was processed via Gusto
|
|
|
|
|
|
and invoicing informaiton/documentation was passed to
|
|
|
|
|
|
QuickBooksOnline for paying invoices and tracking
|
|
|
|
|
|
expenses.</p>
|
|
|
|
|
|
</div>
|
2017-04-08 08:54:50 +00:00
|
|
|
|
</div>
|
2017-04-14 07:53:18 +00:00
|
|
|
|
<h3>Novatek Native Wrapper App</h3>
|
|
|
|
|
|
<div class="project">
|
2017-08-11 05:07:27 +00:00
|
|
|
|
<div class="project-image">
|
2022-07-17 06:46:23 +00:00
|
|
|
|
<img class="main-image" alt="Workaids App Icon" src="images/thumbnails/th_icon_work_aids.png" />
|
|
|
|
|
|
<img alt="Workaids Login Screen" src="images/thumbnails/th_workaids_login2.png" />
|
2017-08-11 05:07:27 +00:00
|
|
|
|
</div>
|
2017-04-14 07:53:18 +00:00
|
|
|
|
<div class="project-info">
|
2017-04-08 08:54:50 +00:00
|
|
|
|
<h4>Project Goals</h4>
|
2017-08-11 05:07:27 +00:00
|
|
|
|
<p>The Client had an SPA optimized for mobile, but
|
|
|
|
|
|
wanted it to operate more like an app and have access
|
|
|
|
|
|
to the phone’s camera, bluetooth, geofencing, etc.
|
|
|
|
|
|
Since phonegapp was still immature, they wanted an app
|
|
|
|
|
|
built to wrap the current web interface and allow
|
|
|
|
|
|
reusing the existing web based code as much as
|
|
|
|
|
|
possible.</p>
|
2022-07-12 15:15:33 +00:00
|
|
|
|
<h4>My Contributions</h4>
|
2017-08-11 05:07:27 +00:00
|
|
|
|
<p>Initially I helped write many of the api calls for
|
|
|
|
|
|
the js library the web app used to communicate through
|
|
|
|
|
|
the webFrame to the native code. Later I helped out
|
|
|
|
|
|
with ad-hoc deploying the app and did some basic
|
|
|
|
|
|
maintenance and improvements on the native Objective-C
|
|
|
|
|
|
codebase. This included the PHP backend and Objective-C
|
|
|
|
|
|
code necessary to facilitate iOS push
|
|
|
|
|
|
notifications.</p>
|
|
|
|
|
|
<h4>Technologies Used</h4>
|
2017-08-13 04:14:07 +00:00
|
|
|
|
<p>This was before phonegapp/cordova was very far along, so
|
2017-08-11 05:07:27 +00:00
|
|
|
|
they decided to build a custom wrapper app that wrapped
|
|
|
|
|
|
the webview and exposed the phone APIs to the website
|
|
|
|
|
|
via messages sent betwewn javascript and the Objective
|
|
|
|
|
|
C code. A javascript library was built that provided
|
|
|
|
|
|
an event based API to easier access the phone
|
|
|
|
|
|
functions. Grunt was used bundle the javascript
|
|
|
|
|
|
library. Some work was done in PHP to provide support
|
|
|
|
|
|
for the App to authenticate and to send off push
|
|
|
|
|
|
notifications.</p>
|
2017-04-08 08:54:50 +00:00
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
2017-08-11 05:07:27 +00:00
|
|
|
|
</section>
|
2017-04-08 08:54:50 +00:00
|
|
|
|
</article>
|
2017-08-11 05:07:27 +00:00
|
|
|
|
</div>
|
2022-07-17 21:14:19 +00:00
|
|
|
|
<div id="image-modal-wrapper" hidden>
|
|
|
|
|
|
<div id="image-modal-flex">
|
|
|
|
|
|
<div id="image-modal">
|
|
|
|
|
|
<div class="close-x clickable" aria-label="click to close modal">×</div>
|
|
|
|
|
|
<div id="image-modal-contents" />
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
2022-07-17 06:46:23 +00:00
|
|
|
|
<script src="./js/image-thumbnails.js"></script>
|
2017-04-08 08:54:50 +00:00
|
|
|
|
</body>
|
