這個(gè)是首頁(yè)截圖，當(dāng)封面，接下來(lái)我簡(jiǎn)單的說(shuō)明一下我制作這個(gè)網(wǎng)站的全部過(guò)程。如果你也想寫(xiě)自己的個(gè)人主頁(yè)，希望這篇文章可以給你一些靈感。

這個(gè)是個(gè)人主頁(yè)地址www.zpzpup.com/^[1]2.0版本

以前的1.0版本地址www.zpzpup.com/blog^[2]

1. 確定整個(gè)個(gè)人頁(yè)板塊組合

例如我個(gè)人頁(yè)的板塊就分為了4個(gè)大的板塊首頁(yè) 關(guān)于項(xiàng)目找我，功能我就不一一寫(xiě)了，大家可以直接去網(wǎng)站主頁(yè)看看

2. 構(gòu)思整體的風(fēng)格

這里大家可以去dribbble^[3]找找靈感

一開(kāi)始我本來(lái)打算把blog頁(yè)進(jìn)行重構(gòu)，但是發(fā)現(xiàn)各種各樣寫(xiě)blog的地方實(shí)在是不少，想了一下，還是算了所以最終就決定做一個(gè)一屏展示頁(yè)

我借鑒了這個(gè)設(shè)計(jì)圖

大家可以自己搜索一下不會(huì)設(shè)計(jì)還不簡(jiǎn)單借鑒就完了哈哈哈哈哈

3. 頭部跟尾部

最開(kāi)始網(wǎng)站確認(rèn)的是頭跟尾部

頭部

這里加入了2個(gè)小動(dòng)畫(huà) 一個(gè)是波紋動(dòng)畫(huà)

.round {
  width: 28px;
  height: 28px;
  background-color: rgba(74, 130, 216, .2);
  border-radius: 50%;
  display: inline-block;
  transition: all 1s;
  position: relative;
  &::before {
     content: "";
     position: absolute; // 定位到同元素上
     top: -3px;
     left: -3px;
     width: 100%;
     height: 100%;
     border: 3px solid rgba(74, 130, 216, .2); // 波紋
     border-radius: 50%; // 變圓
     background: transparent; // 不要背景顏色
     animation: pulse 2s cubic-bezier(.57, .06, .27, .84) infinite; // pulse 動(dòng)畫(huà)
     z-index: 1; // 放在原來(lái)元素之上
  }
}
@keyframes pulse {
 0% {
   transform: scale(1);
   border-color: rgba(74, 130, 216, .2);
 }
 100% {
   transform: scale(1.2); // 放大
   border-color: transparent; // 透明
 }
}

還有就是一個(gè)簡(jiǎn)單的位移動(dòng)畫(huà) 這里就不貼代碼了有興趣的可以去自己看github^[4]喜歡可以給個(gè)star ??

導(dǎo)航切換這里我用了一個(gè)slider元素進(jìn)行過(guò)度

<div className={styles.slider} style={{ left }}></div>

&:nth-child(1):hover~.slider {
  left: 0px;
}
&:nth-child(2):hover~.slider {
  left: 75px;
}
&:nth-child(3):hover~.slider {
  left: 150px;
}
&:nth-child(4):hover~.slider {
  left: 225px;
}

尾部

尾部這里分成了2塊

左邊用了一個(gè)簡(jiǎn)單的

關(guān)于方塊的動(dòng)畫(huà)，它并不是一個(gè) Gif 圖片，而是 Lottie 動(dòng)畫(huà)。這是 Airbnb 開(kāi)源的一套跨平臺(tái)的完整的動(dòng)畫(huà)效果解決方案。說(shuō)人話：就是高級(jí)版的 Gif。動(dòng)畫(huà)內(nèi)容是通過(guò) JSON 文件來(lái)驅(qū)動(dòng)的，可以在 \[Lottie 官網(wǎng)\]^[5]

下面使用了提示有木有很熟用的antd Tooltip??

右邊板塊就更簡(jiǎn)單了

添加了wobble，中文名是 擺動(dòng)的動(dòng)畫(huà)。

@keyframes wobble {
  0% {
    transform: translateY(0%);
  }

  15% {
    transform: translateY(-25%);
  }

  30% {
    transform: translateY(20%);
  }

  45% {
    transform: translateY(-15%);
  }

  60% {
    transform: translateY(10%);
  }

  75% {
    transform: translateY(-5%);
  }

  100% {
    transform: translateY(0%);
  }
}

4. home板塊

當(dāng)初設(shè)計(jì)這里，弄了很久一直沒(méi)弄滿意，做了一版又一版總有不滿意的地方，不過(guò)沒(méi)事古話說(shuō)得好只要功夫深，鐵杵磨成針

左邊打字板塊使用的打字效果 可以使用 typed.js^[6] 這個(gè)小庫(kù)，用起來(lái)非常簡(jiǎn)單，這是官方的小 Demo：

// Can also be included with a regular script tag
import Typed from 'typed.js';
var options = {
 strings: ['<i>First</i> sentence.', '&amp; a second sentence.'],
 typeSpeed: 40
};
var typed = new Typed('.element', options);

