Chưa tối ưu
ẢnhẢnh gốc PNG, JPG, tải hết ngay từ đầu
FontLấy từ máy chủ ngoài, chữ nháy khi đổi font
JavaScriptMột khối lớn cho cả website
Bố cụcNội dung bị xô lệch khi ảnh và font về
01 / Về tôi
Tôi làm web cho doanh nghiệp từ năm 2021.
Hơn 5 năm làm front-end ở các công ty phát triển web. Tôi đã tham gia dựng 25 đến 30 website đang chạy thật, trong đó có 3 web app cho EVN, Petrolimex và PNJ. Việc tôi 'thuận tay nhất' nhận bản thiết kế, gửi lại một website chạy mượt mà trên mọi màn hình.
const phi = { role: 'Front-end Developer', core: ['HTML', 'CSS', 'SCSS', 'JavaScript', 'TypeScript'], ui: ['React', 'Next.js', 'Tailwind CSS', 'GSAP', 'SwiperJS'], tooling: ['Pug', 'Gulp', 'Git', 'Figma'], ship: ['WordPress', 'Technical SEO'], loves: ['Football', 'Gym', 'Family', 'Health'], }; build(phi);
Kinh nghiệm làm việc
5+năm kinh nghiệmtừ 02/2021 tới nay
25+website đã chạyEVN · Petrolimex · PNJ
15+thương hiệu dùng nền tảng e-learning tôi tham gia phát triểnmỗi học viện một tên miền
Tôi hay dùng
- HTML
- CSS
- SCSS
- JavaScript
- React
- Next.js
- TypeScript
- Tailwind CSS
- GSAP
- SwiperJS
- Pug
- Gulp
- WordPress
- Figma
- Git
02 / Kinh nghiệm
Hành trình 5 năm làm front end của mình
Từ landing page đầu tiên năm 2021 tới e-commerce cho thị trường Mỹ và nền tảng e-learning cho các doanh nghiệp.
Spectrum Signs & GraphicsE-commerce in bảng hiệu · thị trường Mỹ
- Làm tính năng full-stack cho storefront và trang quản trị Next.js, kết nối REST API viết bằng Go (Fiber, GORM, PostgreSQL).
- Luồng mua hàng: giỏ hàng chọn từng dòng để thanh toán, mã khuyến mãi, tính giá theo kích thước và chất liệu, thuế bằng Stripe Tax.
- Đơn hàng và sản xuất: duyệt bản in mẫu với khách, gửi lệnh in, quản lý máy in.
- Next.js
- React
- TypeScript
- Tailwind CSS
- Go
- PostgreSQL
- Stripe
Nền tảng E-learning SaaS15+ học viện, mỗi học viện một tên miền
- Xây dựng cơ chế bật/tắt tính năng theo từng tên miền, cho phép cấu hình theme, section và nội dung của mỗi học viện bằng JSON Schema và content editor dựng trên RJSF.
- Phát triển trọn luồng bán khóa học, từ giỏ hàng và các chương trình ưu đãi tới gói PRO theo tháng và gia hạn.
- Hoàn thiện trải nghiệm của học viên, từ đăng nhập bằng Google hoặc OTP qua Zalo tới video chia chương và học tiếp bài đang dở.
- Next.js
- React
- TypeScript
- Tailwind CSS
- Zustand
- GraphQL
Website doanh nghiệp25–30 website đang chạy
- Dựng website cho EVN, Petrolimex, PNJ và nhiều doanh nghiệp khác; các shop WooCommerce như Tasa Ceramic, Kính mắt Eye Plus.
- Chuyển thiết kế Figma, Photoshop thành giao diện responsive; animation và slider bằng GSAP, SwiperJS.
- Technical SEO, audit website; tự viết Claude Code skill để tự động tách content và sinh form chỉnh sửa nội dung.
- HTML
- SCSS
- JavaScript
- Pug
- WordPress
- WooCommerce
- GSAP
- Dựng giao diện website bằng HTML, SCSS, JavaScript và Pug theo thiết kế Figma, Photoshop, chạy tốt trên mọi màn hình.
- Làm animation và hiệu ứng tương tác bằng jQuery, GSAP, SwiperJS; xử lý lỗi hiển thị trên nhiều trình duyệt.
- Phối hợp Backend hoàn thiện website từ bước dựng giao diện tới khi lên production.
- HTML
- SCSS
- JavaScript
- Pug
- jQuery
- GSAP
- Làm landing page bằng ReactJS; bảo trì giao diện website bằng HTML, CSS, JavaScript.
- Dựng các thành phần giao diện (banner, icon, layout); sửa source code PHP có sẵn theo yêu cầu dự án.
- React
- HTML
- CSS
- JavaScript
03 / Dự án
Các website đang hoạt động
Bấm vào để xem
Bộ lọc sản phẩm nhiều tầng: kích thước, bề mặt, khu vực dùng.
- WordPress
- WooCommerce
- GSAP
- SwiperJS
Cửa hàng online, đặt lịch đo mắt, thử kính bằng AI, quiz chọn gọng.
- WordPress
- WooCommerce
- jQuery
- SwiperJS
Trang khóa học AI 8 level, gần 100 bài, đăng ký học thử ngay trên trang.
- Next.js
- React
- Tailwind CSS
- SwiperJS
Website song ngữ, trưng bày công trình bằng ảnh lớn.
- WordPress
- jQuery
- SwiperJS
Dịch vụ chia theo từng hệ thống xe, đặt lịch bảo dưỡng, combo giá ưu đãi.
- WordPress
- jQuery
- SwiperJS
Hàng chục dòng đồng phục theo ngành, đơn hàng nổi bật, form nhận tư vấn.
- WordPress
- WooCommerce
- jQuery
- SwiperJS
Song ngữ, bộ sưu tập vải theo dòng, form xin báo giá.
- WordPress
- jQuery
- SwiperJS
Slider công trình toàn màn hình, dự án chia theo kiến trúc, nội thất, cảnh quan.
- WordPress
- GSAP
- Lenis
- SwiperJS
04 / Hiệu năng
Cùng một trang.
Chờ ít hơn.
Thiết kế giữ nguyên, khác nhau ở cách trang được tải. Đây là bốn chỗ tôi xử lý trước tiên khi tối ưu một website.
Đã tối ưu
ẢnhAVIF, WebP đúng kích thước, cuộn tới mới tải
FontTự host, chỉ giữ bộ ký tự cần dùng
JavaScriptTách theo trang, phần phụ tải sau
Bố cụcGiữ chỗ sẵn, không xô lệch
- LCPLargest Contentful Paint
- Nội dung chính hiện ra sau bao lâu.
- CLSCumulative Layout Shift
- Bố cục có bị xô lệch trong lúc tải hay không.
- INPInteraction to Next Paint
- Bấm vào thì trang phản hồi nhanh tới đâu.
05 / Các lớp
Sau mỗi màn hình là 4 lớp.
Giao diện
Thứ người dùng nhìn thấy và chạm vào: đúng thiết kế, mượt trên mọi màn hình.
Component
Các mảnh ghép dùng lại được, dựng bằng React và Next.js.
State
Một nguồn dữ liệu duy nhất cho giao diện, quản lý bằng Zustand.
Dữ liệu
Kết nối REST API và GraphQL, có cache và xử lý lỗi.
06 / Freelance
Giao thiết kế.
Nhận sản phẩm chạy thật.
- 5+năm làm front-end
- 25+website đang chạy thật
- 1 ngàylàm việc là có phản hồi
Tôi nhận làm Freelance
Website
Landing page, website công ty, cửa hàng online. Đúng thiết kế, tải nhanh, chuẩn SEO.
Web app
Sản phẩm có tài khoản, thanh toán và dữ liệu riêng. Dựng bằng React, Next.js, kết nối sẵn API.
CRM
Khách hàng, đơn hàng, phân quyền nhân viên ở cùng một nơi, dựng theo đúng cách bạn vận hành.
Nhận dự án từ xa
TP. Hồ Chí Minh (GMT+7)
Làm việc với tôi
Tôi là Hoàng Phi, Front-end Developer với hơn 5 năm kinh nghiệm trong lĩnh vực phát triển website và ứng dụng web. Tôi chuyên xây dựng Landing Page, Website doanh nghiệp, Web App và hệ thống CRM với giao diện hiện đại, trải nghiệm người dùng tối ưu và chuẩn SEO.
Tôi nhận triển khai dự án freelance từ thiết kế Figma đến sản phẩm hoàn thiện, đồng thời chú trọng hiệu suất, khả năng mở rộng và tính ổn định trong quá trình vận hành.
Làm việc trực tiếp, trao đổi rõ ràng, phản hồi nhanh chóng. Mỗi dự án không chỉ dừng lại ở việc bàn giao sản phẩm mà còn đi kèm source code và hướng dẫn cần thiết để khách hàng chủ động quản lý, phát triển lâu dài.
07 / Liên hệ
Kể tôi nghe về
website bạn cần.
Điền form bên dưới, hoặc gọi, nhắn Zalo, gửi email đều được. Tôi trả lời trong vòng một ngày làm việc.