For quite a long time, I always had this notion of blogging about what I learn every day. But for some reason, I've always backed down doing that. One of the main reasons is that whenever I try to write something on blogging platforms, knowing that I'm limited to a basic WYSIWYG editor quickly puts me off 😕.

When I think of "writing," I think of figures, expressions, footnotes, references, snippets, reasoning, and analogies. Lol, perhaps I am being too metaphorical here, but I tend to have academic writing styles, and you get where I come from. But the point that I'm trying to make is that pushing content through dedicated blogging platforms looks pretty odd. They don't have all the features that I want.

And there's this thing called "Paywalls." Honestly, I don't like it. I understand that if you're making a living out of writing, it ultimately makes sense to do that. But lots of devs out there don't sail with subscriptions. Don't you think? Well, please don't get me wrong, though, and I don't want to be the judge of it. I think every platform has its quirks and features, and on the other hand, there are platforms like Hashnode, Dev.to, and HackerNoon, which are fantastic!

I created this "blogfolio" to show the world what I learn, build, and enjoy. But it's supercharged with my own set of features to write things the way I want. I have to say that I got inspired by many bloggers out there. They are not just random bloggers or developers. They are the ones who do things differently, the ones who inspire other people in unimaginable ways.

So, before actually telling you the “how?” part, I'll mention those wonderful hoomans first. In my book of ethics, I'll never forget to mention the ones whose been a part of my journey all along.

Standing on the shoulders of giants

I'm a huge fan of Josh Comeau's work, and his site is one of the most interesting blogs I have found on this journey. One has to be lucky to land on his blog because that is one rare masterpiece you'll ever find on the entire internet.

While building my site, one resource that I found was Josh's Effective Portfolio free e-book. I think that's one of the best resources if you want to kick-start one of your portfolios. A lot of his articles directly contributed to my knowledge.

Along the way, I have discovered many other devs and leaders whose passionate about what they are doing. They, too, implicitly or explicitly, helped me build this site. And they are:-

• 🦄
  Lee Robinson — In his blog, you'll find an ample amount of content on NextJS. And they are on the next level. Those articles helped me a lot in understanding the overall framework.
• 🦄
  Pedro Duarte — Pedro is one of the brightest minds behind Stitches JS and RadixUI. Stitches JS is heavily used in my website, and I learned many best practices from his blog.
• 🦄
  Delba Oliveira — Delba has an excellent explanation of how to create a delightful like button. I made a unique one with a twist by following her tutorial.
• 🦄
  Kent C Dodds — He's the brain behind mdx-bundler. It's a great open-source library I use to parse my MDX content. His blogs, discussions, & comments helped me a lot when working with the library.
• 🦄
  Adam Laycock — He's one of the core contributors to mdx-bundler. When using MDX with NextJS, you need to organize and read your content dynamically. And I learned those stuff from his blog. He's a very active fella on Github.
• 🦄
  Titus — He's the brain behind xdm. And his discussions and comments on GitHub are more than helpful when working with the ecosystem.
• 🦄
  Monica Lent — I subscribed to Monica's Blogging for Devs newsletter. And sure, I can confirm it's a rare gem indeed. Her tips and tricks helped to push my blog faster than I anticipated.
• 🦄
  Steve Ruiz — In his blog, he explained how to create a rotating icon button. It was conducive, and by following that tutorial, I made a minimal-looking theme switcher icon button 🥳.
• 🦄
  Paco Coursey — I found Paco's website from Rude's blog post. Paco is the brain behind the next-themes module. I use that library to toggle between color schemes. Tbh Rude's post and Paco's site source tree helped me implement it more elegantly.
• 🦄
  Nanda Syahrasyad — Nanda is one of the brightest fellows on visualizing algorithms. In his articles, I like how he reaches a problem statement methodically (i.e., see this cool article). I borrowed the idea of embedding problem statements inside flow content. I think it's a great way to jump sections of the article thematically without additional hocus pocus.
