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>
+  )
+}