@carolinedrawssometimes

Overview

I created this website as a promotion for a drawing Instagram account. The site uses a parallax scrolling effect as you scroll through each word of the Instagram handle, and was made with only HTML and CSS.

Inspiration

I completed SuperHi’s online course Foundation HTML, CSS + JavaScript, after graduating from college. Despite computer science degree, I had limited experience with web development and wanted to learn more. My first homework assignment in the course, which can be found here, inspired me to design and develop my own version.

Typography

I chose a simple geometric sans-serif font that would not compete with or distract from the hand-drawn elements but would, at the same time, provide a nice contrast.

In Adobe Illustrator, on a desktop-sized artboard, I typed out caroline and sometimes in the Spartan typeface. I sized them how I wanted, aligned them in the center, and exported the artboards as SVGs.

Visual Elements

Colors

I wanted to use colors that matched the aesthetic of the Instagram grid.

I used coolors.co to select a color palette for the site and generated palettes until I came across some fun, bright colors similar to those in the grid.

Hand-drawn Elements

I hand drew the word draws, image traced the sketch to get a vector image, and followed the same steps as the typographic elements to obtain a usable SVG. Then I selected one of my favorite drawings that had already been vectorized and repeated the process.

Development

Once I had collected all of the site’s assets, it was easy to put the whole site together. Since a completed homework assignment inspired this project, I could borrow most of the code I had already written and just replace the CSS where needed.

Launch

I decided to use Github pages to host my site for a few reasons. First, since this was a personal and mostly experimental project, I didn’t want to pay for hosting or a custom domain. Using Github pages enabled me to publish my site on a free default domain. Also, I am already comfortable with the platform and can use version control to make changes to the site in the future.

Final Product

Live site here.

View code here.