Skip to content

modern-agile-team/dev-portfolio

Repository files navigation

dev-porfolio

npm version Commitizen friendly license_badge react-iconify

dev-portfolio is React library that helps you develop your web portfolio easily and quickly.

ezgif com-gif-maker

List

Install

  1. Install only dev-portfolio library.

    npm i dev-portfolio --save

  2. Install boiler-plate code by using npx.
    If you want to see README.md of boiler-plate, go to the create-dev-portfolio.

    npx create-dev-portfolio <YOUR_APP_NAME>

Usage

import { Header, Intro, Contact, ... } from 'dev-portfolio';

const App = () => {
  return (
    // The 'className' in the <div> tag surrounding the components of 'dev-portfolio' must be 'App'.
    // Only then can the SideBar in the <Header> component recognize id props and automatically assign all components into the SideBar.
    <div className="App">
      <Header />
      <Intro />
      <Contact />
      ...
    </div>
  );
}

export default App;

Components

Header

스크린샷 2022-09-13 오전 2 05 09

import { Header } from 'dev-portfolio';

const logoOption = { ... };
const channels = [ ... ];
const sideBarOption = { ... };

const App = () => {
  return (
    <Header
      headerHeight="80px"
      headerWidth="100%"
      headerBackgroundColor="whitesmoke"
      logoOption={logoOption}
      channels={channels}
      sideBarOption={sideBarOption}
    />
  );
}

export default App;
props type description default note
headerHeight string Header height style '80px'
headerWidth string Header width style '100%'
headerBackgroundColor string Header background color style 'white'
logoOption LogoOptionPropsType You can customize the attrs such as logo and title by using logoOption props. See "More about Header's Props"
channels ChannelType[] Enter the props of the channel components as an array of objects. Enter channel to express yourself, such as personal blog, linked-in, etc. See "More about Header's Props"
sideBarOption SideBarOptionPropsType You can customize the attrs such as title and icon, item in sidebar by using sideBarOption props. See "More about Header's Props"

More about Header's props

logoOption example

image

const logoOption = {
  redirectUrl: '/',
  logoImg: 'logo.png',
  logoHidden: false,
  title: 'dev-portfolio',
  logoMargin: '0px 16px 0px 16px',
  logoWidth: '50px',
  logoHeight: '50px',
  titleColor: 'black',
  titleSize: '24px',
  titleWeight: '800',
};

channels example

스크린샷 2022-10-01 오후 1 55 33

For an example of channels, see: channels example

sideBarOption example

image

image

Way to change the sidebar icon, use iconName props.

Refer to the guidelines.

const sideBarOption = {
  mainTitle: 'dev-portfolio',
  mainTitleSize: '24px',
  mainTitleColor: 'white',
  mainTitleAlign: 'left',
  mainTitleBorderColor: 'white',
  iconName: 'ant-design:menu-fold-outlined', //Refer to the guidelines.
  iconSize: '28px',
  iconColor: '#434521',
  iconMargin: '0px 12px 0px 12px',
  itemTextColor: 'white',
  itemTextAlign: 'left',
  itemBackgroundColor: '#434521',
  itemHoverdBackgroundColor: 'black',
  backgroundColor: '#434521',
};

Channel

스크린샷 2022-10-01 오후 1 55 20

import { Channel } from 'dev-portfolio';

const App = () => {
  return <Channel redirectUrl="/" name="github" color="black" size="24px" margin="0px 6px" padding="0px" />;
};

export default App;
props type description default note
redirectUrl string URL you want to redirect when clicked '/'
name string Channel name 'github'
color string Channel icon color style 'black'
size string Channel icon size style '24px'
margin string Channel margin style '0px 6px'
padding string Channel padding style '0px'

Channels

스크린샷 2022-10-01 오후 1 55 33

import { Channels } from 'dev-portfolio';

const channels = [ ... ];

const App = () => {
  return (
    <Channels
      channels={channels}
    />
  );
}

export default App;
props type description default note
channels ChannelType[] Channel-only props such as Github and LinkedIn, etc See "More about Channels's Props"

