포트폴리오 About Me 만들기 | FontAwesomeIcon 활용

 

 
 
 

➜ header 시작

➜ header 완성

➜ intro

➜ About Me

➜ Projects

➜ Skills

➜ Experience

➜ Contact

➜ Footer

➜ Vercel 배포

 
 
 

      <SectionHeading>About me</SectionHeading>

 
<SectionHeading> 컴포넌트를 사용할 때, <SectionHeading> 태그 사이에 위치한 내용이 children 속성으로 전달된다.
 

import React from "react";

type SectionHeadingProps = {
  children: React.ReactNode;
};

export default function SectionHeading({ children }: SectionHeadingProps) {
  return (
    <h2 className="text-3xl font-medium capitalize mb-8 text-center">
      {children}
    </h2>
  );
}

 
이렇게 제목을 일관된 스타일을 적용할 수 있다.
 
 

반응형

 

<div className="text-left">
        <div className="mb-7 flex items-center">
          <div className="flex items-center justify-center w-16 h-16 rounded-full bg-gray-200 mr-6">
            <FontAwesomeIcon icon={faAddressCard} className="text-3xl" />
          </div>
          <div>
            <h2 className="font-bold text-xl">이름</h2>
            <span>최한슬</span>
          </div>
        </div>
        <div className="mb-7 flex items-center">
          <div className="flex items-center justify-center w-16 h-16 rounded-full bg-gray-200 mr-6">
            <FontAwesomeIcon icon={faPhone} className="text-3xl" />
          </div>
          <div>
            <h2 className="font-bold text-xl">연락처</h2>
            <span></span>
          </div>
        </div>
        <div className="mb-7 flex items-center">
          <div className="flex items-center justify-center w-16 h-16 rounded-full bg-gray-200 mr-6">
            <FontAwesomeIcon icon={faEnvelope} className="text-3xl" />
          </div>
          <div>
            <h2 className="font-bold text-xl">이메일</h2>
            <a
              href="mailto:hanseulo@naver.com"
              className="hover:underline text-lg"
            >
             
            </a>
          </div>
        </div>
        <div className="mb-7 flex items-center">
          <div className="flex items-center justify-center w-16 h-16 rounded-full bg-gray-200 mr-6">
            <FontAwesomeIcon icon={faSchool} className="text-3xl" />
          </div>
          <div>
            <h2 className="font-bold text-xl">부트캠프</h2>
            <span>멀티캠퍼스 프론트엔드 과정</span>
          </div>
        </div>
      </div>
    </motion.section>
  );
}

 
폰트어썸 아이콘을 활요해서 보다 직관적으로 보이게했다.
그리고 백그라운드 컬러를 넣어서 정돈된 느낌을 주려고 했다.
 
 
 

 
 
https://share.coffeechat.kr/두슬

헤론헬스정보시스템, 소프트웨어 개발 '두슬' 님과 1:1 커피챗 시작