一个简单个人简历网站

效果图

简介

技术栈：

• react
• react-router-dom
• redux
• antd
• react-transition-group
• react-motion

这个项目是使用create-react-app脚手架创建的，我在这个项目里使用了less。不想 eject 项目，但想对项目中 wepback 进行自定义配置，于是我使用了craco。

package.json中

 "devDependencies": {
    "@craco/craco": "^6.2.0",
    "craco-less": "^1.18.0"
  }

然后在根目录下新建craco.config.js文件
内容：

const CracoLessPlugin = require('craco-less');
module.exports = {
    plugins: [
        {
            plugin: CracoLessPlugin,
            options: {
                lessLoaderOptions: {
                    lessOptions: {
                        javascriptEnabled: true,
                    },
                },
            },
        },
    ],
}

接下来更改package.json中的启动参数：

"scripts": {
    "eject": "react-scripts eject",
    "start": "craco start",
    "build": "craco build",
    "test": "craco test"
  },

最后就可以愉快的使用less啦。

动画

第一个模块数字动画使用的是react-motion制作的。

组件加载

在页面里所有组件均使用异步加载，所以首屏页面出现非常快。
异步加载使用react.lazy配合Suspense。

封装

import {Suspense} from 'react'
import Loading from "./Loading/Loading";

export const SuspenseComponent = (props,Component,minHeight="300px",toast='组件载入中...')=>
    <Suspense fallback={<Loading minHeight={minHeight} toast={toast}/>}>
        <Component {...props}/>
    </Suspense>

使用

const Card = props=>SuspenseComponent(props,lazy(()=>import("../../components/Card/Card")),'300px');

<Col xs={24} sm={24} md={12} lg={8} xl={8}>
    <Card/>
</Col>

账号注册和登录

在账号的注册上我使用的是发送邮件的方式，需要配置一下邮箱的SMTP功能。

体验地址

点我访问网站 可以测试一下留言功能