react-portfolio-component-library v1.1.0

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

PortfolioContent

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

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

props

Header

헤더 영역입니다.

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

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

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

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

Props

Visual

최상단 배너 영역입니다.

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

Props

title 객체

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

title 객체

items 배열

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

items 배열

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

items 배열

Banner

배너 영역입니다.

<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

title 객체

items 배열

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

title 객체

items 배열

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

data 객체

info 객체

샘플

깃허브 사이트

제작과정

블로그