Merge pull request #37 from zhangchi0104/dev

Dev

.husky/pre-commit

@@ -0,0 +1,4 @@
+#!/usr/bin/env sh
+. "$(dirname -- "$0")/_/husky.sh"
+
+pnpm lint:fix

package.json

@@ -8,7 +8,8 @@
     "build": "webpack --config=./webpack.prod.js",
     "lint": "eslint ./src/",
     "lint:fix": "eslint ./src/ --fix",
-    "toc": "i18next-resources-for-ts toc -i ./src/langs/en -o ./src/@types/resources.ts"
+    "toc": "i18next-resources-for-ts toc -i ./src/langs/en -o ./src/@types/resources.ts",
+    "prepare": "husky install"
   },
   "keywords": [],
   "author": "",
@@ -48,7 +49,8 @@
     "webpack-bundle-analyzer": "^4.10.1",
     "webpack-cli": "^5.1.4",
     "webpack-dev-server": "^4.15.1",
-    "webpack-merge": "^5.10.0"
+    "webpack-merge": "^5.10.0",
+    "husky": "^8.0.0"
   },
   "dependencies": {
     "@fortawesome/fontawesome-svg-core": "^6.4.2",

src/@types/resources.ts

@@ -1,4 +1,4 @@
-import translations from '../langs/en/translations.json';
+import translations from "../langs/en/translations.json";
 
 const resources = {
   translations

src/animation/particles/Particle.ts

@@ -41,12 +41,12 @@ abstract class Particle
     this.dpi = window.devicePixelRatio || 1;
   }
 
-  move(refreshRate = 60) {
+  move() {
     this.x += this.dx * Particle.DPI;
     this.y += this.dy * Particle.DPI;
   }
 
-  rotate(refreshRate = 60) {
+  rotate() {
     this.deg += this.ddeg;
   }
 
@@ -98,10 +98,10 @@ abstract class Particle
     }
     return true;
   }
-  public nextFrame(refreshRate = 60) {
+  public nextFrame() {
     // this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
-    this.move(refreshRate);
-    this.rotate(refreshRate);
+    this.move();
+    this.rotate();
   }
 }
 

src/components/AboutMe/AboutMeCard.tsx

@@ -3,7 +3,6 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import React, { useState } from "react";
 import { Card } from "../Card";
 import Collapsable from "../Collapsable";
-import { init } from "i18next";
 
 interface AboutMeCardSelfProps {
   heading: string | JSX.Element;

src/components/AboutMe/sections/Education.tsx

@@ -1,4 +1,4 @@
-import React, { Suspense } from "react";
+import React from "react";
 import { useTranslation } from "react-i18next";
 
 import Section from "@/components/Section";

src/components/Home/IntroText.tsx

@@ -1,9 +1,29 @@
-import React from "react";
+import React, { useEffect, useMemo } from "react";
 import { useTranslation } from "react-i18next";
 import { EnvelopeIcon } from "@heroicons/react/24/solid";
 
 const IntroText: React.FC = () => {
   const { t } = useTranslation();
+  const copyEmail = () => {
+    navigator.clipboard.writeText(t("home.email")).then(() => {
+      setCopied(true);
+    });
+  };
+
+  const [copied, setCopied] = React.useState(false);
+  const animation = useMemo(
+    () => (copied ? "animate-fade-bounce-in" : "scale-0 opacity-0"),
+    [copied]
+  );
+  useEffect(() => {
+    if (copied) {
+      const timeoutId = setTimeout(() => {
+        setCopied(false);
+      }, 1000);
+      return () => clearTimeout(timeoutId);
+    }
+  }, [copied]);
+
   return (
     <>
       <div className="flex flex-col justify-center h-full text-gray-500 dark:text-slate-400">
@@ -12,11 +32,19 @@ const IntroText: React.FC = () => {
         </h2>
         <p className="text-md md:text-xl  mt-1">{t("home.subheading1")}</p>
         <p className="text-md md:text-xl">{t("home.subheading2")}</p>
-        <p className="text-xs md:text-sm flex items-center mt-1 justify-center md:justify-start">
-          <span className="mr-1">
-            <EnvelopeIcon className="h-6 w-6" />
-          </span>
-          {t("home.email")}
+        <p className="text-xs md:text-sm mt-2 flex flex-col md:flex-row items-center">
+          <div onClick={copyEmail} className="">
+            <span className="mr-1">
+              <EnvelopeIcon className="h-6 w-6 inline" />
+            </span>
+            {t("home.email")}
+          </div>
+
+          <p
+            className={`${animation} md:ml-2 mt-2 md:mt-0 rounded-full bg-teal-700 text-gray-50 dark:text-slate-300 dark:bg-slate-600 px-4 py-0.5`}
+          >
+            {t("home.copied")}
+          </p>
         </p>
       </div>
     </>

src/components/NavBar/Settings/AppearanceMenu.tsx

@@ -8,10 +8,11 @@ import {
   ComputerDesktopIcon
 } from "@heroicons/react/24/outline";
 import { setAppearance } from "@/store/actions";
+import { useTranslation } from "react-i18next";
 const AppearanceMenu: React.FC = () => {
   const appearance = useAppSelector(selectAppearance);
   const dispatch = useAppDispatch();
-
+  const { t } = useTranslation();
   const onListItemClick = (newAppearance: "light" | "dark" | "system") => {
     dispatch(setAppearance(newAppearance));
   };
@@ -28,7 +29,7 @@ const AppearanceMenu: React.FC = () => {
         <span className="mr-2 text-sm">
           <SunIcon className="h-5 w-5" />
         </span>
-        Light
+        {t("navbar.settings.lightMode")}
       </li>
       <li
         className={`${
@@ -41,7 +42,7 @@ const AppearanceMenu: React.FC = () => {
         <span className="mr-2 text-sm">
           <MoonIcon className="h-5 w-5" />
         </span>
-        Dark
+        {t("navbar.settings.darkMode")}
       </li>
       <li
         className={`${
@@ -54,7 +55,7 @@ const AppearanceMenu: React.FC = () => {
         <span className="mr-2 text-sm">
           <ComputerDesktopIcon className="h-5 w-5" />
         </span>
-        System
+        {t("navbar.settings.followSystem")}
       </li>
     </ul>
   );

src/components/NavBar/Settings/FancyModeToggle.tsx

@@ -2,16 +2,18 @@ import ToggleSwitch from "@/components/ToggleSwtich";
 import { useAppDispatch, useAppSelector } from "@/hooks";
 import { toggleFancyMode } from "@/store/actions";
 import { selectFancyModeEnabled } from "@/store/selectors";
+import { useTranslation } from "react-i18next";
 
 const FancyModeToggle = () => {
   const fancyModeEnabled = useAppSelector(selectFancyModeEnabled);
   const dispatch = useAppDispatch();
   const switchFancyMode = () => {
     dispatch(toggleFancyMode());
   };
+  const { t } = useTranslation();
   return (
     <div className="flex justify-between items-center px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600">
-      <p>Fancy Mode</p>
+      <p>{t("navbar.settings.fancyMode")}</p>
       <ToggleSwitch
         checked={fancyModeEnabled}
         onClick={() => switchFancyMode()}

src/components/Projects/index.tsx

@@ -1,10 +1,9 @@
-import React, { Suspense } from "react";
+import React from "react";
 
 import IntersectionDetector from "../IntersectionObserver";
 import { useAppDispatch } from "@/hooks";
 import { setActiveSectionName } from "@/store/actions";
 import { useTranslation } from "react-i18next";
-import Loading from "../Loading";
 const ProjectCard = React.lazy(
   () => import(/* webpackChunkName: "project-card" */ "./ProjectCard")
 );

src/langs/en/translations.json

@@ -4,13 +4,20 @@
     "home": "Home",
     "aboutMe": "About Me",
     "projects": "Projects",
-    "name": "Alex Zhang"
+    "name": "Alex Zhang",
+    "settings": {
+      "darkMode": "Dark",
+      "lightMode": "Light",
+      "fancyMode": "Fancy Mode",
+      "followSystem": "System"
+    }
   },
   "home": {
     "heading": "👋🏻G'Day! I'm Alex.",
     "subheading1": "Master of IT (University of Melbourne)",
     "subheading2": "Web Developer (React)",
-    "email": "[email protected]"
+    "email": "[email protected]",
+    "copied": "Copied!"
   },
   "aboutMe": {
     "education": {

src/langs/zh/translations.json

@@ -2,7 +2,13 @@
   "navbar": {
     "home": "首页",
     "aboutMe": "关于我",
-    "projects": "项目经历"
+    "projects": "项目经历",
+    "settings": {
+      "darkMode": "深色模式",
+      "lightMode": "浅色模式",
+      "followSystem": "跟随系统",
+      "fancyMode": "背景动画"
+    }
   },
   "home": {
     "heading": "嗨👋🏻! 我是 Alex",
@@ -14,7 +20,8 @@
         "hint": "单击复制",
         "toast": "已复制"
       }
-    }
+    },
+    "copied": "已复制!"
   },
   "aboutMe": {
     "education": {

tailwind.config.js

@@ -5,10 +5,11 @@ module.exports = {
     extend: {
       animation: {
         "fade-in": "fade-in 0.3s cubic-bezier(0.4, 0, 1, 1)",
-        "fade-bounce-in": "fade-bounce-in 0.3s cubic-bezier(0.4, 0, 1, 1)",
+        "fade-bounce-in": "fade-bounce-in 0.2s cubic-bezier(0.4, 0, 1, 1)",
         "bounce-emphasis": "bounce-emphasis 0.3s cubic-bezier(0.4, 0, 1, 1)",
         "bounce-in-x": "bounce-in-x 1.5s ease-in-out 0.3s",
-        "spin-bounce": "spin-bounce 0.3s linear"
+        "spin-bounce": "spin-bounce 0.3s linear",
+        "fade-out": "fade-out 0.3s linear 0.3s"
       },
       keyframes: {
         "fade-in": {
@@ -72,6 +73,14 @@ module.exports = {
           "100%": {
             transform: "translateY(0) rotate(180deg)"
           }
+        },
+        "fade-out": {
+          "0%": {
+            opacity: "1"
+          },
+          "100%": {
+            opacity: "0"
+          }
         }
       }
     }

webpack.prod.js

@@ -1,8 +1,6 @@
 const common = require("./webpack.common.js");
 const { merge } = require("webpack-merge");
 const TerserPlugin = require("terser-webpack-plugin");
-const BundleAnalyzerPlugin =
-  require("webpack-bundle-analyzer").BundleAnalyzerPlugin;
 const opts = {
   mode: "production",