📸 Byte of Me

A personal digital garden — built for storytelling, self-reflection, and showcasing growth as a developer, one byte at a time.

Mobile view Desktop view

A minimalist and extensible personal website template

Built with Next.js, Tailwind CSS, and Prisma ORM, this project serves as a clean foundation for blogs, portfolios, or digital gardens.

🖥️ Demo: https://phu-lth.space/

Features

  • Personal profile with bio, quote, and timeline.
  • Developer journey & reflections.
  • Multilingual support (EN, VI, FR) with next-intl.
  • Dark & Light theme with system preference.
  • Uses unstable_cache and Prisma Accelerate for efficient data caching.

Tech Stack

LayerStack
FrontendNext.js (App Router)
BackendPrisma ORM & Prisma Accelerate
DatabasePostgreSQL, Supabase .
StylingTailwind CSS
i18nnext-intl + dynamic translation.
DeploymentVercel

Key Frontend Technologies Used

  • Next.js App Router:
    File-based routing, client & server components, utilizing both static and dynamic rendering.

  • Dynamic Metadata & SEO:
    Uses generateMetadata() per locale and route to ensure correct og:image, canonical, and hreflang tags for better SEO and social sharing.

  • Tailwind CSS:
    Utility-first CSS framework with custom themes. Fully supports responsive design and dark/light mode via system preference.

  • Theme System:
    Built with CSS custom properties, toggled using @media (prefers-color-scheme) and class-based overrides like .dark.

  • Internationalization (i18n):
    Powered by next-intl, with support for dynamic route translation, locale-aware routing, and graceful fallbacks.

  • Optimized Performance:
    Leverages unstable_cache() and Prisma Accelerate for efficient data fetching and caching, improving TTFB and overall page load.

  • Responsive UI:
    Fully mobile-first design. Tested across multiple screen sizes. Components are built with accessibility and semantic structure in mind.

Getting Started

1# 1. Clone the repository
2git clone https://github.com/lthphuw/byte-of-me.git
3cd byte-of-me
4
5# 2. Install dependencies
6pnpm install
7
8# 3. Setup environment
9cp .env.example .env
10
11# 4. Run migrations & seed
12cd apps/web
13npx prisma migrate dev --name <name>
14npx prisma db seed
15
16# 5. Start development server
17pnpm dev

Future work

  • Add support for theming customization via dashboard.
  • Partial Prerendering (PPR).
  • ...

License

MIT License — feel free to use, modify, and share.