How I built aitorivera.com with Astro, Sanity and Vercel: learnings from a Django developer

For years, I’ve been a Django developer. My focus has always been on the backend, working on data modeling, building REST APIs, and managing complex processes. Django gave me structure and reliability, but it also meant that my perspective on the frontend was… minimal.

The most I had done was some CSS with Bootstrap, native JavaScript, and a bit of jQuery for small interactions. I had never really explored modern frontend frameworks like React, Vue, or Svelte.

Over time, I realized something: understanding the frontend would give me a much more complete perspective and allow me to create better, more usable experiences.

So I decided to step out of my comfort zone. I wanted to learn new things, experiment with modern technologies, and understand how today’s frontend development really works. My choice was clear:

• Astro, to build fast, lightweight websites.
• Sanity, a flexible, fully customizable headless CMS.
• Vercel, a deployment platform built for modern projects.

The result is aitorivera.com, my personal website and also my technical playground.

In this article, I’ll share why I chose this stack, how the site works under the hood, the challenges I faced, and what I plan to improve next.

Why build it from scratch?

I could have installed WordPress with a decent theme and had everything ready in a few hours. But that would have been just another generic website. I didn’t want a quick solution; I wanted a project to learn from and experiment with.

There were four main reasons behind this decision:

1. Speed and performance: I wanted a site that loads almost instantly, which is key for both user experience and SEO.
2. A unique visual identity: no prefab templates; I wanted it to reflect my personality and values as a developer.
3. Flexibility to grow: I didn’t want just a digital business card—I wanted a space to add a blog, projects, and recommendations.
4. Real learning: installing a traditional CMS wouldn’t teach me anything new. Building it from scratch would.

So I chose a modern stack that gave me control, freedom, and the ability to experiment without limits.

Technical architecture: what’s under the hood

Although the end result looks simple, there’s a clear, optimized architecture behind it. The main ecosystem is:

• Astro as the rendering engine.
• Sanity.io as the headless CMS.
• Vercel as the deployment platform and DNS manager.
• A few extra integrations to improve UX, analytics, and maintenance.

The flow is simple but powerful:

Sanity (content) → Astro (static/dynamic rendering) → Vercel (hosting and optimization)

In practice, users see super-optimized static HTML, with small interactive islands in React only where they’re truly needed. This minimizes the amount of JavaScript loaded and guarantees maximum speed.

Astro: ultra-fast, lightweight sites

Astro is a framework designed for content-driven websites. It generates pure HTML and only ships the JavaScript that’s absolutely necessary.

On my site, it works like this:

• Pages like About me or the blog are 100% static HTML.
• Components like the contact modal are rendered with React and Radix UI, but they only load on demand.
• I also added Framer Motion to make transitions and animations much smoother than with pure CSS.

This way, I get a minimalist, blazing-fast website with small interactive touches.

Sanity CMS: your own data model

Sanity is a headless CMS that’s very different from WordPress. There’s no predefined model—you’re the one who defines the schemas.

This allowed me to:

• Create custom data types for better content management.
• Control how translations are displayed, with full freedom for each language.
• Render rich content directly in Astro with astro-portabletext.

The result is a highly flexible, scalable CMS, perfect for a project that will grow over time.

Multilingual with SEO-friendly routes

The site is multilingual and currently works with separate routes:

• / for Catalan
• /es for Spanish
• /en for English

This setup is great for SEO, because Google can index each version independently. But it has one downside: switching languages reloads the entire page.

My next challenge is to implement a smoother language switcher, loading only the content without a full page refresh.

Why Vercel and not Netlify?

Initially, I tried Netlify, but Vercel quickly convinced me. Here’s why:

• Direct integration with Astro and much faster builds.
• Automatic previews for each branch, perfect for testing changes before publishing.
• Easy management of subdomains and DNS (even though the main domain is still on IONOS).
• Built-in Vercel Analytics and Speed Insights, avoiding external dependencies.
• Automatic optimization of images and other assets with almost no configuration.

For a lightweight site like this, Vercel is the perfect match.

Integrations that make a difference

Beyond the main stack, I added a few small tools that add a lot of value:

• Sentry for Astro → monitors production errors. If something breaks, I know immediately.
• SpotlightJS → visual debugging for the UI and rendering issues.
• Heroicons + Radix UI → accessible, consistent components without reinventing the wheel.
• EmailJS → a functional contact form without needing my own backend.

UX and design: minimalism with personality

I wanted a minimalist site but with lively details, so I chose:

• Primary color: indigo, which conveys calm and trust.
• Light/dark mode with smooth transitions, avoiding harsh switches.
• Micro-interactions with Framer Motion, so elements subtly animate as you scroll.
• Accessibility and good contrast, to ensure comfortable reading.

The result is a clear, fast site with a smooth, pleasant experience.

Special details

To keep the site from being “just a technical structure,” I added small touches that make a difference:

• A 404 page with a mini-game, to make landing on a broken link a bit more fun.
• Multilingual SEO-friendly routes (soon with smoother switching).
• Integrated analytics and performance with Vercel Analytics and Speed Insights.
• Automatic error monitoring with Sentry.

Challenges and lessons learned

Moving from Django to Astro + Sanity forced me to learn new things from scratch:

• Understanding how a headless CMS works and designing schemas without predefined patterns.
• Thinking about multilingual SEO and how to combine it with good UX.
• Coordinating multiple integrations without making the site heavy.

The conclusion is clear: there’s no better way to learn than by building real projects. Hands-on work accelerates learning far more than any course.

What’s next?

This site is just the beginning. My roadmap is clear:

• Improve SEO and start basic digital marketing strategies.
• Add new sections, like projects and a space for testimonials and recommendations.
• Develop a smoother multilingual system without full page reloads.
• Keep polishing the experience with new interactive details and components.

In the medium term, I want aitorivera.com to become the hub of a global personal brand, far beyond just a logo.

Conclusion: stepping out of your comfort zone is worth it

As a Django developer, diving into Astro, Sanity, and Vercel has been an incredible learning boost.

I’ve learned to think differently about the frontend, I’ve seen the value of designing multilingual content with custom schemas, and most importantly, I’ve confirmed that hands-on practice is the best way to grow technically.

Technology changes constantly, but what remains is the will to use it to improve what really matters.

If you’d like to ask me anything or share your own experience, drop me a message via the contact form.

Frequently Asked Questions (FAQ)

• What is Astro and why did you choose it?
  Astro is a framework that generates pure HTML and only ships the JavaScript that’s absolutely necessary, making websites very fast. I chose it because I wanted maximum performance without unnecessary complexity.
• Why Sanity instead of a CMS like WordPress?
  Because Sanity is headless and flexible: you can define your own data models and fully control how the content is displayed.
• Why Vercel instead of Netlify?
  Because Vercel integrates better with Astro, has faster builds, automatic previews, and built-in analytics tools.
• What’s the next step for the site?
  Improve SEO, add new sections, make language switching smoother, and keep adding small interactive details.