Built Portfolio Page - 8 (Skills Component)

Steps:

1. Add Skills Component
2. Add margin bottom in Projects.tsx
3. Add css to skill component
4. Add hook
5. Add animation

1. Add Skills Component

Add src/components/Skills.tsx

import React from 'react'
import SectionHeading from './Section-heading'
import { skillsData } from '@/libs/data'

export default function Skills() {
  return (
    <section>
      <SectionHeading>My skills</SectionHeading>
      <ul>
        {
          skillsData.map((skill,index)=>(
            <li key={index}>{skill}</li>
          ))
        }
      </ul>
    </section>
  )
}

2. Add margin bottom in Projects.tsx

Projects.tsx

...
<section id="projects" className='scroll-mt-28 mb-28'>
...

3. Add css to skills component

Skills.tsx:

...
<section className='mb-28 max-w-[42rem] scroll-mt-28 text-center sm:mb-40'>
      <SectionHeading>My skills</SectionHeading>
      <ul className='flex flex-wrap justify-center gap-2 text-lg text-gray-800'>
        {
          skillsData.map((skill,index)=>(
            <li 
              className='bg-white border border-black/[0.1] rounded-xl px-5 py-3'
              key={index}
            >
              {skill}
            </li>
          ))
        }
      </ul>
</section>
...

4. Add hook

Skills.tsx:

...
import { useSectionInView } from '@/hooks/useSectionInView';

export default function Skills() {
  const { ref } = useSectionInView("Skills");

  return (
    <section 
      ref={ref}
      id='skills'
      className='mb-28 max-w-[42rem] scroll-mt-28 text-center sm:mb-40'
    >

...

5. Add Animation

Skills.tsx:

"use client"

import React from 'react'
import SectionHeading from './Section-heading'
import { skillsData } from '@/libs/data'
import { useSectionInView } from '@/hooks/useSectionInView';
import { motion } from 'framer-motion';

const fadeInAnimationVariant = {
  initial:{
    opticity:0,
    y:100,
  },
  animate:(index:number)=>({
    opacity: 1,
    y:0,
    transition: {
      delay: 0.05 * index,
    }
  }),
}
export default function Skills() {
  const { ref } = useSectionInView("Projects");

  return (
    <section 
      ref={ref}
      id='skills'
      className='mb-28 max-w-[42rem] scroll-mt-28 text-center sm:mb-40'
    >
      <SectionHeading>My skills</SectionHeading>
      <ul className='flex flex-wrap justify-center gap-2 text-lg text-gray-800'>
        {
          skillsData.map((skill,index)=>(
            <motion.li 
              className='bg-white border border-black/[0.1] rounded-xl px-5 py-3'
              key={index}
              variants={fadeInAnimationVariant}
              initial="initial"
              whileInView="animate"
              viewport={{
                once:true,
              }}
              custom={index}
            >
              {skill}
            </motion.li>
          ))
        }
      </ul>
    </section>
  )
}

效果