Building a Home for My Work
Building projects.omrajguru.com was a necessity born from a shift in my professional trajectory. My previous website was essentially a digital forest where many different ideas lived together under one roof. It housed my software engineering thoughts, product design musings, and unpolished poetry alongside raw daily logs and technical tutorials. While that variety represented my curiosity, it created a diluted impression for potential clients. When I decided to pursue freelancing seriously as my primary income source, I realized my projects needed a dedicated space where they wouldn't be buried under "quickships" or "dev notes." People needed to see my capabilities clearly so they could trust me with their own visions and products.
The shift into freelancing meant that my digital presence was no longer just a hobby but the very engine that would fund my life. This pressure forced me to sit down and explore tech stacks with a level of scrutiny I had never applied to my personal work before. My primary requirement was that this new home must align perfectly with my personal design language. Not many people realize that I spent an entire year developing a specific visual system that reflects exactly who I am. I eventually converted this entire philosophy into a specialized skill for Claude so I could deploy it consistently across different web projects. It was non-negotiable that the new site felt like an extension of this identity.
Beyond aesthetics, I needed a system that was incredibly functional and flexible while remaining portable and quick to manage. There is a specific kind of irony in being a developer who wants things to be fast and frictionless, but I have learned that hurdles in the workflow are where creative ideas go to die. If I spend all my time maintaining the infrastructure or fighting with a rigid CMS, I lose the energy required to actually document the work. I wanted a portal that felt like a professional tool but functioned with the ease of a modern application. This required a stack that could handle complexity without imposing a tax on my daily productivity or my creative flow.
I have always been an admirer of the OpenAI website, particularly after exploring how they utilized Contentful to manage their complex structure. I loved their use of components and the way their design felt both structured and easy to use across different content types. As a developer, I felt a strong urge to master this platform because I knew that someday a client might demand it for their own high-scale product. To satisfy this curiosity, I actually built a smaller research website to house my findings. However, Contentful had one major drawback that I could not ignore which was the pricing model. The jump from a free trial to three hundred dollars a month was not reasonable for my current needs.
The cost barrier of Contentful eventually led me to land on Sanity as my primary choice for content management. I had been attempting to learn Sanity for a long time, but I struggled to pull it off according to my specific Site Reliability Engineering standards (fn1). Despite the initial steep learning curve, I decided that I would sit down and not get up until I had truly finished this implementation. There is a specific mindset required to build a product of this caliber, and I had to accept that greatness is an iterative process. You simply cannot expect to reach the level of a company like Apple on your very first day of development.
During this process, a close friend told me that you cannot become Apple without doing exactly what they did in the first place. This piece of advice resonated deeply with me and shaped my final decision regarding the technology stack. I chose Next.js because it provides the perfect balance between high performance interactivity and superior SEO, which is absolutely critical for a professional portfolio. By leveraging features like Static Site Generation and Incremental Static Regeneration, the site delivers near-instant page loads for complex project case studies. This ensures that the content remains fresh and easily indexable by search engines while maintaining a premium and cinematic user experience for every visitor.
Next.js also allowed me to implement smooth Framer Motion animations and rich media blocks without compromising on core web vitals. To host this architecture, Vercel was the only logical choice because it is the native home for the framework. Its global edge network ensures that high-resolution project images and interactive components are delivered with ultra-low latency to users all around the world. Features like Preview Deployments allow for frictionless testing of new "Premium Components" before they are pushed to the live production environment. By automatically handling SSL and global CDN distribution, Vercel let me focus entirely on the design and storytelling aspects of my work.
Sanity became the backbone of the project because it treats content as data rather than just static text. This distinction is essential for a portfolio that relies on complex and interactive components rather than basic paragraphs. Unlike traditional CMS platforms that limit users to a basic rich text editor, Sanity’s Structured Content approach allowed me to define highly specialized schemas. I could build out specific blocks for interactive charts, comparison sliders, and live code sandboxes. This flexibility is powered by Portable Text, which provides a JSON-based format that my Next.js frontend can easily parse and render into the custom-styled React components I had already built.
The editorial experience within Sanity Studio is another reason why this stack is so superior for a solo freelancer. The studio is seamlessly embedded directly into the application at a specific route, providing a real-time collaborative environment. I can manage my work posts, adjust SEO metadata, and preview my changes instantly without ever having to leave my own domain. When combined with the power of GROQ, which is Sanity’s query language, and the next-sanity client, the project can fetch only the specific data needed for each page. This keeps the site lightning-fast and responsive even as my body of work grows more complex and detailed over the coming years.
Once the tech stack was finalized, I used my own Site Reliability Engineering book (fn2) to handle the scaffolding of the project. This book is a Claude skill I developed over five years to ensure quality and strict design adherence. I used the Claude Opus 4.7 model to create a detailed manifest file (fn3) that served as the blueprint for the entire application. I then connected all the essential tools and credentials into a local environment file (fn4) to prepare for the build. Claude Opus 4.7 was selected because it represents a landmark leap in AI coding ability with significantly higher resolution rates on production tasks.
The performance of Opus 4.7 is backed by impressive benchmarks, showing a thirteen percent improvement over previous versions. It can run autonomously for hours, catching its own mistakes and performing proofs on systems code before even starting the writing process. I found it incredibly impressive that it could handle a full million-token context window, making it perfect for working on large and integrated codebases. It took roughly thirty minutes to create the initial version of the app, and it actually got everything right on the very first try. This success was a combination of the model’s capabilities and the specific skills I had pre-installed to guide it.
The most important part of the build was the creation of custom components that power the storytelling aspect of my project case studies. I sat down and explored the OpenAI website again, opening my Obsidian vault to write down twenty-eight specific components I wanted to implement. These components needed to be tailored to my specific use cases and aligned with my love for the Apple design language. I organized these ideas with the help of Gemini 3.1 Pro, which helped me categorize them and explain their functions in simple sentences. Then I sat down without the internet to manually iterate on the design tokens and refine the visual identity.
My storytelling components include things like the ChartBlock, which renders dynamic and interactive charts to prove performance gains with visual evidence. I also implemented a SandboxBlock that allows users to interact with a live code environment directly on the page. This makes my technical expertise tangible and verifiable for any potential client who wants to see the code in action. The ComparisonBlock provides an interactive before-and-after slider for images, which is the most effective way to showcase the impact of a redesign. I also added a VersusBlock to highlight winners and trade-offs between two different technical solutions to show my reasoning.
Core feature components like the FeaturedGrid and ProjectCard handle the main logic and display of the portfolio's structure. The ProjectCard serves as the visual entry point for each project, using optimized thumbnails to hook the user and encourage them to read more. I also built a SearchFilter that provides real-time filtering for categories and tech tags so recruiters can find specific skills instantly. The PortableTextRenderer acts as the central orchestrator that maps the Sanity data to my React components. This system ensures that everything I write in the CMS renders perfectly as a premium and custom-styled element on the frontend.
The structural foundation of the site includes components like the Navbar, which I designed to function almost like a dynamic island. This reinforces the professional and polished feel of the entire application, ensuring that the brand identity is consistent on every page. I also included a NewsletterForm to turn passive visitors into a community by allowing me to push updates directly to those interested in my work. Every part of the UI, from the buttons to the containers, follows the same structural rules to prevent any design drift. This cohesive system makes the entire site feel like a single, well-thought-out product.
Once all the components were defined, I gave the final manifest to Claude and asked it to build the entire library. This process took over forty-five minutes because of the complexity of the skills involved, but the output was exceptionally good. The resulting site is not just a collection of links but a high-performance engine that showcases my work with the precision it deserves. I am proud to share this story because it represents the culmination of years of learning and a commitment to high engineering standards. It is a testament to what is possible when you combine the right tools with a clear and focused vision.
Building this platform has taught me that the tools we choose are just as important as the code we write. By selecting a stack that rewards structure and performance, I have created a home for my projects that can grow alongside my career. I no longer feel the friction of a cluttered website, and I can now present my work with the same level of care that I put into the projects themselves. This journey from a messy digital garden to a streamlined project portal has been one of the most rewarding experiences of my professional life. It proves that with enough focus, you can build a digital presence that truly reflects your standards.
I hope this detailed breakdown of my process provides some insight into how modern portfolios can be engineered for both beauty and utility. The combination of Next.js, Sanity, and advanced AI models has allowed me to reach a level of quality that would have been impossible just a few years ago. By treating my portfolio as a product, I have ensured that I am ready for the next chapter of my career as a freelancer. This site is now the definitive home for my vision, and I look forward to seeing how it evolves as I continue to build and document new things. Thank you for following along with this little story of how I built my new home.
Footnotes
(fn1) SRE standards refer to my personal Site Reliability Engineering benchmarks for uptime, code modularity, and deployment safety.
(fn2) The SRE book is a custom knowledge base and Claude skill developed over five years to enforce best practices.
(fn3) The Claude.md file serves as a comprehensive system prompt and project blueprint for AI-assisted development.
(fn4) The .env.local file stores the necessary API keys and environment variables required to link the frontend with Sanity and Vercel.