More about Channels Props

channels example

const channels = [
  {
    redirectUrl: '/',
    name: 'github',
    color: 'black',
    size: '24px',
    margin: '0px 6px',
    padding: '0px',
  },
  {
    redirectUrl: '/',
    name: 'youtube',
    color: '#e03b35',
    size: '24px',
    margin: '0px 6px',
    padding: '0px',
  },
  {
    redirectUrl: '/',
    name: 'linkedin',
    color: '#1295cd',
    size: '24px',
    margin: '0px 6px',
    padding: '0px',
  },
];

Intro

스크린샷 2022-09-13 오전 2 06 20

import { Intro } from 'dev-portfolio';

const introOption = [ ... ];

const App = () => {
  return (
    <Intro
      id="Intro Component"
      textAlign="left"
      backgroundColor="whitesmoke"
      title="Introduction"
      shortIntro="Hello I am a developer enjoys growing up!"
      description="My name is OOO, BE developer good at Nodejs bla bla..."
      descriptionColor="black"
      descriptionBackgroundColor="black"
      textAlign="black"
      backgroundColor="black"
    />
  );
}

export default App;
props type description default note
id string Name to be added to Sidebar See Guideline to add icon
textAlign string Intro text align style. You can choose one of the themes such as 'left' and 'center'. 'left'
backgroundColor string Intro background color style. 'whitesmoke'
title string Title of Intro section. 'Intro'
shortIntro string Main text that can express you the best. 'shortIntro that will captivate people'
description string Introduce yourself 'This props name is description.\nPlease write down your brief introduction here. If you want to change the line, type backslash-n between the letters. Also you want to move the letters to the center, change textAlign to center. code your dreams!'
titleColor string Title text color style. 'black'
shortIntroColor string ShortIntro text color style. 'black'
descriptionColor string Description text color style. 'black'
descriptionBackgroundColor string Description background color style. 'white'

Skill

스크린샷 2022-10-01 오후 2 56 52

import { Skill } from 'dev-portfolio';

const App = () => {
  return (
    <Skill
      title="Javascript"
      titleSize="24px"
      isHiddenTitle={false}
      iconName="ion:logo-javascript"
      iconSize="40px"
      iconColor="#F0DB4F"
      margin="0px"
      padding="0px"
      titleColor="black"
      backgroundColor="white"
      borderColor="white"
      borderRadius="12px"
    />
  );
};

export default App;
props type description default note
title string Main text that expresses the skill 'javascript'
titleSize string Title size style '24px'
isHiddenTitle boolean If this value is set to True, you can hide the title. false
iconName string Enter the name of the icon you searched on the following site. 'ion:logo-javascript' See Guideline to add icon
iconSize string Icon size style '40px'
iconColor string Icon color style '#F0DB4F'
margin string Skill margin style '0px'
padding string Skill padding style '0px'
titleColor string Title color style 'black'
borderColor string Skill border color style 'white'
backgroundColor string Skill background color style 'white'
borderRadius string Skill border-radius style '12px'

TechStackList

techStackList

import { TechStackList } from 'dev-portfolio';

const techStackList = [ ... ];

const App = () => {
  return (
    <TechStackList
      id="Tech Stack Component"
      gap="normal" // 'narrower' | 'narrow' | 'normal' | 'wide' | 'wider'
      techStackList={techStackList}
    />
  );
}

export default App;
props type description default note
id string Name to be added to Sidebar See Guideline to add icon
gap TechStackGapType Spacing between TechStacks in TechStackList 'normal'
techStackList TechStackPropsType[] Array of TechStacks See "More about techStackList"

More about TechStackList's props

techStackList example

