Webfolio
“What is a webfolio?", you might ask. This terminology has been around for some time in web development world. It means a portfolio in website form. Like a normal portfolio which usually formed in document form (whether hardcopy or digital), it still shows a collection of your works, projects, skills and experience. Most people including myself, combine our webfolio app as a blogging website. And you’re reading one of my blog in my webfolio 🥂
3rd iteration?
A blogging web app is usually “simple”, since the main purpose is for writing. So in that sense, the most important thing in a blogging app is the content of the blog posts. So why do I need to make and remake it until three times? Well, it’s a simple answer: I like learning, especially new stuffs. “But you don’t have to keep rewriting your blog app to learn.”. Yes, that’s right. But combined with my passion to build, I am not satisfied until I get my own hands dirty. That passion gave birth this project to three times rewrite, and I’m not stopping as technology never stop. Let me tell you that three times rewrites is actually “normal”, many people did it even many more times that I did 😅
The first iteration
It was written in JavaScript with the magic of amazing Next.js , Sanity.io and Tailwind. It was driven by the needs of sharing my teaching materials for newbies in the training program in my office. After several chances of teaching, I found it cumbersome preparing materials, presentations, starter projects in document form that was easy to lose, hard to update, and not to mention sharing them. It also came to me that I need to do a little bit of “self marketing” for better future. So creating a website for this purpose seemed a good idea.
Since Next.js was so hyped, the decision to choose this framework was an easy one. Yet, it is good indeed. The documentation is awesome! And don’t forget the vast community of React developers in the world is like almost nothing we couldn’t find the answer if problem occurs. Next.js + Tailwind is a romantic couple. Integrating both of them just like clap! And it is done. Choosing backend took me sometime until I decided headless CMS was a good choice for simplicity. Several options came up to be compared, and since Sanity provides official library for React, I thought it might worth a try.
The site is still active although I don’t maintain the content anymore.
This project taught me a lot. I realized that a portfolio project is not that simple. If we want, there are many detail features can be added. Even during the development, I found many amazing webfolio projects that made jealous. I’m sure you know this one.
Bruno’s webfolio is far from what I can build for now, but that gives me a hint of how high the bar is nowadays.
The Second
There are a lot of frameworks comparisons happening. A is better than B, B is better than C, this, that…and all those comparisons leave us with our own decision. It’s not because of a framework is better in one thing than the other, then it is called a win. I believe every human creations always have pros and cons sides. React is probably better than Angular in some areas, but Angular is also better than React in other areas. The comparison between Next.js with Remix.js is pretty hot 🔥. Even the Remix’s team have a post about it.
It’s not gonna end if we keep on debating which is better, so I decided to give it a try myself. In my second iteration of this portfolio project, I used Remix.js, and Notion as CMS. Regarding Notion itself, I’ve been using Notion as my PKM (personal knowledge management) for I don’t know how long. Almost all aspects in my life I put them in it, and it will be a perfect if my blog posts are stored in one place, in my “second brain”. Plus, Notion is just AMAZING! We can just publish a website just using Notion, without anything else. Its block system is crazy, and all formatting that I need are available.
However, moving from Sanity.io to Notion required massive change in frontend - backend communication part, obviously their API responses are different. Also, with Next.js + Sanity, there are a lot of community plugins made by awesome developers so that the API response is easily rendered into components. However, with Remix + Notion, I didn’t find many references for that, so I need to write them myself. As for the design, I planned on something clean and simple. I was more engraved with Notion environment, so the I decided to go with black and white design with some Notion-ish character. Here’s the result:
DX with Remix was good though. It’s very clear and simple, it’s just right. The official documentation is also very comprehensive. Even though its community is not as big as React, finding solution of a problem was easy enough. After experiencing Remix myself, it turned out that I have my own saying about Remix and Next clash. To simplify this article, I will write another post for that. (read Why I switched back to Next.js from Remix, spoiler: I switched back to Next.js).
The Current
Now you knew already what framework I use for this iteration. Long story short, I decided to switch back to Next.js. The main problem happened in my case is that the Remix version took longer in every load, and often times even got
504 Gateway Timeout error. To be clear, I suspect about the limitation of the Notion API, not Remix. Since Remix does not support SSG (Static Site Generation) natively as Next does, it will call the CMS API in the request. And that’s when the Notion API hit its limit.I’m not gonna explain all those details here as I said earlier, but at least to give a brief background, the free version of Notion (which I’m using) has “quite small” limit in the API call. Most of my blog posts are long, that’s why these requests that fired at the same time from Remix failed (multiplied how many readers trying to open the page).
Remix focuses more on SSR (Server Side Rendering) and dynamic content loading, so for a relatively slow data update like blogging app, these features are unneeded. I would prefer fast rendered app to show my website almost instantly, and Next.js is good in this. With SSG (Static Site Generation), Next will generate all my pages during build time as HTML (as long as I did not mention
use client). This will generally result in faster rendering. Combine it with Incremental Static Regeneration (ISR), it is a perfect match to retain static generated page with capability to add new post or make any changes to the content without rebuilding the app.In this iteration, it was official that I’m a Notion fanatic. I really want it to be very Notion-ish, and Next.js (or React) has a very astonishing community. I found an open source Next.js starter kit specialized to be used with Notion as CMS. Shout out to Trevor, thanks for your awesome work!
A developer using starter kit?
Yeah, why not? It speeds up my development time and let me focus on more important thing instead. I still did changes here and there to align it more to my taste, but not much. By doing so, doesn’t mean you’re a bad developer. In fact, using framework is kind of a same thing, isn’t it?
Anyway, the starter kit comes with complete components needed that I don’t have to reinvent, it provides even more functionalities like OG image, easy integration to Notion, image preview, dark mode, ToC and even analytics. Damn that’s a lot! So with the help of this starter kit, it took very fast to build since almost the technical parts are pretty much done already.
Now what you’re seeing is the my current webfolio made with Next.js Notion Starter Kit, very simple and clean. Also very fast to build and relatively easy.
Haven’t had a blog for yourself?
If you haven’t had the interest in having your own webfolio (or blog), I recommend you to start creating one. For myself, my webfolio serves as my internet corner, my own space in this vast invisible world. It is where I express my thought, share my experience, and preserve my journey through writing. And you deserve to have it too 🙂
Chuck (from NetworkChuck) did it very well explaining on why all of us need at least one website regardless of our occupation.
And that’s it, a brief story of my webfolio journey. I hope it finds you and encourage you to start making one for your own 👋