Web portfolio repo https://www.jshaver.net/
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

index.html 9.7KB

  1. <head>
  2. <meta name="viewport" content="width=device-width">
  3. <link rel="stylesheet" href="css/main.css" />
  4. <link rel="stylesheet" media="screen and (max-width: 700px)" href="css/700.css" />
  5. <link href="https://fonts.googleapis.com/css?family=Roboto:400,400i,500,500i" rel="stylesheet">
  6. <title>Javascipt Developer - Portfolio</title>
  7. </head>
  8. <body>
  9. <div class="flex-container">
  10. <header>
  11. <a href="">
  12. <img class="headshot" alt="Image of John's head." src="images/headshot-round-200.jpg" srcset="" />
  13. </a>
  14. <div class="social-links">
  15. <!--
  16. <a href="https://www.github.com/bobjohnbob">
  17. <img src="images/GitHub-Mark-64px.png" alt="GitHub Profile">
  18. </a>
  19. -->
  20. <a href="https://jshaver.net/resume/">
  21. <img src="images/resume.png" title="Resume" alt="Resume">
  22. </a>
  23. <a href="https://git.jshaver.net/jshaver">
  24. <img src="images/gitea-sm.png" title="Gitea Profile" alt="Gitea Profile">
  25. </a>
  26. <a href="https://www.linkedin.com/in/thejshaver/">
  27. <img src="images/In-2C-66px-TM.png" title="Linkedin Profile" alt="Linkedin Profile">
  28. </a>
  29. </div>
  30. <h1><span class=no-break">John Shaver</span> <span class="no-break">Web Developer</span></h1>
  31. </header>
  32. <article>
  33. <section class="section about">
  34. <h2>About Me</h2>
  35. <p class="attention">I'm a full-stack engineer with experience building
  36. and deploying web based applications from the ground up as well as
  37. debugging and maintaining legacy systems. I am looking for a remote
  38. full-stack/frontend position with a team that embraces remote work.</p>
  39. <p>I have been working with websites and code since I was a kid and then
  40. worked 7 years in technical support where I gained a solid
  41. understanding of the web and how it works under the hood. I have spent
  42. the last 4 years designing, building, deploying and maintaining
  43. javascript applications. I've worked with iOS, PHP, NodeJS, and
  44. React/Redux. I enjoy learning better ways to do things, solving
  45. difficult problems and building software that assists my clients/users
  46. in achieving success. I live in Hayden Idaho and my hobbies include
  47. Devops, listening to podcasts, playing ukulele and, especially,
  48. spending time with my wife and 3 kids.</p>
  49. </section>
  50. <section class="section projects">
  51. <h2>Recent Software Projects</h2>
  52. <h3>Dashdrop</h3>
  53. <div class="project">
  54. <div class="project-image">
  55. <img class="main-image" src="images/dashdrop-1.png"/>
  56. <img class="main-image" src="images/dashdrop-2.png"/>
  57. <img class="main-image" src="images/dashdrop-3.png"/>
  58. </div>
  59. <div class="project-info">
  60. <h4>Project Goals</h4>
  61. <p>DashDrop is a service to allow dash enthusiasts to automatically
  62. generate and fund promotional wallets to distribute at
  63. conferences and events for the purpose of promoting the dash
  64. currency. The project owners had a new design commisioned for
  65. the app and needed it implemented quickly.</p>
  66. <h4>My Contributions</h4>
  67. <p>The app was already built but they needed someone with strong
  68. CSS experience to implement the new design. I implmented the new
  69. design using CSS styles and made some small changes in the
  70. Javascript, where needed, to change the structure of the
  71. interface.</p>
  72. <h4>Technologies Used</h4>
  73. <p>CSS and some JQuery</p>
  74. </div>
  75. </div>
  76. <h3>NewVistas Website Platform</h3>
  77. <div class="project">
  78. <div class="project-image">
  79. <img class="main-image" src="images/newvistas.jpg"/>
  80. </div>
  81. <div class="project-info">
  82. <h4>Project Goals</h4>
  83. <p>Newvistas needed a replacement platform for
  84. public-facing web content, encouraging communication
  85. between users, managing deliverables from business
  86. managers and allowing business owners and authorized
  87. contributors to update content relevant to their role.
  88. The platform needed to be easily deployable on multiple
  89. domains and allow the maintaining developers to easily
  90. customize styling differently between them.</p>
  91. <h4>My Contributions</h4>
  92. <p>I was the only developer on the project. I built
  93. both the REST api and the frontend SPA. The REST api
  94. was kept separate so that the project could actually
  95. run separate seamlessly integrated SPAs for each role
  96. it was trying to fill.
  97. </p>
  98. <p>I designed the dev environment to be quickly and
  99. easily rebuilt and deployed since I would be handing it
  100. off to other devs to maintain. The build process is
  101. designed to ensure optimized page loads and help with
  102. cross-browser compatibility,while allowing for the
  103. latest libraries and language improvements to be used.
  104. Deploying is fast and easy as well as easily
  105. reversible, leveraging AWS Elastic Beanstalk, EC2 and
  106. S3.</p>
  107. <h4>Technologies Used</h4>
  108. <p>The backend was a rest API built with Node.js and
  109. Express.js. The front end is an isomorphically
  110. rendered SPA built wth React/Redux. The front end is
  111. compiled from ES2016 to ES5 using babel and webpack.
  112. Isomorphic rendering provides fast load times and
  113. ensures search engines can index the public content.
  114. Users authenticate with their AzureAD user via OpenID
  115. Connect. </p>
  116. <p>Express was used to build out the REST endpoints for
  117. the API mySQL is used via Sequelize.js ORM. Secured
  118. endpoint authorize users based on their user roles and
  119. ownership/roles assigned to different pages/groupings
  120. taking into account assigned roles of parent groupings.
  121. </p>
  122. <p>The development environment is run in vagrant with
  123. virtual box and babel and weback were used to compile
  124. and bundle the front end code. The app runs on
  125. ephemeral ec2 instances and deployed to AWS Elastic
  126. Beanstalk to allow for scalability.</p>
  127. </div>
  128. </div>
  129. <h3>Payzoom Econosystem Platform</h3>
  130. <div class="project">
  131. <div class="project-image">
  132. <img alt="The Payzoom Logo" src="images/PayZoom_logo.png"/>
  133. <img class="main-image" alt="Payzoom Software Demo" src="images/payzoom.png"/>
  134. </div>
  135. <div class="project-info">
  136. <h4>Project Goal</h4>
  137. <p>Payzoom is a SaaS that allows a community of small
  138. businesses and funding entities to work together to
  139. work for each other and balance all the payments at the
  140. end of the week including paying employees,
  141. contractors, services fees, and expenses. Participants
  142. need to be able to do work for any company on any
  143. project and bill them accordingly as easily as if they
  144. were working for their own company.</p>
  145. <h4>My Contributions</h4>
  146. <p>I wrote the initial payroll integration with
  147. ZenPayroll to gather weekly totals and pass the
  148. information to ZenPayroll as well as the code to send
  149. and reconcile expense data and documentation to
  150. QuickBooksOnline. Implemented some of the user
  151. interface views including allocating overtime and
  152. attaching files to reports/allocations and the
  153. associated backend.</p>
  154. <p>While working on the project I also improved the dev
  155. environment from one that required 2 days for a
  156. developer to build a permanent virtualbox image to an
  157. ephemeral environment in Vagrant that could be thrown
  158. away and recreated in less than 20 minutes.</p>
  159. <h4>Technologies Used</h4>
  160. <p>Vagrant Payzoom was built with NodeJS and MySQL on
  161. the backend and a custom built javascript frontend.
  162. Communication between server and web was done via
  163. websockets and a JSON command/sub/pub api that routed
  164. particular requests/subscriptions to differnt modules
  165. running on the backend. Payroll was processed via Gusto
  166. and invoicing informaiton/documentation was passed to
  167. QuickBooksOnline for paying invoices and tracking
  168. expenses.</p>
  169. </div>
  170. </div>
  171. <h3>Novatek Native Wrapper App</h3>
  172. <div class="project">
  173. <div class="project-image">
  174. <img class="main-image" alt="Workaids App Icon" src="images/icon_work_aids.png" />
  175. <img alt="Workaids Login Screen" src="images/workaids_login2.png" />
  176. </div>
  177. <div class="project-info">
  178. <h4>Project Goals</h4>
  179. <p>The Client had an SPA optimized for mobile, but
  180. wanted it to operate more like an app and have access
  181. to the phone’s camera, bluetooth, geofencing, etc.
  182. Since phonegapp was still immature, they wanted an app
  183. built to wrap the current web interface and allow
  184. reusing the existing web based code as much as
  185. possible.</p>
  186. <h4>My Contrinbutions</h4>
  187. <p>Initially I helped write many of the api calls for
  188. the js library the web app used to communicate through
  189. the webFrame to the native code. Later I helped out
  190. with ad-hoc deploying the app and did some basic
  191. maintenance and improvements on the native Objective-C
  192. codebase. This included the PHP backend and Objective-C
  193. code necessary to facilitate iOS push
  194. notifications.</p>
  195. <h4>Technologies Used</h4>
  196. <p>This was before phonegapp/cordova was very far along, so
  197. they decided to build a custom wrapper app that wrapped
  198. the webview and exposed the phone APIs to the website
  199. via messages sent betwewn javascript and the Objective
  200. C code. A javascript library was built that provided
  201. an event based API to easier access the phone
  202. functions. Grunt was used bundle the javascript
  203. library. Some work was done in PHP to provide support
  204. for the App to authenticate and to send off push
  205. notifications.</p>
  206. </div>
  207. </div>
  208. </section>
  209. </article>
  210. </div>
  211. </body>