As I am learning Next.js I was looking at a small project to tackle. So I stumbled upon @leerob's excellent next-portolio that highlights several exciting aspects of Next.js and is a good example of leveraging APIs I wanted to explore:

• PlanetScale
• Sanity.io
• next-auth and GitHub authentication
• useMDXComponent
• tailwindcss

Maybe too much to get started 😃

The idea

This gave me the idea to replace my professional site and take the opportunity to restart blogging. Things I want to write about:

• My experience with Next.js and this site.
• Goofy Side experiments (AppleWatchFinder, TwitterEmojiAnalytics, StepCounter).
• Nrwl Nx's monorepo - Let's see if I can move this repo to Nx.
• Dynamic Form / UI / Navigation generators
• Unit testing with Jest and Cypress

How I went about

I started forking Lee's portfolio site since it was a good starting point. I enjoyed exploring Sanity.io, which was used for code snippets and blog posts, but ended up removing Sanity and using static .mdx content. The main reason is that with local content I can easily embed images, and use React components in .mdx, and everything is stored in the repo. It might defeat the purpose of leveraging APIs, but as you'll see I'll be exploring more using APIs from a Next app.

Lee has a permissive license

1. You are free to use this code as inspiration.
2. Please do not copy it directly.
3. Crediting the author is appreciated.

No confusing license. Be kind and help others learn.

I also wanted to explore Tailwind CSS and found Xhibiter NFT template on Envato Elements. I used it as a starting point for the design and layout. Unfortunately, I didn't think of their license (You can't re-sell or re-distribute items), and now I'm trying to figure out how to open source my code. For now, I'll write a blog post with specific code examples, but I won't be able to open source the whole repo, like I did in the past. I'll have to think about it. Maybe I can package the theme-specific code in a private repo and open-source the rest. This said as it's tailwindcss one can easily see the code when visiting the site ¯\(ツ)/¯.

I then started the longer-than-expected journey to adapt the content and remove all the content and replace it with my own. The Xhibiter template is in pure HTML format, so I've created the standard Header, Footer, Container and various components to build upon.

I like many ideas of the original site, like the Guestbook, snippets, dashboard, tweets, and uses page. However, for the Tweets page I had to first request a Twitter developer account to get a TWITTER_API_TOKEN, which gaves me time to explore alternatives (like twint and nitter.net) that each will have their dedicated blog post.

I've added Vimeo integration and made an initial effort to load MidJourney images. More on the later once I figure out how to do it properly and integrate a Discord bot.

The original site has a very nice Spotify integration that is worthwhile exploring. However, I don't use Spotify and removed the integration from this site.

What's next

This is a good starting point and provides a playground to explore Next.js and APIs. I'll write more blog posts about the various experiments I'll be doing.

Welcome to this blog!

- Daniel Wanja