I’ve always believed that the best way to learn is to build — and the best way to grow is to do it in public. That’s why I created BenihKode, which literally means “Seed of Code” in Indonesian. It’s a developer’s garden: a place where ideas are planted, code is cultivated, and the whole messy, beautiful journey is documented.
This is the story of how it came to be.
The Idea
Every developer has a graveyard of half-finished side projects. Ideas that seemed brilliant at 2am, code that worked once and was never touched again, and apps that never made it past localhost:3000. I wanted to change that pattern — not by finishing everything, but by being intentional about the process.
What if I treated my side projects like a garden? Some seeds wouldn’t sprout. Some would grow but never bear fruit. And some — with enough care and patience — would bloom into something real. The point isn’t perfection. It’s the act of planting.
Choosing the Stack
I chose Astro as the foundation, and it’s been one of the best technical decisions I’ve made. Here’s why:
- Content-first by design. Astro’s content collections with Zod schemas give me type-safe frontmatter for blog posts, project entries, and PRDs. No more guessing what fields are required.
- Zero JavaScript by default. The site ships minimal JS, which means fast load times. The interactive parts — theme toggling, scroll animations, mobile nav — use small, focused scripts.
- MDX support. I can mix Markdown with components when I need richer layouts, especially for product specs and technical writing.
For hosting, I went with Cloudflare Pages via the Astro Cloudflare adapter. The edge deployment means the site loads fast globally, and the developer experience with Wrangler is solid.
Building the Design System
The design started as a rough concept — a single HTML file where I prototyped the look and feel before writing any Astro code. I wanted something that felt premium without being heavy:
- A dark mode as the default (because of course), with a warm, thoughtful light mode as an alternative
- Playfair Display for headings to give it editorial personality
- JetBrains Mono for labels and the code-style hero block
- Inter for body text — clean and highly readable
- An orange-to-pink gradient accent (
#FF6B2C → #FF3D7F) that runs through everything like a thread
I built ambient glow effects — three soft, floating radial gradients that drift behind the content. Combined with a subtle dot grid pattern, it gives the page a sense of depth without being distracting.
The Structure
The site is organized around three core concepts, which map directly to Astro content collections:
🌱 Ideas (PRDs)
Every product starts as a PRD — a Product Requirements Document. These live in the ideas collection and have statuses: idea, in-progress, and completed. Some are detailed with sections on target users, features, and technical approach. Others are just a spark. That’s fine.
🚀 Shipped Projects
The portfolio. Projects that have made it from seed to something real, each with its tech stack, description, and (where applicable) a live link or privacy policy.
📝 Dev Journal
Blog posts. Notes from the trenches. Things I learned, bugs that humbled me, concepts that finally clicked. This is the documentation of the journey.
Key Technical Details
A few things I’m proud of in the implementation:
Content Collections with Zod schemas — Every piece of content is validated at build time. If I forget a required field in a blog post’s frontmatter, the build catches it before deployment.
Dynamic routes — Ideas get their own rendered pages (/ideas/[slug]) with full PRD layouts including callout boxes. Projects have dynamic pages too, and some even have auto-generated privacy policy pages for their app store listings.
RSS + Sitemap — Both configured out of the box. The RSS feed pulls from the blog collection, and the sitemap is auto-generated by the Astro integration.
Theme persistence — The theme toggle saves to localStorage, and a tiny inline script in <head> prevents the flash of wrong theme on load.
Scroll animations — An IntersectionObserver powers the staggered reveal animations. Cards slide in as you scroll, with each child getting a slight delay for a cascade effect.
What I Learned
Building BenihKode taught me a few things beyond just code:
-
Start with content structure, not visual design. I defined my Zod schemas and content collections first, then built the UI around them. This kept the entire architecture coherent.
-
Design systems compound. Once the CSS variables and utility classes were in place, new components practically built themselves. The investment in a proper design system paid off immediately.
-
Ship the garden, not the harvest. The temptation is to wait until everything is “done.” But a garden is never done. I published with stub content in some places because the infrastructure was solid and the ideas were real.
-
AI as a collaborator. I paired with AI throughout this project — from prototyping the design concept to implementing components to migrating content. It was like having a tireless pair programmer who’s read every CSS spec and Astro doc.
What’s Next
The garden is planted. Now it’s time to tend it:
- Flesh out the PRDs — Turn rough ideas into detailed product specs
- Write more journal entries — Document the builds, the bugs, the breakthroughs
- Ship more projects — Move ideas from
ideatoin-progresstocompleted - Grow the portfolio — Add screenshots, demos, and deeper case studies
If you’re reading this, you’re seeing a work in progress — and that’s exactly the point. Every great app starts as a seed. This is my garden. Welcome.
BenihKode is built with Astro 6, styled with vanilla CSS, and deployed on Cloudflare. The source is a love letter to content-driven architecture and the joy of building things from scratch.