From 141e4324856d088e4375dafc1de7df5dba42e6b5 Mon Sep 17 00:00:00 2001
From: Nagi-ovo <13264500190@163.com>
Date: Mon, 26 Aug 2024 21:35:13 +0800
Subject: [PATCH] feat: add feishu component & modify about page

---
 src/components/FeishuDocEmbed.tsx |  11 +++
 src/components/TechStack.tsx      |  33 +++-----
 src/pages/about.tsx               | 136 ++++--------------------------
 3 files changed, 39 insertions(+), 141 deletions(-)
 create mode 100644 src/components/FeishuDocEmbed.tsx

diff --git a/src/components/FeishuDocEmbed.tsx b/src/components/FeishuDocEmbed.tsx
new file mode 100644
index 0000000..63ff7f3
--- /dev/null
+++ b/src/components/FeishuDocEmbed.tsx
@@ -0,0 +1,11 @@
+import React from 'react';
+
+interface FeishuDocEmbedProps {
+  docUrl: string;
+}
+
+const FeishuDocEmbed: React.FC<FeishuDocEmbedProps> = ({ docUrl }) => {
+  return <iframe src={docUrl} width='100%' height='600px' allowFullScreen />;
+};
+
+export default FeishuDocEmbed;
diff --git a/src/components/TechStack.tsx b/src/components/TechStack.tsx
index 35e1774..daa2082 100644
--- a/src/components/TechStack.tsx
+++ b/src/components/TechStack.tsx
@@ -37,9 +37,8 @@ const stacks = [
     icon: SiNextdotjs,
     tooltip: (
       <>
-        <CustomLink href='https://nextjs.org'>Next.js</CustomLink>, currently my
-        go-to framework because of the static generation, dynamic paths, and
-        built-in API. <em>ps: I like pages folder better than the new one.</em>
+        <CustomLink href='https://nextjs.org'>Next.js</CustomLink>,
+        一个功能强大且灵活的React框架。它提供了静态生成、动态路径和内置API等功能，极大地提高了开发效率和网站性能。
       </>
     ),
   },
@@ -48,8 +47,8 @@ const stacks = [
     icon: SiReact,
     tooltip: (
       <>
-        <CustomLink href='https://reactjs.org/'>React</CustomLink>, underlying
-        library of Next.js. I love the declarative approach and the ecosystem.
+        <CustomLink href='https://reactjs.org/'>React</CustomLink>,
+        一个流行的前端库。它提供了声明式编程模型，帮助开发者快速构建用户界面。
       </>
     ),
   },
@@ -61,11 +60,8 @@ const stacks = [
         <CustomLink href='https://www.typescriptlang.org/'>
           TypeScript
         </CustomLink>
-        , can't live without it! Check out my{' '}
-        <CustomLink href='https://github.com/theodorusclarence/ts-nextjs-tailwind-starter'>
-          starter template
-        </CustomLink>{' '}
-        using Next.js, Tailwind CSS, and TypeScript.
+        ,
+        一个静态类型检查的JavaScript超集。它可以帮助开发者编写更安全、更可维护的代码。
       </>
     ),
   },
@@ -74,13 +70,8 @@ const stacks = [
     icon: SiTailwindcss,
     tooltip: (
       <>
-        <CustomLink href='https://tailwindcss.com/'>Tailwind CSS</CustomLink> is
-        awesome, I have never achieved this much reusability. Make sure you get
-        the{' '}
-        <CustomLink href='https://marketplace.visualstudio.com/items?itemName=bradlc.vscode-tailwindcss'>
-          extension
-        </CustomLink>
-        .
+        <CustomLink href='https://tailwindcss.com/'>Tailwind CSS</CustomLink>,
+        一个实用性极高的CSS框架。它提供了大量的预定义类，可以快速实现样式的重用和自定义。
       </>
     ),
   },
