diff --git a/.vscode/settings.json b/.vscode/settings.json
index 33d51fd7..4bc787b6 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -49,6 +49,8 @@
     "Meraid",
     "mockjs",
     "mpetazzoni",
+    "noopener",
+    "noreferrer",
     "portfinder",
     "preinstall",
     "purgecss",
@@ -68,5 +70,18 @@
     "xihu",
     "Zhong",
     "zhonghuamen"
-  ]
+  ],
+  "eslint.codeActionsOnSave.rules": null,
+  "eslint.run": "onType",
+  "eslint.options": {
+    "extensions": [
+      ".js",
+      ".vue",
+      ".jsx",
+      ".tsx"
+    ]
+  },
+  "editor.codeActionsOnSave": {
+    "source.fixAll.eslint": true
+  }
 }
diff --git a/package-lock.json b/package-lock.json
index 4587c43d..9405b68d 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -57,6 +57,7 @@
         "react-icons": "^4.10.1",
         "react-loading-skeleton": "^3.3.1",
         "react-markdown": "^8.0.7",
+        "react-parallax-tilt": "^1.7.164",
         "react-player": "^2.12.0",
         "react-qr-code": "^2.0.11",
         "react-redux": "^8.1.1",
@@ -65,7 +66,6 @@
         "react-scroll-to-bottom": "^4.2.0",
         "react-sticky": "^6.0.3",
         "react-sticky-ts": "^1.0.7",
-        "react-tilt": "^1.0.2",
         "remark-gfm": "^3.0.1",
         "remove-markdown": "^0.5.0",
         "sanitize.css": "^13.0.0",
@@ -8581,6 +8581,7 @@
       "version": "18.2.7",
       "resolved": "https://registry.npmmirror.com/@types/react-dom/-/react-dom-18.2.7.tgz",
       "integrity": "sha512-GRaAEriuT4zp9N4p1i8BDBYmEyfo+xQ3yHjJU4eiK5NDa1RmUZG+unZABUTK4/Ox/M+GaHwb6Ow8rUITrtjszA==",
+      "devOptional": true,
       "dependencies": {
         "@types/react": "*"
       }
@@ -29958,6 +29959,15 @@
       "resolved": "https://registry.npmmirror.com/react-merge-refs/-/react-merge-refs-1.1.0.tgz",
       "integrity": "sha512-alTKsjEL0dKH/ru1Iyn7vliS2QRcBp9zZPGoWxUOvRGWPUYgjo+V01is7p04It6KhgrzhJGnIj9GgX8W4bZoCQ=="
     },
+    "node_modules/react-parallax-tilt": {
+      "version": "1.7.164",
+      "resolved": "https://registry.npmmirror.com/react-parallax-tilt/-/react-parallax-tilt-1.7.164.tgz",
+      "integrity": "sha512-ehKIYYPol5/vp5misVDpmESVFLwjCClieHxzjPtZSsSeR6+m/l7/jp7gYl4KPR3vA3lqi8griNi3c1T4tDUBXA==",
+      "peerDependencies": {
+        "react": "^15.0.0 || ^16.0.0 || ^17.0.0 || ^18.0.0",
+        "react-dom": "^15.0.0 || ^16.0.0 || ^17.0.0 || ^18.0.0"
+      }
+    },
     "node_modules/react-player": {
       "version": "2.12.0",
       "resolved": "https://registry.npmmirror.com/react-player/-/react-player-2.12.0.tgz",
@@ -30208,17 +30218,6 @@
         "loose-envify": "^1.1.0"
       }
     },
