Lessons from Building nateb.dev

Keep It Simple

This is abound on the internet, do things in a basic way and then build upon them. Maybe I need to listen to advice better but I'll repeat for anybody who didn't hear from the back, keep it simple!I wanted to use cool new technologies like Deno and Astro, and I certainly got a little too focused on Deno. I'm glad I've learnt something new but I could have shipped my website sooner if I had stuck with the industry standard and tools I knew.

But once you have your first site up, then experiemnt some more! Now I have something to show no matter what, so if it takes me a long time to shift this onto new technology, there will be something there in the meantime.

Simple Designs:

I thought I had a clear picture in my head about how I wanted everything to go, and although that was true, having a basic wireframe/design built in Figma or PenPot really boosted my motivation and made it easier to turn into a reality.

Take Notes:

The amount of times I went over something that I was like oh wait i've seen this before but then proceeded to look up again. My advice, use a simple note-taking software like Obsidian and write down the solution to problems you faced.

Don't Reinvent the Wheel:

At least on your first try. Take advantage of the stuff that's out there, I got a lot of help with making the main feature piece from a CodePen published by Luca, but it still took work to adapt it into the image I had in my mind.

Start Small and Build Up:

This goes hand in hand with the simple designs, but once you have gotten a design out on a page, implement the most basic blocks first. Put all your pieces on the page. Then tackle one at a time how you will style and interact with them. This advice won't always work for more complex projects but certainly on your portfolio site or blog, it's a good idea to start small and build up.

The code for my website is available on Github for others to learn from and use as a template.

Artefact: Github Repository for Nateb.Dev