Building a personal site as a practical product exercise.

This website is one of my hobby projects, but it is also a useful demonstration of how someone with product instincts, delivery discipline, and enough technical context can shape, build, and ship something meaningful.

The point is not to posture as a professional developer, but to show how a clear vision, sound product thinking, and proper use of AI tools and modern technologies can turn ideas into real products with far more simplicity than was possible before.

System view

A lightweight architecture, shown as a delivery chain.

The project is intentionally small, but it still behaves like a real system: one layer for the application, one for dynamic data, one for media, and one for delivery from preview to production.

Authoring and UI

Build

Next.jsReactTypeScript

The application layer where the structure, pages, and user-facing experience are defined.

Selected dynamic services

Data

FirebaseIntervals.icu APIGoogle Analytics

Dynamic reads, workout-related fitness data, and usage measurement live here, keeping the site informative without turning it into a heavyweight platform.

Asset handling

Media

Cloudinary

Images and media are handled separately so the site can stay fast while still feeling visually rich.

Preview to production

Delivery

VercelCloudflare

Branch previews, deployment, DNS, and the delivery layer make iteration and publishing lightweight.

How it gets built

Start from a real use case

This website exists because it solves an actual personal need: presenting work, interests, and projects in a way that feels more authored than a social profile. That constraint keeps the project grounded.

Use architecture as leverage

The site is structured so new sections can be added without inventing a new system every time. Shared layout, shared tokens, and route-based organization make future work easier than the first implementation, while also creating a practical playground for understanding services, integrations, and architectural decisions through real use.

Ship through previews

Branch previews remove most of the fear from shipping. You can draft, review, and refine on a staging URL, then merge only when the result is ready for the public site.