搭建个人网站

1. 对标模板网站

manus：https://manus.im/

2. 设计原型图

3. UI设计稿还原

实用cursor + next.js

提示词：

按照一下要求开发前端代码
1. 按照输入的图片的样式与布局
2. 使用next.js框架

npx create-next-app@latest personal-portfolio --typescript --tailwind --app

--typescript：

• 初始化项目时启用 TypeScript 支持。

--tailwind：

• 自动配置 Tailwind CSS，这是一种流行的 CSS 框架，方便快速开发响应式布局。

--app：

• 用 Next.js 的 App Router（基于文件系统的路由）。

• App Router 是 Next.js 13 引入的新特性，允许开发者通过文件夹和文件结构定义路由，而不是传统的 API 路由方式。

3.2 nextjs常用class属性

• 滑动动画效果: transition-all duration-300 transform

<div 
className={`absolute left-0 top-0 w-full bg-white shadow-lg rounded-lg p-4 z-10 transition-all duration-300 transform
${hoverIndex === index 
           ? 'opacity-100 translate-x-0' 
           : 'opacity-0 -translate-x-4 pointer-events-none'
          }`}
>
<p className="text-gray-600 leading-relaxed">{item.description}</p>
</div>

• hover 效果通过hover class控制

<section id="advantage" className="flex-1 border border-gray-200 rounded-lg p-6">
        <h2 className="text-2xl font-bold mb-8">Advantage</h2>
        <ul className="space-y-8">
          {advantages.map((item, index) => (
            <li 
              key={index} 
              className="relative border border-gray-200 rounded-lg"
              onMouseEnter={() => {
                setHoverContent(item.description)
                setHoverIndex(index)
              }}
              onMouseLeave={() => {
                setHoverContent('')
                setHoverIndex(null)
              }}
            >
              <div className="flex items-center gap-2 cursor-pointer hover:bg-gray-100 p-3 rounded-lg transition-colors">
                <span className="w-1.5 h-1.5 bg-black rounded-full"></span>
                <span className="text-lg font-medium">{item.title}</span>
              </div>

              <div 
                className={`absolute left-0 top-0 w-full bg-blue-950 shadow-lg rounded-lg p-4 z-10 transition-all duration-300 transform
                  ${hoverIndex === index 
                    ? 'opacity-100 translate-x-0' 
                    : 'opacity-0 -translate-x-4 pointer-events-none'
                  }`}
              >
                <p className="text-white leading-relaxed">{item.description}</p>
              </div>
            </li>
          ))}
        </ul>
      </section>

• 点击弹窗效果通过modal.tsx文件控制

import React from 'react'

interface ModalProps {
  isOpen: boolean
  onClose: () => void
  title: string
  children: React.ReactNode
}

export default function Modal({ isOpen, onClose, title, children }: ModalProps) {
  if (!isOpen) return null

  return (
    <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
      <div className="bg-white rounded-lg p-6 max-w-2xl w-full mx-4">
        <div className="flex justify-between items-center mb-4">
          <h3 className="text-xl font-bold">{title}</h3>
          <button 
            onClick={onClose}
            className="p-2 hover:bg-gray-100 rounded-full"
          >
            <svg xmlns="http://www.w3.org/2000/svg" className="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
            </svg>
          </button>
        </div>
        <div className="mt-2">
          {children}
        </div>
      </div>
    </div>
  )
} 

• 常用颜色控制，长宽控制

颜色：bg-gray-100
长宽：w-1.5 h-1.5

• 常用布局

grid grid-cols-3
flex flex-col

4. 项目部署

4.1 购买域名

4.2 购买服务器

4.3 部署应用

4.3.1 应用打包

4.3.2 搭建应用环境

• 安装docker

yum -y install yum-utils
yum-config-manager --add-repo http://mirrors.aliyun.com/docker-ce/linux/centos/docker-ce.repo
sudo yum install -y docker-ce
sudo systemctl start docker
sudo systemctl enable docker
sudo docker -v

• 构建dockerfile

# 使用 Node.js 官方镜像作为基础镜像
FROM node:21-alpine

# 设置工作目录
WORKDIR /app

# 复制 package.json 和 package-lock.json
COPY package*.json ./

# 安装依赖
RUN npm install

# 复制所有源代码
COPY . .

# 构建应用
RUN npm run build

# 暴露端口
EXPOSE 3000

# 启动应用
CMD ["npm", "start"]

• 上传打包
• 构建docker镜像

cd /home/fubo/personal-portfolio
# 配置最新的镜像源

vim /etc/docker/daemon.json
------
{
  "registry-mirrors": ["https://mirror.ccs.tencentyun.com"]
}
------

systemctl daemon-reload
systemctl restart docker
docker pull node:21-alpine

docker build -t personal-portfolio .

• 启动容器

docker run -p 3000:3000 personal-portfolio

4.3.3 域名解析

4.3.4 访问网站

http://www.fushiyi.top/