feat(site/blog): add contact information

site/blog/app/components/Header.tsx

@@ -62,6 +62,9 @@ export default () => (
                 key={item.name}
                 href={item.href}
                 className="text-base font-medium inline-flex items-center text-gray-500 hover:text-gray-900"
+                {...(/^http(s?):\/\//.test(item.href)
+                  ? { target: "_blank" }
+                  : {})}
               >
                 <item.icon
                   className="flex-shrink-0 h-4 w-4 mr-3 text-brand"
@@ -115,6 +118,9 @@ export default () => (
                     key={item.name}
                     href={item.href}
                     className="-m-3 p-3 flex items-center rounded-md hover:bg-gray-50"
+                    {...(/^http(s?):\/\//.test(item.href)
+                      ? { target: "_blank" }
+                      : {})}
                   >
                     <item.icon
                       className="flex-shrink-0 h-6 w-6 text-brand"

site/blog/app/page.tsx

@@ -1,3 +1,5 @@
+import Image from "next/image";
+
 import Footer from "@/app/components/Footer";
 import Social from "@/app/components/Social";
 import Bizk from "@/app/components/Bizk";
@@ -9,29 +11,44 @@ import seo from "@/app/utils/seo";
 
 // import projects from "./projects/constant/projects";
 
+import QrCode from "@/app/assets/qr_code.png";
+
 export async function generateMetadata() {
   return seo({ title: "主页" });
 }
 
 export default function Home() {
   return (
     <div className="prose mx-auto">
-      <div className="text-xl">Hi, here</div>
-      <div className="mt-4 text-slate-900 tracking-tight max-w-5xl">
-        我是一名软件开发工程师参与工作距今已经有十多年，有着丰富的2B系统开发及架构经验。早年从事UI设计工作，因此对用户体验交互上也具有一定的理解，现以前端开发为主，擅长以React为核心的各类技术栈进行软件开发。喜欢工程化方面领域，喜欢交互设计。
+      <div className="text-3xl text-gray-600 mb-2">
+        <a className="i-ri:quill-pen-line" />
+      </div>
+      <div className="text-gray-600 tracking-tight max-w-5xl">
+        我是一名软件工程师，参与工作距今已经有十多年，有着丰富的2B系统开发及架构经验。早年从事UI设计工作，因此对用户体验及交互上具有一定的把控。目前主要以前端开发为主，对服务端技术如：nodejs、next、nest也具备一定的掌握。擅长以React为核心的各类技术栈进行软件开发，喜欢工程化方面领域，喜欢交互设计。
       </div>
-      <ul className="mt-4 text-slate-500 font-light">
+      <ul className="mt-4 text-gray-400 font-light">
         <li>
-          🎉 技术栈包括:
-          React、NextJs、NodeJs、Typescript、Electron、Antd、Sass、Tailwind
-          CSS等。
+          🎉
+          技术栈包括:react、nextjs、nodejs、typescript、electron、sass、unocss、tailwind
+          css等。
         </li>
         <li>🌱 目前正在学习前端自动化测试方面知识。</li>
         <li>
-          💬 如何联系我: 微信搜索 AsQhan 或邮箱：
-          <a className="text-brand" href="mailto:whenhan@foxmail.com">
+          💬 如何联系我：微信搜索
+          <a className="text-brand no-underline font-normal">AsQhan</a> 或邮箱：
+          <a
+            className="text-brand no-underline font-normal"
+            href="mailto:whenhan@foxmail.com"
+          >
             whenhan@foxmail.com
           </a>
+          <Image
+            src={QrCode}
+            width={120}
+            height={120}
+            alt="qr code"
+            className="opacity-50 grayscale mt-1"
+          />
         </li>
       </ul>