feat: landing page redesign

data/skills.tsx

@@ -1,63 +1,37 @@
-import { IconProps } from '@iconify/react'
-
-const SKILLS: IconProps[] = [
- {
- icon: 'logos:vue',
- style: { left: '1%', top: '1%' },
- },
- {
- icon: 'logos:nuxt-icon',
- style: { left: '4%', top: '5%' },
- },
-
- {
- icon: 'logos:react',
- style: { right: '2%', top: '11%' },
- },
- {
- icon: 'logos:nextjs-icon',
- style: { right: '8%', top: '14%' },
- },
-
- {
- icon: 'logos:javascript',
- style: { top: '5%', left: '54%' },
- },
- {
- icon: 'logos:typescript-icon',
- style: { top: '9%', left: '60%' },
- },
-
- {
- icon: 'logos:nodejs-icon-alt',
- style: { top: '14%', left: '30%' },
- },
- {
- icon: 'logos:nestjs',
- style: { top: '19%', left: '38%' },
- },
- {
- icon: 'logos:prisma',
- style: { top: '24%', left: '50%' },
- },
- {
- icon: 'logos:postgresql',
- style: { top: '26%', left: '60%' },
- },
-
- {
- icon: 'logos:tailwindcss-icon',
- style: { top: '30%', left: '90%' },
- },
-
- {
- icon: 'logos:visual-studio-code',
- style: { bottom: '25%', right: '5%' },
- },
- {
- icon: 'logos:docusaurus',
- style: { bottom: '1%', left: '1%' },
- },
+// To find new icons, visit https://simpleicons.org/
+const SKILLS = [
+ 'docusaurus',
+ 'typescript',
+ 'javascript',
+ 'react',
+ 'vue',
+ 'android',
+ 'html5',
+ 'css3',
+ 'tailwindcss',
+ 'shadcnui',
+ 'nodedotjs',
+ 'nextdotjs',
+ 'nuxtdotjs',
+ 'express',
+ 'nestjs',
+ 'hono',
+ 'electron',
+ 'prisma',
+ 'postgresql',
+ 'redis',
+ 'nginx',
+ 'vercel',
+ 'jest',
+ 'cypress',
+ 'docker',
+ 'git',
+ 'github',
+ 'visualstudiocode',
+ 'androidstudio',
+ 'figma',
+ 'python',
+ 'langchain',
 ]
 
 export default SKILLS

package.json

@@ -37,16 +37,20 @@
  "@docusaurus/theme-search-algolia": "3.4.0",
  "@giscus/react": "^2.4.0",
  "@popperjs/core": "^2.11.8",
+ "@radix-ui/react-slot": "^1.0.2",
  "autoprefixer": "^10.4.19",
+ "class-variance-authority": "^0.7.0",
  "docusaurus-plugin-baidu-tongji": "0.0.0-beta.4",
  "docusaurus-plugin-image-zoom": "^1.0.1",
  "framer-motion": "^10.18.0",
+ "mini-svg-data-uri": "^1.4.4",
  "ora": "^7.0.1",
  "postcss": "^8.4.38",
  "prism-react-renderer": "^2.3.1",
  "raw-loader": "^4.0.2",
  "react": "^18.2.0",
  "react-dom": "^18.2.0",
+ "react-icon-cloud": "^4.1.4",
  "react-popper": "^2.3.0",
  "tailwind-merge": "^2.3.0",
  "tailwindcss": "^3.4.3"

src/pages/_components/BlogSection/index.tsx → src/components/landing/BlogSection/index.tsx

@@ -6,8 +6,7 @@ import { cn } from '@site/src/lib/utils'
 import Image from '@theme/IdealImage'
 import { motion, useScroll, useTransform } from 'framer-motion'
 import React from 'react'
-
-import SectionTitle from '../SectionTitle'
+import { Section } from '../Section'
 
 const chunk = (arr, size) =>
  Array.from({ length: Math.ceil(arr.length / size) }, (_, i) => arr.slice(i * size, i * size + size))
@@ -67,13 +66,10 @@ export default function BlogSection(): JSX.Element {
  }
 
  return (
- <section className={cn('padding-vert--sm container', 'max-w-7xl')}>
- <SectionTitle icon="ri:quill-pen-line" href={'/blog'}>
- <Translate id="homepage.blog.title">近期博客</Translate>
- </SectionTitle>
- <div ref={ref} className={cn('row', 'm-0 max-h-[640px] overflow-hidden rounded-card py-2')}>
+ <Section title={<Translate id="homepage.blog.title">近期博客</Translate>} icon="ri:quill-pen-line" href={'/blog'}>
+ <div ref={ref} className="grid max-h-[640px] grid-cols-12 gap-4 overflow-hidden rounded-card px-3">
  {posts.map((postGroup, index) => (
- <div className="col margin-top--sm col-6" key={index}>
+ <div className="col-span-4" key={index}>
  {postGroup.map((post, i) => (
  <motion.div style={{ y: i / 2 ? y : 0 }} key={i}>
  <BlogItem key={post.id} post={post} />
@@ -82,6 +78,6 @@ export default function BlogSection(): JSX.Element {
  </div>
  ))}
  </div>
- </section>
+ </Section>
  )
 }

src/components/landing/FeaturesSection/Github.tsx

@@ -0,0 +1,20 @@
+import Translate from '@docusaurus/Translate'
+
+import { Icon } from '@iconify/react'
+
+export default function Skill({ className }: { className?: string }) {
+ return (
+ <div className={className}>
+ <h2 className="mb-2 flex items-center gap-1 text-base">
+ <Icon icon="ri:github-line" />
+ <Translate id="homepage.feature.github.title">Github</Translate>
+ </h2>
+ <div className="relative flex w-full items-center justify-center overflow-hidden bg-background p-4">
+ <img
+ src="https://metrics.lecoq.io/kuizuo?template=classic&base=header%2C%20activity%2C%20community%2C%20repositories%2C%20metadata&base.indepth=false&base.hireable=false&base.skip=false&config.timezone=Asia%2FShanghai"
+ alt="kuizuo's Github chart"
+ />
+ </div>
+ </div>
+ )
+}

src/components/landing/FeaturesSection/Skill.tsx

@@ -0,0 +1,19 @@
+import Translate from '@docusaurus/Translate'
+
+import { Icon } from '@iconify/react'
+import SKILLS from '@site/data/skills'
+import IconCloud from '../../magicui/icon-cloud'
+
+export default function Skill({ className }: { className?: string }) {
+ return (
+ <div className={className}>
+ <h2 className="mb-2 flex items-center gap-1 text-base">
+ <Icon icon="carbon:tool-kit" />
+ <Translate id="homepage.feature.skill.title">技术栈</Translate>
+ </h2>
+ <div className="relative flex aspect-square w-full items-center justify-center overflow-hidden bg-background p-4">
+ <IconCloud iconSlugs={SKILLS} />
+ </div>
+ </div>
+ )
+}