const techStackList = [
  {
    nameOption: {
      name: 'Javascript',
      nameTextColor: 'black',
      logoName: 'Javascript',
      fontSize: '18px',
      logoSize: '24px',
    },
    progressBarOption: {
      rateText: '45%',
      rateTextColor: 'black',
      isHiddenRateText: false,
      backgroundColor: 'black',
      colorTo: '#E2D784',
      colorFrom: 'whitesmoke',
      width: '100%',
      height: '40px',
      animationType: 'fill-up-wave',
      isBlinking: true,
    },
  },
  {
    nameOption: { name: 'HTML5', nameTextColor: 'black', logoName: 'HTML-5', fontSize: '18px', logoSize: '24px' },
    progressBarOption: {
      rateText: '30%',
      rateTextColor: 'black',
      isHiddenRateText: false,
      backgroundColor: 'black',
      colorTo: '#E34F26',
      colorFrom: 'whitesmoke',
      width: '100%',
      height: '40px',
      animationType: 'fill-up-wave',
      isBlinking: true,
    },
  },
  {
    nameOption: { name: 'Nodejs', nameTextColor: 'black', logoName: 'Nodejs', fontSize: '18px', logoSize: '24px' },
    progressBarOption: {
      rateText: '85%',
      rateTextColor: 'black',
      isHiddenRateText: false,
      backgroundColor: 'black',
      colorTo: '#339933',
      colorFrom: 'whitesmoke',
      width: '100%',
      height: '40px',
      animationType: 'fill-up-wave',
      isBlinking: true,
    },
  },
];

gap example

스크린샷 2022-08-20 오후 12 22 27

// 'narrower' | 'narrow' | 'normal' | 'wide' | 'wider';
const gap = 'normal';

Experience

image

import { Experience } from 'dev-portfolio';

const historyList = [ ... ];

const App = () => {
  return (
    <Experience
      id="Experience Component"
      title="Experience Title"
      textAlign="left"
      theme="vertical" // 'basic' | 'box' | 'vertical'
      shape="square" // 'square' | 'round-square'
      headerTitleColor="black"
      historyTitleColor="black"
      dateColor="black"
      descriptionColor="black"
      historyList={historyList}
    />
  );
}

export default App;
props type description default note
id string Name to be added to Sidebar See Guideline to add icon
title string Main title text of Experience Component 'Experience'
textAlign string Experience Text align 'left'
theme ExperienceThemeType You can decorate your experience with a variety of theme such as 'basic', 'box', 'vertical'. 'basic'
shape ExperienceVerticalOptionType Shape of card specially used in 'vertical' theme such as 'square', 'round-square'. 'square'
headerTitleColor string Color of title in Experience component 'black'
historyTitleColor string Color of title at historyList 'black'
dateColor string Color of date in history List 'black'
descriptionColor string Color of description in history List 'black'
historyList ExperienceHistoryListType[] You can add your history data such as date, title, description, etc. See "More about Experience's Props"

More about Experience's props

historyList example

const historyList = [
  {
    startDate: '2022.01.01',
    endDate: '2022.03.10',
    title: 'this is title',
    description:
      'This prop name is des.\nWrite down the additional explanation you want here.\nYou can break the line to backslash-n.',
  },
  {
    startDate: '2020.02',
    title: 'this is title',
    description: `If you just want to write the date and time without the text,\ndon't worry !\nYou can write a des props just by emptying it.\nAn example is shown below.`,
  },
  {
    startDate: '2018',
    endDate: '2019.12',
    title: 'this is title',
  },
];

Carousel

ezgif com-gif-maker (2)

import { Carousel, Image } from 'dev-portfolio';

const App = () => {
  return (
    <Carousel
      id="Carousel Component"
      width="65%"
      transition={1000} // ms
      autoplaySpeed={3000} // ms
      slideToShow={1}
      isArrowShow={true}
      isAutoplay={false}
      isAutoplayControl={true}
      arrowLocation="mid-side" // 'bottom' | 'mid-side' | 'top' | 'bottom-side' | 'top-side'
      playerLocation="bottom-mid" // 'bottom-mid' | 'bottom-left' | 'bottom-right' | 'top-mid' | 'top-left' | 'top-right'
      prevArrowIcon={<YOUR_COMPONENT />} // ReactElement
      nextArrowIcon={<YOUR_COMPONENT />} // ReactElement
      startAutoplayIcon={<YOUR_COMPONENT />} // ReactElement
      pauseAutoplayIcon={<YOUR_COMPONENT />} // ReactElement
    >
      // Must insert components customized
      <YOUR_COMPONENT />
      <Image src="anything.png" /> // Component of dev-portfolio ...
    </Carousel>
  );
};

