Browse Source

lot's of updates to content and styling...

master
John Shaver 5 years ago
parent
commit
49ce0d30a8
  1. 0
      css/700.css
  2. 47
      css/main.css
  3. BIN
      images/icon_work_aids.png
  4. BIN
      images/payzoom.png
  5. BIN
      images/workaids_login.png
  6. BIN
      images/workaids_login2.png
  7. 244
      index.html

0
css/700.css

47
css/main.css

@ -1,11 +1,13 @@ @@ -1,11 +1,13 @@
/* just an empty stylesheet */
.flex-container {
width: 6.5in;
width: 5.5in;
max-width: 90%;
margin: 0 auto;
}
body {font-family: Tahoma, sans-serif;}
body {
font-family: Roboto, Tahoma, sans-serif;
text-align: justify;
}
h1, h2 {
text-align: center;
@ -19,37 +21,54 @@ h1 { @@ -19,37 +21,54 @@ h1 {
font-size: 1.6rem;
}
h2 {font-size: 1.45rem;font-weight: normal;}
h2 {
font-size: 1.45rem;
font-weight: 500;
}
h3 {
font-size: 1.3rem;
font-weight: normal;
margin: 1em 0 0.1em 0;
font-weight: 500;
}
p {}
p.attention {
text-align: center;
font-style: italic;
}
h4 {
font-weight: normal;
font-weight: normal;
font-style: italic;
}
div {}
img.project-image {max-width: 30%;}
img.project-image {
max-width: 30%;
}
.project {
display: flex;
align-self: center;
position: relative;
}
.project.img {}
.project-image {
margin: 2rem;
display: flex;
flex-direction:
column;position:
absolute;width:
50%;right:
100%;align-items:
flex-end;
.project-image {width: 140%;}
}
.project-image > img {
max-width: 100%;
}
margin-top: 2rem;
margin-bottom: 2rem;
-webkit-box-shadow: 2px 2px 8px 1px rgba(0,0,0,0.17);
-moz-box-shadow: 2px 2px 8px 1px rgba(0,0,0,0.17);
box-shadow: 2px 2px 8px 1px rgba(0,0,0,0.17);
}

BIN
images/icon_work_aids.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.1 KiB

BIN
images/payzoom.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 125 KiB

BIN
images/workaids_login.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 19 KiB

BIN
images/workaids_login2.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 19 KiB

244
index.html

@ -1,5 +1,8 @@ @@ -1,5 +1,8 @@
<head>
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="css/main.css" />
<link rel="stylesheet" media="screen and (max-width: 700.px)" 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>
@ -12,122 +15,163 @@ @@ -12,122 +15,163 @@
<div class="social-links"></div>
</header>
<article>
<section>
<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 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 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.</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 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>
<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>
<section class="section projects">
<h2>Recent Software Projects</h2>
<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>
<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 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. 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. 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. 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</h3>
<h3>Payzoom Econosystem Platform</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>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>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.</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 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. While working on the project I
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">
<!--<img class="project-image" src="images/wrapper.png" />-->
<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>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.
<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>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>
<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 was very far along use 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>
</section>
</article>
</div>
</body>

Loading…
Cancel
Save