feat: extract SkillCard and display first 3 skills

src/app/(public)/cv/page.tsx

@@ -1,6 +1,4 @@
-import Image from 'next/image';
 import * as React from 'react';
-import ReactMarkdown from 'react-markdown';
 
 import '@/components/organisms/cv/cv.css';
 
@@ -10,6 +8,7 @@ import Education from '@/components/organisms/cv/Education';
 import Intro from '@/components/organisms/cv/Intro';
 import Languages from '@/components/organisms/cv/Languages';
 import Publications from '@/components/organisms/cv/Publications';
+import Skills from '@/components/organisms/cv/Skills';
 import WorkExperience from '@/components/organisms/cv/WorkExperience';
 
 import { queryJobs } from '@/queries/jobs';
@@ -19,9 +18,6 @@ import { querySchools } from '@/queries/schools';
 import { queryIntro } from '@/queries/short-texts';
 import { querySkills } from '@/queries/skills';
 
-import { Icon } from '@/types/Icon';
-import { Skill } from '@/types/Skill';
-
 export const metadata = {
   title: 'About my Work | MartaCodes.it',
   description: 'About page',
@@ -49,8 +45,6 @@ const AboutPage = async () => {
   const { intro, jobs, languages, publications, schools, skills } =
     await queryData();
 
-  const iconDimension = 36;
-
   return (
     <main className='min-h-main'>
       <section className='dark:bg-dark bg-white'>
@@ -59,32 +53,7 @@ const AboutPage = async () => {
 
           <Intro intro={intro} />
 
-          <div className='mb-10 grid grid-cols-1 gap-5 md:grid-cols-2 lg:grid-cols-3 lg:gap-6'>
-            {skills.map((skill: Skill) => (
-              <div
-                key={skill.title}
-                className='skill-container rounded p-4 shadow-md dark:bg-slate-900 dark:drop-shadow-md'
-              >
-                <div className='flex'>
-                  {skill.icons.map((icon: Icon) => (
-                    <Image
-                      key={icon.id}
-                      height={iconDimension}
-                      width={iconDimension}
-                      alt={icon.name}
-                      src={icon.url}
-                    />
-                  ))}
-                </div>
-
-                <h3>{skill.title}</h3>
-
-                <span className='skill-description text-justify font-light'>
-                  <ReactMarkdown>{skill.description}</ReactMarkdown>
-                </span>
-              </div>
-            ))}
-          </div>
+          <Skills skills={skills} />
 
           <hr />
 

src/components/molecules/SkillCard/SkillCard.tsx

@@ -0,0 +1,43 @@
+'use client';
+
+import Image from 'next/image';
+import * as React from 'react';
+import ReactMarkdown from 'react-markdown';
+
+import { Icon } from '@/types/Icon';
+import { Skill } from '@/types/Skill';
+
+export interface SkillCardProps {
+  skill: Skill;
+}
+const SkillCard = ({ skill }: SkillCardProps) => {
+  const iconDimension = 36;
+
+  return (
+    <div
+      key={skill.title}
+      className='skill-container rounded p-4 shadow-md dark:bg-slate-900 dark:drop-shadow-md'
+    >
+      <div className='flex w-full'>
+        {skill.icons.map((icon: Icon) => (
+          <Image
+            className='me-1 pb-1 rounded-md'
+            key={icon.id}
+            height={iconDimension}
+            width={iconDimension}
+            alt={icon.name}
+            src={icon.url}
+          />
+        ))}
+      </div>
+
+      <h3>{skill.title}</h3>
+
+      <span className='skill-description text-justify font-light'>
+        <ReactMarkdown>{skill.description}</ReactMarkdown>
+      </span>
+    </div>
+  );
+};
+
+export default SkillCard;

src/components/organisms/cv/Intro.tsx

@@ -18,7 +18,7 @@ const Intro = ({ intro }: IntroProps) => {
     <div>
       <SectionHeading titlePrefix='cv.softwareDevelopment' />
 
-      <div className='mb-5'>
+      <div className='mb-6 cv-intro-section'>
         <ReactMarkdown className='text-justify'>
           {intro.content.replace('8', noOfYears)}
         </ReactMarkdown>

src/components/organisms/cv/Skills.tsx

@@ -0,0 +1,46 @@
+'use client';
+
+import * as React from 'react';
+import { useState } from 'react';
+
+import Button from '@/components/atoms/buttons/Button';
+import SkillCard from '@/components/molecules/SkillCard/SkillCard';
+
+import { Skill } from '@/types/Skill';
+
+export interface SkillsProps {
+  skills: Skill[];
+}
+
+const Skills = ({ skills }: SkillsProps) => {
+  const initialDisplayCount = 3; // Number of items to initially display
+  const [showAllSkills, setShowAllSkills] = useState(false);
+
+  const displayedSkills = showAllSkills
+    ? skills
+    : skills.slice(0, initialDisplayCount);
+
+  const toggleShowAllSkills = () => {
+    setShowAllSkills(!showAllSkills);
+  };
+
+  return (
+    <div className='mb-4'>
+      <div className='mb-10 grid grid-cols-1 gap-5 md:grid-cols-2 lg:grid-cols-3 lg:gap-6'>
+        {displayedSkills.map((skill: Skill) => (
+          <SkillCard skill={skill} key={skill.title} />
+        ))}
+      </div>
+
+      {!showAllSkills && skills.length > initialDisplayCount && (
+        <div className='flex w-full justify-end px-4'>
+          <Button color='dark' onClick={toggleShowAllSkills}>
+            Show more
+          </Button>
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default Skills;

src/components/organisms/cv/cv.css

@@ -9,3 +9,7 @@
 .job-content li {
   margin-bottom: 6px !important;
 }
+
+.cv-intro-section p {
+  margin-bottom: 5px;
+}