一个简单个人简历网站

效果图

简介

技术栈：

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功能。

体验地址

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

一个简单个人简历网站相关推荐

php实现一个简单的购物网站
实现一个简单的购物网站一.考试时间:8小时二.开发工具:DW 三.数据库:见附件四.需要实现的页面: Index:浏览商品页面,显示商品列表,用户可以点击"购买". View ...
用php建设一个简单的网站,PHP_PHP新手上路（六），建设一个简单交互的网站(二) 5 - phpStudy...
PHP新手上路(六) 建设一个简单交互的网站(二) 5.5 计数器让我们在首页上加上一个计数器.这个例子已经被讲过多次了,但是还是有利于演示怎样读写文件以及创建自己的函数.counter.inc包含 ...
运用Nginx搭建一个简单的个人网站
目录一.目的二.完成步骤 1.安装nginx 2.设置Nginx 3.创建服务器块三.打开网站四.总结五.参考资料一.目的尽你所学(采用html.或CSS.或Javascript等)完成 ...
如何使用 Github 页面建立一个简单的免费网站
网站每天都变得更容易托管,许多服务提供的套餐起价不到 5 美元.但是,如果您只想要一个不会看到大量流量的简单网站,您可以免费在 Github 上托管,即使使用您自己的域也是如此. 什么是 Github ...
如何编写一个简单的企业门户网站（静态）
1.环境要求: 开发工具及版本:Sublime3 开发使用的技术:CSS+HTML+JS 2.准备工作: 创建必须的文件和文件夹打开Sublime 在index页面引用js和css 3.详细设计(代 ...
从0开始利用宝塔linux面板+DSShop搭建一个简单的购物网站
宝塔linux面板的安装详情在这德尚官网利用DSSshop搭建一个单店铺商城在软件商店一键部署找到DSSshop点击一键安装在网站设置出添加一下ip 添加完之后在浏览器上方输入ip地址进行安 ...
nginx配置一个简单的php网站遇到的问题
安装完nginx后,想查看nginx的位置,可以通过查看软件安装路径命令 whereis nginx 这里的/usr/local/nginx/ 即是nginx的安装位置,配置文件在 /usr/loca ...
django 引入同目录下py文件_快速开发一个简单的Django网站
一.创建工程 1. 在cmd中输入:django-admin.py startproject projectname 2. 修改settings.py文件:在installedapp中增加需要创建的应 ...
一个简单的音乐网站设计与实现(HTML+CSS)---爵士乐音乐 3页
⛵ 源码获取文末联系 ✈ Web前端开发技术描述网页设计题材,DIV+CSS 布局制作,HTML+CSS网页设计期末课程大作业 | 学生管理系统网页设计 | OA管理系统 | 后台管理模板 | ...

一个简单个人简历网站

效果图

简介

动画

组件加载

封装

使用

账号注册和登录

体验地址

一个简单个人简历网站相关推荐

最新文章

热门文章