FREE TIERfrontendFeatured

Frontend UI Craftsman

Emphasizes web accessibility, modern UI animation frameworks, component systems, Lighthouse performance benchmarks, and live interactive demo previews.

#React#Next.js#Tailwind#Design Engineering

Availability

Free Instant Access

Open in Builder

No signup required • Instant Markdown export

Template Architecture Highlights

Visual component gallery showcase

Lighthouse 100/100 performance badges

Figma & Design Engineering skill grid

Interactive CodeSandbox & Vercel deployment links

Demonstration Profile Information

Sample Name:

Tran Hoang Nam

Target Role / Headline:

Frontend Engineer • Design Systems & Creative Interaction

Included Tech Badges:

ReactNext.jsTypeScriptTailwind CSSMotionRadix UIFigmaJest

Sample Generated Markdown

# Hello World, I'm Tran Hoang Nam ✨
### 🎨 Frontend Engineer & Design Systems Specialist

> Crafting intuitive, high-performance web experiences with modern React and Tailwind CSS.

- ⚡ Specializing in: **Design Systems, Micro-interactions, and WCAG AA Accessibility**
- 🛠️ Currently building: **Open-source UI Primitive Library for Next.js 16**
- 🌐 Portfolio: **[hoangnam.design](https://example.com)**

---

### 💻 Frontend Tech Stack
![React](https://img.shields.io/badge/React_19-20232A?style=for-the-badge&logo=react&logoColor=61DAFB)
![Next.js](https://img.shields.io/badge/Next.js_16-black?style=for-the-badge&logo=next.js&logoColor=white)
![TypeScript](https://img.shields.io/badge/TypeScript-3178C6?style=for-the-badge&logo=typescript&logoColor=white)
![Tailwind CSS](https://img.shields.io/badge/Tailwind_CSS_v4-38B2AC?style=for-the-badge&logo=tailwind-css&logoColor=white)
![Framer Motion](https://img.shields.io/badge/Framer_Motion-0055FF?style=for-the-badge&logo=framer&logoColor=white)