212 lines
9.7 KiB
HTML
212 lines
9.7 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>Javascipt 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 systems. I am looking for a remote
|
||
full-stack/frontend position 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 4 years designing, building, deploying and maintaining
|
||
javascript applications. I've worked with iOS, PHP, NodeJS, and
|
||
React/Redux. I enjoy learning better ways to do things, solving
|
||
difficult problems and building software that assists my clients/users
|
||
in achieving success. I live in Hayden Idaho and my hobbies include
|
||
Devops, listening to podcasts, playing ukulele and, especially,
|
||
spending time with my wife and 3 kids.</p>
|
||
</section>
|
||
<section class="section projects">
|
||
<h2>Recent Software Projects</h2>
|
||
<h3>Dashdrop</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 Contrinbutions</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>
|