2025 Blog Redesign

嗨👋！很久没和大家见面，临近年底，寒冷的空气和繁忙的工作大大降低了创作的欲望，但也是在这种氛围下，可以让我回过头去重新看看先前的项目。

于是这个月以来，陆陆续续把博客翻新了一下，如果说装修的过程是创造，那翻新的过程就是取舍，就让我介绍一下这个“翻新”的博客。

导航栏

第一眼注意到的应该是导航栏的重新设计。

在先前开源的博客框架 Nextme 中，导航栏放置在底部，采用图标加文字的方式呈现。

先前的导航栏

这种设计更偏向实用性，在切换页面的时候也有一个简单的过渡动画指示。

但在阅读文章时，尤其在移动端上，导航栏与路径栏的位置过于靠近，在屏幕上整体的视觉风格会让人比较有压力，也降低了阅读的体验。

因此在翻新的过程中，采用了激进的的方式：

剔除导航栏中的文字，只保留图标
将导航栏的位置从底部移动至顶部
剔除不必要的模糊效果，采用渐变的方式来提高导航栏与内容的对比度。

于是便有了目前新版的导航栏，在新的导航栏下，阅读时不会再去干扰底部内容的可读性，同时更简洁的导航栏也为以后的新增页面预留了更多的空间。

首页

欢迎动画

在翻新导航栏后，下一步则是添加了首页的欢迎效果。

在首次进入首页时，在顶部会出现一个类似彩虹聚光灯的效果，表示对来访的欢迎👏。

💡这个效果的灵感来自于 Vercel 部署成功后，顶部出现的彩虹条纹提示。

这种提示或者说庆祝效果，不侵入用户的页面内容，十分的自然美观。

在代码实现上，出现与消失效果通过 farmer-motion 控制，内部的颜色变换效果通过 css 实现。

'use client'

import { useStatus } from 'lib/status-context'
import { AnimatePresence, m } from 'framer-motion'

export default function AnimatedHeader() {
  const { status } = useStatus()

  return (
    <AnimatePresence>
      {status && (
        <m.div
          initial={{ opacity: 0 }}
          animate={{ opacity: 1 }}
          exit={{ opacity: 0 }}
          transition={{ duration: 0.8 }}
          className="pointer-events-none z-999 flex h-50 w-50 items-center justify-center"
        >
          <div className="fixed -top-52 right-0 left-0 flex h-[300px] items-center justify-center overflow-hidden blur-[80px] saturate-150">
            <div className="animate-orbit absolute h-[500px] w-[500px]">
              <div className="absolute top-[125px] left-[125px] w-[250px] rounded-full bg-sky-500 pb-[250px]"></div>
            </div>
            <div className="animate-orbit2 absolute h-[250px] w-[500px]">
              <div className="absolute top-[50px] left-[125px] w-[200px] rounded-full bg-fuchsia-500 pb-[200px]"></div>
            </div>
            <div className="animate-orbit3 absolute h-[500px] w-[500px]">
              <div className="absolute top-[250px] left-[150px] w-[150px] rounded-full bg-cyan-400 pb-[150px]"></div>
            </div>
            <div className="animate-orbit4 absolute h-[500px] w-[250px]">
              <div className="absolute top-[125px] left-[62.5px] w-[150px] rounded-full bg-green-400 pb-[150px]"></div>
            </div>
          </div>
        </m.div>
      )}
    </AnimatePresence>
  )
}