export default App;
props type description default note
id string Name to be added to Sidebar See Guideline to add icon
width string Carousel width '100%'
transition number Transition animation speed 1000 Unit : ms
autoplaySpeed number Time to stay in a item 3000 Unit : ms
slideToShow number Number of item to show at once 1
isArrowShow boolean Flag for whether to show buttons true
isAutoplay boolean Flag for play carousel automatically false
isAutoplayControl boolean Flag for whether to show carousel player true
arrowLocation ArrowLocationType Location of arrow icon 'mid-side'
playerLocation PlayerLocationType Location of Play icon 'bottom-mid'
prevArrowIcon ReactElement Icon Component for moving into previous item <FiChevronLeft />
nextArrowIcon ReactElement Icon Component for moving into next item <FiChevronRight />
startAutoplayIcon ReactElement Icon Component for starting autoplay <TbPlayerPlay />
pauseAutoplayIcon ReactElement Icon Component for pause autoplay <TbPlayerPause />

Gallery

스크린샷 2022-09-13 오전 2 08 28

import { Gallery, Item } from 'dev-portfolio';

const App = () => {
  return (
    <Gallery
      id="Gallery Component"
      column={3}
      gap="normal" // 'wider' | 'wide' | 'normal' | 'narrow' | 'narrower'
      theme="mid-night" // 'mid-night' | 'blossom' | 'fruits' | 'bare-bare' | 'mint-chocolate'
      padding="2em 10em"
    >
      // Must insert components customized
      <YOUR_COMPONENT />
      <Item /> // Component of dev-portfolio ...
    </Gallery>
  );
};

export default App;
props type description default note
id string Name to be added to Sidebar See Guideline to add icon
column number Number of vertical lines 3
gap GalleryGapType Spacing between items in Gallery 'normal'
theme GalleryThemeType You can choose the color of your customized components in Gallery when they are hoverd with a variety of theme such as 'mid-night', 'blossom', 'fruits', 'bare-bare', 'mint-chocolate'. 'mid-night'
padding string Gallery padding '2em 10em'

Masonry

스크린샷 2022-09-13 오전 2 08 45

import { Masonry, Image } from 'dev-portfolio';

const App = () => {
  return (
    <Masonry id="Masonry Component" column={4} padding="2em 4em">
      /* Must insert components customized */
      <YOUR_COMPONENT />
      <Image src="anything.png" redirectURL="/" />
      /* Component of dev-portfolio */
      <Image src="https://picsum.photos/900/1100/?random" redirectURL="/" />
      /* Component of dev-portfolio */
    </Masonry>
  );
};

export default App;
props type description default note
id string Name to be added to Sidebar See Guideline to add icon
column number Number of vertical lines 4
padding string Masonry padding '2em 4em'

Image

ezgif com-gif-maker (5)

import { Image } from 'dev-portfolio';

const App = () => {
  return (
    <Image
      src="https://picsum.photos/500/600/?random"
      head="Write your head"
      subhead="Write your subhead"
      redirectURL="/"
      noShowHead={false}
      zoomWhenHover={false}
      headSize="20px"
      headColor="black"
      headWeight="bold"
      subheadSize="14px"
      subheadColor="white"
    />
  );
};

export default App;
props type description default note
src string Image source url
head string Main Title Text 'Write your head'
headSize string Head text size style '20px'
headColor string Head color style 'black'
headWeight string Head font weight style '700'
subhead string Sub Title Text 'Write your subhead'
subheadSize string Subhead text size style '14px'
subheadColor string Subhead text color style 'black'
redirectURL string URL to redirect '/'
noShowHead boolean Flag for whether to hide texts false
zoomWhenHover boolean Flag for whether to zoom image when hovered on item false

Item

ezgif com-gif-maker

