meercha.ro
The project, in plain words.
meercha.ro is a portfolio site built with Next.js 14, TypeScript, Tailwind CSS and Framer Motion. It was designed and developed from scratch using AI-assisted workflows — Claude Code for agent orchestration, Cursor for in-editor pair programming.
The site features full dark mode support via CSS custom properties and next-themes, an auto-generated PDF resume powered by @react-pdf/renderer, custom programmatic SVG illustrations that respond to the active theme, and WCAG AA accessibility compliance throughout.
Every component — from the scroll animations to the bento grid layout — was hand-written. No templates, no UI kits. The goal was a site that felt intentional and could serve as a living example of the kind of frontend work I do.
What I actually shipped.
- Designed the entire UI/UX from scratch — layout, typography, color system, component library
- Built a custom SVG illustration system that responds to dark/light theme changes programmatically
- Implemented auto-generated PDF resume using @react-pdf/renderer served from an API route
- Achieved WCAG AA accessibility compliance across all pages and interactive elements
- Set up AI-augmented development workflows using Claude Code for rapid iteration and code quality
Three problems worth talking about.
Dark mode with CSS variables
Instead of class toggling, the entire color system uses CSS custom properties. next-themes sets a .dark class on the root, and every component reads from the same variable namespace. Zero flash on load, zero duplication.
Auto-generated resume PDF
@react-pdf/renderer runs inside a Next.js API route. The same resume data that drives the web page also generates a downloadable PDF — always in sync, zero manual upkeep.
Custom SVG illustrations
Every illustration is a React component rendering inline SVG. They use CSS custom properties for fills and strokes, so they adapt to the active theme without any prop drilling or duplication.