Cooper rebuilds his portfolio for a third time

Why?

Well that is a very good question, I was made redundant after 4 years, and in that time, I worked very hard with my existing knowledge base.

In the last few months of self rediscovery, after a very traumatic time and allowing myself to recover from it, I realised how far ive fallen behind in my front-end CSS knowledge and skills.

A lot can be said for whipping up user friendly out-of-the-box layouts in tailwind, but I used to make CSS Art, and by god im not sure how far I would get these days.

The Journey

So yes, in the last few months, I have been getting myself up to scratch.

I now know container queries, and am very pleased to know that just like every other front-end dev that has been asking for this solution for years, I also haven't been actually using it (the landing page was built using Tailwind Containers 😏).

New advancements in dialog boxes, nav bar menu extensions, all these things we used to build with useState and useEffect, are now fancy CSS properties (i 💜 css).

So join me, as I rebuild this portfolio into something special.

UXD Discovery

First thing I started with was the UXD, I started like any professional project by SCOPEing the project out.

Yes, this was a little different, since that process is usually dragged down by stakeholder sign-off,client expectations, and delivery times.

I don't have to worry about that, as I am the stakeholder, I set the expectations as the client, and the delivery time is 'when I'm ready to release'.

But the core of working out what the site is, and what I want to achieve with it, is still the same practice.

The design goal I set myself, was I don't want a navbar, the user should be encouraged to explore themselves without any hassle, and I wanted to create a special ultra accessible version.

I'm keeping it simple, mainly a landing page, an about, and a way to contact me.

I was undecided about a blog component for so long, so during the research phase, I realised a basic Markdown blog sorted my needs perfectly, and I will link images from Unsplash (for example).

MD also meant I could add a new MD file directly in GitHub and update the site without needing to open code, that worked out.

This all took a few weeks alone.

Design

Ahh, my favourite stage, design.

I knew I wanted to have a nostalgic, and the landing page settled on a VHS Tape Cover theme, and I used this great site to skip down memory lane till I had all the inspiration I needed.

Which evolved over time in the Figma Document.

At this stage, I am still designing the visual site, but for my accessible goal, I plan to attempt to locate if the visitor is tabbing through the site, it would catch them on the first tab, read out to them asking if they would like an accessible version of the site with visual elements removed.

This will flip out the main page, so a high contrast, large text size, black and white version, given the blog page is basic text with high contrast with no motion, that wouldn't need to be updated.

The Tech

Another difficult decision was the stack, initially i considered building this as a basic HTML and CSS page, as my goal was minimal JavaScript, I figured this could be done without a framework (i still hold onto this idea personally and may do something with this idea still)

But, as I consider more in the design phase, I have long term plans to eventually make the same VCR Tape Cover scene on the landing page in React-Three-Fiber, and for that pipeline, it is safer to keep it in a react framework, so I have gone with NextJS (since I love the client-server setup now).

I will be honest, I did find a perfect blog scaffolding, that I have used, but my goal was never to built a blog from scratch, it was to spend the time on the design of the site, over getting bogged down in parsing markdown.

That said, there will be styling changes and I would love to implement an addition of rather it being a md file for each route, I would like it to be a tsx page, so I can layer in some interactivity and state within each page, so I will evolve on that front.

Well if you have read this far, congrats, you must be consider employing me, or stalking.

I look to add more micro blogs, as i solve problems, and create fancy new style elements.

Farewell for now, beam me up Scotty