An ultra-modern, interactive developer portfolio and full-featured blog publishing system designed for AI, Full-Stack, and Mobile engineers. Built completely from scratch with state-of-the-art web technologies, this project replaces rigid static configuration files with a live database-driven Content Management System (CMS).
Traditional developer portfolios rely on static Markdown files or hardcoded JSON arrays. Adding a new project, updating your résumé, or writing a blog post typically forces a manual code commit, build step, and pipeline redeployment.
This portfolio completely breaks that mold:
/admin dashboard (protected by token authentication and database-level security policies), you can modify site copy, re-order experiences, draft and publish blog posts, and immediately see those updates reflected live for all visitors.This repository pushes the boundaries of modern web application engineering by integrating industry-leading frameworks and runtimes:
| Layer | Technology | Why We Used It |
|---|---|---|
| Framework | TanStack Start & React 19 | Powers seamless universal SSR/CSR routing, end-to-end type safety, and direct server functions without architectural friction. |
| Styling Engine | Tailwind CSS v4 & Radix UI | Utilizes next-generation styling engines, sleek dark-mode glassmorphism, responsive layouts, and fully accessible unstyled UI primitives. |
| Animation | Motion (Framer Motion 12) | Delivers high-impact micro-animations, scroll-driven reveal transitions, and interactive hover feedback that feels alive. |
| Database & CMS | Supabase Postgres (RLS) | Relational PostgreSQL database armed with fine-grained Row-Level Security (RLS) to enforce absolute separation between public readers and authenticated admins. |
| Authentication | Supabase Auth (JWT) | Secure admin session management protecting private CMS routes and storage mutations via JSON Web Tokens. |
| Cloud Storage | Supabase Storage | Optimized media distribution bucket ("media") for blazing-fast asset delivery across hero sections, projects, and blogs. |
| Runtime & Build | Bun & Vite | Ultra-fast native execution speeds for dependency resolution, hot module reload (HMR), and production bundling. |
| Icons & Typography | Lucide React & Modern Fonts | Clean, pixel-perfect scalar vector iconography harmonizing with modern geometric web typography. |
The blog isn’t just plain text—it incorporates a custom parsing pipeline built specifically to accentuate technical writing with visual hierarchy:
bg-orange-500/15 border-orange-500/30 text-orange-400).* or - Bullet Points: Rendered as sleek lists highlighted by vivid, glowing orange accent markers.:: Callout Highlights: Transforms critical paragraphs into glowing orange gradient spotlight boxes with glowing borders—perfect for takeaways and executive summaries.> Quote Blocks: Stylishly indented citations and blockquotes with tinted left borders.#, ##, ### Headers: Automatic scale, spacing, and structural hierarchy formatting.Security isn’t an afterthought. Database access is strictly adjudicated by PostgreSQL Row-Level Security:
SELECT) to public tables and published blog posts.INSERT, UPDATE, and DELETE commands fail at the engine level unless the requesting client bears an authenticated JWT signed by an authorized administrator account./admin)The admin ecosystem is partitioned into clear, specialized control planes:
Follow these steps to spin up the entire dynamic infrastructure locally on your machine.
git clone https://github.com/rashhiye/Dynamic-Portfolio.git
cd Dynamic-Portfolio
bun install
Create a local .env.local file in the project root directory:
# Supabase project URL and public Anon Key
VITE_SUPABASE_URL=https://your-supabase-id.supabase.co
VITE_SUPABASE_ANON_KEY=your-supabase-public-anon-key
(Note: Because this project runs on Vite and TanStack Start, variables exposed to client components must be prefixed with VITE_).
Navigate to your Supabase dashboard SQL Editor and run the provided initialization scripts located in the root of the project:
schema-bundle.sql — Generates all core relational tables (profile, experience_items, projects, blog_posts, etc.) along with RLS read/write policies.storage-policies.sql — Configures the public "media" storage bucket for direct file uploads and world-readable asset fetching.bun run dev
Open your browser and navigate to http://localhost:5173 (or http://localhost:3000 depending on port availability) to interact with your live portfolio!
| Command | Description |
|---|---|
bun run dev |
Launch the hot-reload interactive Vite development server. |
bun run build |
Compile, optimize, and type-check the production application bundle. |
bun run preview |
Spin up a local static server to inspect the production bundle. |
bun run lint |
Execute ESLint across all components and server functions. |
bun run format |
Enforce consistent formatting across the codebase using Prettier. |
/auth page if new user registration is active in your tenant).http://localhost:5173/auth and authenticate using your administrator credentials.http://localhost:5173/admin where you gain full administrative edit capabilities across the entire application ecosystem.Crafted with precision, design excellence, and dynamic adaptability.