theboring.app
Back to projects

theboring.app website

Landing page, with insights, projects and timeline.

Why I made this

I wanted a page to share my learnings and thoughts to the world.

A place to be creative and share my thoughts.

A place where I can break things, and learn from it.

Project Details

2 days to build
178 commits
Released Jun 9, 2025

Tools & Technologies

Cursor Astro

AI Models Used

claude-4-sonnet

Related Insights

Thoughts and learnings from building this project

Took me around 30m to create this page for submitting new insights. It supports linking projects, adding tags, drag and drop images and compressing images.

The experience is similar to sending a message in whatsapp. So good :)

Let’s make sure images are opitimized, so I don’t need to manually do it before submitting here.

The image below is 1.7MB raw (and 55kb after compression)

Screenshot

I’m loving how fast I can experiment with different AI ideas. In less than 30 minutes I was able to completely revamp this new form to submit insights.

Written with AI

A modern personal website and blog built with cutting-edge web technologies, designed to share insights, projects, and creative experiments with a focus on performance and developer experience.

Features

Content-driven architecture: Utilizes Astro’s content collections for seamless blog post and project management with MDX support for rich, interactive content authoring.

Lightning-fast performance: Static site generation with minimal JavaScript, leveraging Astro’s partial hydration for optimal Core Web Vitals and instant page loads.

Modern search experience: Integrated astro-pagefind for client-side search functionality, allowing visitors to quickly find relevant content without server requests.

Comprehensive SEO: Built-in sitemap generation, RSS feeds, Open Graph metadata, and structured data markup for maximum discoverability and social sharing.

Architecture

Built with Astro 5+ using modern content collections and glob loaders for efficient content management. TailwindCSS v4 provides utility-first styling with built-in dark/light/system theme support and responsive design patterns.

Content layer organizes blog posts and projects in structured collections with Zod schema validation, supporting frontmatter metadata, draft systems, and tag-based categorization.

Component system features reusable .astro components with TypeScript throughout, following established patterns for accessibility, semantic HTML, and optimal performance.

Technical implementation

Frontend: Astro 5, TypeScript, TailwindCSS v4 with @tailwindcss/vite plugin, responsive utilities, and @tailwindcss/typography for content formatting.

Content management: MDX with @astrojs/mdx integration, content collections with glob patterns, and Zod schemas for type-safe frontmatter validation.

Developer experience: Prettier with Astro plugin formatting, comprehensive TypeScript configuration, and streamlined development workflow with hot reloading.

Performance optimizations: Zero JavaScript by default, strategic client-side hydration, optimized fonts with @fontsource packages, and static asset optimization.

The website demonstrates modern web development best practices while maintaining simplicity and focusing on content delivery, proving that powerful features don’t require complex frameworks.