Browse Source

Did some more work.

stage
John Shaver 5 years ago
parent
commit
7083a0e1c2
  1. 55
      css/main.css
  2. BIN
      images/GitHub-Mark-64px.png
  3. BIN
      images/Github-Logo.png
  4. BIN
      images/PayZoom_logo.png
  5. BIN
      images/newvistas.jpg
  6. 136
      index.html

55
css/main.css

@ -0,0 +1,55 @@
/* just an empty stylesheet */
.flex-container {
width: 6.5in;
max-width: 90%;
margin: 0 auto;
}
body {font-family: Tahoma, sans-serif;}
h1, h2 {
text-align: center;
}
header {
text-align: center;
}
h1 {
font-size: 1.6rem;
}
h2 {font-size: 1.45rem;font-weight: normal;}
h3 {
font-size: 1.3rem;
font-weight: normal;
}
p {}
p.attention {
text-align: center;
font-style: italic;
}
h4 {
font-weight: normal;
}
div {}
img.project-image {max-width: 30%;}
.project {
display: flex;
align-self: center;
}
.project.img {}
.project-image {width: 140%;}
.project-image > img {
max-width: 100%;
}

BIN
images/GitHub-Mark-64px.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.6 KiB

BIN
images/Github-Logo.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.0 KiB

BIN
images/PayZoom_logo.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 18 KiB

BIN
images/newvistas.jpg

Binary file not shown.

After

Width:  |  Height:  |  Size: 39 KiB

136
index.html

@ -1,10 +1,12 @@
<head>
<link rel="stylesheet" href="css/main.css" />
<title>Javascipt Developer - Portfolio</title>
</head>
<body>
<div class="flex-container">
<header>
<a href="">
<img alt="Image of John's head." src="images/headshot-round-200.jpg" srcset="" />
<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>
@ -12,82 +14,118 @@
<article>
<section>
<h2>About Me</h2>
<p><i>I am currently looking for a full-time remote position (frontend
or fullstack) working with a team on an interesting product
leveraging a modern framework (React.js preferred).</i></p>
<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 highschool studied Computer Networking Systems and Computer
Programming part time at the naerby Occupation Skills Center. Since
<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 learned an in-depth understanding of various internet and
server technologies so when I shifted my career to software development,
working on web based software seemed an obvious choice.
working on web based software seemed an obvious choice.</p>
<p>I started with web development at a consultancy in 2013. Since 2014,
I have been a freelance developer working with NodeJS and javascript
and more recently React/Redux. I enjoy learning new things, solving
difficult problems and building software that assists my clients/users
in achieving success. My hobbies include Devops, listening to podcasts
and, especially, spending time with my wife and 3 kids.
<p>I was hired to do web development at a consultancy in 2013. Since
2014, I have been a freelance developer working with NodeJS and
javascript 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>
<h2>Recent Software Projects</h2>
<div>
<h3>NewVistas Website</h3>
<img />
<div>
<h3>NewVistas Website Platform</h3>
<div class="project">
<!--<div>
<img class="project-image" src="images/newvistas.jpg"/>
</div>-->
<div class="project-info">
<h4>Project Goals</h4>
<h4>Technological Details</h4>
<h4>Challenges</h4>
<p>Newvistas needed a platform to replace their old website for
both public-facing web content, encouraging communication between
users and managing deliverables from business managers. The The
new platform needed to allow managing owners to log into the
website to update content relevant to their role. The platform
needed to be easily deployable on multiple websites and allow for
fast style customization between sites by the maintaining
developer.
<h4>Technologies Used</h4>
<p>The backend was a rest API built with Node.js and Express.js.
The front end was an isomorphically rendered SPA built wth
React.js paired with Redux to manage state. Administrators
authenticated with their AzureAD user via OpenID Connect.
Content was isomorphically rendered on the server to allow for
SEO and speedy load times. The development environment was run
in vagrant with virtual box and babel and weback were used to
compile and bundle the front end code. The app was designed to
run on ephemeral ec2 instances and deployed to AWS Elastic
Beanstalk to allow for scalability.</p>
<h4>My Contributions</h4>
<p>I was the only developer assigned to work on the project and
developed it myself, so I built the rest api and the frontend SPA
but my work also included designing the dev environment to be
quickly and easily redeployed with a clean slate for testing.
The build process was designed to ensure deployed code was
optimized and cross-browser compatible while allowing for the
latest libraries and language improvements to be used and the I
designed the deploy process to be easy and quickly deployed or
reverted with a greatly reduced chance of human error than
previous deploy processes the client had used in the past.</p>
</div>
</div>
<div>
<h3>Payzoom</h3>
<img />
<div>
<h3>Payzoom</h3>
<div class="project">
<!--<div class="project-image">
<img alt="The Payzoom Logo" src="images/PayZoom_logo.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 get funding work for each other
and balance all the payments at the end of the week including paying
employees, contractors, services fees, and expenses.</p>
<h4>Technological Details</h4>
<h4>Technologies Used</h4>
<p>When I was working on payzoom it was built with NodeJS and MySQL
on the backend and a custom built web-based frontend. Communication
between server and web was done via websockets and a JSON api. The
backend had to communicate with Gusto(ZenPayroll) and
QuickBooksOnline APIs. </p>
<h4>Major Contributions</h4>
<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 reconsile expense data and documentation to
code to send and reconcile expense data and documentation to
QuickBooksOnline.</p>
<p>While working on the project I improved the
dev enviornment from one that required a new developer to spend 2
days build a permanent virtualbox environemnt to an ephemeral
environment in Vagrant that could be setup in less than 20min.</p>
<p>While working on the project I improved the dev enviornment
from one that required 2 days for a developer to build a
permanent virtualbox image to an ephemeral environment in
Vagrant that could be setup in less than 20min.</p>
</div>
</div>
<div>
<h3></h3>
<img />
<div>
<h3>Novatek Native Wrapper App</h3>
<div class="project">
<!--<img class="project-image" src="images/wrapper.png" />-->
<div class="project-info">
<h4>Project Goals</h4>
<h4>Technological Details</h4>
<h4>Challenges</h4>
<h4>Code Samples</h4>
<p><a href="github.com"></a></p>
</div>
</div>
<div>
<h3></h3>
<img />
<div>
<h4>Project Goals</h4>
<h4>Technological Details</h4>
<h4>Challenges</h4>
<h4>Code Samples</h4>
<p><a href="github.com"></a></p>
<p>They had an SPA that already had a mobile view, but they wanted
it to operate more like an app and have access to the phone camera,
bluetooth, geofencing, etc. with a native work flow. They wanted an
app built to allow this while reusing the existing mobile website
as much as possible.</p>
<h4>Technologies Used</h4>
<p>This was before phonegapp was in much use so they went with a
wrapper app that wrapped the webview and exposed the phone APIs to the
website via messages sent betwen javascript and the Objective C
code. A javascript library was built that provided an event based
api to easier access hte phone functions.
<h4>My Contrinbutions</h4>
<p>I came onto the project later and helped write alot of the api
code for the javascript library. I also helped out with deploying
the app to the app store and did some simple maintenance on the
Objective C codebase. I also wrote the backend and Objective C code
necessary to facilitate push notifications.</p>
</div>
</div>
</section>

Loading…
Cancel
Save