Frontend
Hover the list to pause the technology marquee.
- HTML
- CSS
- JavaScript
- TypeScript
ABOUT ME
Vu Trong Tan
Hello, welcome to my portfolio.
I am a Frontend Developer with one year of experience, currently working at BEATCOLOR Technology Co., Ltd. My work focuses on responsive web interfaces, turning designs into real products, and improving user experience.
I value teamwork, clear communication, and practical solutions that run reliably in production.
Skills
Framework & UI
Hover the list to pause the technology marquee.
- React
- Next.js
- Tailwind CSS
- Framer Motion
- shadcn/ui
Backend, API & Docs
Hover the list to pause the technology marquee.
- Node.js
- Express
- NestJS
- REST API
- GraphQL
- Swagger
- Bruno
Data, Tools & Platform
Hover the list to pause the technology marquee.
- MongoDB
- PostgreSQL
- Supabase
- Git
- GitHub
- Docker
- Vercel
- Render
- Jira
- CI/CD
Featured Projects
- 01
Production Developer Portfolio
Portfolio cá nhân được xây dựng như một sản phẩm production, tập trung vào SEO, accessibility, performance và khả năng mở rộng nội dung.
- Next.js
- TypeScript
- Tailwind CSS
- Framer Motion
- Metadata API
- 02
Frontend Architecture Dashboard
Dashboard quản trị được thiết kế để hiển thị dữ liệu nghiệp vụ rõ ràng, giảm cognitive load và giữ trải nghiệm ổn định khi mở rộng module.
- React
- TypeScript
- Tailwind CSS
- REST API
- ESLint
- 03
Performance-focused Storefront
Storefront tối ưu trải nghiệm mua hàng bằng nội dung rõ ràng, image strategy có kiểm soát và component phục vụ SEO thương mại.
- Next.js
- TypeScript
- Tailwind CSS
- next/image
- JSON-LD
Experience
- Current
Frontend Developer
Portfolio and Product UI Systems
- Period
- 2026 - Present
- Location
- Vietnam / Remote
- Employment type
- Project-based
Xây dựng portfolio developer theo hướng production, tập trung vào information architecture, design system, semantic HTML, SEO technical foundation và trải nghiệm responsive có thể mở rộng.
Scope of work
- Thiết kế section architecture cho Hero, About, Tech Stack, Featured Projects và Experience.
- Tách nội dung portfolio thành data model có type safety để dễ cập nhật, review và mở rộng.
- Giữ homepage mỏng, ưu tiên server component và chỉ dùng motion ở lớp progressive enhancement.
Impact
- Tạo nền tảng rõ ràng để recruiter quét nhanh năng lực frontend, performance và architecture.
- Giảm rủi ro layout shift bằng responsive grid, heading hierarchy và component boundary ổn định.
- Chuẩn bị sẵn cấu trúc cho các phase SEO, schema, image optimization và accessibility audit.
Related technology stack
- Next.js
- TypeScript
- Tailwind CSS
- Framer Motion
- shadcn/ui
- Completed
Performance and Accessibility Engineer
Production Web Experience
- Period
- 2025 - 2026
- Location
- Vietnam / Remote
- Employment type
- Practice and case-study work
Tối ưu giao diện web theo các nguyên tắc Core Web Vitals, accessibility, keyboard navigation và nội dung dễ đọc trên nhiều kích thước màn hình.
Scope of work
- Phân tích rendering cost, JavaScript cần thiết, layout stability và chiến lược tải tài nguyên.
- Thiết kế focus visible, landmark, heading order và trạng thái tương tác thân thiện với bàn phím.
- Chuẩn hóa loading, empty state, card, badge, timeline và section pattern cho UI có tính hệ thống.
Impact
- Cải thiện khả năng đọc nội dung và điều hướng bằng semantic HTML thay vì phụ thuộc vào visual-only layout.
- Tạo performance budget rõ ràng cho LCP, CLS, bundle size và animation cost.
- Giúp mỗi section có thể audit độc lập trong các phase Accessibility và Performance sau.
Related technology stack
- React
- TypeScript
- Tailwind CSS
- ESLint
- Prettier
- Completed
Frontend Integration Developer
API-connected Web Applications
- Period
- 2024 - 2025
- Location
- Vietnam / Remote
- Employment type
- Learning and implementation
Xây dựng nền tảng full-stack đủ để làm việc hiệu quả với backend, API contract, database model và quy trình delivery khi phát triển frontend production.
Scope of work
- Kết nối UI với REST API, GraphQL concept, authentication flow và dữ liệu có trạng thái lỗi, rỗng, tải.
- Làm việc với Node.js, Express, NestJS, MongoDB và PostgreSQL ở mức đủ hiểu contract và constraint.
- Dùng Git, GitHub, lint, type check và build pipeline để giữ thay đổi có thể review và deploy.
Impact
- Giao tiếp tốt hơn với backend nhờ hiểu data shape, error state, pagination và validation.
- Thiết kế component ít phụ thuộc vào nguồn dữ liệu cụ thể, dễ thay mock bằng API thật.
- Tăng độ tin cậy khi chuyển từ giao diện tĩnh sang sản phẩm có dữ liệu và deployment thật.
Related technology stack
- Node.js
- Express
- NestJS
- MongoDB
- PostgreSQL
- GitHub
Learning
Education
Bachelor of Information Technology
University Name
Built a foundation in software engineering, databases, and web development.
Skills
- Software Engineering
- Database
- Web Development
Professional Development
Frontend Development
Developing production-ready interfaces with a focus on quality, accessibility, and performance.
Skills
- React
- Next.js
- TypeScript
- Tailwind CSS
Professional Practice
Production Frontend Engineering
Building production-ready interfaces with an emphasis on maintainable architecture, accessibility, and performance.
Skills
- React
- Next.js
- TypeScript
- Performance
Currently Learning
PresentBackend & Software Engineering
Expanding into backend systems and engineering practices for more complete product ownership.
Skills
- Node.js
- MongoDB
- Docker
- System Design
Interests
Final note
One last note
Thanks for being here.
Every line of code, every challenge, and every project has been part of my journey.
“Keep building. Keep growing.”
The End.