Creating gemmadlou.github.io (In Progress) — From The Beginning, With Angular2, Typescript, Moodboards

So, I’m redesigning my portfolio, gemmadlou.github.io, where nothing, but a blank canvas awaits me. So I decided to document its creation, but first…

The Ground Rules

  • I will update my progress here.
  • It must be built with Angular2 and Typescript. Typescript has ES6 style syntax, and I’ve used Typescript with Node and it’s charming. But I hit a snag with Angular2. The Fetch API :(. Not so charming.
  • SASS is the pre-processor of choice. I’ve tried LESS, now to throw myself into SASS before I make anymore excuses.
  • It’s client side only — but I can employ a backend server elsewhere if needs be. Okay, so this is more a limitation of using github pages
  • It must have a living style guide.
  • TDD must be employed (And yes, I’m crying already)
  • Design mocks must start on paper first (inspired by Ryan Nance’s article)

So now the fun part.

The Moodboard

I know clean and minimal is so like…right now, but I’ve got a taste for neon and chaos to my portfolio. Hopefully the moodboard is not a reflection of myself (as I’m no advocate of smoking), but the colours, the atmosphere and the tone is what I’m after…

Moodboard (Featuring Fashion beans text, love their site, Neon signs, ID Mag screen grab from Google Images, Guns and Roses, a HDR night photo of New York, Hackers the movie (I think I wanted to be one at some point :) ) — GQ Style grabs from yes, Google Images again.

Basically, the site should feel like it reflects the night, chaos, with lots of bright neon, and more visual stuff than text. Pink, purple, orange, and black. Retro 80s and throwback 90s.

Ok. I doubt any of that will appear on the website. Back to reality…

The Content

The meat and bones of gemmadlou.github.io:

  • Animations and page transitions
    Why? I love opening film scenes. Seriously. The Dark Knight was awesome, with the bank break-in with a bunch of guys in masks.
    Pirates of the Caribbean was hilarious. Jack Sparrow was on a gigantic ship, no, actually, just a sinking dingy.
    So I want transitions. Fade ins are nice an easy, oh so I hope.
  • My work
    Projects, open source stuff, corporate stuff (that I’m allowed to share), freelance stuff, side stuff. Just stuff basically.
  • Navigation, menu
    I love those full page menu’s that overtake your screen.
  • Social media links
    Of course. Medium.com, github, linkedIn, yadda yadda
  • Blog, or storyboard
    Where I can babble about code, or pretty much anything that takes my fancy. A couple of months ago it was archery, now it’s light painting.
  • Logo!
    Oh. I need one?

Day 2 — The Pen and Pencil Mocks

I decided to keep it simple-ish. So there’s one set of designs for the desktop or large screen experience. Another for the mobile.

Determined to mock the basics the basics one page. I know it doesn’t capture the tone of the moodboard, but creating the components later in the living style guide should help with that.
This represents the mobile or small screen version. You can see the pencil marks underneath too.

Day 6 — The Logo

Oh dear. Time is flying, and there’s so much to do. Which is incredibly because I spent a couple of hours getting side-tracked by SVGs! What are they? Scalable vector graphics. Which means, you can put them in your web pages, and they’re responsive without losing quality, unlike jpegs and pngs when you scale them up. So they’re great for logos.

So I decided to create one, using a Google Web Font. Yes, I could have photoshopped it, but where’s the fun in that!

There is a genuine advantage. The best part is I can swap out a web font for another, update the coordinates, and have the new SVG ready to go.

So it, was my first time creating an SVG image from scratch, so it may have been a bit too ambitious to attempt a neon effect. However, this is what I achieved after a couple of hours. Happy…run it to see it work:

And of course, I didn’t just dream up the code. So here are the great resources and articles I found that helped:

Day 3 — The Pattern Library

Another evening to get to stuck into my portfolio again…

In my requirements, one of the equations were basically:

  • No style guide = no website

So…I decided to go with atomic web design to build the css (with Sass) using OOCSS principles. Pattern Lab was the generator of choice, plus it uses mustache templating which is simple to work with. I also decided to go with, a Build As I Go philosophy for the styleguide so I’m not getting sidetracked creating css modules for things that I’m not yet working on.

My Pattern Library:

http://gemmadlou.github.io/styleguide/public/

Resources:

https://css-tricks.com/approaches-media-queries-sass/

http://davidwalsh.name/write-media-queries-sass

[to be continued]