這里封裝成了hooks

import { useEffect, useRef } from "react";
import Typed, { TypedOptions } from "typed.js";
const useTyped = (strings: string[], extra?: TypedOptions) => {
 const el = useRef<HTMLElement | null>(null);
 const typed = useRef<Typed | null>(null);
 useEffect(() => {
 const options = {
 strings,
 typeSpeed: 100,
 backSpeed: 60,
 ...extra,
 };
 typed.current = new Typed(el.current || "", options);
 return () => typed.current?.destroy();
 }, [strings]);
 return el;
};
export default useTyped;

使用：

const el = useTyped(strings, { loop: true });
<Col span={24} md={12} className={styles.intro}>
 <p>我是Jabin，</p>
 <p>
 一個(gè) 前端工程師，寫(xiě){" "}
 <span className={styles.react}>React/Vue</span> 的。
 </p>
 <p>喜歡簡(jiǎn)約設(shè)計(jì) ??，</p>
 <p>
 偶爾
 <span className={styles.sometime} ref={el} />
 </p>
 </Col>

右邊火箭推進(jìn)器后面的火也是使用了Lottie動(dòng)畫(huà)，這個(gè)我也封裝一個(gè)hook直接使用

import { useEffect, useRef } from "react";
import lottie, { AnimationConfigWithData } from "lottie-web";

const useLottie = (path: string, extra?: AnimationConfigWithData) => {
  let lottieRef = useRef<HTMLDivElement | null>(null);

  useEffect(() => {
    if (lottieRef.current) {
      lottie.loadAnimation({
        container: lottieRef.current,
        path,
        renderer: "svg",
        loop: true,
        autoplay: true,
        ...extra,
      });
    }
    return () => {
      lottieRef.current = null
    }
  }, []);

  return lottieRef;
};

export default useLottie;

//使用：
const fireRef = useLottie(fireLottie);
  
<div className={styles.fire} ref={fireRef}></div>

相信到這大家一看就懂。

5. about 板塊

3D圖片大家可以去dribbble^[7]上找相信總有你滿意的哈哈哈哈哈哈

這個(gè)板塊就沒(méi)啥特別好介紹的大家一開(kāi)就懂

6. project 板塊

這里用了grid布局，hover效果大家可以去一些大網(wǎng)站白嫖或者自己在box-shadow generator調(diào)整一個(gè)自己滿意的陰影。

這個(gè)板塊因?yàn)閳D片比較多，并且圖片質(zhì)量相對(duì)較高，做了對(duì)應(yīng)的圖片優(yōu)化

把圖片轉(zhuǎn)換成了webp格式,這里推薦大家一個(gè)網(wǎng)站進(jìn)行圖片轉(zhuǎn)換cloudconvert^[8]
做了對(duì)應(yīng)的圖片懶加載，大家可以參考這篇文章juejin.cn/post/684490…^[9]

7. contact 板塊

這個(gè)板塊就是底部了上面介紹了就不重復(fù)說(shuō)明了

8. 最后

寫(xiě)到這基本上就差不多了，寫(xiě)這個(gè)個(gè)人網(wǎng)站總體時(shí)間斷斷續(xù)續(xù) 大概2周左右，中間設(shè)計(jì)構(gòu)思花了挺多時(shí)間到，大家可以多去參考一下別人的網(wǎng)站，發(fā)現(xiàn)一些好玩的效果都可以借鑒過(guò)來(lái)。

構(gòu)思網(wǎng)站真的是一個(gè)挺麻煩的事情，既要花里胡哨又不能太花里胡哨的感覺(jué) ，大家明白吧??

然后整個(gè)網(wǎng)站主要使用技術(shù)棧Reactantdscssvitetypescript

優(yōu)化方面主要是

組件用了lazy
圖片轉(zhuǎn)換webp
圖片懶加載
字體庫(kù)使用了fontmin^[10]進(jìn)行了壓縮，壓縮下來(lái)只有9k 還是挺滿意的畢竟只用了幾個(gè)字，引入整個(gè)字體就不太劃算了
然后就是加載用Suspense做了個(gè)svg動(dòng)畫(huà)loading

其實(shí)可以做優(yōu)化的地方還挺多，比如圖片走cdn，甚至css js都可以走cdn ，嗯反正是想到哪就寫(xiě)到哪

最后喜歡的話就在我的 github^[11] 上點(diǎn)個(gè) Star ?? 吧，歡迎 fork 和魔改

參考資料

[1]

https://www.zpzpup.com/

[2]

https://www.zpzpup.com/blog

[3]

https://dribbble.com/

[4]

https://github.com/JabinPeng/pengBlog

[5]

https://lottiefiles.com/featured

[6]

https://link.zhihu.com/?target=https%3A//github.com/mattboldt/typed.js/

[7]

https://dribbble.com/

[8]

https://cloudconvert.com/png-to-webp

[9]

https://juejin.cn/post/6844904147746029581

[10]

https://link.zhihu.com/?target=https%3A//github.com/ecomfe/fontmin

[11]