import { Item } from 'dev-portfolio';

const App = () => {
  return (
    <Item
      src="https://picsum.photos/600/600/?random"
      title="This is title"
      description="description"
      redirectURL="/"
      textRisingSpeed={300}
      isTextRising={false}
      descriptionColor="white"
      hoverdInnerBorderColor="white"
    />
  );
};

export default App;
props type description default note
src string Image source url 'https://picsum.photos/600/600/?random'
title string Main Title Text 'This is title'
description string Description Text 'description'
redirectURL string URL to redirect '/'
textRisingSpeed number 300
isTextRising boolean false
descriptionColor string Description text color style 'white'
hoverdInnerBorderColor string Inner border color of item when hoverd 'white'

Card

스크린샷 2022-09-13 오전 2 09 54

import { Card } from 'dev-portfolio';

const App = () => {
  return (
    <Card
      width="10em"
      height="10em"
      redirectURL="/"
      shape="square" // 'square' | 'round-square' | 'round'
      hover="none" // 'up' | 'down' | 'zoom'
    />
  );
};

export default App;
props type description default note
width string Card width '10em'
height string Card height '10em'
redirectURL string URL to redirect '/'
shape CardShapeType You can decorate shape of Card a variety of theme such as 'square', 'round-square', 'round'. 'square'
hover CardHoverType You can make an effect on Card a variety of theme such as 'up', 'down', 'zoom'. 'none'

Contact

스크린샷 2022-08-20 오후 12 32 19

import { Contact } from 'dev-portfolio';

const channels = [ ... ];
const aboutMeInfos = [ ... ];

const App = () => {
  return (
    <Contact
      id="Contact Component"
      backgroundColor="whitesmoke"
      title="Hello My name is OOO"
      subTitle="If you're interested in me, please press the button below :D"
      buttonText="Want to work with me?"
      email="abc@dev-portfolio.com"
      channels={channels}
      aboutMeInfos={aboutMeInfos}
      titleColor='black'
      subTitleColor='black'
      buttonTextColor='black'
      buttonColor='black'
      buttonBorderColor='black'
    />
  );
};

export default App;
props type description default note
id string Name to be added to Sidebar See Guideline to add icon
backgroundColor string Contact Background Color 'whitesmoke'
title string Main title text of your contacts 'Hello, my name is DEV_PORTFOLIO'
titleColor string Title color style 'black'
subTitle string Sub title text 'If you're interested in me, please press the button below :D'
subTitleColor string Sub title text color style 'black'
email string Your Email 'abc@dev-portfolio.com'
buttonText string Text of button that function as a link to your email 'Want to work with me?'
buttonTextColor string Button text color style 'white'
buttonBorderColor string Button border color style 'black'
channels ChannelType[] Channel-only props such as Github and LinkedIn, etc See "More about Contact's Props"
aboutMeInfos AboutMeInfoPropsType[] Your personal information like TEL, Home etc See "More about Contact's Props"

More about Contact's props

channels example

channels

const channels = [
  { name: 'github', redirectUrl: 'https://', color: '#181717BB', size: '24px' },
  { name: 'naver', redirectUrl: 'https://', color: '#47A141BB', size: '24px' },
  { name: 'facebook', redirectUrl: 'https://', color: '#1877F2BB', size: '24px' },
  { name: 'youtube', redirectUrl: 'https://', color: '#FF0000BB', size: '24px' },
];

aboutMeInfos example

aboutMeInfos

const aboutMeInfos = [
    {
      title: 'Where I live',
      description: 'Gangdong-gu, Seoul, Republic of Korea',
    },
    {
      title: 'Give me a call',
      description: 'T. +82 (0)10 1234 5678',
    },
    {
      title: 'Or, why don’t you email me?',
      description: 'dev-portfolio@gmail.com',
    },
  ],

VisitorCounter

visitor-counter

import { VisitorCounter } from 'dev-portfolio';

