feat: add PINS section more dynamically

app/page.tsx

@@ -1,6 +1,6 @@
 import Image from 'next/image'
 import { Chip, Tooltip, HomeArticle, HomeSection } from '@/components'
-import { EXPERIENCES, LINKS, PROJECTS } from '@/mocks'
+import { EXPERIENCES, LINKS, PINS, PROJECTS } from '@/mocks'
 
 interface ISectionLink {
   href?: string
@@ -27,23 +27,36 @@ export default function Home() {
         <HomeArticle
           id="creator-of"
           title="Creator of"
-          content={(
-            <p>
-              <a
-                className="link"
-                href="https://github.com/mucahidyazar/icomoon-generator"
-              >
-                icomoon-generator
-              </a>
-              {' and '}
-              <a
-                className="link"
-                href="https://github.com/mucahidyazar/html-css-boilerplate"
-              >
-                html-css-boilerplate
-              </a>
-            </p>
-          )}
+          content={PINS.map(pin => (
+            <Tooltip
+              content={
+                <aside className="flex flex-col gap-1 w-96">
+                  {Object.entries(pin.info).map(([key, value]) => (
+                    <div className="flex flex-wrap items-start" key={key}>
+                      <h2 className="font-medium italic w-20">
+                        {/* if value is not array jsut print it */}
+                        {key}
+                      </h2>
+                      <div className="flex flex-1 flex-wrap gap-2">
+                        {typeof value === 'string' ? (
+                          <p>{value}</p>
+                        ) : (
+                          value.map((v: any) => (
+                            <p key={v} className="leading-3">
+                              {v},
+                            </p>
+                          ))
+                        )}
+                      </div>
+                    </div>
+                  ))}
+                </aside>
+              }
+              key={pin.label}
+            >
+              <SectionLink key={pin.label} text={pin.label} />
+            </Tooltip>
+          ))}
         />
 
         <HomeArticle

src/mocks/index.ts

@@ -1,3 +1,4 @@
 export * from './experiences'
 export * from './links'
+export * from './pins'
 export * from './projects'

src/mocks/pins.ts

@@ -0,0 +1,63 @@
+import {TProject} from './projects'
+
+export const PINS: TProject[] = [
+  {
+    label: 'mucahid.dev',
+    href: 'https://github.com/mucahidyazar/mucahid.dev',
+    description:
+      'This is a full-stack portfolio website. Also it is an open-source project. You can create your own portfolio. If you wish you can use this template as a base of your SAAS project.',
+    logo: '',
+    info: {
+      main: 'next.js',
+      packages: ['react', 'react query', 'tailwindcss', 'react-hook-forms'],
+      deploy: 'vercel',
+      ci: 'github actions',
+      company: '',
+    },
+  },
+  {
+    label: 'api',
+    href: 'https://github.com/mucahidyazar/api',
+    description:
+      'API repository containing various projects including an appointment, stock control, link preview and URL shortener services.',
+    logo: '',
+    info: {
+      main: 'Node.js',
+      packages: ['Node.js', 'puppeteer', 'chalk', 'prompts', 'socket.io'],
+      deploy: '',
+      ci: 'github actions',
+      company: '',
+    },
+  },
+  {
+    label: 'workspace',
+    description:
+      'This repository serves as a central location for all of my projects, tests, and examples. It includes various subdirectories and files such as source code, documentation, and build scripts. This repository allows me to easily manage and organize my work, as well as collaborate with others.',
+    href: 'https://github.com/mucahidyazar/workspace',
+    logo: '',
+    info: {
+      main: 'Node.js',
+      packages: [
+        'react',
+        'redux',
+        'react query',
+        'redux-thunk',
+        'react-router',
+        'styled-components',
+        'formik',
+        'typescript',
+        'next.js',
+        'tailwindcss',
+        'react-hook-forms',
+        'puppeteer',
+        'chalk',
+        'prompts',
+        'socket.io',
+      ],
+      other: ['npm', 'storybook', 'nx'],
+      deploy: '',
+      ci: 'github actions',
+      company: '',
+    },
+  },
+]

src/mocks/projects.ts

@@ -90,6 +90,7 @@ export const PROJECTS: TProject[] = [
 
 export type TProject = {
   label: string
+  description?: string
   href: string
   logo: string
   info: {