探索创意之旅：打造个人网页的精彩奇遇

置顶前端奇遇记

已于 2023-08-30 11:49:07 修改

阅读量183

点赞数

分类专栏： React学习手札文章标签： reactjs typescript

于 2023-08-30 11:38:23 首次发布

本文链接：https://blog.csdn.net/laitymm/article/details/132565104

版权

React学习手札专栏收录该内容

3 篇文章 0 订阅

订阅专栏

在茫茫的网络世界里，我找到了一个属于自己的小天地。那里不仅有我独特的创意，还有我内心深处的声音。我的个人网页是一段关于探索创意之旅的故事，让我带你一窥我在这个奇妙旅程中的所见所闻。

声明：这个网页是使用React18.x写的，由于我平常都是使用Vue，所以若是使用的某些方式不正确或者代码冗余请勿怪~

个人主页地址：前端奇遇记-个人主页（暂时没那域名服务器搭建条件，所以依托于github进行搭建）

如果你也感兴趣使用github搭建你自己的个人主页可以搜一下，很简单，就不过多赘述了~

好了好了，马上开始正文了~~

-先看整体效果

前端奇遇记-个人主页

1. 确定个人主页的各个板块以及构思所写内容

确定板块这个事儿，参考了许多大佬的个人主页（在此希望大佬勿怪），发现越厉害的大佬个人的板块越精简，真的是大道至简啊，所以虽然我就一小白白，当然也没有太多的内容能写，所以也就确定了四个板块：首页、关于、项目、找我

2. 确定个人主页的整体风格

作为一个纯前端类型的开发，对于UI设计毫无头绪，也没有任何美感o(╥﹏╥)o，不过俗话说：穷学生工具多。

Dribbble 大家可以自行去上面找找符合自己审美的设计稿，免费呦~~

3. 开始绘制自己的个人主页

(1). 头、底部

不论是绘制什么页面，有了设计稿，这两部分都是最容易确定的，所以也就从这两部分先下手吧

头部相对来说比较简单，没什么好说的，直接看底部吧

底部主要分为两个部分

下面对于常常用React的同学有木有很熟悉，哈哈，就是用了antd Tooltip(｡◕ˇ∀ˇ◕)

上面线性动画它并不是一个 Gif 图片，而是 Lottie 动画。说白了就是高级点的Gif动画，同样它也是有网站的 Featured 可以查找你喜欢的，使用方式见下面代码

import React, { FC } from 'react'
import Lottie from 'react-lottie'
import Gif from '下载的json文件地址'

const Options = {
  loop: true,
  autoplay: true,
  animationData: Gif,
  rendererSettings: {
    preserveAspectRatio: 'xMidYMid slice',
  },
}

const Demo: FC<Props> = () => {
    return <Lottie options={Options} height={120} width={120} />
}

(2). 首页板块

这里有意思的点在于使用了ChatGPt的打字效果，虽然老早就有，但还是它比较有特点，使用的第三方库是 typed.js 使用方法也很简单，直接去看就行，它还很细心给封装了一个简单的hook，真心不错呦~

(3). 关于

这一部分没有什么特殊的东西，就是简单的布局及文字，不过在这里可以看到有大量的类似于表情的输入，当时看到别人居然可以输入表情感觉很好玩，自己也就浅弄了一下，不会的小伙伴抓紧学习来，让你的内容变得更丰富多彩吧~

由于我使用的是VScode编辑器写的，那我就以它为例了，其他编辑器可自行百度

- 下载表情输入对应的插件

我选择的表情插件是 Emoji 看起来它的表情更丰富写，基本能够满足我了，其他的当然也行不过可能用法不一

-插件使用方法

在全局中使用快捷键 Ctrl + P 弹出搜索框输入 >Emoji:Insert emoji 即可进行表情的选择了，输入位置即使在Ctrl + P 之前光标所在位置

-拓展

在编辑器里由于表情特别多，有的显示还不太友好，当然我们也有网站对应这些表情一共我们更好的使用呦~

🎁 Emoji 点击表情即可复制表情代码，然后按照使用方法输入搜索即可

(4). 项目

项目中属实是不知道该怎样设计的花里胡哨，也就没做过多的功能，只做了点击弹出模态框进行展示，模态框使用的是antDesign的Modal组件

(5). 页面动效

页面中所有的动效都是简单的使用 react-reveal 使用方法同样参考链接所指，很简单不做过多赘述，不过值得一提的是，在引入的时候再编辑器里会报错，解决办法也很简单在 react-app-env.d.ts 这个文件夹里声明使用的动效组件即可例： declare module "react-reveal/Fade";

当然，效果很多，Fade - React Reveal 这个可以更直观的看到展示的效果，可自行去选择效果，不用一个个试效果，很好用