const App = () => {
  return (
    <VisitorCounter
      title="hits"
      theme="big-size" // 'default' | 'big-size' | 'simple'
      todayVisitor={0} // Your fetched variable
      totalVisitor={123} // Your fetched variable
      todayTitle="today"
      totalTitle="total"
      backgroundColor="#91c230c4"
      todayVisitorColor="red"
      totalVisitorColor="red"
      todayTitleColor="black"
      totalTitleColor="black"
      size="14px" // include: px
    />
  );
};

export default App;

| props | type | description | default | note | | ------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------- | ------------- | ------------------------- | --- | | title | string | Hit title used in 'default' and 'big-size' | 'hits' | | | theme | VisitorCounterThemeType | Visitor Counter theme: 'default', 'big-size', 'simple' | 'default' | | | todayVisitor | number | Number of today's visitors | 0 | fetched variable | | totalVisitor | number | Number of total's visitors | 123 | fetched variable | | todayTitle | string | Title of today visit count used in 'big-size' and 'simple' | 'today' | | | totalTitle | string | Title of total visit count used in 'big-size' and 'simple' | 'total' | | | backgroundColor | string | Background color of todayTitle | '#91c230c4' | | | | todayVisitorColor | string | Today visitor color style | 'red' | | | | totalVisitorColor | string | Total visitor color style | 'red' | | | | todayTitleColor | string | Today title color style | 'black' | | | | totalTitleColor | string | Total title color style | 'black' | | | | size | string | Font size and component size in the visitor counter component | '14px' | Make sure to include 'px' |

More about VisitorCounter's props

theme example

// 'default' | 'big-size' | 'simple'
const theme = 'default';

VisitorCounter example

const visitorCounter = {
  title: 'hits',
  todayTitle: 'today',
  totalTitle: 'total',
};

VisitorComment

visitor-comment

import { VisitorComment } from 'dev-portfolio';

const commentList = [ ... ];

const App = () => {
  return (
    <VisitorComment
      id="VisitorComment Component"
      theme="basic" // 'basic' | 'box' | 'vertical'
      backgroundColor="whitesmoke"
      inputBackgroundColor="White"
      inputFontColor="black"
      inputPlacehoderColor="black"
      userInputLineColor="#b4b4b4a2"
      buttonColor="#1877f2"
      listBackgroundColor="white"
      listCommentColor="black"
      listNicknameColor="#959595"
      listDateColor="#959595"
      progressbarColor="#5f5f5f"
      isShowScrollDownIcon={true}
      scrollDownIconColor='black'
      descriptionPlaceholder='write your description...'
      nicknamePlaceholder='ID'
      passwordPlaceholder='PW'
      commentList={commentList} // Your fetched variable
      comment='this portfolio is very nice' // Data you entered in comment-input
      nickname='dev-portfolio' // Data you entered in comment-input
      password='1234' // Data you entered in comment-input
      handleCreateComment={handleCreateComment} // Event handling variable
      handleChangeDescription={handleChangeDescription} // Event handling variable
      handleChangeNickname={handleChangeNickname} // Event handling variable
      handleChangePassword={handleChangePassword} // Event handling variable
    />
  );
}

