Skip to content

Commit

Permalink
feat: add feishu component & modify about page
Browse files Browse the repository at this point in the history
  • Loading branch information
@Nagi-ovo
Nagi-ovo committed Aug 26, 2024
1 parent 1da0fa9 commit 141e432
Show file tree
Hide file tree
Showing 3 changed files with 39 additions and 141 deletions.
11 changes: 11 additions & 0 deletions src/components/FeishuDocEmbed.tsx
View file
Original file line number Diff line number Diff line change
@@ -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;
33 changes: 12 additions & 21 deletions src/components/TechStack.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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等功能，极大地提高了开发效率和网站性能。
</>
),
},
Expand All @@ -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>,
一个流行的前端库。它提供了声明式编程模型，帮助开发者快速构建用户界面。
</>
),
},
Expand All @@ -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超集。它可以帮助开发者编写更安全、更可维护的代码。
</>
),
},
Expand All @@ -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框架。它提供了大量的预定义类，可以快速实现样式的重用和自定义。
</>
),
},
Expand All @@ -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
库。它提供了数据获取和缓存的解决方案，提高了应用程序的性能和用户体验。
</>
),
},
Expand All @@ -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，帮助开发者快速构建数据层。
</>
),
},
Expand Down
136 changes: 16 additions & 120 deletions src/pages/about.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,10 +1,12 @@
/* eslint-disable unused-imports/no-unused-imports */
import clsx from 'clsx';
import * as React from 'react';

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';
Expand All @@ -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>
Expand All @@ -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>
);
Expand Down

0 comments on commit 141e432

Please sign in to comment.