feat: add avatar initial transition

.eslintrc.cjs

@@ -24,7 +24,7 @@ const config = {
  parserOptions: {
  project: path.join(__dirname, 'tsconfig.json'),
  },
- plugins: ['@typescript-eslint', 'simple-import-sort', 'unused-imports'],
+ plugins: ['turbo', '@typescript-eslint', 'simple-import-sort', 'unused-imports'],
  extends: ['next/core-web-vitals', 'plugin:@typescript-eslint/recommended'],
  rules: {
  '@typescript-eslint/consistent-type-imports': [

components/layouts/Header.tsx

@@ -159,12 +159,19 @@ export function Header() {
  'var(--header-position)' as React.CSSProperties['position'],
  }}
  >
- <div
+ <motion.div
  className="top-[var(--avatar-top,theme(spacing.3))] w-full select-none"
  style={{
  position:
  'var(--header-inner-position)' as React.CSSProperties['position'],
  }}
+ initial={{ opacity: 0, y: 15 }}
+ animate={{ opacity: 1, y: 0 }}
+ transition={{
+ type: 'spring',
+ damping: 30,
+ stiffness: 200,
+ }}
  >
  <motion.div
  className="relative inline-flex"
@@ -194,7 +201,7 @@ export function Header() {
  />
  </motion.div>
  </motion.div>
- </div>
+ </motion.div>
  </Container>
  </>
  )}
@@ -215,7 +222,16 @@ export function Header() {
  }}
  >
  <div className="relative flex gap-4">
- <div className="flex flex-1">
+ <motion.div
+ className="flex flex-1"
+ initial={{ opacity: 0, y: 15 }}
+ animate={{ opacity: 1, y: 0 }}
+ transition={{
+ type: 'spring',
+ damping: 30,
+ stiffness: 200,
+ }}
+ >
  <AnimatePresence>
  {!isHomePage && (
  <motion.div
@@ -229,7 +245,7 @@ export function Header() {
  </motion.div>
  )}
  </AnimatePresence>
- </div>
+ </motion.div>
  <div className="flex flex-1 justify-end md:justify-center">
  <NavigationBar.Mobile className="pointer-events-auto md:hidden" />
  <NavigationBar.Desktop className="pointer-events-auto hidden md:block" />

next.config.mjs

@@ -8,10 +8,6 @@ import { get } from '@vercel/edge-config'
 
 /** @type {import('next').NextConfig} */
 const nextConfig = {
- // experimental: {
- // serverActions: true,
- // },
-
  images: {
  domains: ['cdn.sanity.io'],
  },

package.json

@@ -52,6 +52,7 @@
  "autoprefixer": "^10.4.14",
  "eslint": "^8.39.0",
  "eslint-config-next": "^13.4.0",
+ "eslint-config-turbo": "^1.9.3",
  "eslint-plugin-prettier": "^4.2.1",
  "eslint-plugin-simple-import-sort": "^10.0.0",
  "eslint-plugin-unused-imports": "^2.0.0",