perf: remove unused codes, add next config and metadata

xxrjun · May 22, 2023 · a09aaa2 · a09aaa2
1 parent 9caab7e
commit a09aaa2
Show file tree

Hide file tree

Showing 14 changed files with 310 additions and 311 deletions.
diff --git a/README.md b/README.md
@@ -56,6 +56,13 @@
   - 有取得原作者授權許可，非常感謝!
   - 原作者是使用 Sanity.io 作為 CMS，為求簡便我是使用 GitHub API 導入專案資料，缺點是無法取得專案圖片。
 
+與原作差別:
+
+- 結合兩者，以後者專案為基底新增 3D 動畫
+- 修正 Canvas 會被右鍵拖走的問題
+- 新增 metadata 優化網站 SEO
+- 使用 GitHub API 取得專案資料
+
 ### 其他參考資料 Other References
 
 - [Next.js Docs](https://nextjs.org/docs)
@@ -65,6 +72,7 @@
 - [framer-motion Docs](https://www.framer.com/motion/)
 - [Three.js Docs](https://threejs.org/docs/index.html#manual/en/introduction/Creating-a-scene) - 3D 動畫框架
 - [Sketchfab](https://sketchfab.com/) - 3D 模型下載網站
+- Favicon 使用 <a href="https://www.flaticon.com/free-icons/cross" title="cross icons">Cross icons created by Pixelmeetup - Flaticon</a>
 
 ## Getting Started
 

diff --git a/app/layout.js b/app/layout.js
@@ -7,7 +7,6 @@ import { LayoutProvider } from "context/layout";
 import { theme, navigationHeight, footerHeight } from "utils/theme-config";
 import Loading from "./loading";
 import "./global.css";
-// export const metadata = { ...AppMetadata };
 
 export default function RootLayout({ children }) {
   return (

diff --git a/app/page.js b/app/page.js
@@ -1,12 +1,40 @@
-"use client";
-
 import {
   WelcomeSection,
   AboutSection,
   TechnologiesSection,
   ProjectsSection,
 } from "app/sections";
 
+// Metadata
+const author = "xxrjun";
+const description = "A student who loves new technology and programming.";
+const url = "https://xxrjun.vercel.app/";
+export const metadata = {
+  title: {
+    default: `${author} | Portfolio`,
+  },
+  description: description,
+  icons: {
+    icon: "/favicon.png",
+  },
+  keywords: [
+    "xxrjun",
+    "Portfolio website",
+    "React Portfolio",
+    "Next.js Portfolio",
+  ],
+  creator: author,
+  authors: [{ name: author, url: url }],
+  openGraph: {
+    title: `${author} | Portfolio`,
+    description: description,
+    url: url,
+    siteName: `${author} | Portfolio`,
+
+    locale: "en-US",
+    type: "website",
+  },
+};
 
 export default function Page() {
   return (

diff --git a/app/projects/components/Filter.jsx b/app/projects/components/Filter.jsx
diff --git a/app/projects/page.js b/app/projects/page.js
diff --git a/app/sections/introduction/index.jsx b/app/sections/introduction/index.jsx
@@ -2,8 +2,6 @@
 
 import { useEffect, useState, useRef, useContext } from "react";
 import { LazyMotion, domAnimation, useInView } from "framer-motion";
-import Link from "next/link";
-
 import {
   Flex,
   Heading,
@@ -12,7 +10,6 @@ import {
   Text,
   useColorModeValue,
 } from "@chakra-ui/react";
-import { useScrollTo } from "hooks";
 import { LayoutContext } from "context/layout";
 import { DesktopCanvas } from "@/components";
 import { motion } from "framer-motion";
@@ -22,7 +19,6 @@ export function WelcomeSection() {
   const { introRef, setIntroHeight } = useContext(LayoutContext);
   const isInView = useInView(ref, { once: true });
 
-  const { scrollToEl } = useScrollTo();
   const subTitleColor = useColorModeValue("blackAlpha.600", "whiteAlpha.600");
   const highlightColor = useColorModeValue("purple.500", "purple.500");
 
@@ -36,11 +32,11 @@ export function WelcomeSection() {
   const handleOnClick = (e) => {
     e.preventDefault();
 
-		scroll({
-			top: 680,
-			behavior: "smooth"
-		});
-  }
+    scroll({
+      top: 680,
+      behavior: "smooth",
+    });
+  };
 
   useEffect(() => {
     let interval = setInterval(() => {
@@ -147,20 +143,23 @@ export function WelcomeSection() {
         {/* Canvas */}
         <DesktopCanvas />
 
-        <div className="absolute xs:bottom-10 bottom-16 w-full flex justify-center items-center" onClick={handleOnClick}>
-            <div className="w-[35px] h-[64px] rounded-3xl border-4 border-secondary flex justify-center items-start p-2">
-              <motion.div
-                animate={{
-                  y: [0, 12, 0],
-                }}
-                transition={{
-                  duration: 1.5,
-                  repeat: Infinity,
-                  repeatType: "loop",
-                }}
-                className="w-3 h-3 rounded-full bg-secondary mb-1"
-              />
-            </div>
+        <div
+          className="absolute xs:bottom-10 bottom-16 w-full flex justify-center items-center"
+          onClick={handleOnClick}
+        >
+          <div className="w-[35px] h-[64px] rounded-3xl border-4 border-secondary flex justify-center items-start p-2">
+            <motion.div
+              animate={{
+                y: [0, 12, 0],
+              }}
+              transition={{
+                duration: 1.5,
+                repeat: Infinity,
+                repeatType: "loop",
+              }}
+              className="w-3 h-3 rounded-full bg-secondary mb-1"
+            />
+          </div>
         </div>
       </div>
     </LazyMotion>