1. Introduction and motivation

Hi! Finally getting there,

I've been contemplating how to go about showcasing various projects, writings and my resumé. My online portfolio if you will. I see this as an opportunity to learn new skills, which I expect to be beneficial for my professional career. At the same time this blog will enable me to quickly share some of my work and provide an interesting platform for further development.

So it was decided, let's make it happen!

1.1. Startingpoint

So where does somebody with little experience and some rusty knowledge about html, css and js actually start? Well, what about linking a cute (but stock) NYAN cat gif?! Ok, so yess I had no clue how much web development had actually changed over the years. Thankfully my talks with brogrammer Bert and youtube videos from Fireship helped me on the way to modern js and css frameworks. Looking back I now better realise the complexity of programming and the vast amount of knowledge necessary to be a good developer. Nevertheless, diving headfirst into this project proved immensely rewarding, and also strengthens my belief in taking this approach.

If you like this blogpage then technically all credits should go to Timothy Lin, the project author of the blogtemplate. Along the way I've decided to use this popular Next.js, Tailwind CSS blogging starter template from GitHub for various reasons. Primarily because starting from nothing would set me back alot, but also because doing so was the much more real-world excercise of joining a lively project with modern features, updates and community to learn from. Using a template hardly compares to something built from the ground up, but this still enables me to customise the app and implement new features. Maybe one day i'll even create pull requests. 🚀

2. What did I need?

So, what did these webpages absolutely needed to pack and what did I wanted/wished for them to have? Down below I've listed my first requierements and nice to have's. My plan is to develop these requirements with sharpened technical skills along the way.

2.1. Initial requirements

Before stumbling on the template I actually had made a list where I wouldn't quite distinguish between requierements and "nice to have" features. Looking back, the template covered all strictly necessary stuff, and more.

✔️ Mobile friendly responsiveness.
✔️ Modern design UI/UX.
✔️ Markdown friendly. (I believe in simplicity).
✔️ Properly displaying Curriculum Vitae and content.
✔️ Working hyperlinks to past projects, social media and other.
✔️ Very customizable code, proper indentation & with well named variabels.
✔️ Performant pages. Made with best practices.
✔️ SEO proof.

2.2. Nice to have's:

Secondary features which I believe hold some interesting value. Another benefit of using the template is that you get a functional example that works inspiring.

✔️ Table of content in MDX files which can folde and hold links where you slide to.
✔️ Download buttons for pdf files.
🚧 Enabling Mermaid diagrams in blogposts
🚧 Foldable text blocks
❌ Translate functions of pages and components in NL, FR, EN, ES
✔️ Integrated Searchbar for recruiters
✔️ Dark & White mode
❌ Morning and Evening mode (idea to extend/customise Dark & White mode)
❌ Embedded videos in MDX

More information about the features packed within the template.

Yes, I'm a firm believer of working smarter and not harder! All laziness aside, using boilerplates, templates and frameworks only seems logic if you want impressive results and a nice developer experience. I've personally still experienced a steep learning curve making/deploying this blog. Using VS Code, the installation of npm, node, react, git and tailwind and wrapping my head around Next JS' Server Side Rendering was spicy. More about this experiences in the next chapter!

3. Rabbithole

Like mentioned above, getting behind the coding wheel was fun but challenging. Once decided on using the template and technology, I've spent a week of breaking the build apart to understand all it's intricities. Being able to reverse engineer some key functionalities felt necessary andquiet rewarding. It was a very educational process at least. Troubleshooting, trial and error were part of the deal I did not exactly asked for when starting this project, but it gave me valuable insights in the skills and expertise a good developer has. Trying to implement new features was honestly without much success, given my limited knowledge and experience. No point in denying this.
Realising I needed to set some steps back, I've settled on a fairly stock version and started focusing on using Git & Github. This again a whole new rabbithole, but for those who know a very important.

Conclusion

Concluding this article I must admit that my respect for full-stack developers has grown significantly. All by all I'm very happy have gained more insight into the vast world of web development and more broadly Information technology.

For the moment I'll leave this to be,
Until the next update!
Thank you for your attention!

Cheers,

Next Js blogpage/portfolio