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.
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…
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 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.
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.
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:
For an image format that features infinite scalability, SVG can be a surprisingly difficult format to make responsive…thenewcode.com
SVG filters (and CSS filters) are usually considered a way to spice up bitmaps via blur effects or color manipulation…www.smashingmagazine.com
This is the first in a series of three articles covering the topic of coordinate systems and transformations in SVG…sarasoueidan.com
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:
[to be continued]