Professional Site (Tanstack Web App)

The Professional Portfolio Site

Goals

• Create a professional portfolio website to showcase skills, projects, and experience.

Tools Used

• Framework:
  • Tanstack Start - Web Application Framework
  • Tanstack Router - Routing Database
  • Effect - Functional Typescript Ecosystem
• Language: TypeScript
• State Management: XState
• Build Tool: Vite
• Testing:
  • Vitest(TODO)
  • Playwright(TODO)
• Content Management: Content Collections
• CI/CD: GitHub Actions
• Styles: Tailwind CSS and webtui
• Hosting: Fly.io

Roadmap

• [ ] Content Hot-reloading during development
• [ ] Move action-based code to effect
• [ ] Otel Instrumentation
• [ ] Sentry Instrumentation
• [ ] Migrate Terminal state management to xstate
• [ ] Add unit and integration tests with Vitest
• [ ] Add more E2E tests with Playwright
• [ ] Improve SEO and performance optimizations
  • [ ] Add Sitemap
  • [ ] Add Meta Tags
• [ ] Add RSS Feed
• [ ] Integrate with subscription service
• [ ] Migrate to Application Platform