Back to Home

Why your personal website is outdated (and how to fix it)

Stop fighting with code just to update your bio. Here is why I use Notion as my CMS to keep my portfolio alive and updating effortlessly

Most portfolios are dead.

You build it, you push it to GitHub, and then you never touch it again. Why? Because updating it is a pain. Every time you want to add a new project or change a sentence in your bio, you have to:

  1. Open your code editor.
  2. Find the right file.
  3. Edit the code.
  4. Test it locally.
  5. Push to GitHub.
  6. Wait for it to deploy.

That is too much work for a simple update.

The solution: Notion as your CMS

The best way to keep a portfolio alive is to make updating it as easy as taking a note. By using Notion to power your website, you can update your professional presence from your phone while sitting on a couch.

The benefits

  • Zero friction: If you can type in Notion, you can update your website. No code required.
  • Zero cost: Notion’s API is free. Combined with Vercel for hosting, your site costs $0 to run.
  • Write naturally: Use Notion's editor for your blog posts. Our setup automatically converts your Notion pages into clean, fast web pages.
  • Stay relevant: Your portfolio becomes a "living" document that actually reflects where you are today, not where you were six months ago.

How it works

  1. Notion API: We created a "bridge" that lets your website talk to Notion.
  2. Databases: Your projects, experience, and blog posts are just simple tables in Notion.
  3. Next.js: The website pulls data from those tables and displays it instantly.
  4. Refresh: We added a button to the site that clears the cache. Make a change in Notion, hit refresh on the site, and you’re done.

High-Level Architecture

To keep everything running smoothly, the site relies on a streamlined setup that balances performance with security behind the scenes:

  • Next.js (App Router): Operates as the full-stack framework. All data fetching is performed on the server side (SSR), keeping sensitive environment variables like NOTION_API_KEY and Database IDs strictly on the server and never exposed to the client.
  • Notion as a Headless CMS: The Notion API acts as the data layer. By using unstable_cache and revalidateTag, we achieve a "static-first" performance profile where pages are served instantly from cache but can be updated on-demand.
  • Performance & SEO:
    • SSG/ISR: Individual blog posts and the sitemap are generated at build time or during revalidation, ensuring search engines can index content with zero latency.
    • Minimal Client Logic: Complex processing (like Notion-to-Markdown conversion) happens during the build or on the server, resulting in a lightweight client bundle and fast Time to Interactive (TTI).
    • Unified Structured Data: Every post dynamically injects JSON-LD, providing rich search results and better discoverability.

How to set it up

1. The Notion "Key"

To enable communication between the Next.js backend and your Notion workspace, you must generate an API token.

  • Navigate to the Notion Developer Portal.
  • Create a new Internal Integration.
  • Under the Capabilities tab, restrict permissions to Read-only. This follows the principle of least privilege, ensuring the NOTION_API_KEY environment variable can only be used to fetch data and cannot modify your workspace.
  • Copy the Internal Integration Token (prefixed with ntn_). This will be used as the NOTION_API_KEY in your environment configuration.

2. The Content Tables

[Content coming soon]

3. The Connection

[Content coming soon]

4. The Deployment

[Content coming soon]

5. The Living Workflow

[Content coming soon]

Conclusion

A portfolio shouldn't be a project you finish; it should be a habit you maintain. By using Next.js and Notion, you stop worrying about the code and start focusing on the content.

Stop updating code. Just take notes.