Built Portfolio Page -2（创建Intro组件）

Steps:

1. Add a list and list motion
2. Add Intro Component
3. Add remote site to nextjs config file
4. Add portrait and emoji motion feature
5. Add describe
6. Add 4 buttons

Add a list and list motion

edit header.tsx

....
<nav className="flex fixed top-[0.15rem] left-1/2 h-12 -translate-x-1/2 py-2 
      sm:top-[1.7rem] sm:h-[initial] sm:py-0">
  <ul className='flex w-[22rem] flex-wrap items-center justify-center gap-y-1
        text-[0.9rem] font-medium text-gray-500 sm:w-[initial] sm:flex-nowrap sm:gap-5'>
        {links.map((link) => (
          <motion.li
            className='h-3/4 flex items-center justify-center'
            key={link.hash}
            initial={{ y:-100, opacity:0}}
            animate={{ y:0 ,opacity:1}}
          >
            <Link 
              className='flex w-full items-center justify-center px-3 py-3 hover:text-gray-950
              transition'
              href={link.hash}
            >
              {link.name}
            </Link>
          </motion.li>
        ))}
  </ul>
</nav>

Add Intro Component

add src/components/Intro.tsx:

import Image from 'next/image'
import React from 'react'

export default function Intro() {
  return (
    <div className='flex items-center justify-center'>
      <div>
        <Image src="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?fit=crop&w=368&h=368&q=100"
           alt='Richard portrait'
           width="192"
           height="192"
           quality="95"
           priority={true}
           className='h-24 w-24 rounded-full object-cover border-[0.35rem] border-white shadow-xl'
        />
      </div>
    </div>
  )
}

Add remote site to nextjs config file

edit next.config.js:

/** @type {import('next').NextConfig} */
const nextConfig = {
  images: {
    remotePatterns: [
      {
        protocol: "https",
        hostname: "images.upsplash.com"
      }
    ]
  }
}

module.exports = nextConfig

Add portrait and emoji motion feature

Edit Intro.tsx:

...
			<div className='flex items-center justify-center'>
        <div className='relative'>
          <motion.div
            initial={{ opacity:0, scale:0}}
            animate={{ opacity:1, scale:1}}
            transition={{
              type: "tween",
              duration: 0.5,
            }}
          >
            <Image src= {portraitImage1}
              alt='Richard portrait'
              width="192"
              height="192"
              quality="95"
              priority={true}
              className='h-24 w-24 rounded-full object-cover border-[0.35rem] border-white shadow-xl'
            />
          </motion.div>

          <motion.span className='absolute bottom-0 right-0 text-4xl'
            initial={{ opacity:0, scale:0}}
            animate={{ opacity:1, scale:1}}
            transition={{
              type: "spring",
              stiffness: 125,
              delay: 0.1,
              duration: 0.7
            }}
          >
            👏
          </motion.span>
        </div>
      </div>
...

Add describe

Edit Intro.tsx:

...

      <motion.p 
        className='mb-10 mt-4 px-4 text-2xl font-medium !leaing-[1.5] sm:text-4xl'
        initial={{ opacity:0, y:100}}
        animate={{ opacity:1, y:0}}
      >
        <span className="font-bold">Hello, I'm Ricardo.</span> I'm a{" "}
        <span className="font-bold">full-stack developer</span> with{" "}
        <span className="font-bold">8 years</span> of experience. I enjoy
        building <span className="italic">sites & apps</span>. My focus is{" "}
        <span className="underline">React (Next.js)</span>.
      </motion.p>
...

Add 4 buttons

Edit Intro.tsx:

...    
    <motion.div
        className="flex flex-col sm:flex-row items-center justify-center gap-2 px-4 text-lg font-medium"
        initial={{ opacity: 0, y: 100 }}
        animate={{ opacity: 1, y: 0 }}
        transition={{
          delay: 0.1,
        }}
      >
        <Link
          href="#contact"
          className="group bg-gray-900 text-white px-7 py-3 
          flex items-center gap-2 rounded-full outline-none 
          focus:scale-110 hover:scale-110 hover:bg-gray-950 
          active:scale-105 transition"
        >
          Contact me here{" "}
          <BsArrowRight className="opacity-70 group-hover:translate-x-1 transition" />
        </Link>

        <a
          className="group bg-white px-7 py-3 flex items-center gap-2 rounded-full outline-none 
          focus:scale-110 hover:scale-110 active:scale-105 transition 
          cursor-pointer borderBlack"
          href="/CV.pdf"
          download
        >
          Download CV{" "}
          <HiDownload className="opacity-60 group-hover:translate-y-1 transition" />
        </a>

        <a
          className="bg-white p-4 text-gray-700 hover:text-gray-950 flex items-center gap-2 rounded-full 
          focus:scale-[1.15] hover:scale-[1.15] active:scale-105 transition 
          cursor-pointer borderBlack"
          href="https://linkedin.com"
          target="_blank"
        >
          <BsLinkedin />
        </a>

        <a
          className="bg-white p-4 text-gray-700 flex items-center gap-2 text-[1.35rem] rounded-full 
          focus:scale-[1.15] hover:scale-[1.15] hover:text-gray-950 active:scale-105 transition 
          cursor-pointer borderBlack"
          href="https://github.com"
          target="_blank"
        >
          <FaGithubSquare />
        </a>
    </motion.div>
 ...

Demo