Building a theme for the AstroJS community

Why AstroJS? Let’s start there.

Much has been written about JS frameworks. It sometimes feels like there's a new framework or developer tool every week, so you can be forgiven for wanting to roll your eyes at yet another.

AstroJS is a static site generator (SSG) like Gatsby or Next.js. AstroJS as another JavaScript framework also works with server-side-rendering (SSR) in any route within the app and even rendering at the edge.

So, you get to use your favorite tools from your favorite frameworks—without all the JavaScript bloat. While a Next.js homepage might load over 100 KB of JavaScript, Astro can get that down to under 10 KB. And the best part? You can still use what you already love: React, Vue, Svelte, Markdown, and more.

Key Features

• Zero JavaScript by default → Ships only HTML/CSS unless you need interactivity
• Component Islands → Interactive components load independently and in parallel
• Framework agnostic → Use React, Vue, Svelte, or any combination
• Built-in performance → Lazy loading and partial hydration out of the box

That's when it hit me

The previous section might make it seem like Astro and Next.js are in conflict, but that's not the point. They're not competitors; they're just different tools with different strengths.

As always, it depends on your goals. The right choice comes down to what you're building and what you need.

Astro shines in happy-path scenarios and, in my opinion, it's ideal for small to medium-sized projects. If you're aiming for a large-scale web app, however, I recommend using Next.js. That's where performance, scalability, and advanced tooling become crucial.

The Theme: Astro Neumorphism

After exploring what makes Astro special, I decided to create a theme that showcases its strengths. The result is Astro Neumorphism,a clean, modern portfolio template that embraces the neumorphic design trend.

Here's what makes it special:

• Interactive and customizable homepage card (hover over it when you can!)
• Displays your Medium posts by simply replacing your Medium username
• Fully responsive layout, different components appear based on viewport size
• Dark mode configurable via tailwind.config.js
• Built with TypeScript and the Preact library
• Styled using Tailwind CSS
• Uses astro@1.1
• Modular structure: easy to customize or extend with new components
• Font: includes the Google Font "Raleway" (served locally, not via CDN)

Try it yourself