Chúng tôi đang phát triển một dự án website cá nhân hoặc cơ sở dữ liệu với sự hỗ trợ của Next.js và Tailwind CSS.
Dưới đây là một số tính năng và phần của dự án mà chúng tôi đã hoàn thành hoặc đang làm việc:
-
Thiết kế navbar linh hoạt và phản hồi, bao gồm cả menu hamburger.
-
Phong cách liên kết hoạt động cho navbar, giúp người dùng nhận biết trang nào đang được chọn.
-
Phần hero với thiết kế đặc biệt, mang lại ấn tượng mạnh mẽ từ cái nhìn đầu tiên.
-
Sử dụng Framer Motion để tạo các hiệu ứng và chuyển động động lực cho các phần của trang.
-
Tạo hiệu ứng động cho menu hamburger sử dụng Framer Motion.
-
Hướng dẫn sử dụng Framer Motion cho việc chuyển đổi giữa các trang.
-
Thiết kế trang thông tin cá nhân và kỹ năng với sự trợ giúp của Tailwind CSS. Tạo timeline và các hiệu ứng động cho nó.
-
Hướng dẫn tạo animation SVG và animation cuộn sử dụng Framer Motion.
-
Xây dựng trang liên hệ với một biểu mẫu liên hệ có khả năng gửi email.
-
Tạo hiệu ứng văn bản chạy động sử dụng Framer Motion.
-
Thiết kế trang portofolio đơn lẻ và trang liên hệ với các phần tử động và phong cách.
-
Hướng dẫn sử dụng Framer Motion cho việc tạo hiệu ứng cuộn ngang và xoay văn bản thành hình tròn.
Với các tính năng và hướng dẫn này, dự án của chúng tôi hứa hẹn mang đến một trải nghiệm trực tuyến thú vị và độc đáo cho người dùng.
XEM THÊM ==> Hướng dẫn cài đặt chi tiết
HƯỚNG DẪN CÀI ĐẶT
Đây là một dự án Next.js được khởi tạo với create-next-app.
Cài đặt thư viện: npm i
Bắt đầu Đầu tiên, chạy máy chủ phát triển:
npm run dev
# or
yarn dev
# or
pnpm dev
# or
bun dev
Mở http://localhost:3000 trên trình duyệt của bạn để xem kết quả.
Bạn có thể bắt đầu chỉnh sửa trang bằng cách sửa file app/page.js. Trang sẽ tự động cập nhật khi bạn chỉnh sửa file.
Dự án này sử dụng next/font để tự động tối ưu hóa và tải Inter, một font chữ tùy chỉnh từ Google Font.
Nguồn: Topcode.vn
