300 lines
15 KiB
HTML
300 lines
15 KiB
HTML
<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, 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>
|
||
|
||
<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 10 years
|
||
designing, building, deploying and maintaining javascript and typescript
|
||
applications. I've worked with 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/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"/>
|
||
</div>
|
||
<div class="project-info">
|
||
<h4>Project Goals</h4>
|
||
<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>
|
||
<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 of 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 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
|
||
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. 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>
|
||
<h4>Technologies Used</h4>
|
||
<p>Typescript, Terraform, Gitlab CI, Fugue, OpenId/OAuth, React,
|
||
Accessibility, 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/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"/>
|
||
</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,
|
||
Accessibility, Redux, Docker, Codeship CI</p>
|
||
</div>
|
||
</div>
|
||
<h3>Dash Drop</h3>
|
||
<div class="project">
|
||
<div class="project-image">
|
||
<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"/>
|
||
</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>HTML, CSS, Javascript and some JQuery</p> </div>
|
||
</div>
|
||
<h3>NewVistas Website Platform</h3>
|
||
<div class="project">
|
||
<div class="project-image">
|
||
<img class="main-image" src="images/thumbnails/th_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/thumbnails/th_PayZoom_logo.png"/>
|
||
<img class="main-image" alt="Payzoom Software Demo" src="images/thumbnails/th_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/thumbnails/th_icon_work_aids.png" />
|
||
<img alt="Workaids Login Screen" src="images/thumbnails/th_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>
|
||
<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>
|
||
<script src="./js/image-thumbnails.js"></script>
|
||
</body>
|