首页 - 赛乐网

项目介绍

这是一个基于React和Ant Design开发的个人主页网站。该网站的主要特点是简洁、美观，同时提供了丰富的功能模块，包括个人信息展示、作品展示、联系方式等。用户可以通过简单的拖拽操作来完成页面的布局，从而轻松构建出属于自己的个人主页。

主要组件

• 个人信息组件：包括姓名、头像、简介等信息，用户可以在这里展示自己的基本情况。
• 作品集组件：包括图片轮播、文字描述等，用户可以在这里展示自己的作品集，吸引潜在的合作伙伴或客户。
• 联系方式组件：包括电话、邮箱等信息，方便他人与用户取得联系。

技术栈

• 前端框架：React
• UI库：Ant Design
• CSS样式：使用Ant Design提供的.anticon类进行图标绘制，以及.css-3m4nqy选择器来实现特定的样式效果

使用方法

1. 首先需要在本地安装React和Ant Design库，可以使用以下命令进行安装：

npm install react antd

1. 在项目根目录下创建一个名为App.js的文件，编写如下代码：

import React from 'react';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
import { Home, About, Portfolio, Contact } from './pages';
import 'antd/dist/antd.css';
import './App.css';

function App() {
return (
<Router>
<div className="App">
<Switch>
<Route path="/" exact component={Home} />
<Route path="/about" component={About} />
<Route path="/portfolio" component={Portfolio} />
<Route path="/contact" component={Contact} />
</Switch>
</div>
</Router>
);
}

export default App;

1. 在项目根目录下创建四个页面文件：Home.js、About.js、Portfolio.js和Contact.js,分别编写对应页面的内容。例如：Home页面内容如下：

”`javascript import React from ‘react’; import { useParams } from ‘react-router-dom’; import { PageHeaderWrapper } from ‘antd’; import { UserOutlined } from ‘@ant-design/icons’; import ‘antd/dist/antd.css’; import styles from ‘./Home.css’; const { Title } = PageHeaderWrapper; const homeData = [

return (