Back

Just my website

A place to be seen

The Scoop

I wrote all of the HTML, CSS and JavaScript.

I built a responsive grid.

View it on devices of different sizes, the content adjusts.

It's just a place for me to be seen.

For animation, I use GSAP and control it with ScrollMagic.

I used stock images of Philly.

Info

When page loads, I mimic the curtain effect with GSAP and 2 div's.

Then you get One Liberty Place as the background.

I use the parallax effect here and keep the image in place while we scroll the content over it.

Everything scrolls out of view faster than my name.

For this effect I used rellax.js.

I build a responsive navigation bar using flexbox.

On mobile devices, I moved the navigation bar to the bottom, while it sticks to the top on larger devices.

About Me

The "About Me" section has a floating "panel" that you can drag around or close.

This I made using GSAP.

Then the animated box with my initals spinning.

Simple CSS keyframe animation.

Then we get a parallax with a text overlay.

Process

Floating tiles, with a box shadow.

Used Scrollmagic to slide each one in when they hit a certain spot on the viewport.

Fontawesome icons used again.

A reminder of the value a website provides a business, sliding over a shot of the Comcast Technology Center.

Work

Here I tried to find a different way to showcase the work I've done.

I looked at what feels like every freelancer's website for inspiration/ideas.

They all seem to do the same thing, so I went against the grain with my layout.

For the projects part - went with a pegboard background, then positioned the "pieces" with CSS.

The pins come floating, courtesy of some JavaScript.

As you know, clicking the more brings you to this page.

Here I'm pinning each section when it hits the top and scrolling the section over it... ScrollMagic.