-    "node_modules/react-tilt": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmmirror.com/react-tilt/-/react-tilt-1.0.2.tgz",
-      "integrity": "sha512-21tUUsmuw5id/6NDtKqwYTG4taVnw+BoUwIG6YsgPC9GI6cx4BnBuSqgriQYAYcv3bdGNzecaBL+rvQRAm28bg==",
-      "peerDependencies": {
-        "@types/react": "^18.0.29",
-        "@types/react-dom": "^18.0.11",
-        "react": "^18.2.0",
-        "react-dom": "^18.2.0"
-      }
-    },
     "node_modules/react-use-measure": {
       "version": "2.1.1",
       "resolved": "https://registry.npmmirror.com/react-use-measure/-/react-use-measure-2.1.1.tgz",
diff --git a/package.json b/package.json
index 258e2b01..f24dd73a 100644
--- a/package.json
+++ b/package.json
@@ -263,6 +263,7 @@
     "react-icons": "^4.10.1",
     "react-loading-skeleton": "^3.3.1",
     "react-markdown": "^8.0.7",
+    "react-parallax-tilt": "^1.7.164",
     "react-player": "^2.12.0",
     "react-qr-code": "^2.0.11",
     "react-redux": "^8.1.1",
@@ -271,7 +272,6 @@
     "react-scroll-to-bottom": "^4.2.0",
     "react-sticky": "^6.0.3",
     "react-sticky-ts": "^1.0.7",
-    "react-tilt": "^1.0.2",
     "remark-gfm": "^3.0.1",
     "remove-markdown": "^0.5.0",
     "sanitize.css": "^13.0.0",
diff --git a/src/pages/layout/primaryNav/index.jsx b/src/pages/layout/primaryNav/index.jsx
index 8b78f76d..59c20440 100644
--- a/src/pages/layout/primaryNav/index.jsx
+++ b/src/pages/layout/primaryNav/index.jsx
@@ -8,7 +8,7 @@ const PrimaryNav = () => {
   const redirectTo = (path) => {
     navigate(path)
   }
-  const goToSkylin = () => {
+  const goToWkylin = () => {
     window.open(`https://skyline.github.com/wkylin/${new Date().getFullYear() - 1}`, '_blank')
   }
 
@@ -18,7 +18,7 @@ const PrimaryNav = () => {
         <Button type="link" icon={<CodeOutlined />} onClick={() => redirectTo('dashboard')}>
           多路由设置
         </Button>
-        <Button type="link" icon={<TeamOutlined />} onClick={goToSkylin}>
+        <Button type="link" icon={<TeamOutlined />} onClick={goToWkylin}>
           Skyline for wkylin.w
         </Button>
       </Space>
diff --git a/src/pages/tilt/index.jsx b/src/pages/tilt/index.jsx
index d9047035..7be689e8 100644
--- a/src/pages/tilt/index.jsx
+++ b/src/pages/tilt/index.jsx
@@ -1,33 +1,17 @@
 import React from 'react'
 import FixTabPanel from '@stateless/FixTabPanel'
-import { Tilt } from 'react-tilt'
-import wkylinPng from '@assets/images/wkylin.png'
+import Tilt from 'react-parallax-tilt'
 
-const defaultOptions = {
-  reverse: false, // reverse the tilt direction
-  max: 35, // max tilt rotation (degrees)
-  perspective: 1000, // Transform perspective, the lower the more extreme the tilt gets.
-  scale: 1.1, // 2 = 200%, 1.5 = 150%, etc..
-  speed: 1000, // Speed of the enter/exit transition
-  transition: true, // Set a transition on enter/exit.
-  axis: null, // What axis should be disabled. Can be X or Y.
-  reset: true, // If the tilt effect has to be reset on exit.
-  easing: 'cubic-bezier(.03,.98,.52,.99)', // Easing on enter/exit.
-}
+import wkylinPng from '@assets/images/wkylin.png'
 
 const ReactTilt = () => (
   <FixTabPanel>
     <h3>Welcome to react tilt!</h3>
-    <Tilt
-      options={defaultOptions}
-      className="bg-[#55467c] p-2 rounded-2xl w-full flex items-center justify-center"
-      style={{ height: 248, width: 248 }}
-    >
-      <div className="text-white">
-        <img src={wkylinPng} alt="wkylin.w" />
-        <h2>wkylin.w</h2>
-      </div>
-    </Tilt>
+    <section style={{ width: 200, height: 200 }}>
+      <Tilt tiltMaxAngleX={40} tiltMaxAngleY={40} perspective={1000} scale={1.1} glareEnable={true}>
+        <img src={wkylinPng} alt="wkylin.w" width="200" height="200" />
+      </Tilt>
+    </section>
   </FixTabPanel>
 )