본문으로 건너뛰기

Tutorial Intro

포트폴리오 제작에 많은 시간투자를 했던 경험을 바탕으로,
누구나 손쉽고 빠르게 포트폴리오 사이트를 제작할 수 있는 라이브러리를 개발하게 되었습니다!

앞으로 디자인 시스템을 도입하여 다양하게 커스터마이징할 수 있는 기능을 제공할 계획입니다.
React 프로젝트를 생성하고 이 라이브러리를 활용해 직접 포트폴리오를 만들어 보세요!

설치​

$ npm install react-portfolio-component-library

구조​

import { BrowserRouter } from "react-router-dom";
import {
  Header,
  Banner,
  Profile,
  Visual,
  ListNormal,
  ListHorizontal,
  ListCard,
  ListLego,
  Intro,
  PortfolioContent,
  PortfolioGroup,
} from "react-portfolio-component-library";

function App() {
  return (
    <BrowserRouter>
      <PortfolioGroup>
        <Header />
        <PortfolioContent>
          <Visual />
          <Intro />
          <ListNormal />
          <ListHorizontal />
          <Banner />
          <ListCard />
          <ListLego />
          <Profile />
        </PortfolioContent>
      </PortfolioGroup>
    </BrowserRouter>
  );
}

export default App;

PortfolioGroup​

전체를 감싸는 컴포넌트로 필수항목 입니다.

<PortfolioGroup className={"portfolio-group"} as={"div"}>
  ...
</PortfolioGroup>

Props​

이름설명타입기타
classNameclass 명String
astag 명String

PortfolioContent​

Header를 제외한 content를 감싸는 컴포넌트로 필수항목 입니다.
gsap와 locomotive가 정의되어 있습니다.

<PortfolioContent className={"main-group"} as={"main"}>
  ...
</PortfolioContent>

props​

이름설명타입기타
classNameclass 명String
astag 명String

헤더 영역입니다.

기본 로고가 제공되며, logo 를 통해 사용자가 정의한 로고 이미지로 대체됩니다.

<Header logo={IMG_PATH} alt={"logo"} title={"title"} />

<Header></Header>컴포넌트 안에 내용을 넣으면 사용자가 정의한 내용으로 대체됩니다.

<Header className={"header"}>
  <h1>
    <img src={LOGO_IMG} alt={"logo"} />
  </h1>
</Header>

Props​

이름설명타입기타
classNameclass 명String
logo로고 이미지 경로String
alt로고 이미지 대체 텍스트String
title로고 옆 타이틀String

Visual​

최상단 배너 영역입니다. 

<Visual
  className={"visual"}
  bgcolor={"#fff"}
  title={{
    main: "MY\nPORTFOLIO",
    badge: "HELLO, WORLD!",
    move: "WELCOME MY PORTFOLIO",
  }}
/>

Props​

이름설명타입기타
classNameclass 명String
bgcolor배경 색String
title타이틀object
title 객체​
이름설명타입기타
main타이틀String
badge뱃지 타이틀String
move 움직이는 타이틀String

Intro​

마우스 스크롤에 반응하는 인트로 리스트 영역 입니다.

5가지의 기본 이미지와 아이콘을 제공하며 items 배열을 통해 변경 가능합니다.

<Visual
  className={"intro"}
  bgcolor={"#f5feff"}
  title={{
    main: "Plan and\norgnize\n",
    highlight: "anything",
  }}
  items={[
    {
      id: "01",
      title: "Blog",
      icon: ICON_PATH,
      thumb: IMG_PATH,
      alt: "Blog",
    },
  ]}
/>

Props​

이름설명타입기타
classNameclass 명String
bgcolor배경 색String
title타이틀Object
items리스트 아이템Array

title 객체​

이름설명타입기타
main타이틀String
highlight하이라이트 타이틀String

items 배열​

이름설명타입기타
id*아이템 IDString
title아이템 타이틀String
icon아이템 아이콘String
thumb아이템 썸네일String
alt썸네일 대체 텍스트String

ListNormal​

노멀 리스트 영역입니다. 

<ListNormal
  className={"list-normal"}
  bgcolor={"#c2aeec"}
  title={"Hello✋🏻\nMy Portfolio"}
  items={[
    {
      id: "01",
      type: "react",
      title: "React",
      desc: "React 사이트입니다.",
      github: "https://github.com/username/repository",
      site: "https://example.com/site",
      thumb: IMG_PATH,
      speed: 4,
    },
  ]}
