My Personal portfolio and blog website built with React / TanStack Start.
Visit plckr.dev to see it in action.
- Framework: TanStack Start (React SSR)
- Styling: Tailwind CSS v4 + shadcn/ui
- Content Management: Velite (MDX processing)
- Tracking: PostHog
- Deployment: Cloudflare Workers
Most relevant parts of the project.
src/
├── components/ # Reusable React components
│ ├── ui/ # ui components
├── lib/
├── routes/ # File-based routing (TanStack Router)
└── styles.css
posts/ # Blog posts (MDX files)
├── <order-number>.<slug>/
│ └── post.md # Blog post content
- Node.js 22
- pnpm package manager
Clone the repo and install dependencies with the command below
pnpm installpnpm dev # Start development server (port 3000)
pnpm velite:watch # Watch for content changesVisit http://localhost:3000 to see the site.
pnpm build # Build for production
pnpm serve # Preview production buildBlog posts are stored in the posts/ directory as MDX files with frontmatter:
---
title: Your Post Title
excerpt: Brief description of your post
date: 2024-01-01
thumbnail: ./images/thumbnail.jpg
---
# Your content here
You can use **Markdown** syntax and even include pre defined React components!Posts are automatically processed by Velite and made available throughout the application. The system supports:
- Table of contents generation
- Reading time calculation
- Metadata extraction
- MDX component support
- Fork the repository
- Create a feature branch (
git checkout -b feature/amazing-feature) - Commit your changes (
git commit -m 'Add amazing feature') - Push to the branch (
git push origin feature/amazing-feature) - Open a Pull Request
This project is licensed under the MIT License - see the LICENSE file for details.
VITE_PUBLIC_POSTHOG_KEY=your_posthog_key_here
VITE_PUBLIC_POSTHOG_HOST=your_posthog_host_here
VITE_SUPABASE_URL=your_supabase_url_here
VITE_SUPABASE_KEY=your_supabase_key_hereBuilt with ❤️ using TanStack Start and deployed on Cloudflare Workers.