h6 {
 font-size: calc(1vmin + 12px);
 color: #5a396088;
}
}

Joe Fitzsimmons

Web Developer

let webDev = ['J','o','e'];
{
webDev = (joke
=== 'bad') ? 'Joe'
: 'Fitzsimmons';
{{ⅉ}}
}
}
}
 
}
}
 
 
}

{
 
 
{
{
 
{
{
{

about

I have spent my career in IT, Marketing and Communications, working on the web the entire time. My approach to the job is to contribute, take on an impactful amount of work, be a resource for my colleagues and help maintain a positive environment.

I enjoy the reward of solving problems like tracking down a stubborn bug or coming up with big picture ideas, breaking them down into manageable tasks and seeing them through to launch, while continually improving the product.

I'm a programmer who adapts to different technologies, who also has a deep appreciation of art, design and aesthetics. I make the most of my opportunities. If you think I'd be a good fit and would like to work together, check out my resumé and reach out to me.

❲❲ ⅉ ❳❳ ❲❲ ⅉ ❳❳
❲ ⅉ ❳❳ ❲❲ ⅉ ❳
ⅉ ❳❳ ❲❲ ⅉ
❲❲ ⅉ ❳❳

❲❲ ⅉ ❳❳
ⅉ ❳❳ ❲❲ ⅉ
❲ ⅉ ❳❳ ❲❲ ⅉ ❳
❲❲ ⅉ ❳❳ ❲❲ ⅉ ❳❳

skills

JavaScript
JavaScript icon

TypeScript
TypeScript

Node
Node.js

3
-
5

4
-
5

5
-
5

Axios, Require.js, ESLint

CSS
CSS3 icon

SASS
Sass icon

CSS-in-JS

3
-
5

4
-
5

5
-
5

Material-UI, Compass, Less, Foundation

React
React

Next.js
Next.js

Vue
Vue.js

3
-
5

4
-
5

5
-
5

Nuxt, Redux, Vuex, CRA

eCommerce
Salesforce icon

SPA

CMS
Jamstack

3
-
5

4
-
5

5
-
5

SSG, SSR, Enterprise Applications

more...

PHP
PHP icon
3/5
WebPack
Webpack
3/5
APIs
4/5
HTML
HTML5 icon
5/5
WordPress
WordPress icon
4/5
Git
Git icon
5/5
SQL
MySQL
3/5
Web Design
3/5
Testing
3/5
Analytics
Google Tag Manager
3/5

Afew years passed since last, I went through this code. I thought with browser improvements and a little more wisdom, I would spend some time making updates and hopefully get this impractical site to perform a little better. I had a new idea to utilize canvas more.

I removed the three animation methods used prior in v1 and replaced them with two new functions: rotate, and bounce. Bounce mimics prior behavior of a circle bouncing off the sides of the screen. It now appends a canvas element instead of a div. This allows me to use the element as an image. The browser redraws the image to create an animation effect. The element no longer needs to constantly have its location properties updated. This technique also allows me to keep a static version of the circle as a fixture on the screen.

Rotate resembles its prior version. In contrast to the Bounce function, instead of redrawing the element as it moves across the screen, it draw the canvas element as a static image, and uses css to rotate the element 360 degrees. I created new logic to randomize the direction of the animation and try to keep each element on screen for most of its animation cycle.

I increased the number of full screen canvases from two to five. This keeps elements from interfering with each other and gives a more layered effect. To take advantage of the layering I added a clipping effect that varies the circle's transparency creating an optical illusion when circles overlap. Four new css classes change each circle's saturation at different rates because I couldn’t stop myself.

After this quick cleanup, I noticed a 10+% performance increase. Not because of what I've rambled about, but because I made the circles larger and used less of them. And so it goes...

The About section I kept minimal. I used the "card" background I've used on everything like it's salt. I like the big headers and rounder corners. Made a little speech bubble and added a newer photo. Everything aligned to the right, I think it gives it an MMS look.

Skills looks similar to v1. I thought this section used to look kind of cool, but didn't make a lot of sense. I think I made it a little cleaner and relevant. I changed some skills, deleted and added. It's a work in progress.