/>

Props​

이름설명타입기타
classNameclass 명String
bgcolor배경 색String
title타이틀String
items리스트 아이템Array

items 배열​

이름설명타입기타
id*아이템 IDString
type아이템 타입String
title아이템 타이틀String
desc아이템 설명String
github아이템 깃허브 링크String
site아이템 사이트 링크String
thumb아이템 썸네일String
speed스크롤 속도Number

ListHorizontal​

가로 스크롤 리스트 영역입니다. 

<ListHorisontal
  className={"list-horisontal"}
  bgcolor={"#310591"}
  title={"Hello✋🏻\nMy Portfolio"}
  items={[
    {
      id: "01",
      title: "title",
      desc: "description",
      site: "https://example.com/site",
      thumb: IMG_PATH,
      alt: "title",
    },
  ]}
/>

Props​

이름설명타입기타
classNameclass 명String
bgcolor배경 색String
title타이틀String
items리스트 아이템Array

items 배열​

이름설명타입기타
id*아이템 IDString
title아이템 타이틀String
desc아이템 설명String
site아이템 사이트 링크String
thumb아이템 썸네일String
alt썸네일 대체 텍스트String

배너 영역입니다.

<Banner className={"banner"} bgcolor={"#fde445"} />

ListCard​

리스트 카드 영역입니다.

<ListCard
  className={"list-card"}
  bgcolor={"#f5f5f5"}
  title={{
    main: "Hello,",
    highlight: "My Portfolio",
  }}
  items={[
    {
      id: "01",
      site: URL,
      thumb: IMG_PATH,
      title: "title",
      desc: "desc",
    },
  ]}
/>

Props​

이름설명타입기타
classNameclass 명String
bgcolor배경 색String
title타이틀Object
items리스트 아이템Array

title 객체​

이름설명타입기타
main타이틀String
highlight하이라이트 타이틀String

items 배열​

이름설명타입기타
id*아이템 IDString
site아이템 URLString
thumb아이템 썸네일String
title아이템 타이틀String

ListLego​

레고 리스트 영역입니다. 

<ListLego
  className={"list-lego"}
  bgcolor={"#f6f3ff"}
  title={{
    main: "Hello,",
    highlight: "My Portfolio",
  }}
  items={[
    {
      id: "01",
      title: "title",
      type: "JavaScript",
      site: "https://example.com/site",
      thumb: IMG_PATH,
      alt: "title",
    },
  ]}
/>

Props​

이름설명타입기타
classNameclass 명String
bgcolor배경 색String
title타이틀Object
items리스트 아이템Array

title 객체​

이름설명타입기타
main타이틀String
highlight하이라이트 타이틀String

items 배열​

이름설명타입기타
id*아이템 IDString
title아이템 타이틀String
type아이템 타입String
site아이템 URLString
thumb아이템 썸네일String
alt썸네일 대체 텍스트String

Profile​

프로필 영역입니다.

<Profile
  className={"profile"}
  bgcolor={"#f6f3ff"}
  bggradient={"#f06b67"}
  data={{
    textpath: "Welcome My Portfolio Site · Hello My World · ",
    footersbj: "IMPOSSIBLE IS NOTING · ",
    notice: "더 좋은 결과를 위해 수정중에 있습니다",
    photo:  IMG_PATH,
    info: {
      name: "My Portfolio",
      email: "username@example.com",
      phone: "010-1234-5678",
      portfolio: "https://example.com/portfolio",
      github: "https://github.com/username",
      blog: "https://blog.example.com",
    },
  }}
/>

Props​

이름설명타입기타
classNameclass 명String
bgcolor배경 색String
bggradient그라디언트 배경 색String
datatextpath, 정보 등Object

data 객체​

이름설명타입기타
textpath물결모양의 움직이는 텍스트String
footersbj하단에 흘러가는 텍스트String
notice공지사항String
photo이미지String
info정보Object

info 객체​

이름설명타입기타
name성함String
email이메일String
phone연락처String
portfolio포트폴리오 URLString
github깃허브 URLString
blog블로그 URLString

샘플​

깃허브
사이트

제작과정​

블로그