dev-portfolio

dev-porfolio

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

List

• Installation
• Usage
• Components
• Example
• Guidelines to input icons
• Licence
• Contributor

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
• Channel
• Channels
• Intro
• Skill
• TechStackList
• Experience
• Carousel
• Gallery
• Masonry
• Image
• Item
• Card
• Contact
• VisitorCounter
• VisitorComment
• ProgressBar

Header

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

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

For an example of channels, see: channels example

sideBarOption example

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

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

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

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

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

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

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

Experience

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

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
arrowPosition	ArrowLocationType	Position of arrow icon	'mid-side'
playerLocation	PlayerLocationType	Position 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

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

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

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

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

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

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="[e-mail]"
      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	'[e-mail]'
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

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

const aboutMeInfos = [
    {
      title: 'Where I live',
      description: 'Gangdong-gu, Seoul, Republic of Korea',
    },
    {
      title: 'Give me a call',
      description: 'T. [phone]',
    },
    {
      title: 'Or, why don’t you email me?',
      description: '[e-mail]',
    },
  ],

VisitorCounter

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

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/

2. <woorim960> http://152.70.89.184/

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

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

• seohyunsim
• soonki-98
• woorim960