Skip navigation
Vu Trong Tan logoVu Trong Tan portfolio
About me

Vu Trong Tan

Hello, I'm Vu Trong Tan. 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.

View projectsDownload CV

Skills

  • HTML
  • CSS
  • JavaScript
  • TypeScript
  • React
  • Next.js
  • Tailwind CSS
  • shadcn/ui
  • Node.js

Featured projects

  1. 01

    Vu Trong Tan — My Portfolio

    Một portfolio mình tự thiết kế và xây dựng để ghi lại những dự án đã làm, những thứ đang học và hành trình phát triển từ Frontend đến Fullstack.

    • Next.js
    • TypeScript
    • Tailwind CSS
    • Responsive
    • Accessibility
    View detailsLive preview
  2. 02
    Dashboard Expense Hub với KPI chi tiêu tháng, biểu đồ danh mục và xu hướng ba tháng.

    Expense Hub — Quản lý chi tiêu nhóm

    Expense Hub giúp nhóm ở chung ghi nhận khoản chi, chia tiền minh bạch và đối soát cuối tháng để mọi thành viên biết chính xác cần trả hoặc nhận bao nhiêu.

    • Next.js
    • TypeScript
    • Tailwind CSS
    • NestJS
    • Prisma
    • PostgreSQL
    View detailsLive preview
  3. 03
    Optimized preview of a storefront product grid with stable image, copy, price, and call-to-action regions.

    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
    View detailsLive preview

Experience

  1. 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
  2. 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
  3. 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

  1. Education

    Download transcript

    Bachelor of Software Engineering — GPA: 3.24/4.0

    Hanoi University of Industry (HaUI)Faculty of Information Technology

    Developed a solid foundation in software engineering and modern web development through coursework and hands-on projects, focusing on building scalable and maintainable applications.

    Skills

    • Software Engineering
    • Web Development
    • Database
    • OOP
    • Software Architecture

  2. Professional Development

    Frontend Development

    Developing production-ready interfaces with a focus on quality, accessibility, and performance.

    Skills

    • React
    • Next.js
    • TypeScript
    • Tailwind CSS

  3. Professional Practice

    Production Frontend Engineering

    Building production-ready interfaces with an emphasis on maintainable architecture, accessibility, and performance.

    Skills

    • React
    • Next.js
    • TypeScript
    • Performance

  4. Currently Learning

    Present

    Backend & Software Engineering

    Expanding into backend systems and engineering practices for more complete product ownership.

    Skills

    • Node.js
    • MongoDB
    • Docker
    • System Design

Interests

Hand-drawn capybara with a curious expression against a blue background.
Curious capybara
Hand-drawn capybara making a peace sign against a blue background.
Peace sign
Hand-drawn capybara holding its hands together against a blue background.
Tiny promise
Hand-drawn capybara peeking around a vertical edge against a blue background.
Peekaboo
Hand-drawn capybara wearing a red cherry costume against a blue background.
Cherry capybara
Hand-drawn capybara wearing a yellow star costume against a blue background.
Star capybara
Hand-drawn capybara smiling with hands together against a blue background.
A bright idea
Hand-drawn capybara with spiral eyes floating against a blue background.
Dizzy day
Hand-drawn capybara snowboarding over a snowy ramp against a blue sky.
Snowboard run
Hand-drawn capybara holding flying pieces of paper against a blue background.
Ideas everywhere

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.

A cheerful white duck raising a peace sign against a blue background.
“Mistaking a small achievement for success is the mindset of the mediocre.”