export default App;
props type description default note
id string Name to be added to Sidebar See Guideline to add icon
theme VisitorCommentThemeType Visitor Comment theme: 'basic', 'box', 'vertical' 'basic'
backgroundColor string VisitorComment background-color 'whitesmoke'
inputBackgroundColor string Background color of guest book preparation column 'White'
inputFontColor string Font Color in input box when create comment, user infomation 'Black'
inputPlacehoderColor string Placehoder font Color in input comment, user infomation boxes 'Black'
userInputLineColor string Underline color in the User Information field '#b4b4b4a2'
buttonColor string Font color of send button '#1877f'
listBackgroundColor string Background color of comment list 'white'
listCommentColor string Color of comment in comment list 'black'
listNicknameColor string Color of nickname in comment list '#959595'
listDateColor string Color of date in comment list '#959595'
progressbarColor string The color of the progress bar that is generated when a scroll event occurs '#5f5f5f'
isShowScrollDownIcon boolean Whether to display icons that are generated when a scroll event occurs true
scrollDownIconColor string Color in ScrollDown Icon 'black' Only works when isShowScrollDownIcon is true
descriptionPlaceholder string Placeholder of description area 'write your description...'
nicknamePlaceholder string Placeholder of nickname area 'ID'
passwordPlaceholder string Placeholder of password area 'PW'
commentList VisitorCommentListType List of Comment such as description, nickname, date See "More about VisitorComment's Props" fetched variable
comment string Please put the data you entered in the comment-input into this props. This will sends an http request to the server and be stored in the DB 'this portfolio is very nice' Data you entered in comment-input
nickname string Please put the data you entered in the nickname-input into this props. This will sends an http request to the server and be stored in the DB 'dev-portfolio' Data you entered in nickname-input
password string Please put the data you entered in the password-input into this props. This will sends an http request to the server and be stored in the DB '1234' Data you entered in password-input
handleCreateComment (e?: React.MouseEvent) => void Comments Props for event handling
handleChangeDescription (e?: React.ChangeEvent) => void Description Props for event handling
handleChangeNickname (e?: React.ChangeEvent) => void Nickname Props for event handling
handleChangePassword (e?: React.ChangeEvent) => void Password Props for event handling

More about VisitorComment's props

commentList example

List of Comment such as description, nickname, date.
This props is fetched datas from the backend.

const commentList: [
    {
      description: `The scroll customization method is the same as the teckstack component progress bar, so please use it!`,
      nickname: 'woorim960',
      date: '2022-08-26',
    },
    {
      description: `Progress bar customization is also possible when creating a scroll.`,
      nickname: 'seohyunsim',
      date: '2022-08-26',
    },
    {
      description: `Likewise, there are three types of themes: basic, box, and vertical.`,
      nickname: 'jisu3817',
      date: '2022-08-26',
    },
    {
      description: 'Refer to dev-portfolio README.md for instructions on building a personal server.',
      nickname: 'soonki-98',
      date: '2022-08-26',
    },
    {
      description: `A personal server can be built through environmental variables, and visitors can write their text and nicknames.`,
      nickname: 'woorim960',
      date: '2022-08-26',
    },
    {
      description: 'By looking at your portfolio, visitors can leave a guest book.',
      nickname: 'seohyunsim',
      date: '2022-08-26',
    },
  ],
};

ProgressBar

import { ProgressBar } from 'dev-portfolio';

const App = () => {
  return (
    <ProgressBar
      rateText="100%"
      rateTextColor="black"
      isHiddenRateText={false}
      backgroundColor="whitesmoke"
      colorFrom="white"
      colorTo="red"
      width="100%"
      height="40px"
      animationType="wave" // "wave" | "fill-up" | "fill-up-wave" | "none"
      isBlinking={false}
    />
  );
};

export default App;
props type description default note
rateText string How well you handle the skill (unit: %) '100%'
rateTextColor string rateText color style 'black'
isHiddenRateText boolean Whether show rate in progressbar true
backgroundColor string ProgressBar's background color style whitesmoke
colorFrom string Start color of blinking animation of progressbar 'white'
colorTo string End color of blinking animation of progressbar 'red'
width string Progressbar css width '100%'
height string Progressbar css width '40px'
animationType animationType Progressbar animation 'wave'
isBlinking boolean Progressbar blinking state false

More about ProgressBar's props

animationType

type amimationType = 'wave' | 'fill-up' | 'fill-up-wave' | 'none';

Example

  1. <dev-portfolio-app> http://52.78.64.144/

ezgif com-gif-maker


  1. <woorim960> http://152.70.89.184/

ezgif com-gif-maker (1)


  1. <seohyunsim> https://seohyunsim-portfolio.vercel.app/

스크린샷 2022-09-12 오후 8 52 52

Guidelines to input icons

Enter the name of the icon you searched on the following site.

(example: 'simple-icons:devdotto')

More about used props

  • id example
const id = "['ID_NAME', 'ICON_NAME']";
  • iconName example
const iconName =  'ICON_NAME',

License

MIT

Contributor