lot's of updates to content and styling...
This commit is contained in:
parent
7083a0e1c2
commit
49ce0d30a8
43
css/main.css
43
css/main.css
|
|
@ -1,11 +1,13 @@
|
||||||
/* just an empty stylesheet */
|
|
||||||
.flex-container {
|
.flex-container {
|
||||||
width: 6.5in;
|
width: 5.5in;
|
||||||
max-width: 90%;
|
max-width: 90%;
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
body {font-family: Tahoma, sans-serif;}
|
body {
|
||||||
|
font-family: Roboto, Tahoma, sans-serif;
|
||||||
|
text-align: justify;
|
||||||
|
}
|
||||||
|
|
||||||
h1, h2 {
|
h1, h2 {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
|
|
@ -19,15 +21,17 @@ h1 {
|
||||||
font-size: 1.6rem;
|
font-size: 1.6rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
h2 {font-size: 1.45rem;font-weight: normal;}
|
h2 {
|
||||||
|
font-size: 1.45rem;
|
||||||
|
font-weight: 500;
|
||||||
|
}
|
||||||
|
|
||||||
h3 {
|
h3 {
|
||||||
font-size: 1.3rem;
|
font-size: 1.3rem;
|
||||||
font-weight: normal;
|
margin: 1em 0 0.1em 0;
|
||||||
|
font-weight: 500;
|
||||||
}
|
}
|
||||||
|
|
||||||
p {}
|
|
||||||
|
|
||||||
p.attention {
|
p.attention {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
font-style: italic;
|
font-style: italic;
|
||||||
|
|
@ -35,21 +39,36 @@ p.attention {
|
||||||
|
|
||||||
h4 {
|
h4 {
|
||||||
font-weight: normal;
|
font-weight: normal;
|
||||||
|
font-style: italic;
|
||||||
}
|
}
|
||||||
|
|
||||||
div {}
|
|
||||||
|
|
||||||
img.project-image {max-width: 30%;}
|
img.project-image {
|
||||||
|
max-width: 30%;
|
||||||
|
}
|
||||||
|
|
||||||
.project {
|
.project {
|
||||||
display: flex;
|
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 {
|
.project-image > img {
|
||||||
max-width: 100%;
|
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);
|
||||||
}
|
}
|
||||||
Binary file not shown.
|
After Width: | Height: | Size: 4.1 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 125 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 19 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 19 KiB |
224
index.html
224
index.html
|
|
@ -1,5 +1,8 @@
|
||||||
<head>
|
<head>
|
||||||
|
<meta name="viewport" content="width=device-width">
|
||||||
<link rel="stylesheet" href="css/main.css" />
|
<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>
|
<title>Javascipt Developer - Portfolio</title>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
|
|
@ -12,122 +15,163 @@
|
||||||
<div class="social-links"></div>
|
<div class="social-links"></div>
|
||||||
</header>
|
</header>
|
||||||
<article>
|
<article>
|
||||||
<section>
|
<section class="section about">
|
||||||
<h2>About Me</h2>
|
<h2>About Me</h2>
|
||||||
<p class="attention">I am currently looking for a full-time remote
|
<p class="attention">I am currently looking for a full-time
|
||||||
position (frontend or fullstack) working with a team in a modern
|
remote position (frontend or fullstack) working with a team in
|
||||||
framework (preferably with React) to build or improve an interesting and
|
a modern framework (preferably with React) to build or improve
|
||||||
purposeful project.</p>
|
an interesting and purposeful project.</p>
|
||||||
|
|
||||||
<p>In high school studied Computer Networking Systems and Computer
|
<p>In high school studied Computer Networking Systems and
|
||||||
Programming part time at the nearby Occupation Skills Center. Since
|
Computer Programming part time at the nearby Occupation Skills
|
||||||
then I have been working with computers and teaching myself Software
|
Center. Since then I have been working with computers and
|
||||||
Development. I spent 7 years working in various Technical Support
|
teaching myself Software Development. I spent 7 years working
|
||||||
roles where I learned an in-depth understanding of various internet and
|
in various Technical Support roles where I gained an in-depth
|
||||||
server technologies so when I shifted my career to software development,
|
understanding of a variety of internet and server technologies.
|
||||||
working on web based software seemed an obvious choice.</p>
|
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
|
<p>I have spent the last 4 years designing, building, deploying
|
||||||
2014, I have been a freelance developer working with NodeJS and
|
and maintainging javascript applications. I've worked with
|
||||||
javascript and more recently React/Redux. I enjoy learning new things,
|
iOS, PHP, NodeJS, and more recently React/Redux. I enjoy
|
||||||
solving difficult problems and building software that assists my
|
learning new things, solving difficult problems and building
|
||||||
clients/users in achieving success. I live in Hayden Idaho and my
|
software that assists my clients/users in achieving success. I
|
||||||
hobbies include Devops, listening to podcasts, playing ukulele and,
|
live in Hayden Idaho and my hobbies include Devops, listening
|
||||||
especially, spending time with my wife and 3 kids.</p>
|
to podcasts, playing ukulele and, especially, spending time
|
||||||
|
with my wife and 3 kids.</p>
|
||||||
</section>
|
</section>
|
||||||
<section>
|
<section class="section projects">
|
||||||
<h2>Recent Software Projects</h2>
|
<h2>Recent Software Projects</h2>
|
||||||
<h3>NewVistas Website Platform</h3>
|
<h3>NewVistas Website Platform</h3>
|
||||||
<div class="project">
|
<div class="project">
|
||||||
<!--<div>
|
<div class="project-image">
|
||||||
<img class="project-image" src="images/newvistas.jpg"/>
|
<img class="main-image" src="images/newvistas.jpg"/>
|
||||||
</div>-->
|
</div>
|
||||||
<div class="project-info">
|
<div class="project-info">
|
||||||
<h4>Project Goals</h4>
|
<h4>Project Goals</h4>
|
||||||
<p>Newvistas needed a platform to replace their old website for
|
<p>Newvistas needed a replacement platform for
|
||||||
both public-facing web content, encouraging communication between
|
public-facing web content, encouraging communication
|
||||||
users and managing deliverables from business managers. The The
|
between users, managing deliverables from business
|
||||||
new platform needed to allow managing owners to log into the
|
managers and allowing business owners and authorized
|
||||||
website to update content relevant to their role. The platform
|
contributors to update content relevant to their role.
|
||||||
needed to be easily deployable on multiple websites and allow for
|
The platform needed to be easily deployable on multiple
|
||||||
fast style customization between sites by the maintaining
|
domains and allow the maintaining developers to easily
|
||||||
developer.
|
customize styling differently between them.</p>
|
||||||
<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>
|
<h4>My Contributions</h4>
|
||||||
<p>I was the only developer assigned to work on the project and
|
<p>I was the only developer on the project. I built
|
||||||
developed it myself, so I built the rest api and the frontend SPA
|
both the REST api and the frontend SPA to that used the
|
||||||
but my work also included designing the dev environment to be
|
REST api. The REST api was kept separate so that the
|
||||||
quickly and easily redeployed with a clean slate for testing.
|
project could actually run separate seamlessly
|
||||||
The build process was designed to ensure deployed code was
|
integrated SPAs for each role it was trying to fill. I
|
||||||
optimized and cross-browser compatible while allowing for the
|
designed the dev environment to be quickly and easily
|
||||||
latest libraries and language improvements to be used and the I
|
rebuilt and deployed since I would be handing it off to
|
||||||
designed the deploy process to be easy and quickly deployed or
|
other devs to maintain. The build process is designed
|
||||||
reverted with a greatly reduced chance of human error than
|
to ensure optimized page loads and help with
|
||||||
previous deploy processes the client had used in the past.</p>
|
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>
|
||||||
</div>
|
</div>
|
||||||
<h3>Payzoom</h3>
|
<h3>Payzoom Econosystem Platform</h3>
|
||||||
<div class="project">
|
<div class="project">
|
||||||
<!--<div class="project-image">
|
<div class="project-image">
|
||||||
<img alt="The Payzoom Logo" src="images/PayZoom_logo.png"/>
|
<img alt="The Payzoom Logo" src="images/PayZoom_logo.png"/>
|
||||||
</div>-->
|
<img class="main-image" alt="Payzoom Software Demo" src="images/payzoom.png"/>
|
||||||
|
</div>
|
||||||
<div class="project-info">
|
<div class="project-info">
|
||||||
<h4>Project Goal</h4>
|
<h4>Project Goal</h4>
|
||||||
<p>Payzoom is a SAAS that allows a community of small businesses and
|
<p>Payzoom is a SaaS that allows a community of small
|
||||||
funding entities to work together to get funding work for each other
|
businesses and funding entities to work together to
|
||||||
and balance all the payments at the end of the week including paying
|
work for each other and balance all the payments at the
|
||||||
employees, contractors, services fees, and expenses.</p>
|
end of the week including paying employees,
|
||||||
<h4>Technologies Used</h4>
|
contractors, services fees, and expenses. Participants
|
||||||
<p>When I was working on payzoom it was built with NodeJS and MySQL
|
need to be able to do work for any company on any
|
||||||
on the backend and a custom built web-based frontend. Communication
|
project and bill them accordingly as easily as if they
|
||||||
between server and web was done via websockets and a JSON api. The
|
were working for their own company.</p>
|
||||||
backend had to communicate with Gusto(ZenPayroll) and
|
|
||||||
QuickBooksOnline APIs. </p>
|
|
||||||
<h4>My Contributions</h4>
|
<h4>My Contributions</h4>
|
||||||
<p>I wrote the initial payroll integration with ZenPayroll to gather
|
<p>I wrote the initial payroll integration with
|
||||||
weekly totals and pass the information to ZenPayroll as well as the
|
ZenPayroll to gather weekly totals and pass the
|
||||||
code to send and reconcile expense data and documentation to
|
information to ZenPayroll as well as the code to send
|
||||||
QuickBooksOnline.</p>
|
and reconcile expense data and documentation to
|
||||||
<p>While working on the project I improved the dev enviornment
|
QuickBooksOnline. Implemented some of the user
|
||||||
from one that required 2 days for a developer to build a
|
interface views including allocating overtime and
|
||||||
permanent virtualbox image to an ephemeral environment in
|
attaching files to reports/allocations and the
|
||||||
Vagrant that could be setup in less than 20min.</p>
|
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>
|
||||||
</div>
|
</div>
|
||||||
<h3>Novatek Native Wrapper App</h3>
|
<h3>Novatek Native Wrapper App</h3>
|
||||||
<div class="project">
|
<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">
|
<div class="project-info">
|
||||||
<h4>Project Goals</h4>
|
<h4>Project Goals</h4>
|
||||||
<p>They had an SPA that already had a mobile view, but they wanted
|
<p>The Client had an SPA optimized for mobile, but
|
||||||
it to operate more like an app and have access to the phone camera,
|
wanted it to operate more like an app and have access
|
||||||
bluetooth, geofencing, etc. with a native work flow. They wanted an
|
to the phone’s camera, bluetooth, geofencing, etc.
|
||||||
app built to allow this while reusing the existing mobile website
|
Since phonegapp was still immature, they wanted an app
|
||||||
as much as possible.</p>
|
built to wrap the current web interface and allow
|
||||||
<h4>Technologies Used</h4>
|
reusing the existing web based code as much as
|
||||||
<p>This was before phonegapp was in much use so they went with a
|
possible.</p>
|
||||||
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>
|
<h4>My Contrinbutions</h4>
|
||||||
<p>I came onto the project later and helped write alot of the api
|
<p>Initially I helped write many of the api calls for
|
||||||
code for the javascript library. I also helped out with deploying
|
the js library the web app used to communicate through
|
||||||
the app to the app store and did some simple maintenance on the
|
the webFrame to the native code. Later I helped out
|
||||||
Objective C codebase. I also wrote the backend and Objective C code
|
with ad-hoc deploying the app and did some basic
|
||||||
necessary to facilitate push notifications.</p>
|
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>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
</article>
|
</article>
|
||||||
|
</div>
|
||||||
</body>
|
</body>
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue