Xây Dựng Portfolio Thông Minh Trong Khi Chát: Dự Án TamboHack

Xin chào các bạn! Hôm nay mình rất vui được chia sẻ với các bạn dự án của mình tại TamboHack: ChatPortfolio (hay còn gọi là Cursor for Portfolio) — một portfolio thông minh, tối giản được xây dựng với Tambo AI, Next.js & TypeScript.

Trước khi bắt đầu, hãy xem demo tại đây: Demo trực tiếp và Mã nguồn.

Giới thiệu về ChatPortfolio

ChatPortfolio giúp bạn biến những câu hỏi của mình thành một portfolio có thể chia sẻ — và bạn có thể tùy biến nó. Bạn có thể hỏi nó những điều như:

• "Đổi tên tôi thành Steve Jobs."
• "Bật chế độ tối."
• "Thay đổi kỹ năng của tôi thành vai trò full stack dev và cập nhật phông chữ thành Times New Roman."

Nó hiểu câu hỏi của bạn, tự động lấy dữ liệu từ nhiều thành phần và cập nhật portfolio của bạn!

Bước 1: Tạo Ứng Dụng Tambo của Bạn (Yay!)

Bắt đầu bằng cách tạo một ứng dụng Tambo mới (Công cụ điều phối AI tốt nhất hiện có).

npx tambo create-app my-personal-portfolio
cd my-personal-portfolio
npx tambo init

Sau khi hoàn thành thiết lập ban đầu, bạn có thể xóa một vài tệp không cần thiết.

rm src/components/ui/card-data.tsx src/services/population-stats.ts
rm src/app/interactables/settings-panel.tsx

Bước 2: Thêm Dữ Liệu Ban Đầu và Thành Phần UI

Thêm tệp portfolio-interactable.tsx vào cùng vị trí mà bạn đã xóa settings-panel.tsx.

import { useState } from "react";
import { withInteractable } from "@tambo-ai/react";
import { z } from "zod";
import Portfolio from "./portfolio";
import { DATA as initialData } from "@/data/resume";

// Định nghĩa schema cho dữ liệu portfolio (đơn giản hóa cho demo)
const portfolioSchema = z.object({
  name: z.string(),
  description: z.string(),
  summary: z.string(),
  skills: z.array(z.string()),
  projects: z.array(
// ... 

Một vài thành phần khác cũng cần được thêm vào để tùy chỉnh UI. Bạn có thể tìm thấy chúng tại đây --> Mã nguồn.

Bước 3: Thêm Thành Phần Magic UI Để Tạo Giao Diện Đẹp

Sử dụng mã sau, thêm các thành phần Magic UI để tạo giao diện đẹp hơn.

npx shadcn@latest add "https://magicui.design/r/blur-fade"
npx shadcn@latest add "https://magicui.design/r/dock"
npx shadcn@latest add "https://magicui.design/r/blur-fade-text"

Bước 4: Thành Phần Chính Của Portfolio

Thêm mã sau cho thành phần portfolio chính của bạn:

import { Separator } from "@/components/ui/separator";
import { ModeToggle } from "@/components/mode-toggle";
import { HomeIcon } from "lucide-react";
import { useEffect } from "react";
import { useTheme } from "next-themes";

const BLUR_FADE_DELAY = 0.04;

export default function Portfolio({ data }: { data?: any }) {
  const safeData = data ?? defaultData;
  const { theme, setTheme } = useTheme();

  // Đồng bộ chủ đề từ props
  useEffect(() => {
    if (safeData.theme && safeData.theme !== theme) {
      setTheme(safeData.theme);
    }
  }, [safeData.theme, theme, setTheme]);

  // Phông chữ và màu sắc chỉ dành cho portfolio
  const portfolioFont = safeData.font ? { fontFamily: safeData.font } : {};
  const portfolioColor = safeData.color ? { color: safeData.color } : {};
  const portfolioTextStyle = { ...portfolioFont, ...portfolioColor };

  return (
// ...

Bước 5: Tích Hợp Các Thành Phần Vào Tambo!

Cuối cùng, tích hợp các thành phần portfolio của bạn vào Tambo. Thêm các dòng mã sau vào src\app\interactables\components\portfolio-interactable.tsx.

Nhúng đoạn mã sau vào cuối thành phần của bạn, hoặc chỉ cần sao chép từ repo: Mã nguồn

const InteractablePortfolio = withInteractable(PortfolioInteractableBase, {
  componentName: "Portfolio",
  description: "Portfolio có khả năng tương tác với hộp chát AI",
  propsSchema: portfolioSchema,
});

export function PortfolioInteractable() {
  const [portfolioData, setPortfolioData] = useState(initialData);

  // Xử lý cập nhật từ AI
  const handlePropsUpdate = (newProps: any) => {
    setPortfolioData((prev: any) => ({ ...prev, ...newProps }));
    console.log("Portfolio được cập nhật từ Tambo:", newProps);
  };

  return (
    <InteractablePortfolio
      {...portfolioData}
      onPropsUpdate={handlePropsUpdate}
    />
  );
}

Sau đó, truy cập localhost:3000 để xem ứng dụng chạy trực tiếp.

Kết Luận

Vậy là xong rồi! Nếu ứng dụng không hoạt động sau hướng dẫn từng bước này, mình xin lỗi, kỹ năng lập trình của mình không tốt bằng kỹ năng viết. Bạn có thể sao chép repo bằng các lệnh sau:

git clone https://github.com/fudailzafar/tambo-hack.git

Và thay đổi tệp .env.local của bạn cho API của Tambo.

Cảm ơn bạn đã đọc bài viết này! Nếu bạn có ý kiến, ý tưởng hoặc muốn đóng góp, hãy cho mình biết nhé! 😊

Thực Hành Tốt Nhất

• Luôn kiểm tra tính năng trên nhiều trình duyệt khác nhau để đảm bảo tính tương thích.
• Sử dụng các công cụ như Lighthouse để kiểm tra hiệu suất và tối ưu hóa ứng dụng.

Những Cạm Bẫy Thường Gặp

• Không kiểm tra kỹ lưỡng mã nguồn có thể dẫn đến lỗi trong ứng dụng.
• Bỏ qua việc tối ưu hóa hiệu suất có thể ảnh hưởng đến trải nghiệm người dùng.

Mẹo Tối Ưu Hiệu Suất

• Sử dụng lazy loading cho các thành phần không cần thiết để giảm thời gian tải trang.
• Tối ưu hóa hình ảnh để cải thiện tốc độ tải.

Thảo Luận Vấn Đề

• Nếu bạn gặp vấn đề với mã, hãy kiểm tra lại các bước hoặc tìm kiếm trong cộng đồng để tìm giải pháp.

Câu Hỏi Thường Gặp (FAQ)

1. Làm thế nào để bắt đầu dự án?
   • Bạn chỉ cần làm theo các bước trong hướng dẫn để tạo ứng dụng Tambo.
2. Tôi có thể tùy chỉnh portfolio như thế nào?
   • Bạn có thể tùy chỉnh các thành phần trong mã nguồn để phù hợp với nhu cầu của bạn.

Hy vọng bài viết này sẽ hữu ích cho bạn trong việc xây dựng một portfolio thông minh và đẹp mắt!