The Vision
I believe the web deserves the same level of craft and intentionality as a cinematic production. Every line of code, every pixel — it all tells a story.
Feldora is a digital universe crafted at the intersection of technology, creativity, and cinematic storytelling. A living showcase where modern web technology meets bold visual design — a space for stories, experiments, and digital craftsmanship. Built with cutting-edge tools yet designed to be maintainable by a single developer who is passionate about pushing the boundaries of what a personal website can be.
Design & Architecture
Feldora draws its visual DNA from the cinematic language of game studios like Riot Games — angular, bold, geometric — but implemented with restraint. Every pixel is deliberate. Every interaction tells a story. We don't build websites — we craft digital experiences that resonate with the same intensity as a cinematic masterpiece.
The design language is built around geometric precision: polygon-clipped cards, diamond markers, hexagonal badges, and parallelogram buttons replace the rounded corners of conventional UI. A dark-only theme with dual-tone accents (purple for interaction, orange for decoration) creates a futuristic atmosphere that feels premium and immersive without relying on GPU-heavy effects.
Performance is never sacrificed for aesthetics. All animations are CSS-only — zero runtime animation libraries. Visual storytelling elevates the experience beyond conventional design, but every decorative element is measured against its performance cost. The result: a cinematic experience that loads in milliseconds.
Development Philosophy
Every architectural decision in Feldora is guided by four pillars. Security & privacy come first — environment variables are never exposed without explicit intent, and all third-party integrations follow the principle of least privilege. High performance & lightweight is non-negotiable — SSR by default, automatic code splitting, lazy loading, and a production bundle with only 8 dependencies.
The codebase prioritizes modular & scalable design — reusable components (StoryCard, LogCard, Skeleton, ErrorState, Toast), structured folder architecture, and clear separation between UI, data layer, and routing. TypeScript strict mode enforces correctness at compile time rather than catching bugs in production.
Maintainability is a feature, not an afterthought. Consistent naming conventions, centralized copywriting, a single source of truth for design decisions, and informative error handling enable rapid debugging. The platform is built on modern foundations — React 19, TanStack Start, Vite 7 — embracing the evolving web platform rather than locking into legacy patterns.
Update Log
Tic Tac Toe: single-column layout, brighter board cells, primary reset button
Layout changed to single centered column for all screens. How to Play box removed. Board cells use border-white/20 for better visibility. Reset button changed to btn-angular-primary.
Tic Tac Toe module — PvP and PvC with three bot difficulty levels
New Game module: Tic Tac Toe. PvP mode for two players on one device. PvC mode pits you against a bot at Easy (random), Medium (win/block/random), or Hard (unbeatable Minimax). Confirm modals guard mode changes, difficulty changes, and resets while a game is in progress.
Story localization toggle, footer copy sync, navbar version
Story detail shows EN/ID toggle when Indonesian content exists. Footer subtitle synced from HOME_COPY. Navbar shows app version. GraphQL raw field removed.
Navbar version badge, weather about copy centralized
App version shown in navbar next to logo. Weather V1/V2/V2.5 about sections moved to centralized copy with accuracy & F1 scores.
Split Bill: colorful detail page with icons and person avatars
Bill detail page redesigned with colored meta cards, person icon avatars, item tag icons, and paid/unpaid visual states. Avatars also applied to create/edit form.