Portfolio – James Giannini
Feb 18 - May 18
Goals
- Creating a high-performing, responsive website from designed mockups
- Compressing large(30MB+) images down for fast load times
- Creating a custom JavaScript scrolling indicator for navigation
Project Overview
James had a design/vision for his portfolio, but needed the expertise to put the front end together. My job was to turn the sketch designs into a functioning static website. The designs were heavily image based, so there is a strong emphasis on image performance and lazy-loading.
Portfolio Process Gallery
This iPhone on second page auto-plays a video when scrolled to.
The slider on the right indicates what section of the page is in view. It updates as the user scrolls, built with JavaScript.
We went with basic grid layouts for easy mobile scaling. These images also ran quite large, so they needed compressing and lazy loading.
Basic contact form at the bottom, uses an external API/service called Form Spree. This works since the site is fully static. Great for simple forms.
Process
For any static site, the process is generally straightforward. For this one, I went with my SCSS framework and used a basic gulp file for compilation. There were 4 unique pages total, so I simply created it page by page, starting with the home page.
The designs were made to easily scale down to mobile, so it made sense to build out the desktop version first. After a single page was done, I used a similar process for the remaining pages. After the pages were built out, it was time to implement the JavaScript navigation and image lazy loading. I used an existing library to handle the image galleries and lazy loading. After a few hours of hacking, it was all good to go!
After that, there were only some minor tweaks and changes, including the image galleries and optimizing the large images on the site.
James Giannini
Brandon is a true pro. He helped me bring my designs to life, which helped me get the job I wanted. He's organized, friendly, and always brings good ideas to the table. I would absolutely recommend him to any future clients.
Technologies Used
Javascript
Since it was a static site, it made sense to keep the technologies simple. After all, the goal was for the final build to be as light as possible. As for the JavaScript, I just used JQuery and some of its libraries, such as lightbox and lazy loading. It also sped up the custom navigation part of the website in terms of development time.
Build
I used SASS/SCSS, so I used a pre-existing gulp file I used previously for SCSS compilation and auto-prefixing. That’s all that was needed for this site.
CSS
When I do a custom design, I don’t usually like to use something like Bootstrap or Foundation. I instead went with vanilla CSS using flexbox layouts and some basic global classes/mixins.
Want to check out some code demos?
Check out code samples written in JavaScript, React, Node, and more
Demo 1
Converting jQuery Blog Post Component To Vanilla JS
I have a simple blog component that is written in jQuery. I would like to convert it to plain JavaScript as part of my effort to completely remove jQuery from my portfolio website. Here’s what the code does in order. init() on .header-info click, call the toggle method. Get the initial textbox height and store […]
Demo 2
Converting jQuery Navbar Code to Vanilla JavaScript
I am on a journey to completely replace jQuery on my portfolio site. The first step is updating the 10 or so JavaScript files that still rely on it. Why not start with one of the easier ones, the navbar? As you can see, the code is pretty straightforward. On init, add event listeners to […]
Demo 3
Defining Reusable Column Extends with SCSS
Quick Note: The atSmall type mixins are just basic media queries. Since these kinds of layouts are common, they also need to be overwritable if I want to change the spacing. Generally, the ‘default’ spacing is defined in the extend/mixins. Example Use Cases To get the layout working, you only need a container class and […]