Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/modern-agile-team/dev-portfolio
This helps you develop your web portfolio easily and quickly.
https://github.com/modern-agile-team/dev-portfolio
library npm-package open-source react styled-components
Last synced: 1 day ago
JSON representation
This helps you develop your web portfolio easily and quickly.
- Host: GitHub
- URL: https://github.com/modern-agile-team/dev-portfolio
- Owner: modern-agile-team
- Created: 2022-03-17T10:10:53.000Z (almost 3 years ago)
- Default Branch: master
- Last Pushed: 2022-11-05T06:42:39.000Z (about 2 years ago)
- Last Synced: 2024-12-17T01:36:30.510Z (13 days ago)
- Topics: library, npm-package, open-source, react, styled-components
- Language: TypeScript
- Homepage: https://www.npmjs.com/package/dev-portfolio
- Size: 3.49 MB
- Stars: 50
- Watchers: 2
- Forks: 2
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
Awesome Lists containing this project
README
# dev-porfolio
[](https://badge.fury.io/js/dev-portfolio)
[](http://commitizen.github.io/cz-cli/)
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](https://github.com/modern-agile-team/create-dev-portfolio).
`npx create-dev-portfolio `
## Usage
```js
import { Header, Intro, Contact, ... } from 'dev-portfolio';
const App = () => {
return (
// The 'className' in the
tag surrounding the components of 'dev-portfolio' must be 'App'.
// Only then can the SideBar in the component recognize id props and automatically assign all components into the SideBar.
...
);
}
export default App;
```
## Components
- Header
- Channel
- Channels
- Intro
- Skill
- TechStackList
- Experience
- Carousel
- Gallery
- Masonry
- Image
- Item
- Card
- Contact
- VisitorCounter
- VisitorComment
- ProgressBar
### Header
```js
import { Header } from 'dev-portfolio';
const logoOption = { ... };
const channels = [ ... ];
const sideBarOption = { ... };
const App = () => {
return (
);
}
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
```js
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.
```js
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
```js
import { Channel } from 'dev-portfolio';
const App = () => {
return ;
};
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
```js
import { Channels } from 'dev-portfolio';
const channels = [ ... ];
const App = () => {
return (
);
}
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
```js
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
```js
import { Intro } from 'dev-portfolio';
const introOption = [ ... ];
const App = () => {
return (
);
}
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
```js
import { Skill } from 'dev-portfolio';
const App = () => {
return (
);
};
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
```js
import { TechStackList } from 'dev-portfolio';
const techStackList = [ ... ];
const App = () => {
return (
);
}
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
```js
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
```js
// 'narrower' | 'narrow' | 'normal' | 'wide' | 'wider';
const gap = 'normal';
```
### Experience
```js
import { Experience } from 'dev-portfolio';
const historyList = [ ... ];
const App = () => {
return (
);
}
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
```js
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
```js
import { Carousel, Image } from 'dev-portfolio';
const App = () => {
return (
} // ReactElement
nextArrowIcon={} // ReactElement
startAutoplayIcon={} // ReactElement
pauseAutoplayIcon={} // ReactElement
>
// Must insert components customized
// Component of dev-portfolio ...
);
};
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 | `` | |
| `nextArrowIcon` | ReactElement | Icon Component for moving into next item | `` | |
| `startAutoplayIcon` | ReactElement | Icon Component for starting autoplay | `` | |
| `pauseAutoplayIcon` | ReactElement | Icon Component for pause autoplay | `` | |
### Gallery
```js
import { Gallery, Item } from 'dev-portfolio';
const App = () => {
return (
// Must insert components customized
// Component of dev-portfolio ...
);
};
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
```js
import { Masonry, Image } from 'dev-portfolio';
const App = () => {
return (
/* Must insert components customized */
/* Component of dev-portfolio */
/* Component of dev-portfolio */
);
};
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
```js
import { Image } from 'dev-portfolio';
const App = () => {
return (
);
};
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
```js
import { Item } from 'dev-portfolio';
const App = () => {
return (
);
};
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
```js
import { Card } from 'dev-portfolio';
const App = () => {
return (
);
};
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
```js
import { Contact } from 'dev-portfolio';
const channels = [ ... ];
const aboutMeInfos = [ ... ];
const App = () => {
return (
);
};
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 | `'[email protected]'` | |
| `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
```js
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
```js
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: '[email protected]',
},
],
```
### VisitorCounter
```js
import { VisitorCounter } from 'dev-portfolio';
const App = () => {
return (
);
};
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
```js
// 'default' | 'big-size' | 'simple'
const theme = 'default';
```
#### VisitorCounter example
```js
const visitorCounter = {
title: 'hits',
todayTitle: 'today',
totalTitle: 'total',
};
```
### VisitorComment
```js
import { VisitorComment } from 'dev-portfolio';
const commentList = [ ... ];
const App = () => {
return (
);
}
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.
```js
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
```js
import { ProgressBar } from 'dev-portfolio';
const App = () => {
return (
);
};
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
```ts
type amimationType = 'wave' | 'fill-up' | 'fill-up-wave' | 'none';
```
# Example
1. <[dev-portfolio-app](https://github.com/modern-agile-team/dev-portfolio-app)> http://52.78.64.144/
2. <[woorim960](https://github.com/woorim960/woorim-personal-website)> http://152.70.89.184/
3. <[seohyunsim](https://github.com/seohyunsim/seohyunsim-portfolio)> 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
```js
const id = "['ID_NAME', 'ICON_NAME']";
```
- iconName example
```js
const iconName = 'ICON_NAME',
```
## License
MIT
## Contributor
- [seohyunsim](https://github.com/seohyunsim)
- [soonki-98](https://github.com/soonki-98)
- [woorim960](https://github.com/woorim960)