The Idea

Find it at RoadToSolo.com

Very soon I will be leaving work and becoming a full-time builder.

This is my personal website for the new challenge. I needed somewhere to log my progress and store my projects.

I had three main ideas in place:

Make it simple & clean - I didn't need too many bells and whistles.
Add a newsletter to share my progress.
Add a variety of metrics to give others the feeling of really being along for the journey.

The Stack

Blazor Server
HTML
CSS
Adobe Illustrator
Heroku
ConvertKit

Costs

(In dollars as its more universally understood than the good ol' GBP)

NameCheap Domain

$7.19

Heroku Hosting

$7 per month - It was free until I realized I couldn't link a custom domain without a subscription so now it's $7 per month.

Adobe Illustrator

Me and Adobe had a fall-out a while back, so this is free for the next few months until my subscription runs out.

What went well

I finished it, that's the main thing.

Project fatigue (The feeling that you've been working on a project for so long that you don't feel like its going to end) set in and at points I felt like doing anything but work on this.

I soldiered on however and got there in the end.

I learnt a ton about Blazor and saw a massive improvement in my CSS skills. I actually really like the design choices I have gone with, but what do I know, I'm biased.

What didn't go well

CSS Skills

The project fatigue was self-inflicted. My CSS skills are far from amazing, I spent far too much time trying to do fancy animations on the mobile navigation menu. Originally the hamburger menu was an actual burger. The icon looked great and I thought all the developers in the audience would have loved the joke, but the animation to transition from burger to close icon caused too many problems and in the end, I just gave up. I think the more I improve my understanding of CSS and Blazor, this will improve.

ConvertKit Integration

The only other real issue I had was with using the generated ConvertKit form. I tried using the JavaScript implementation but only on the Road To Solo page, however, because of the always update nature of Blazor components, you can't place JavaScript directly inside and have to use JavaScript interop in these cases.

I struggled for a while to get my head around how I could achieve this. Then I settled to use the HTML version. Which was horrible. When the form does the post, it navigates away to another page, hosted inside of ConvertKit. I didn't want that. I wanted the artistically talented thumbs up pickle image that is there now. (Check it out when you sign up for the newsletter on the website 😉)

I tried googling the ConvertKit API but for some reason, my Googling skills were lacking that day as I couldn't seem to articulate what on earth I needed. Luckily after speaking to a Twitter friend, he sent me the docs.

I quickly created my own form using HTML, linked up to the ConvertKit API. Easy peasy, problem solved.

Improvements for the next project

Don't waste too much time on unnecessary details.
Blazor is overkill for a portfolio site.
Don't waste too much time on unnecessary details (I said it twice as I need to get this to sink in!)

Future Improvements

Future Improvements
Use the Hashnode API to pull my blog posts from TechPickle.com
Create an amazing burger icon animation for the navigation bar

What did you think of the site?

Let me know @TechPickleJoel on Twitter.

You can also sign up for my newsletter. I post about my journey of leaving work and becoming a full-time builder aiming to hit profitability so I can fund my new lifestyle!

It's also the first place to be in the know about any new projects.

Thanks for reading! 💚

Tech Pickle