180 lines
8.2 KiB
HTML
180 lines
8.2 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,700" 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>
|
||
<h1>John Shaver - Web Developer</h1>
|
||
<div class="social-links"></div>
|
||
</header>
|
||
<article>
|
||
<section class="section about">
|
||
<h2>About Me</h2>
|
||
<p class="attention">I am currently looking for a full-time
|
||
remote position (frontend or fullstack) working with a team in
|
||
a modern framework (preferably with React) to build or improve
|
||
an interesting and purposeful project.</p>
|
||
|
||
<p>In high school studied Computer Networking Systems and
|
||
Computer Programming part time at the nearby Occupation Skills
|
||
Center. Since then I have been working with computers and
|
||
teaching myself Software Development. I spent 7 years working
|
||
in various Technical Support roles where I gained an in-depth
|
||
understanding of a variety of internet and server technologies.
|
||
So, when I shifted my career to software development, working
|
||
on web based software seemed an obvious choice.</p>
|
||
|
||
<p>I have spent the last 4 years designing, building, deploying
|
||
and maintainging javascript applications. I've worked with
|
||
iOS, PHP, NodeJS, and more recently React/Redux. I enjoy
|
||
learning new 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>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 to that used the
|
||
REST api. 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>
|