@@ -90,8 +81,8 @@ const stacks = [
     tooltip: (
       <>
         <CustomLink href='https://tanstack.com/'>TanStack Query</CustomLink>,
-        great react hooks for data fetching and caching. I maintain most of my
-        API fetch (get, post, put, delete) in this library.
+        一个功能强大的React Hooks
+        库。它提供了数据获取和缓存的解决方案，提高了应用程序的性能和用户体验。
       </>
     ),
   },
@@ -100,8 +91,8 @@ const stacks = [
     icon: SiPrisma,
     tooltip: (
       <>
-        <CustomLink href='https://www.prisma.io/'>Prisma</CustomLink>, great and
-        simple ORM. A little bit of documentation and you're good to go.
+        <CustomLink href='https://www.prisma.io/'>Prisma</CustomLink>,
+        一个简单易用的ORM工具。它提供了简洁的数据模型定义和查询API，帮助开发者快速构建数据层。
       </>
     ),
   },
diff --git a/src/pages/about.tsx b/src/pages/about.tsx
index 6bb7983..7408ccd 100644
--- a/src/pages/about.tsx
+++ b/src/pages/about.tsx
@@ -1,3 +1,4 @@
+/* eslint-disable unused-imports/no-unused-imports */
 import clsx from 'clsx';
 import * as React from 'react';
 
@@ -5,6 +6,7 @@ import { trackEvent } from '@/lib/analytics';
 import useLoaded from '@/hooks/useLoaded';
 
 import Accent from '@/components/Accent';
+import FeishuDocEmbed from '@/components/FeishuDocEmbed';
 import CloudinaryImg from '@/components/images/CloudinaryImg';
 import Layout from '@/components/layout/Layout';
 import CustomLink from '@/components/links/CustomLink';
@@ -19,107 +21,34 @@ export default function AboutPage() {
     <Layout>
       <Seo
         templateTitle='About'
-        description='Clarence is a front-end developer that started learning in May 2020. He write blogs about his approach and mental model on understanding topics in front-end development.'
+        description='Sharing Wisdom, Innovation & Futuristic Technologies (S.W.I.F.T.)'
       />
 
       <main>
         <section className={clsx(isLoaded && 'fade-in-start')}>
           <div className='layout pt-20'>
-            <h2 data-fade='0'>About</h2>
+            <h2 data-fade='0'>关于</h2>
             <h1 className='mt-1' data-fade='1'>
-              <Accent>Theodorus Clarence</Accent>
+              <Accent>BJUT-SWIFT</Accent>
             </h1>
             <div className='mt-4' data-fade='2'>
-              <CloudinaryImg
-                className='float-right ml-6 w-40 md:w-72'
-                publicId='theodorusclarence/about/self-3-cropped_cyfuvn.jpg'
-                width='1500'
-                height='1695'
-                alt='Photo of me looking really professional and definitely can impress your boss'
-                preview={false}
-                title=' '
-              />
               <article className='prose dark:prose-invert'>
                 <p data-fade='3'>
-                  Hello! I'm Clarence. I started learning web development in May
-                  2020, which is the start of the pandemic. I have nothing much
-                  to do so I decided to learn web development from a udemy
-                  course, then started watching a bunch of{' '}
-                  <CustomLink href='/blog/youtube-list'>
-                    youtube videos
-                  </CustomLink>{' '}
-                  to explore more about web development especially frontend
-                  development.
-                </p>
-                <p data-fade='4'>
-                  There are a lot of things and technologies to learn in
-                  frontend development and I am motivated to learn as much as
-                  possible. I enjoy learning something new and getting feedback
-                  to make myself better and improve.
+                  本组织由工大学生自发组成，愿景是分享智慧、创新和未来技术（S.W.I.F.T.）{' '}
                 </p>
-                <p data-fade='5'>
-                  In this website I will be writing some blogs and showcase my
-                  projects. I believe that writing what I have learned is the
-                  best way to remember things, and I can share my knowledge
-                  along the way. So do contact me and I will be very happy to
-                  help!
+                <p data-fade='3'>
+                  欢迎查看我们的{' '}
+                  <CustomLink href='https://github.com/bjut-swift'>
+                    GitHub 主页
+                  </CustomLink>{' '}
+                  来深入了解我们的工作。
                 </p>
+                <FeishuDocEmbed docUrl='https://fafmkoqaxys.feishu.cn/docx/WqsqdqB6dof3AAxzjmncux8KnTd' />
               </article>
-              <h3 className='h4 mt-4' data-fade='6'>
-                What I'm up to?
-              </h3>
-              <article className='prose mt-2 dark:prose-invert' data-fade='7'>
-                <ul>
-                  <li>
-                    I'm a full-stack engineer at{' '}
-                    <CustomLink
-                      onClick={() =>
-                        trackEvent('Now: Dimension', { type: 'link' })
-                      }
-                      href='https://dimension.dev?ref=theodorusclarence.com'
-                    >
-                      Dimension
-                    </CustomLink>{' '}
-                    while working remotely from Jakarta, Indonesia
-                  </li>
-                  <li>
-                    I'm a technical writer for{' '}
-                    <CustomLink
-                      onClick={() =>
-                        trackEvent('Now: LogRocket', { type: 'link' })
-                      }
-                      href='https://blog.logrocket.com/author/theodorusclarence/'
-                    >
-                      LogRocket
-                    </CustomLink>
-                  </li>
-                  <li>
-                    I'm a mentor! I do revision-style mentorship (
-                    <Tooltip
-                      tipChildren={
-                        <p className='italic'>
-                          *Try translating them to english
-                        </p>
-                      }
-                    >
-                      <CustomLink
-                        onClick={() =>
-                          trackEvent('Now: Mentor Thread', { type: 'link' })
-                        }
-                        href='https://x.com/th_clarence/status/1713454750090534948?s=20'
-                      >
-                        thread
-                      </CustomLink>
-                    </Tooltip>
-                    )
-                  </li>
-                </ul>
-              </article>
-
               <h3 className='mt-12' data-fade='8'>
