在茫茫的网络世界里,我找到了一个属于自己的小天地。那里不仅有我独特的创意,还有我内心深处的声音。我的个人网页是一段关于探索创意之旅的故事,让我带你一窥我在这个奇妙旅程中的所见所闻。
声明:这个网页是使用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). 首页板块 ![](https://i-blog.csdnimg.cn/blog_migrate/0e8c09df8a185d1b3cd12e1f1868e59e.gif)
这里有意思的点在于使用了ChatGPt的打字效果,虽然老早就有,但还是它比较有特点,使用的第三方库是 typed.js 使用方法也很简单,直接去看就行,它还很细心给封装了一个简单的hook,真心不错呦~
(3). 关于 ![](https://i-blog.csdnimg.cn/blog_migrate/a8fef101220b0ccce5c8fa8a6afd2b66.png)
这一部分没有什么特殊的东西,就是简单的布局及文字,不过在这里可以看到有大量的类似于表情的输入,当时看到别人居然可以输入表情感觉很好玩,自己也就浅弄了一下,不会的小伙伴抓紧学习来,让你的内容变得更丰富多彩吧~
由于我使用的是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 这个可以更直观的看到展示的效果,可自行去选择效果,不用一个个试效果,很好用
4. 写在最后
由于官网是在工作之余写的,想写就写一会,不过由于太懒中间也是断断续续的,搞了两三个星期才真正做出来,借鉴了好些位大佬的网站(希望大佬勿怪)~,如果你对我的个人主页感兴趣也可以直接用
第一次使用React做一个小项目,之前也对这个框架不太了解,所以应该会有好多优化的地方没有做,这可能对于一些经常写React且做优化的同学来说,代码可能有点烂,仅供批判,但我不接受(((o(*゚▽゚*)o)))♡,学习之后有空再进行优化吧
整个项目用到的技术:React18.x、TS、Webpack、AntDesign、Scss
项目源码:前端奇遇记-个人主页源代码 喜欢的话可以点个Star ☆ 呀,欢迎各位来魔改打造属于自己的跟人主页,虽然我的代码也不怎么样(#^.^#)
交换友链:如果你觉得我的页面还可以,在评论区留言你的个人主页地址,互相挂个友链友好交流一下~