Back to articles
mern

How I Built Dileep OS Using Next.js and Sanity

A behind-the-scenes look at how I built Dileep OS using Next.js and Sanity CMS, covering the architecture decisions, content management strategy, design system, and lessons learned while creating my personal developer operating system.

Jul 14, 2026
8 min read

When I started working on my personal portfolio, I knew I didn't want another generic developer website with a hero section, a few project cards, and a contact form. I wanted something that felt more like an operating system for my work, learning journey, projects, thoughts, and experiences.

That idea eventually became Dileep OS.

The goal was simple: build a platform that could grow with me as a developer instead of rebuilding my portfolio every few months whenever I learned something new.

Why Next.js?

Choosing Next.js was an easy decision.

I wanted server-side rendering for better SEO, file-based routing for simplicity, and the flexibility of mixing static and dynamic content whenever required. The App Router architecture also made it easier to organize sections into reusable components and keep the project scalable from day one.

Some of the biggest advantages I gained were:

  • Better SEO performance compared to traditional SPA portfolios.
  • Optimized image loading and asset delivery.
  • Server Components for improved performance.
  • Cleaner routing and layouts using the App Router.
  • Easy deployment on Vercel.

For a personal platform that would eventually include blogs, projects, timelines, learning logs, and CMS-driven content, Next.js felt like the right foundation.

The Problem With Static Content

One issue I faced in previous portfolio projects was content management.

Every small update required opening the code editor, finding the component, updating the data manually, committing the changes, and deploying again.

That workflow quickly becomes frustrating when you're updating projects, blogs, certifications, achievements, or learning milestones regularly.

I wanted a system where I could focus on writing content instead of editing code.

That's where Sanity entered the picture.

Why I Chose Sanity CMS

After experimenting with multiple headless CMS options, I settled on Sanity because of its flexibility and developer experience.

Unlike traditional CMS platforms, Sanity gives complete control over content structures and schemas. Instead of adapting my content to the CMS, I could design the CMS around my content.

I created custom schemas for:

  • Projects
  • Blog Posts
  • Certifications
  • Learning Journey
  • Experience Timeline
  • Skills
  • Achievements
  • Personal Notes

This allowed me to manage everything from one place without touching the frontend code.

Adding a new blog now takes minutes instead of deployments.

Building a Design System Instead of Pages

One of the biggest decisions during development was treating the project as a design system rather than a collection of pages.

Every section was built as an independent reusable component.

Examples include:

  • Section Heading component
  • Container component
  • Badge component
  • Timeline component
  • Project Card component
  • Blog Card component
  • Achievement Card component

This approach made the codebase significantly easier to maintain and extend.

Whenever I needed a new section, I could assemble existing components instead of starting from scratch.

Performance Was a Priority

Developer portfolios often become unnecessarily heavy because of animations, oversized images, and third-party scripts.

I wanted Dileep OS to feel modern without sacrificing performance.

Some optimizations included:

  • Using Next.js Image optimization.
  • Lazy loading non-critical content.
  • Keeping animations lightweight with Framer Motion.
  • Reducing unnecessary client-side JavaScript.
  • Using reusable UI primitives instead of heavy component libraries.

The result was a fast and responsive experience across desktop and mobile devices.

Creating a Developer Timeline

One feature I personally enjoy is the Learning Journey timeline.

Instead of listing technologies in a boring grid, I wanted to visually show my growth as a developer.

The timeline starts with learning HTML, CSS, JavaScript, and React through YouTube and self-learning, moves through the MERN stack journey, and continues into Java, System Design, Spring Boot, DevOps, and scalable systems.

It tells a story rather than displaying a list of skills.

Lessons Learned During Development

Every project teaches something new, and Dileep OS was no exception.

Some of the biggest lessons were:

  • Build systems, not pages.
  • Content should be dynamic whenever possible.
  • Consistency matters more than complexity.
  • Performance should be considered from the beginning.
  • A good developer experience improves long-term maintenance.

Most importantly, I learned that personal projects are often the best place to experiment with architecture decisions and new technologies.

What's Next?

Dileep OS is still evolving.

The next phase includes:

  • Advanced search functionality.
  • Better analytics and insights.
  • More CMS-driven sections.
  • Improved accessibility.
  • Additional developer tools and utilities.
  • AI-assisted content workflows.

The idea has never been to finish the project.

The idea is to keep evolving it alongside my own journey as an engineer.

Final Thoughts

Dileep OS started as a portfolio project, but somewhere along the way it became something bigger.

It became a place to document progress, experiments, failures, ideas, and growth.

Technology stacks change, frameworks evolve, and trends come and go, but having a platform that reflects your journey as a developer is something that remains valuable for years.

And that's exactly what Dileep OS was built to be — not just a website, but a personal developer operating system.

Tagged with

Next.jsSanity CMSMERNPortfolioPersonal WebsiteHeadless CMSDeveloper BlogWeb DevelopmentReactFull Stack Development

More Articles

Keep exploring — a few more posts you might like.