• It's Alive - Part 1 (you are here!)
• It's Alive - Part 2

This is a momentous occasion for me, my first website is finally live! I've worked hard to code this site from scratch, as a path for learning the skills required for web development and for displaying my design portfolio.

I want to talk through my decision to create this website, how I did it, and some of the difficulties and successes along the way.

Why not just use a website builder?

Interestingly, not a path I ever considered until now. My first dabbles with web development were with the likes of MySpace over 10 years ago and Weebly a little later on.

On those platforms, I taught myself just enough CSS to change the colour of some text, or mess with the box model, which felt like magic... dark magic. It was never easy and always felt hacky.

Now, however, having been teaching myself 'real' web development skills, I don't feel like I'm cheating the system, but working with it and finding an awesome balance between creative and logical problem solving.

Coding from scratch really gives you a great feeling of pride and also massive responsibility, that everything from letter spacing to loading speed and image quality to responsive design is entirely in your hands. Even down the fact that you'll never see any true black on this site, I find it harsh and somewhat unnatural to look at, so anything that looks black is actually really really really dark grey, and I like that.

Why a portfolio site?

I played with the idea of creating something different for my first site, I really like the idea of creating some sort of site to help designers get a leg up with their portfolio, and I think that's still in the pipeline for me.

However, I needed something that I can be fully invested in and that impacts me personally for my first deep dive into web dev, and so I set off on the journey to create a site I can use to display my design work, with the site itself as the first example.

How I built this site

When I first started with learning web development properly, I did a few courses on HTML for structure and CSS for styling, which at the crux of it is all you need to get a website online, and you don't even need CSS!

I wanted to really immerse myself in this new world of front end development, and to do that I decided to research modern techniques for web development.

And just like that, I was Alice down the rabbit hole...

Angular, Vue, React, Web Components, Laravel, Atomic Design, Styled Components, BEM, SMACSS, Serverless, Cloud Functions, oh dear lord.

That last one isn't a framework, though it'd be an intriguing name for one. It's the overwhelming feeling that came over me like a tidal wave.

There is so. damn. much. going on in the world of web development, it's awesome, and terrifying.

I did a lot of research, read a lot of articles from people in the community that I have grown to respect and admire, and that led me to trying out ReactJS, for the first time.. I love it.

The main technologies I settled with was GatsbyJS, ReactJS, Styled Components, Netlify and NetlifyCMS.

The choice to go for these means I get a super fast website, easier access to include responsive images, a modular component based design framework, compilation to a static site, great value hosting and an open source content management system to help me populate my site. Winning.

Choosing these technologies also gave me a great boost to learn more Javascript, and React definitely made it feel more accessible to me.

Just the beginning

I plan on continuing my journey into the world of front end development. I love doing this, learning and seeing my code compiled into jazzy colours and fonts is a wonderful feeling. There's always more to learn, and that really excites me.

Part 2 of this post is going to explain more about my views and experiences of physical Product Design, where I've come from and where I hope I'm going. See you there! Click here for It's Alive - Part 2