My Brand as a College Grad
I created Lean Space right after I graduated from college in 2015. The goal of the project was to create a personal brand that would help me land my first full-time engineering job in Silicon Valley. This brand would be applied to my website, resume, and cover letters.
The two key factors directing my project were the following:
- Demonstrate that I’m a self-motivated software engineer that is not solely dependent on 3rd party packages and is capable of developing my own solutions.
- Showcase a unique visual style to distinguish me from engineers who don’t consider design practices, blindly rip templates, or design resumes in LaTeX.
My previous website before this one ran off of WordPress and MySQL with a custom theme I wrote in PHP, HTML, and CSS. This tech stack was used because it was the most popular with my clients back when I was freelancing from 2008 to 2014.
Originally I was developing Lean Space as a theme for another project I was working on, Xuehua CMS, a custom content management system built with Ruby on Rails since I wanted to learn the framework due to its popularity at the time. As the projects progressed, my interest in Xuehua CMS waned as I felt that it was unlikely I would ever use it anywhere besides my site due to my focus on full-time opportunities rather than freelance. If I was only going to use it for my site, the trouble of maintaining it wouldn’t be worth it, so after I felt I had some good exposure to Ruby, I discontinued the project and focused on Lean Space.
Instead of dealing with the hassle of a content management system, I decided to just deploy a backendless static site since it was unlikely that my website would update often. This was before the popularity of static site generators like Jekyll, but given the small scope of the site, I think I would’ve implemented it in the same way, regardless of any trends.
Backendless with SEO-Friendly Seamless Page Transitions
This solution also does not require any backend code, hence the “backendless” aspect. It just lets the server, in my case an Apache server, keep it simple and serve static files.
Custom Lightbox Library
This was where the main exception to the “no 3rd party dependency rule” was made: the work page. As this would likely be one of the main pages prospective employers would investigate first, I wanted the experience here to be a little more sophisticated by creating a filter feature that faded each work piece in and out. I ended up using Masonry for this.
I wanted the style to feel like one fitting for a software engineer. Nothing too extravagant, but still unique enough to show that I have some experience with design.
I decided on a blueish-green as my primary color because it was a fairly bright, calming, and inoffensive color. Grey became my secondary color because it was a very neutral color and didn’t compete with the primary colors.
I chose Open Sans for the body and header text because I wanted to use a modern looking sans serif typeface that wasn’t a web-safe standard, just to give a subtly different look to the text.
For the monospaced text, I chose Inconsolata. This would be used for body and heading text that would benefit from monospacing or would need to be distinguished from the text in Open Sans.
For the logo, I settled with Exo since it was a font that contrasted with Open Sans very well while expressing a very technological feel. I specifically used it in italics to make the logo look like it was “leaning” over to a side, a play on my last name (Lean).
To make the typefaces still viewable for users who didn’t have them already installed, I imported them as web fonts through Google Fonts.
Animations & Transitions
Custom Responsive Layout
Without the luxury of a framework like Bootstrap, I would need to create my custom layout code that would support both desktop and mobile devices. I ended up implementing the layout with floats and the responsive design with media queries.