• 🦄
  Maxime Heckel — I discovered Maxime's blog via Jeff's video. Maxime has excellent content on SEO optimizations and Framer Motion animations.

Quick Update  —  Hey there 👋, in 2023 I have simplified few things in my blog.

Their work helped immensely while creating my blog. They all have unique strategies for pushing content. And I closely follow some other great devs/leaders out there. I will leave the list here, so you can check them out. Max Stoiber, Adam Collier, Cassidy Williams, Ela Moscicka, Anthony Fu, Agustinus Kristiadi, Yann Le Vaguerès, Dan Abramov, LydiaHallie, Aisha Codes, Cassie, Sarah Drasner, Amelia Wattenberger, Ahmad Awais, Thein Htut, Gift Egwuenu, Agney Menon, Vlad Mihalcea, Laurie Barth, Zach Leatherman, Hossein Kazemi, and John Otander.

Phew! I know that's a long list, huh?! 😅. But not enough. I'll make sure to update this article if I find more. I'll be honest; my blog is an application with collective ideas, snippets, and design decisions that came from many minds out there. On top of it, I created my own from the ground up and sprinkled my creativity and personality to compile it into an application that I truly wanted. So, I want to say...

Finally, be sure to check them out. Follow them. They are wonderful. Now I'll tell you about the tech stack that I've used.

The Tech Stack

When I started drafting my blog, I spent quite a bit of time exploring the different stacks. I created two prototype applications using GatsbyJS and NextJS. Both are great options, but I plan to push dynamic content in this blog. So, after some good research, I wanted to use technologies that create less friction in my writing experience. And I've decided to settle with the following stack in the long run.

NextJS

NextJS has batteries included for everything. I see it as a higher abstraction of React (but with ultra superpowers ⚡️). And most importantly, it is less opinionated. In conception, it has zero-config Webpack, Typescript, ESLint, Babel, and even native optimizations for your assets. I just delegate all the hard stuff to the framework and focus on my writing. It's just a seamless experience.

NextJS has performance out of the box. And it is one heck of a framework that can utilize multiple pre-rendering methods like server-side rendering (SSR) and static site generation (SSG) on a per-page basis. Therefore, I think the developer experience is second to none. It maintains simplicity from development to deployment.

Typescript

I use Typescript to write my components and API routes. I have quite a bit of experience in writing TS code. But I still think it is an overkilled feature for my portfolio. Nonetheless, types are great when debugging. But I keep them to a minimum and mostly try to rely on my IDE inference features whenever I can.

MDX

MDX is the star of the show. I use Kent C Dodds' mdx-bundler package, which uses esbuild and xdm underneath. Several other options are available, but mdx-bundler is a bundler and a compiler that offers features like imports 🥳 in mdx, native file loaders, etc.

Design & Components

To be honest, “Design” is not one of my strong instincts, and in any way, I don't consider myself a true designer. But I do like to develop minimalistic-looking components. If you understand design systems, you'd know that they are a marriage between your style guide and component library. In this site though, I'm trying to keep things minimal as possible.

If you're curious about design systems, you could checkout Maxime's website. He has showcased his design system, and I think it's so cool to have something that truly represents you.

Styles

I use tailwindcss in this blog :)

Animation

I use Framer Motion as my primary animation library. It's specifically developed for React, and It's easy to implement declarative animations effortlessly. It has built-in layout transitions, gestures anf comes with all HTML and SVG semantics.

Vercel

I primarily choose Vercel because of its simplicity in handling the complex hosting and continuous deployment process that goes into any frontend & backend development. With Vercel in place, I don't have to worry about my development lifecycle. Everything just works!

Heroku and Netlify are great alternatives too. But most of the time, Vercel is just too good for everything.

What's Next?

I have a long-term plan to roll out high-quality content on this blog. And I believe NextJS will allow me to do that for quite a long time. Until that, I will keep on writing and adding features to bring delightful experiences for my readers using my existing stack.

Thanks for reading.