Tech Stack

TOOLS THATSHIP THE WORK

The portfolio may span landing pages, dashboards, and product interfaces, but the stack behind that work stays practical: component-first UI, typed structure, clean styling, lightweight integrations, and a delivery flow built to launch without noise.

Frontend Core

React + Next.js

Language

TypeScript

Styling

Tailwind CSS

Motion

Framer Motion

Forms + Mail

Route Handlers + Resend

Delivery

Static Export

Current Setup

Built for fast iteration

Interface

Next.js

React

TypeScript

Tailwind CSS

Behavior

Route Handlers

Firebase

Resend

REST Integrations

Delivery

Responsive QA

SEO Metadata

Static Export

Why it stays this way

12 shipped works is enough proof that a focused stack beats a bloated one. The goal is readable code, clear UI, and easier updates when the content changes.

UI Foundation

Interface Systems

Most builds start with composable UI sections, a clear app shell, and typed code so the interface stays predictable while the content evolves.

React

Component-driven UI for reusable sections and product surfaces.

Core

Next.js

Routing, metadata, export flow, and app-level structure.

Core

TypeScript

Typed props, content maps, and safer refactors.

Core

Tailwind CSS

Fast layout work and consistent design tokens.

Core

Framer Motion

Controlled motion for reveals, transitions, and UI emphasis.

Support

Logic Layer

Backend and Integrations

For forms, basic product logic, and service workflows, I keep the backend practical with lightweight APIs and focused integrations instead of unnecessary complexity.

Node.js

Runtime for server-side logic and utility workflows.

Core

Next.js Route Handlers

Simple endpoints for contact flows and page-connected features.

Core

Firebase

Useful for auth, storage, and quick product experiments.

Support

Resend

Transactional email handling for inquiry and contact flows.

Support

REST Integrations

Connecting third-party services without overbuilding the stack.

Support

Data Shape

Content and Storage

The data layer changes with the job. For content-heavy builds I keep the source simple and typed. For app flows I am comfortable with both document and relational structures.

MongoDB

Flexible document models for evolving product ideas.

Support

PostgreSQL

Relational structure when data integrity matters more.

Support

Typed Content Objects

Clean local content maps for pages, cards, and metadata.

Core

Validation-first Payloads

Keeping form and request shapes understandable from the start.

Support

Interface Craft

Design and Delivery

The visual side is handled close to the code: layout planning, responsive passes, component consistency, and launch-ready SEO details all stay inside the same workflow.

Figma

Quick layout planning, references, and design direction.

Core

Component Systems

Reusable sections that keep pages consistent as they grow.

Core

Responsive QA

Desktop and mobile checks before anything is called done.

Core

SEO Metadata

Titles, descriptions, Open Graph, sitemap, and manifest basics.

Support

Daily Setup

Tools I Reach For

The day-to-day toolset stays simple so iteration remains fast from idea to preview to shipped update.

VS Code

Primary editor for shipping and debugging work quickly.

Core

Git + GitHub

Version control, history, and clean deployment handoff.

Core

npm

Package management and project script workflow.

Support

Chrome DevTools

Layout inspection, responsiveness, and runtime debugging.

Core

Static Export Flow

Stable deployment path for fast portfolio-style sites.

Support

Workflow

How the stack gets used

Shape the page

Start with content structure, section order, and the clearest path for the user.

Build the system

Turn that structure into typed components with responsive layout rules and reusable patterns.

Wire the behavior

Add forms, integrations, and any lightweight backend logic needed for the page or product.

Polish and ship

Run mobile checks, metadata cleanup, final QA, and then move it into a deployable state.

Best Fit

What this stack is optimized for

Landing Pages

Clean sections, clear content hierarchy, and fast-loading frontend delivery for launch-focused websites.

Typical Mix

Next.js

React

Tailwind CSS

SEO Metadata

Static Export

Dashboards

Structured UI, reusable components, and practical action flows for internal tools and admin views.

Typical Mix

React

TypeScript

Component Systems

Route Handlers

Responsive QA

Product Interfaces

Flexible frontend systems for AI concepts, utility tools, service flows, and web products that need room to grow.

Typical Mix

Next.js

Node.js

Firebase

REST Integrations

Component Systems