Portfolio – James Giannini
Feb 18 - May 18
- Creating a high-performing, responsive website from designed mockups
- Compressing large(30MB+) images down for fast load times
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
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.
After that, there were only some minor tweaks and changes, including the image galleries and optimizing the large images on the site.
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.
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.
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?
Converting jQuery Blog Post Component To Vanilla JS
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 […]