portfolio/index.html

213 lines
9.7 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<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 phones 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>