<head>
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="css/main.css" />
<link rel="stylesheet" media="screen and (max-width: 700px)" href="css/700.css" />
<link href="https://fonts.googleapis.com/css?family=Roboto:400,400i,500,500i" rel="stylesheet">
<title>Fullstack Developer - Portfolio</title>
</head>
<body>
<div class="flex-container">
<header>
<a href="">
<img class="headshot" alt="Image of John's head." src="images/headshot-round-200.jpg" srcset="" />
</a>
<div class="social-links">
<!--
<a href="https://www.github.com/bobjohnbob">
<img src="images/GitHub-Mark-64px.png" alt="GitHub Profile">
</a>
-->
<a href="https://jshaver.net/resume/">
<img src="images/resume.png" title="Resume" alt="Resume">
</a>
<a href="https://git.jshaver.net/jshaver">
<img src="images/gitea-sm.png" title="Gitea Profile" alt="Gitea Profile">
</a>
<a href="https://www.linkedin.com/in/thejshaver/">
<img src="images/In-2C-66px-TM.png" title="Linkedin Profile" alt="Linkedin Profile">
</a>
</div>
<h1><span class=no-break">John Shaver</span> <span class="no-break">Web Developer</span></h1>
</header>
<article>
<section class="section about">
<h2>About Me</h2>
<p class="attention">I'm a full-stack engineer with experience building
and deploying web based applications from the ground up as well as
debugging and maintaining legacy applications. I am looking for a remote
position building web based software with a team that embraces remote
work.</p>
<p>I have been working with websites and code since I was a kid and then
worked 7 years in technical support where I gained a solid understanding
of the web and how it works under the hood. I have spent the last 8 years
designing, building, deploying and maintaining javascript and typescript
applications. I've worked with PHP, NodeJS, React, and Serverless.js. I
enjoy learning better ways to do things, solving difficult problems and
building software that helps people. I live in Moscow Idaho and my
hobbies include Devops, listening to podcasts, playing ukulele and,
especially, spending time with my wife and 4 kids.</p>
</section>
<section class="section projects">
<h2>Recent Software Projects</h2>
<h3><a href="https://www.economicmodeling.com/skillabi/">Skillabi</a></h3>
<div class="project">
<div class="project-image">
<img class="main-image" src="images/skillabi-1-login.png"/>
<img class="main-image" src="images/skillabi-2.gif"/>
<img class="main-image" src="images/skillabi-3.webp"/>
<img class="main-image" src="images/curricular-skills-api.png"/>
</div>
<div class="project-info">
<h4>Project Goals</h4>
<p>Skillabi is a tool to help Higher Education institutionsand to
find skills that are in-demand in the market place so they can
adjust they're curriculum to teach those skills. Skills are parsed
from course data and then compared with skills job postings data
for relevant occupations.</p>
<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
and leading the reimplementation the frontend.</p>
<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
user access at the API level on a per user basis. We adopted a
search query language for searching a curricular data that ensured
the API could be easily expanded and would be consistant across
endpoints. We implemented the API on AWS serverless lambdas for
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
simplicity. I developed the solutions to the most 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>
<h4>Technologies Used</h4>
<p>Typescript, Terraform, Gitlab CI, Fugue, OpenId/OAuth, React, Serverless.js, react-query, JWT, KONG</p>
</div>
</div>
<h3>Skillsmatch</h3>
<div class="project">
<div class="project-image">
<img class="main-image" src="images/dashdrop-1.png"/>
<img class="main-image" src="images/dashdrop-2.png"/>
<img class="main-image" src="images/dashdrop-3.png"/>
</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>
<p>React, Cypress, AWS Elastic Beanstalk, Serverless.js, Redux, Docker, Codeship CI</p>
</div>
</div>
<h3>Dash Drop</h3>
<div class="project">
<div class="project-image">
<img class="main-image" src="images/dashdrop-1.png"/>
<img class="main-image" src="images/dashdrop-2.png"/>
<img class="main-image" src="images/dashdrop-3.png"/>
</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
the app and needed it implemented quickly.</p>
<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>
<p>CSS and some JQuery</p>
</div>
</div>
<h3>NewVistas Website Platform</h3>
<div class="project">
<div class="project-image">
<img class="main-image" src="images/newvistas.jpg"/>
</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
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.
</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
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
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>
</div>
</div>
<h3>Payzoom Econosystem Platform</h3>
<div class="project">
<div class="project-image">
<img alt="The Payzoom Logo" src="images/PayZoom_logo.png"/>
<img class="main-image" alt="Payzoom Software Demo" src="images/payzoom.png"/>
</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
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>
<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>
</div>
<h3>Novatek Native Wrapper App</h3>
<div class="project">
<div class="project-image">
<img class="main-image" alt="Workaids App Icon" src="images/icon_work_aids.png" />
<img alt="Workaids Login Screen" src="images/workaids_login2.png" />
</div>
<div class="project-info">
<h4>Project Goals</h4>
<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>
<h4>My Contributions</h4>
<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>
<p>This was before phonegapp/cordova was very far along, so
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>
</div>
</div>
</section>
</article>
</div>
</body>