making progress
This commit is contained in:
John Shaver
parent
cce0e0d08b
commit
139d80f2fe
|
|
@ -0,0 +1,2 @@
|
||||||
|
node_modules
|
||||||
|
|
||||||
|
|
@ -4,8 +4,8 @@
|
||||||
position: relative;
|
position: relative;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
flex-wrap: wrap;
|
flex-wrap: wrap;
|
||||||
max-width: unset;
|
width: unset;
|
||||||
width: 90vw;
|
max-width: unset;
|
||||||
margin-left: -0.5rem;
|
margin-left: -0.5rem;
|
||||||
margin-right: -0.5rem;
|
margin-right: -0.5rem;
|
||||||
margin-top: 0.8rem;
|
margin-top: 0.8rem;
|
||||||
|
|
@ -21,8 +21,7 @@
|
||||||
img {}
|
img {}
|
||||||
|
|
||||||
.project-image > img {
|
.project-image > img {
|
||||||
max-width: 90%;
|
margin: 0 0.5rem;
|
||||||
margin: 0.5rem;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.social-links img {
|
.social-links img {
|
||||||
|
|
|
||||||
|
|
@ -64,7 +64,7 @@ h4 {
|
||||||
}
|
}
|
||||||
|
|
||||||
.project-image > img {
|
.project-image > img {
|
||||||
max-width: 100%;
|
width: 100%;
|
||||||
margin-bottom: 3rem;
|
margin-bottom: 3rem;
|
||||||
-webkit-box-shadow: 2px 2px 8px 1px rgba(0,0,0,0.17);
|
-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);
|
-moz-box-shadow: 2px 2px 8px 1px rgba(0,0,0,0.17);
|
||||||
|
|
|
||||||
Binary file not shown.
|
After Width: | Height: | Size: 184 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 84 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 417 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 144 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 37 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 22 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 31 KiB |
106
index.html
106
index.html
|
|
@ -3,7 +3,7 @@
|
||||||
<link rel="stylesheet" href="css/main.css" />
|
<link rel="stylesheet" href="css/main.css" />
|
||||||
<link rel="stylesheet" media="screen and (max-width: 700px)" href="css/700.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">
|
<link href="https://fonts.googleapis.com/css?family=Roboto:400,400i,500,500i" rel="stylesheet">
|
||||||
<title>Javascipt Developer - Portfolio</title>
|
<title>Fullstack Developer - Portfolio</title>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<div class="flex-container">
|
<div class="flex-container">
|
||||||
|
|
@ -33,24 +33,100 @@
|
||||||
<section class="section about">
|
<section class="section about">
|
||||||
<h2>About Me</h2>
|
<h2>About Me</h2>
|
||||||
<p class="attention">I'm a full-stack engineer with experience building
|
<p class="attention">I'm a full-stack engineer with experience building
|
||||||
and deploying web based applications from the ground up as well as
|
and deploying web based applications from the ground up as well as
|
||||||
debugging and maintaining legacy systems. I am looking for a remote
|
debugging and maintaining legacy applications. I am looking for a remote
|
||||||
full-stack/frontend position with a team that embraces remote work.</p>
|
position building web based software with a team that embraces remote
|
||||||
|
work.</p>
|
||||||
|
|
||||||
<p>I have been working with websites and code since I was a kid and then
|
<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
|
worked 7 years in technical support where I gained a solid understanding
|
||||||
understanding of the web and how it works under the hood. I have spent
|
of the web and how it works under the hood. I have spent the last 8 years
|
||||||
the last 4 years designing, building, deploying and maintaining
|
designing, building, deploying and maintaining javascript and typescript
|
||||||
javascript applications. I've worked with iOS, PHP, NodeJS, and
|
applications. I've worked with PHP, NodeJS, React, and Serverless.js. I
|
||||||
React/Redux. I enjoy learning better ways to do things, solving
|
enjoy learning better ways to do things, solving difficult problems and
|
||||||
difficult problems and building software that assists my clients/users
|
building software that helps people. I live in Moscow Idaho and my
|
||||||
in achieving success. I live in Hayden Idaho and my hobbies include
|
hobbies include Devops, listening to podcasts, playing ukulele and,
|
||||||
Devops, listening to podcasts, playing ukulele and, especially,
|
especially, spending time with my wife and 4 kids.</p>
|
||||||
spending time with my wife and 3 kids.</p>
|
|
||||||
</section>
|
</section>
|
||||||
<section class="section projects">
|
<section class="section projects">
|
||||||
<h2>Recent Software Projects</h2>
|
<h2>Recent Software Projects</h2>
|
||||||
<h3>Dashdrop</h3>
|
<h3><a href="https://www.economicmodeling.com/skillabi/">Skillabi</a></h3>
|
||||||
|
<div class="project">
|
||||||
|
<div class="project-image">
|
||||||
|
<img class="main-image" src="images/skillabi-1-login.png"/>
|
||||||
|
<img class="main-image" src="images/skillabi-2.gif"/>
|
||||||
|
<img class="main-image" src="images/skillabi-3.webp"/>
|
||||||
|
<img class="main-image" src="images/curricular-skills-api.png"/>
|
||||||
|
</div>
|
||||||
|
<div class="project-info">
|
||||||
|
<h4>Project Goals</h4>
|
||||||
|
<p>Skillabi is a tool to help Higher Education institutionsand to
|
||||||
|
find skills that are in-demand in the market place so they can
|
||||||
|
adjust they're curriculum to teach those skills. Skills are parsed
|
||||||
|
from course data and then compared with skills job postings data
|
||||||
|
for relevant occupations.</p>
|
||||||
|
<h4>My Contributions</h4>
|
||||||
|
|
||||||
|
<p>I worked on a 2-3 man team to build a prototype using netlify. We then
|
||||||
|
itterated on it in 3 phases. The prototype was successful enough
|
||||||
|
that customers requested to pay to use it (although it chock full
|
||||||
|
of technical debt on the inside.) When it came time to build a
|
||||||
|
production version, I took over as the technical lead on the
|
||||||
|
project. This included designing a new version of the backend APIs
|
||||||
|
and leading the reimplementation the frontend.</p>
|
||||||
|
|
||||||
|
<p>The new APIs for storing curricular data and user profiles
|
||||||
|
needed to be secure, easy to use, well tested, well documented,
|
||||||
|
scalable and reliable. We ensured that security was implemeted in
|
||||||
|
the back end first. We used cognito tokens and JWT claims to scope
|
||||||
|
user access at the API level on a per user basis. We adopted a
|
||||||
|
search query language for searching a curricular data that ensured
|
||||||
|
the API could be easily expanded and would be consistant across
|
||||||
|
endpoints. We implemented the API on AWS serverless lambdas for
|
||||||
|
scalability and reliability and used typescript on serverless.js
|
||||||
|
for ease of development.</p>
|
||||||
|
|
||||||
|
<p>The new frontend was developed with react, written in typescript
|
||||||
|
and served via cloudfront and s3 for scalabilty, reliability and
|
||||||
|
simplicity. I developed the solutions to the most complicated
|
||||||
|
problems, including realtime highlighting of skills within a text
|
||||||
|
area as users type (The parsing of the skills was handled by an
|
||||||
|
external API), and identifying boilerplate text accross many
|
||||||
|
courses in a curriculum for parsing. </p>
|
||||||
|
<h4>Technologies Used</h4>
|
||||||
|
<p>Typescript, Terraform, Gitlab CI, Fugue, OpenId/OAuth, React, Serverless.js, react-query, JWT, KONG</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<h3>Skillsmatch</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>Skillsmtch is an web based app that schools can provide to their
|
||||||
|
students and potential student who are coming back to school after
|
||||||
|
some time in the workplace. Skillsmatch helps these adult learners
|
||||||
|
catalogue the skills they already have so they can see what skills
|
||||||
|
they could then learn to make help with either making themselves
|
||||||
|
more marketable or shifting careers. It then helps them identify
|
||||||
|
courses or degrees that could help them to learn and demonstrate
|
||||||
|
those skills to potential employers.</p>
|
||||||
|
<h4>My Contributions</h4>
|
||||||
|
<p>I worked with my team as a newly hired developer at the company
|
||||||
|
to quickly rebuild the already developed prototype. We build out
|
||||||
|
out necessary APIs using serverless.js/Mongodb and frontend in
|
||||||
|
Javascript with React/Redux. I wrote code for, reviewed and QA'd
|
||||||
|
tickets. I particularly enjoyed teaching new developers and interns
|
||||||
|
as they were hired, implementing API tests on our new APIs and
|
||||||
|
building out dev ops systems to automatically deploy to AWS.</p>
|
||||||
|
<h4>Technologies Used</h4>
|
||||||
|
<p>React, Cypress, AWS Elastic Beanstalk, Serverless.js, Redux, Docker, Codeship CI</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<h3>Dash Drop</h3>
|
||||||
<div class="project">
|
<div class="project">
|
||||||
<div class="project-image">
|
<div class="project-image">
|
||||||
<img class="main-image" src="images/dashdrop-1.png"/>
|
<img class="main-image" src="images/dashdrop-1.png"/>
|
||||||
|
|
@ -184,7 +260,7 @@
|
||||||
built to wrap the current web interface and allow
|
built to wrap the current web interface and allow
|
||||||
reusing the existing web based code as much as
|
reusing the existing web based code as much as
|
||||||
possible.</p>
|
possible.</p>
|
||||||
<h4>My Contrinbutions</h4>
|
<h4>My Contributions</h4>
|
||||||
<p>Initially I helped write many of the api calls for
|
<p>Initially I helped write many of the api calls for
|
||||||
the js library the web app used to communicate through
|
the js library the web app used to communicate through
|
||||||
the webFrame to the native code. Later I helped out
|
the webFrame to the native code. Later I helped out
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,27 @@
|
||||||
|
#!/bin/bash
|
||||||
|
|
||||||
|
IMAGES_DIR="./images"
|
||||||
|
|
||||||
|
WIDTH=
|
||||||
|
|
||||||
|
for f in ./images/*
|
||||||
|
do
|
||||||
|
echo "Processing $f"
|
||||||
|
case "$f" in
|
||||||
|
*.jpeg|*.jpg)
|
||||||
|
convert $f [320] ./images/thumbnails/`basename $f`;
|
||||||
|
;;
|
||||||
|
*.png)
|
||||||
|
echo "PNG $f"
|
||||||
|
;;
|
||||||
|
*.webp)
|
||||||
|
echo "WEBP $f"
|
||||||
|
;;
|
||||||
|
*.gif)
|
||||||
|
echo "GIF $f"
|
||||||
|
;;
|
||||||
|
*)
|
||||||
|
echo "OTHER ${f}"
|
||||||
|
;;
|
||||||
|
esac
|
||||||
|
done
|
||||||
Loading…
Reference in New Issue