-                Tech Stack
+                本站所用的技术栈
               </h3>
-              <figure className='mt-2' data-fade='9'>
+              <figure className='mt-8' data-fade='9'>
                 <TechStack />
               </figure>
             </div>
@@ -131,44 +60,11 @@ export default function AboutPage() {
             <h2>Contact</h2>
             <article className='prose mt-4 dark:prose-invert'>
               <p>
-                Do contact me if you need my opinion about web development,
-                especially frontend works. I’ll be happy to help! (find my email
-                in the footer)
+                我们需要大家的力量，随时欢迎联系我们以申请加入组织、发起立项、反馈意见。
               </p>
             </article>
           </div>
         </section>
-
-        <section id='uses'>
-          <div className='layout mt-16'>
-            <h2>Uses</h2>
-            <CloudinaryImg
-              className='mt-8'
-              publicId='theodorusclarence/about/setup_3_cropped'
-              width={2000}
-              height={1125}
-              alt='Photo of my desk setup'
-            />
-            <article className='prose mt-4 dark:prose-invert'>
-              <ul>
-                <li>
-                  MacBook Pro (14" M3 Pro 2023, 36GB, 1TB) <b>primary</b>
-                </li>
-                <li>MacBook Pro (13" M1 2020, 16GB, 1TB)</li>
-                <li>LG UltraFine™ 4K 32 Inch LG (32UN880-B)</li>
-                <li>Keychron K2v2</li>
-                <li>Logitech MX Master 3s</li>
-                <li>Kindle Paperwhite (10th Generation)</li>
-                <li>Nintendo Switch OLED</li>
-                <li>Stramm Bruno Standing Desk 160x80</li>
-                <li>Pexio Jervis Ergonomic Chair</li>
-                <li>Press Play Desk Shelf</li>
-                <li>Mi Computer Monitor Light Bar</li>
-                <li>Creative Pebble V3</li>
-              </ul>
-            </article>
-          </div>
-        </section>
       </main>
     </Layout>
   );