Ligaya Scaff homepage

Snazzy Responsive CV Site & Blog with Infographic Elements

The site & blog of Ligaya Scaff is a clean and responsive, custom WordPress build, featuring nifty infographic CV elements, full wrapper images, a scroll-based homepage, and masonry enabled journal. It’s been featured on the CSS Awards, the CSS Design Awards, andCSS Winner.

Grab a Glimpse

Homepage Data Visualization

The CV site’s homepage has to diverge a bit from your standard fair. A bunch of CV text would be pretty dull, so how do you spice things up and keep users engaged? Data Vis baby. After a smooth full screen hero and a quick ‘About’ rundown, we pulled key points from Liggie’s CV to represent infographically (is that a word?). As you scroll down, the infographic elements animate in via a few lines of Jquery and some CSS Keyframes. Plus, big ole’ circular charts animate their real data percentages with some HTML5 Canvas code fu.

LigayaScaff's Responsive CV Site and Blog

Curriculum Vitae

Ever click a resume or cv link on a site, to be presented with a pdf? Yep, it’s a wee bit lame and uninspired to say the least. We wanted to do something different, and make Liggie’s CV an integral aspect of the site. While on desktop, the design resembles a print-based CV, but the responsive layout breaks down into a single column. Well defined vertical rhythm is in effect, establishing a clear and logical hierarchy of how the info is presented.

Work + Life Blog

The primary purpose of the Work+Life blog is to offer up samples of Liggie’s literary scribblings. We could have gone the basic portfolio route, but a modern blog layout seemed more appropriate for copywriting work. On the index, a nice and neat full width Masonry grid previews each article within stacked boxes. Fairly standard stuff here. But, on single posts we get a bit more interesting. From mobile to laptop, a modern single column is in effect (we’re done with sidebars). On desktop however, we use some of multi column magic to split the badboy in two. This captures a newspaper like presentation for some old-meets-new styles, and furthers the overarching literary theme.

Mobile Layouts

While mobile layouts are always a primary concern for us, this holds particularly true for a CV site. Just shoot the link over to perspective parties and they’ll be able to peep your work and credentials from any device at their leisure. Nothing is pulled out for smaller layouts, just optimized into slick mobile grids that go beyond the stacked-into-a-single-column move.

Various Mobile layouts for AttackPattern's new site

Instagram Feed

On some for reals, Liggie freakin’ loves Instagram. When were out, rest assure she’s eye deep in her phone trying to set up that perfect Rule of Thirds. So, seemed only natural to hook up an Instagram feed for a little of her day-to-day. We crafted our own super lightweight app for the job, which uses a simple JSON request to Instagram’s API. After grabbing her latest pics, it outputs them into a full wrapper grid that breaks down to two columns on mobile. A slick way to drop some personality, while keeping non static content running through the site

LigayaScaff's Responsive CV Site and Blog

    But enough from us, go give Liggie’s CV site a gander

    Grab a Glimpse