Add new section for AI projects

qiangli · qiangli · commit b7d483889df5 · 2025-07-24T13:48:37.000-07:00
diff --git a/Justfile b/Justfile
@@ -15,3 +15,7 @@ start:
 tidy:
     pnpm format
     pnpm lint
+
+run:
+    go run server/main.go
+
diff --git a/contentlayer.config.ts b/contentlayer.config.ts
@@ -4,9 +4,9 @@ import {
   makeSource,
 } from 'contentlayer2/source-files';
 
-export const Personal = defineDocumentType(() => ({
-  name: 'Personal',
-  filePathPattern: 'personal.md',
+export const PersonalInfo = defineDocumentType(() => ({
+  name: 'PersonalInfo',
+  filePathPattern: 'personal-info.md',
   isSingleton: true,
   fields: {
     givenName: {
@@ -107,6 +107,21 @@ export const Achievement = defineDocumentType(() => ({
   },
 }));
 
+
+export const PersonalProjects = defineDocumentType(() => ({
+  name: 'PersonalProjects',
+  filePathPattern: 'personal-projects/*.md',
+  isSingleton: false,
+  fields: {
+    title: {
+      type: 'string',
+      description: 'The name of the personal projects section',
+      required: false,
+    },
+  },
+}));
+
+
 export const AdditionalInfo = defineDocumentType(() => ({
   name: 'AdditionalInfo',
   filePathPattern: 'additional-items/*.md',
@@ -135,8 +150,9 @@ export const PrivateField = defineDocumentType(() => ({
 export default makeSource({
   contentDirPath: 'edit-me/content',
   documentTypes: [
-    Personal,
+    PersonalInfo,
     ProfessionalExperience,
+    PersonalProjects,
     Achievement,
     AdditionalInfo,
     PrivateField,
diff --git a/edit-me/config/linkedin-icon.tsx b/edit-me/config/linkedin-icon.tsx
@@ -1,6 +1,7 @@
 import * as React from 'react';
 import type { IconType } from '@icons-pack/react-simple-icons';
 
+// eslint-disable-next-line react/display-name
 const LinkedInIcon = React.forwardRef<SVGSVGElement, React.SVGProps<SVGSVGElement>>((props, ref) => (
   <svg
     role="img"
diff --git a/edit-me/config/links.ts b/edit-me/config/links.ts
@@ -3,7 +3,7 @@ import {
   SiGithub,
 } from '@icons-pack/react-simple-icons';
 import { CMSLink } from 'edit-me/types/cms-link';
-import LinkedInIcon from './LinkedInIcon';
+import LinkedInIcon from './linkedin-icon';
 
 // https://simpleicons.org/
 export const links: CMSLink[] = [
diff --git a/edit-me/content/personal-info.md b/edit-me/content/personal-info.md
diff --git a/edit-me/content/personal-projects/01-ai.md b/edit-me/content/personal-projects/01-ai.md
diff --git a/edit-me/content/personal-projects/02-ai-chatbot.md b/edit-me/content/personal-projects/02-ai-chatbot.md
diff --git a/edit-me/content/personal-projects/03-awesome.md b/edit-me/content/personal-projects/03-awesome.md
@@ -2,7 +2,7 @@
 title: Awesome AI Tools
 ---
 
-🤖 [https://github.com/openaide/awesome](https://github.com/openaide/awesome)
+🤖 [https://github.com/qiangli/awesome](https://github.com/qiangli/awesome)
 
 This is a collection of open-source AI tools that anyone can run 
 and customize on a local machine, aimed at enhancing productivity
diff --git a/src/app/opengraph-image.tsx b/src/app/opengraph-image.tsx
@@ -1,5 +1,5 @@
 import { resumeConfig } from '@config/resume-config';
-import { personal } from '@content';
+import { personalInfo } from '@content';
 import { ImageResponse } from 'next/og';
 import { readFile } from 'node:fs/promises';
 import path from 'node:path';
@@ -52,7 +52,7 @@ export default async function og(): Promise<ImageResponse> {
             }}
             tw="mt-4 text-6xl"
           >
-            {personal.title}
+            {personalInfo.title}
           </div>
         </div>
         <div
diff --git a/src/app/page.tsx b/src/app/page.tsx
@@ -3,7 +3,8 @@ import AboutMe from 'src/components/articles/about-me';
 import Achievements from 'src/components/articles/achievements';
 import AdditionalInfo from 'src/components/articles/additional-info';
 import ContactInformation from 'src/components/articles/contact-info';
-import Professional from 'src/components/articles/professional';
+import ProfessionalExperiences from 'src/components/articles/professional-experiences';
+import PersonalProjects from 'src/components/articles/personal-projects';
 
 export const dynamic = 'force-static';
 
@@ -14,8 +15,8 @@ export default function Page(): ReactNode {
         <AboutMe />
         <ContactInformation />
       </div>
-
-      <Professional />
+      <ProfessionalExperiences />
+      <PersonalProjects />
       <Achievements />
       <AdditionalInfo />
     </div>
diff --git a/src/components/articles/about-me.tsx b/src/components/articles/about-me.tsx
@@ -1,4 +1,4 @@
-import { personal } from '@content';
+import { personalInfo } from '@content';
 import { UserIcon } from '@heroicons/react/24/solid';
 import { ReactNode } from 'react';
 import Prose from 'src/components/prose/prose';
@@ -8,7 +8,7 @@ export default function AboutMe(): ReactNode {
   return (
     <article className="space-y-4">
       <SectionHeading Icon={UserIcon} level={3} text="About" />
-      <Prose html={personal.body.html} />
+      <Prose html={personalInfo.body.html} />
     </article>
   );
 }
diff --git a/src/components/articles/additional-info.tsx b/src/components/articles/additional-info.tsx
@@ -4,7 +4,7 @@ import { PaintBrushIcon } from '@heroicons/react/24/solid';
 import { Fragment, ReactNode, useEffect } from 'react';
 import Separator from 'src/components/articles/separator';
 import SectionHeading from 'src/components/section-heading/section-heading';
-import { sortedAdditionalItems } from 'src/helpers/utilities';
+import { sortedAdditionalInfos } from 'src/helpers/utilities';
 import AdditionalItem from './additional-item';
 import AOS from 'aos';
 import 'aos/dist/aos.css';
@@ -23,10 +23,10 @@ export default function AdditionalInfo(): ReactNode {
           className="justify-center"
           Icon={PaintBrushIcon}
           level={2}
-          text="Personal Projects"
+          text="Additional Info"
         />
         <div>
-          {sortedAdditionalItems.map((item) => (
+          {sortedAdditionalInfos.map((item) => (
             <Fragment key={item._id}>
               <AdditionalItem {...item} />
               <Separator />
diff --git a/src/components/articles/personal-item.tsx b/src/components/articles/personal-item.tsx
@@ -0,0 +1,22 @@
+import { PersonalProjects } from '@content';
+import { ReactNode } from 'react';
+import { Heading } from 'src/components/heading/heading';
+import Prose from 'src/components/prose/prose';
+
+export default function PersonalItem({
+  title,
+  body,
+}: PersonalProjects): ReactNode {
+  return (
+    <article className="space-y-4">
+      <div className="space-y-1">
+        <Heading className="text-balance" level={3}>
+          <br />
+          {title}
+        </Heading>
+      </div>
+
+      <Prose html={body.html} />
+    </article>
+  );
+}
diff --git a/src/components/articles/personal-projects.tsx b/src/components/articles/personal-projects.tsx
@@ -0,0 +1,39 @@
+'use client';
+
+import { PaintBrushIcon } from '@heroicons/react/24/solid';
+import { Fragment, ReactNode, useEffect } from 'react';
+import Separator from 'src/components/articles/separator';
+import SectionHeading from 'src/components/section-heading/section-heading';
+import { sortedPersonalProjects } from 'src/helpers/utilities';
+import PersonalItem from './personal-item';
+import AOS from 'aos';
+import 'aos/dist/aos.css';
+
+export default function PersonalProjects(): ReactNode {
+  useEffect(() => {
+    AOS.init();
+  });
+
+  return (
+    <article className="border-neutral-6 bg-neutral-2 rounded-xl border py-12 shadow-md print:break-before-page">
+      <div className="container space-y-8">
+        <SectionHeading
+          data-aos="fade-center"
+          data-aos-duration="600"
+          className="justify-center"
+          Icon={PaintBrushIcon}
+          level={2}
+          text="Personal Projects"
+        />
+        <div>
+          {sortedPersonalProjects.map((item) => (
+            <Fragment key={item._id}>
+              <PersonalItem {...item} />
+              <Separator />
+            </Fragment>
+          ))}
+        </div>
+      </div>
+    </article>
+  );
+}
diff --git a/src/components/articles/professional-experiences.tsx b/src/components/articles/professional-experiences.tsx
@@ -9,7 +9,7 @@ import ProfessionalItem from './professional-item';
 import AOS from 'aos';
 import 'aos/dist/aos.css';
 
-export default function Professional(): ReactNode {
+export default function ProfessionalExperiences(): ReactNode {
   useEffect(() => {
     AOS.init();
   });
diff --git a/src/components/footer/footer.tsx b/src/components/footer/footer.tsx
@@ -1,7 +1,7 @@
 'use client';
 
 import { links } from '@config/links';
-import { personal } from '@content';
+import { personalInfo } from '@content';
 import { ReactNode } from 'react';
 import { Button } from 'src/components/button/button';
 import SimpleLink from '../link/simple-link';
@@ -28,7 +28,7 @@ export default function Footer(): ReactNode {
             >
               <a href={link.href}>
                 <span className="sr-only">
-                  {personal.givenName} on {link.title}
+                  {personalInfo.givenName} on {link.title}
                 </span>
                 <link.icon aria-hidden size={18} />
               </a>
diff --git a/src/components/header/header.tsx b/src/components/header/header.tsx
@@ -1,6 +1,6 @@
 'use client';
 
-import { personal } from '@content';
+import { personalInfo } from '@content';
 import { ReactNode, useState } from 'react';
 import { Heading } from 'src/components/heading/heading';
 import { ThemeToggle } from 'src/components/theme-toggle/theme-toggle';
@@ -56,7 +56,7 @@ export default function Header(): ReactNode {
           <div className="flex-1 space-y-2">
             <Heading level={1}>{fullName}</Heading>
             <Heading color="muted" className="text-balance" level={2}>
-              {personal.title}
+              {personalInfo.title}
             </Heading>
           </div>
           {/* Desktop Buttons */}
diff --git a/src/components/pdf/pdf.tsx b/src/components/pdf/pdf.tsx
@@ -1,5 +1,5 @@
 import { resumeConfig } from '@config/resume-config';
-import { PrivateField, ProfessionalExperience, personal } from '@content';
+import { PrivateField, ProfessionalExperience, personalInfo } from '@content';
 import {
   Document,
   Font,
@@ -21,8 +21,9 @@ import CircleUser from 'src/components/pdf/icons/circle-user';
 import { getAccentColor, getNeutralColor } from 'src/helpers/colors';
 import {
   fullName,
+  sortedPersonalProjects,
   sortedAchievements,
-  sortedAdditionalItems,
+  sortedAdditionalInfos,
   sortedProfessionalExperiences,
 } from 'src/helpers/utilities';
 
@@ -280,15 +281,15 @@ export default function PDF({ privateInformation }: PDFProperties): ReactNode {
         <View style={styles.sidebar}>
           <View style={styles.header}>
             <Text style={styles.headerTitle}>{fullName}</Text>
-            <Text style={styles.headerSubtitle}>{personal.title}</Text>
+            <Text style={styles.headerSubtitle}>{personalInfo.title}</Text>
           </View>
           <View style={styles.sidebarContent}>
             <View style={styles.section}>
               <View style={styles.sectionHeadingNonHTML}>
                 <CircleUser size={fontSizes.m} />
                 <Text>About</Text>
               </View>
-              <Html {...htmlProperties}>{personal.body.html}</Html>
+              <Html {...htmlProperties}>{personalInfo.body.html}</Html>
             </View>
             <View style={styles.section}>
               <View style={styles.sectionHeadingNonHTML}>
@@ -297,7 +298,7 @@ export default function PDF({ privateInformation }: PDFProperties): ReactNode {
               </View>
               <View style={styles.flexRow}>
                 <Text style={styles.bold}>Location:</Text>
-                <Text>&nbsp;{personal.location}</Text>
+                <Text>&nbsp;{personalInfo.location}</Text>
               </View>
               {privateInformation?.map((privateField) => (
                 <View key={privateField._id}>
@@ -308,6 +309,7 @@ export default function PDF({ privateInformation }: PDFProperties): ReactNode {
             </View>
           </View>
         </View>
+
         <View style={styles.main}>
           <View style={styles.section}>
             <View style={styles.sectionHeading}>
@@ -328,6 +330,20 @@ export default function PDF({ privateInformation }: PDFProperties): ReactNode {
               </View>
             ))}
           </View>
+          <View style={styles.section}>
+            <View style={styles.sectionHeading}>
+              <CirclePaintbrush size={fontSizes.m} />
+              <Text>Personal Projects</Text>
+            </View>
+            {sortedPersonalProjects.map((item) => (
+              <View key={item._id}>
+                <View style={styles.itemHeading}>
+                  <Text style={styles.bold}>{item.title}</Text>
+                </View>
+                <Html {...htmlProperties}>{item.body.html}</Html>
+              </View>
+            ))}
+          </View>
           <View style={styles.section}>
             <View style={styles.sectionHeading}>
               <CircleGraduationCap size={fontSizes.m} />
@@ -351,9 +367,9 @@ export default function PDF({ privateInformation }: PDFProperties): ReactNode {
           <View style={styles.section}>
             <View style={styles.sectionHeading}>
               <CirclePaintbrush size={fontSizes.m} />
-              <Text>Personal Projects</Text>
+              <Text>Additional Info</Text>
             </View>
-            {sortedAdditionalItems.map((item) => (
+            {sortedAdditionalInfos.map((item) => (
               <View key={item._id}>
                 <View style={styles.itemHeading}>
                   <Text style={styles.bold}>{item.title}</Text>
diff --git a/src/helpers/utilities.ts b/src/helpers/utilities.ts
@@ -2,15 +2,16 @@ import {
   allAchievements,
   allAdditionalInfos,
   allProfessionalExperiences,
-  personal,
+  allPersonalProjects,
+  personalInfo,
 } from '@content';
 import { ClassValue } from 'class-variance-authority/types';
 import clsx from 'clsx';
 import { twMerge } from 'tailwind-merge';
 
-export const fullName = `${personal.givenName} ${personal.familyName}`;
+export const fullName = `${personalInfo.givenName} ${personalInfo.familyName}`;
 
-export const initials = `${personal.givenName.slice(0, 1)}${personal.familyName.slice(0, 1)}`;
+export const initials = `${personalInfo.givenName.slice(0, 1)}${personalInfo.familyName.slice(0, 1)}`;
 
 export const sortedProfessionalExperiences = allProfessionalExperiences.sort(
   (a, b) => {
@@ -34,7 +35,17 @@ export const sortedAchievements = allAchievements.sort((a, b) => {
   return aOrderNumber - bOrderNumber;
 });
 
-export const sortedAdditionalItems = allAdditionalInfos.sort((a, b) => {
+export const sortedPersonalProjects = allPersonalProjects.sort((a, b) => {
+  const aOrderNumber = Number.parseInt(
+    a._raw.sourceFileName.replaceAll(/^\D+/g, ''),
+  );
+  const bOrderNumber = Number.parseInt(
+    b._raw.sourceFileName.replaceAll(/^\D+/g, ''),
+  );
+  return aOrderNumber - bOrderNumber;
+});
+
+export const sortedAdditionalInfos = allAdditionalInfos.sort((a, b) => {
   const aOrderNumber = Number.parseInt(
     a._raw.sourceFileName.replaceAll(/^\D+/g, ''),
   );
