Learning Sandbox Projects

A collection of prototype projects built to master Astro routing, client interactions, state management, and modern CSS integrations.

A

Astro Markdown Blog

A static-generated blog featuring Markdown support, custom components, frontmatter data extraction, and tags layout pages.

Astro Markdown TypeScript SEO
Code Demo
T

Tailwind v4 Component Library

A playground building sleek, responsive elements using Tailwind CSS v4 CSS-first variables and glassmorphic designs.

Tailwind v4 HTML Vanilla CSS Aesthetics
Code Demo
W

Weather Dashboard API

An interactive dashboard integrating third-party APIs with Astro server endpoints, rendering hourly charts and live forecasts.

Astro Endpoints JavaScript Fetch API Charts
Code
I

Interactive Markdown Editor

A browser-based editor that parses Markdown in real-time. Features draft auto-saving to local storage and exports to HTML.

TypeScript Local Storage HTML5 Regex
Code Demo
P

Personal Finance Tracker

A clean financial planner allowing entry logging, categorization, monthly expense reports, and SVG pie chart data visualization.

Astro TypeScript SVG Charts CSS Grid
Code
C

CSS Art Sandbox

A creative lab containing complex animations, 3D CSS objects, scroll parallax, and scroll-driven CSS page-reveal hooks.

CSS Animations 3D Transforms Responsive HTML
Code Demo