{"id":23640773,"url":"https://github.com/modern-agile-team/dev-portfolio","last_synced_at":"2025-08-31T17:32:04.758Z","repository":{"id":37015975,"uuid":"470940919","full_name":"modern-agile-team/dev-portfolio","owner":"modern-agile-team","description":"This helps you develop your web portfolio easily and quickly.","archived":false,"fork":false,"pushed_at":"2022-11-05T06:42:39.000Z","size":3659,"stargazers_count":50,"open_issues_count":3,"forks_count":2,"subscribers_count":2,"default_branch":"master","last_synced_at":"2024-12-17T01:36:30.510Z","etag":null,"topics":["library","npm-package","open-source","react","styled-components"],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/dev-portfolio","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/modern-agile-team.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2022-03-17T10:10:53.000Z","updated_at":"2024-03-06T05:17:50.000Z","dependencies_parsed_at":"2023-01-17T13:30:19.687Z","dependency_job_id":null,"html_url":"https://github.com/modern-agile-team/dev-portfolio","commit_stats":null,"previous_names":[],"tags_count":12,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/modern-agile-team%2Fdev-portfolio","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/modern-agile-team%2Fdev-portfolio/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/modern-agile-team%2Fdev-portfolio/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/modern-agile-team%2Fdev-portfolio/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/modern-agile-team","download_url":"https://codeload.github.com/modern-agile-team/dev-portfolio/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":231610645,"owners_count":18400207,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["library","npm-package","open-source","react","styled-components"],"created_at":"2024-12-28T09:51:35.559Z","updated_at":"2024-12-28T09:51:36.183Z","avatar_url":"https://github.com/modern-agile-team.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# dev-porfolio\n\n[![npm version](https://badge.fury.io/js/dev-portfolio.svg)](https://badge.fury.io/js/dev-portfolio)\n[![Commitizen friendly](https://img.shields.io/badge/commitizen-friendly-brightgreen.svg)](http://commitizen.github.io/cz-cli/)\n![license_badge](https://img.shields.io/badge/license-MIT-lightgrey)\n![react-iconify](https://img.shields.io/badge/iconify-react-red)\n\ndev-portfolio is React library that helps you develop your web portfolio easily and quickly.\n\n![ezgif com-gif-maker](https://user-images.githubusercontent.com/56839474/194718430-5404fa1f-c24b-48a0-8730-15db2d3bde00.gif)\n\n## List\n\n- \u003ca href=\"#install\"\u003eInstallation\u003c/a\u003e\n- \u003ca href=\"#usage\"\u003eUsage\u003c/a\u003e\n- \u003ca href=\"#components\"\u003eComponents\u003c/a\u003e\n- \u003ca href=\"#example\"\u003eExample\u003c/a\u003e\n- \u003ca href=\"#guidelines-to-input-icons\"\u003eGuidelines to input icons\u003c/a\u003e\n- \u003ca href=\"#license\"\u003eLicence\u003c/a\u003e\n- \u003ca href=\"#contributor\"\u003eContributor\u003c/a\u003e\n\n## Install\n\n1. Install only dev-portfolio library.\n\n `npm i dev-portfolio --save`\n\n2. Install boiler-plate code by using `npx`. \n 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).\n\n `npx create-dev-portfolio \u003cYOUR_APP_NAME\u003e`\n\n## Usage\n\n```js\nimport { Header, Intro, Contact, ... } from 'dev-portfolio';\n\nconst App = () =\u003e {\n return (\n // The 'className' in the \u003cdiv\u003e tag surrounding the components of 'dev-portfolio' must be 'App'.\n // Only then can the SideBar in the \u003cHeader\u003e component recognize id props and automatically assign all components into the SideBar.\n \u003cdiv className=\"App\"\u003e\n \u003cHeader /\u003e\n \u003cIntro /\u003e\n \u003cContact /\u003e\n ...\n \u003c/div\u003e\n );\n}\n\nexport default App;\n```\n\n## Components\n\n- \u003ca href=\"#header\"\u003eHeader\u003c/a\u003e\n- \u003ca href=\"#channel\"\u003eChannel\u003c/a\u003e\n- \u003ca href=\"#channels\"\u003eChannels\u003c/a\u003e\n- \u003ca href=\"#intro\"\u003eIntro\u003c/a\u003e\n- \u003ca href=\"#skill\"\u003eSkill\u003c/a\u003e\n- \u003ca href=\"#techstacklist\"\u003eTechStackList\u003c/a\u003e\n- \u003ca href=\"#experience\"\u003eExperience\u003c/a\u003e\n- \u003ca href=\"#carousel\"\u003eCarousel\u003c/a\u003e\n- \u003ca href=\"#gallery\"\u003eGallery\u003c/a\u003e\n- \u003ca href=\"#masonry\"\u003eMasonry\u003c/a\u003e\n- \u003ca href=\"#image\"\u003eImage\u003c/a\u003e\n- \u003ca href=\"#item\"\u003eItem\u003c/a\u003e\n- \u003ca href=\"#card\"\u003eCard\u003c/a\u003e\n- \u003ca href=\"#contact\"\u003eContact\u003c/a\u003e\n- \u003ca href=\"#visitorcounter\"\u003eVisitorCounter\u003c/a\u003e\n- \u003ca href=\"#visitorcomment\"\u003eVisitorComment\u003c/a\u003e\n- \u003ca href=\"#progressbar\"\u003eProgressBar\u003c/a\u003e\n\n### Header\n\n\u003cimg width=\"1724\" alt=\"스크린샷 2022-09-13 오전 2 05 09\" src=\"https://user-images.githubusercontent.com/56839474/189714124-370954bf-e995-4c85-9246-36fb12732a34.png\"\u003e\n\n```js\nimport { Header } from 'dev-portfolio';\n\nconst logoOption = { ... };\nconst channels = [ ... ];\nconst sideBarOption = { ... };\n\nconst App = () =\u003e {\n return (\n \u003cHeader\n headerHeight=\"80px\"\n headerWidth=\"100%\"\n headerBackgroundColor=\"whitesmoke\"\n logoOption={logoOption}\n channels={channels}\n sideBarOption={sideBarOption}\n /\u003e\n );\n}\n\nexport default App;\n```\n\n| props | type | description | default | note |\n| ----------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------- | ---- |\n| `headerHeight` | string | Header height style | `'80px'` | |\n| `headerWidth` | string | Header width style | `'100%'` | |\n| `headerBackgroundColor` | string | Header background color style | `'white'` | |\n| `logoOption` | \u003ca href=\"https://github.com/modern-agile-team/dev-portfolio/blob/8b8f85015e356e649deee3e988cc3e33036a3b33/app/src/lib/common/types/ComponentTypes/Header/HeaderLogoType.ts#:~:text=export%20interface-,HeaderLogoPropsType,-extends%20HeaderLogoImgStyledPropsType%2C\"\u003eLogoOptionPropsType\u003c/a\u003e | You can customize the attrs such as logo and title by using logoOption props. | See \"More about Header's Props\" | |\n| `channels` | \u003ca href=\"https://github.com/modern-agile-team/dev-portfolio/blob/8b8f85015e356e649deee3e988cc3e33036a3b33/app/src/lib/common/types/ComponentTypes/ChannelType.ts#:~:text=export%20interface-,ChannelType,-extends%20ChannelStyledType%20%7B\"\u003eChannelType[]\u003c/a\u003e | 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\" | |\n| `sideBarOption` | \u003ca href=\"https://github.com/modern-agile-team/dev-portfolio/blob/master/src/lib/common/types/ComponentTypes/Header/SideBar/SideBarType.ts#1:~:text=SideBarOptionPropsType\"\u003eSideBarOptionPropsType\u003c/a\u003e | You can customize the attrs such as title and icon, item in sidebar by using sideBarOption props. | See \"More about Header's Props\" | |\n\n### More about Header's props\n\n#### logoOption example\n\n\u003cimg width=\"180\" alt=\"image\" src=\"https://user-images.githubusercontent.com/83394348/193384391-ff363c34-9a28-40b1-b462-9d16a624799b.png\"\u003e\n\n```js\nconst logoOption = {\n redirectUrl: '/',\n logoImg: 'logo.png',\n logoHidden: false,\n title: 'dev-portfolio',\n logoMargin: '0px 16px 0px 16px',\n logoWidth: '50px',\n logoHeight: '50px',\n titleColor: 'black',\n titleSize: '24px',\n titleWeight: '800',\n};\n```\n\n#### channels example\n\n\u003cimg width=\"140\" alt=\"스크린샷 2022-10-01 오후 1 55 33\" src=\"https://user-images.githubusercontent.com/56839474/193393251-a182a876-956d-4ccf-a18d-b0f4a713ad3e.png\"\u003e\n\nFor an example of channels, see: \u003ca href=\"#more-about-channels-props\"\u003echannels example\u003c/a\u003e\n\n#### sideBarOption example\n\n\u003cimg width=\"45\" alt=\"image\" src=\"https://user-images.githubusercontent.com/83394348/193385692-028f193d-a82a-4a19-87cf-74bebfdd3cd7.png\"\u003e\n\u003cimg height=\"200px\" alt=\"image\" src=\"https://user-images.githubusercontent.com/83394348/193385720-7c68dc98-3264-4ea9-ba5c-1b0876347a91.png\"\n\u003e\n\nWay to change the sidebar icon, use iconName props.\n\nRefer to the \u003ca href=\"#guidelines-to-input-icons\"\u003eguidelines.\u003c/a\u003e\n\n```js\nconst sideBarOption = {\n mainTitle: 'dev-portfolio',\n mainTitleSize: '24px',\n mainTitleColor: 'white',\n mainTitleAlign: 'left',\n mainTitleBorderColor: 'white',\n iconName: 'ant-design:menu-fold-outlined', //Refer to the guidelines.\n iconSize: '28px',\n iconColor: '#434521',\n iconMargin: '0px 12px 0px 12px',\n itemTextColor: 'white',\n itemTextAlign: 'left',\n itemBackgroundColor: '#434521',\n itemHoverdBackgroundColor: 'black',\n backgroundColor: '#434521',\n};\n```\n\n### Channel\n\n\u003cimg width=\"50\" alt=\"스크린샷 2022-10-01 오후 1 55 20\" src=\"https://user-images.githubusercontent.com/56839474/193393242-0aa4dabb-3de0-436d-89af-4729d9b5c36d.png\"\u003e\n\n```js\nimport { Channel } from 'dev-portfolio';\n\nconst App = () =\u003e {\n return \u003cChannel redirectUrl=\"/\" name=\"github\" color=\"black\" size=\"24px\" margin=\"0px 6px\" padding=\"0px\" /\u003e;\n};\n\nexport default App;\n```\n\n| props | type | description | default | note |\n| ------------- | ------ | ------------------------------------- | ----------- | ---- |\n| `redirectUrl` | string | URL you want to redirect when clicked | `'/'` | |\n| `name` | string | Channel name | `'github'` | |\n| `color` | string | Channel icon color style | `'black'` | |\n| `size` | string | Channel icon size style | `'24px'` | |\n| `margin` | string | Channel margin style | `'0px 6px'` | |\n| `padding` | string | Channel padding style | `'0px'` | |\n\n### Channels\n\n\u003cimg width=\"140\" alt=\"스크린샷 2022-10-01 오후 1 55 33\" src=\"https://user-images.githubusercontent.com/56839474/193393251-a182a876-956d-4ccf-a18d-b0f4a713ad3e.png\"\u003e\n\n```js\nimport { Channels } from 'dev-portfolio';\n\nconst channels = [ ... ];\n\nconst App = () =\u003e {\n return (\n \u003cChannels\n channels={channels}\n /\u003e\n );\n}\n\nexport default App;\n```\n\n| props | type | description | default | note |\n| ---------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------- | --------------------------------- | ---- |\n| `channels` | \u003ca href=\"https://github.com/modern-agile-team/dev-portfolio/blob/8b8f85015e356e649deee3e988cc3e33036a3b33/app/src/lib/common/types/ComponentTypes/ChannelType.ts#:~:text=export%20interface-,ChannelType,-extends%20ChannelStyledType%20%7B\"\u003eChannelType[]\u003c/a\u003e | Channel-only props such as Github and LinkedIn, etc | See \"More about Channels's Props\" | |\n\n### More about Channels Props\n\n#### channels example\n\n```js\nconst channels = [\n {\n redirectUrl: '/',\n name: 'github',\n color: 'black',\n size: '24px',\n margin: '0px 6px',\n padding: '0px',\n },\n {\n redirectUrl: '/',\n name: 'youtube',\n color: '#e03b35',\n size: '24px',\n margin: '0px 6px',\n padding: '0px',\n },\n {\n redirectUrl: '/',\n name: 'linkedin',\n color: '#1295cd',\n size: '24px',\n margin: '0px 6px',\n padding: '0px',\n },\n];\n```\n\n### Intro\n\n\u003cimg width=\"1718\" alt=\"스크린샷 2022-09-13 오전 2 06 20\" src=\"https://user-images.githubusercontent.com/56839474/189714308-db45a17e-02e5-4575-a616-64c2fb31cae5.png\"\u003e\n\n```js\nimport { Intro } from 'dev-portfolio';\n\nconst introOption = [ ... ];\n\nconst App = () =\u003e {\n return (\n \u003cIntro\n id=\"Intro Component\"\n textAlign=\"left\"\n backgroundColor=\"whitesmoke\"\n title=\"Introduction\"\n shortIntro=\"Hello I am a developer enjoys growing up!\"\n description=\"My name is OOO, BE developer good at Nodejs bla bla...\"\n descriptionColor=\"black\"\n descriptionBackgroundColor=\"black\"\n textAlign=\"black\"\n backgroundColor=\"black\"\n /\u003e\n );\n}\n\nexport default App;\n```\n\n| props | type | description | default | note |\n| ---------------------------- | ------ | ----------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------ |\n| `id` | string | Name to be added to Sidebar | | See \u003ca href=\"#guidelines-to-input-icons\"\u003eGuideline\u003c/a\u003e to add icon |\n| `textAlign` | string | Intro text align style. You can choose one of the themes such as `'left'` and `'center'`. | `'left'` | |\n| `backgroundColor` | string | Intro background color style. | `'whitesmoke'` | |\n| `title` | string | Title of Intro section. | `'Intro'` | |\n| `shortIntro` | string | Main text that can express you the best. | `'shortIntro that will captivate people'` |\n| `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!'` | |\n| `titleColor` | string | Title text color style. | `'black'` | |\n| `shortIntroColor` | string | ShortIntro text color style. | `'black'` | |\n| `descriptionColor` | string | Description text color style. | `'black'` | |\n| `descriptionBackgroundColor` | string | Description background color style. | `'white'` | |\n\n### Skill\n\n\u003cimg width=\"200\" alt=\"스크린샷 2022-10-01 오후 2 56 52\" src=\"https://user-images.githubusercontent.com/56839474/193394980-6fc37f61-64f3-47b0-a2dd-be9394772de8.png\"\u003e\n\n```js\nimport { Skill } from 'dev-portfolio';\n\nconst App = () =\u003e {\n return (\n \u003cSkill\n title=\"Javascript\"\n titleSize=\"24px\"\n isHiddenTitle={false}\n iconName=\"ion:logo-javascript\"\n iconSize=\"40px\"\n iconColor=\"#F0DB4F\"\n margin=\"0px\"\n padding=\"0px\"\n titleColor=\"black\"\n backgroundColor=\"white\"\n borderColor=\"white\"\n borderRadius=\"12px\"\n /\u003e\n );\n};\n\nexport default App;\n```\n\n| props | type | description | default | note |\n| ----------------- | ------- | -------------------------------------------------------------- | ----------------------- | ------------------------------------------------------------------ |\n| `title` | string | Main text that expresses the skill | `'javascript'` | |\n| `titleSize` | string | Title size style | `'24px'` | |\n| `isHiddenTitle` | boolean | If this value is set to True, you can hide the title. | `false` | |\n| `iconName` | string | Enter the name of the icon you searched on the following site. | `'ion:logo-javascript'` | See \u003ca href=\"#guidelines-to-input-icons\"\u003eGuideline\u003c/a\u003e to add icon |\n| `iconSize` | string | Icon size style | `'40px'` | |\n| `iconColor` | string | Icon color style | `'#F0DB4F'` |\n| `margin` | string | Skill margin style | `'0px'` | |\n| `padding` | string | Skill padding style | `'0px'` | |\n| `titleColor` | string | Title color style | `'black'` | |\n| `borderColor` | string | Skill border color style | `'white'` | |\n| `backgroundColor` | string | Skill background color style | `'white'` | |\n| `borderRadius` | string | Skill border-radius style | `'12px'` | |\n\n### TechStackList\n\n![techStackList](https://user-images.githubusercontent.com/56839474/189713771-ee5de07c-0256-464f-aa61-e5e133dda548.gif)\n\n```js\nimport { TechStackList } from 'dev-portfolio';\n\nconst techStackList = [ ... ];\n\nconst App = () =\u003e {\n return (\n \u003cTechStackList\n id=\"Tech Stack Component\"\n gap=\"normal\" // 'narrower' | 'narrow' | 'normal' | 'wide' | 'wider'\n techStackList={techStackList}\n /\u003e\n );\n}\n\nexport default App;\n```\n\n| props | type | description | default | note |\n| --------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------- | ------------------------------------------------------------------- | ------------------------------------------------------------------ |\n| `id` | string | Name to be added to Sidebar | | See \u003ca href=\"#guidelines-to-input-icons\"\u003eGuideline\u003c/a\u003e to add icon |\n| `gap` | \u003ca href=\"https://github.com/modern-agile-team/dev-portfolio/blob/master/src/lib/common/types/ComponentTypes/TechStack/TechStackListType.ts#:~:text=type-,TechStackGapType,-%3D%20%27narrower%27\"\u003eTechStackGapType\u003c/a\u003e | Spacing between TechStacks in TechStackList | `'normal'` |\n| `techStackList` | \u003ca href=\"https://github.com/modern-agile-team/dev-portfolio/blob/master/src/lib/common/types/ComponentTypes/TechStack/TechStackNameType.ts#:~:text=TechStackNamePropsType\"\u003eTechStackPropsType[]\u003c/a\u003e | Array of TechStacks | \u003ca href=\"#techStackList example\"\u003eSee \"More about techStackList\"\u003c/a\u003e | |\n\n### More about TechStackList's props\n\n#### techStackList example\n\n```js\nconst techStackList = [\n {\n nameOption: {\n name: 'Javascript',\n nameTextColor: 'black',\n logoName: 'Javascript',\n fontSize: '18px',\n logoSize: '24px',\n },\n progressBarOption: {\n rateText: '45%',\n rateTextColor: 'black',\n isHiddenRateText: false,\n backgroundColor: 'black',\n colorTo: '#E2D784',\n colorFrom: 'whitesmoke',\n width: '100%',\n height: '40px',\n animationType: 'fill-up-wave',\n isBlinking: true,\n },\n },\n {\n nameOption: { name: 'HTML5', nameTextColor: 'black', logoName: 'HTML-5', fontSize: '18px', logoSize: '24px' },\n progressBarOption: {\n rateText: '30%',\n rateTextColor: 'black',\n isHiddenRateText: false,\n backgroundColor: 'black',\n colorTo: '#E34F26',\n colorFrom: 'whitesmoke',\n width: '100%',\n height: '40px',\n animationType: 'fill-up-wave',\n isBlinking: true,\n },\n },\n {\n nameOption: { name: 'Nodejs', nameTextColor: 'black', logoName: 'Nodejs', fontSize: '18px', logoSize: '24px' },\n progressBarOption: {\n rateText: '85%',\n rateTextColor: 'black',\n isHiddenRateText: false,\n backgroundColor: 'black',\n colorTo: '#339933',\n colorFrom: 'whitesmoke',\n width: '100%',\n height: '40px',\n animationType: 'fill-up-wave',\n isBlinking: true,\n },\n },\n];\n```\n\n#### gap example\n\n \u003cimg width=\"100%\" alt=\"스크린샷 2022-08-20 오후 12 22 27\" src=\"https://user-images.githubusercontent.com/56839474/185727226-b401ce50-50fb-4572-b78e-692ff6cf63ef.png\"\u003e\n\n```js\n// 'narrower' | 'narrow' | 'normal' | 'wide' | 'wider';\nconst gap = 'normal';\n```\n\n### Experience\n\n\u003cimg width=\"940\" alt=\"image\" src=\"https://user-images.githubusercontent.com/83394348/193396422-4c5ad8f8-d679-4575-8a78-b016cf5aee83.png\"\u003e\n\n```js\nimport { Experience } from 'dev-portfolio';\n\nconst historyList = [ ... ];\n\nconst App = () =\u003e {\n return (\n \u003cExperience\n id=\"Experience Component\"\n title=\"Experience Title\"\n textAlign=\"left\"\n theme=\"vertical\" // 'basic' | 'box' | 'vertical'\n shape=\"square\" // 'square' | 'round-square'\n headerTitleColor=\"black\"\n historyTitleColor=\"black\"\n dateColor=\"black\"\n descriptionColor=\"black\"\n historyList={historyList}\n /\u003e\n );\n}\n\nexport default App;\n```\n\n| props | type | description | default | note |\n| ------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------- | ----------------------------------- | ------------------------------------------------------------------ |\n| `id` | string | Name to be added to Sidebar | | See \u003ca href=\"#guidelines-to-input-icons\"\u003eGuideline\u003c/a\u003e to add icon |\n| `title` | string | Main title text of Experience Component | `'Experience'` |\n| `textAlign` | string | Experience Text align | `'left'` | |\n| `theme` | \u003ca href=\"https://github.com/modern-agile-team/dev-portfolio/blob/master/src/lib/common/types/ComponentTypes/ExperienceType.ts#:~:text=type-,ExperienceThemeType,-%3D%20%27basic%27\"\u003eExperienceThemeType\u003c/a\u003e | You can decorate your experience with a variety of theme such as 'basic', 'box', 'vertical'. | `'basic'` | |\n| `shape` | \u003ca href=\"https://github.com/modern-agile-team/dev-portfolio/blob/master/src/lib/common/types/ComponentTypes/ExperienceType.ts#:~:text=type-,ExperienceShapeType,-%3D%20%27square%27\"\u003eExperienceVerticalOptionType\u003c/a\u003e | Shape of card specially used in 'vertical' theme such as 'square', 'round-square'. | `'square'` | |\n| `headerTitleColor` | string | Color of title in Experience component | `'black'` | |\n| `historyTitleColor` | string | Color of title at historyList | `'black'` | |\n| `dateColor` | string | Color of date in history List | `'black'` | |\n| `descriptionColor` | string | Color of description in history List | `'black'` | |\n| `historyList` | \u003ca href=\"https://github.com/modern-agile-team/dev-portfolio/blob/master/src/lib/common/types/ComponentTypes/ExperienceType.ts#:~:text=export%20interface-,ExperienceHistoryListType,-%7B\"\u003eExperienceHistoryListType[]\u003c/a\u003e | You can add your history data such as date, title, description, etc. | See \"More about Experience's Props\" | |\n\n### More about Experience's props\n\n#### historyList example\n\n```js\nconst historyList = [\n {\n startDate: '2022.01.01',\n endDate: '2022.03.10',\n title: 'this is title',\n description:\n 'This prop name is des.\\nWrite down the additional explanation you want here.\\nYou can break the line to backslash-n.',\n },\n {\n startDate: '2020.02',\n title: 'this is title',\n 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.`,\n },\n {\n startDate: '2018',\n endDate: '2019.12',\n title: 'this is title',\n },\n];\n```\n\n### Carousel\n\n![ezgif com-gif-maker (2)](https://user-images.githubusercontent.com/56839474/189905929-3732d317-a545-42e4-87ff-f3bb085e4063.gif)\n\n```js\nimport { Carousel, Image } from 'dev-portfolio';\n\nconst App = () =\u003e {\n return (\n \u003cCarousel\n id=\"Carousel Component\"\n width=\"65%\"\n transition={1000} // ms\n autoplaySpeed={3000} // ms\n slideToShow={1}\n isArrowShow={true}\n isAutoplay={false}\n isAutoplayControl={true}\n arrowLocation=\"mid-side\" // 'bottom' | 'mid-side' | 'top' | 'bottom-side' | 'top-side'\n playerLocation=\"bottom-mid\" // 'bottom-mid' | 'bottom-left' | 'bottom-right' | 'top-mid' | 'top-left' | 'top-right'\n prevArrowIcon={\u003cYOUR_COMPONENT /\u003e} // ReactElement\n nextArrowIcon={\u003cYOUR_COMPONENT /\u003e} // ReactElement\n startAutoplayIcon={\u003cYOUR_COMPONENT /\u003e} // ReactElement\n pauseAutoplayIcon={\u003cYOUR_COMPONENT /\u003e} // ReactElement\n \u003e\n // Must insert components customized\n \u003cYOUR_COMPONENT /\u003e\n \u003cImage src=\"anything.png\" /\u003e // Component of dev-portfolio ...\n \u003c/Carousel\u003e\n );\n};\n\nexport default App;\n```\n\n| props | type | description | default | note |\n| ------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | -------------------------------------------- | -------------------- | ------------------------------------------------------------------ |\n| `id` | string | Name to be added to Sidebar | | See \u003ca href=\"#guidelines-to-input-icons\"\u003eGuideline\u003c/a\u003e to add icon |\n| `width` | string | Carousel width | `'100%'` | |\n| `transition` | number | Transition animation speed | `1000` | Unit : ms |\n| `autoplaySpeed` | number | Time to stay in a item | `3000` | Unit : ms |\n| `slideToShow` | number | Number of item to show at once | `1` | |\n| `isArrowShow` | boolean | Flag for whether to show buttons | `true` | |\n| `isAutoplay` | boolean | Flag for play carousel automatically | `false` |\n| `isAutoplayControl` | boolean | Flag for whether to show carousel player | `true` |\n| `arrowLocation` | \u003ca href=\"https://github.com/modern-agile-team/dev-portfolio/blob/master/src/lib/common/types/ComponentTypes/CarouselType.ts#:~:text=%27bottom%27%20%7C%20%27mid%2Dside%27%20%7C%20%27top%27%20%7C%20%27bottom%2Dside%27%20%7C%20%27top%2Dside%27\"\u003eArrowLocationType\u003c/a\u003e | Location of arrow icon | `'mid-side'` | |\n| `playerLocation` | \u003ca href=\"https://github.com/modern-agile-team/dev-portfolio/blob/master/src/lib/common/types/ComponentTypes/CarouselType.ts#:~:text=%27bottom%2Dmid%27%20%7C%20%27bottom%2Dleft%27%20%7C%20%27bottom%2Dright%27%20%7C%20%27top%2Dmid%27%20%7C%20%27top%2Dleft%27%20%7C%20%27top%2Dright%27\"\u003ePlayerLocationType\u003c/a\u003e | Location of Play icon | `'bottom-mid'` | |\n| `prevArrowIcon` | ReactElement | Icon Component for moving into previous item | `\u003cFiChevronLeft /\u003e` | |\n| `nextArrowIcon` | ReactElement | Icon Component for moving into next item | `\u003cFiChevronRight /\u003e` | |\n| `startAutoplayIcon` | ReactElement | Icon Component for starting autoplay | `\u003cTbPlayerPlay /\u003e` | |\n| `pauseAutoplayIcon` | ReactElement | Icon Component for pause autoplay | `\u003cTbPlayerPause /\u003e` | |\n\n### Gallery\n\n\u003cimg width=\"1714\" alt=\"스크린샷 2022-09-13 오전 2 08 28\" src=\"https://user-images.githubusercontent.com/56839474/189715251-5145031f-d602-414b-8cd7-ede5bd78c5ab.png\"\u003e\n\n```js\nimport { Gallery, Item } from 'dev-portfolio';\n\nconst App = () =\u003e {\n return (\n \u003cGallery\n id=\"Gallery Component\"\n column={3}\n gap=\"normal\" // 'wider' | 'wide' | 'normal' | 'narrow' | 'narrower'\n theme=\"mid-night\" // 'mid-night' | 'blossom' | 'fruits' | 'bare-bare' | 'mint-chocolate'\n padding=\"2em 10em\"\n \u003e\n // Must insert components customized\n \u003cYOUR_COMPONENT /\u003e\n \u003cItem /\u003e // Component of dev-portfolio ...\n \u003c/Gallery\u003e\n );\n};\n\nexport default App;\n```\n\n| props | type | description | default | note |\n| --------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------- | ------------------------------------------------------------------ |\n| `id` | string | Name to be added to Sidebar | | See \u003ca href=\"#guidelines-to-input-icons\"\u003eGuideline\u003c/a\u003e to add icon |\n| `column` | number | Number of vertical lines | `3` | |\n| `gap` | \u003ca href=\"https://github.com/modern-agile-team/dev-portfolio/blob/master/src/lib/common/types/ComponentTypes/GalleryType.ts#:~:text=type-,GalleryGapType,-%3D%20%27wider%27\"\u003eGalleryGapType\u003c/a\u003e | Spacing between items in Gallery | `'normal'` | |\n| `theme` | \u003ca href=\"https://github.com/modern-agile-team/dev-portfolio/blob/master/src/lib/common/types/ComponentTypes/GalleryType.ts#:~:text=type-,GalleryThemeType,-%3D%20%27mid%2Dnight\"\u003eGalleryThemeType\u003c/a\u003e | 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'` | |\n| `padding` | string | Gallery padding | `'2em 10em'` | |\n\n### Masonry\n\n\u003cimg width=\"1674\" alt=\"스크린샷 2022-09-13 오전 2 08 45\" src=\"https://user-images.githubusercontent.com/56839474/189715278-2e74562d-7d46-482b-8222-01251d538f1e.png\"\u003e\n\n```js\nimport { Masonry, Image } from 'dev-portfolio';\n\nconst App = () =\u003e {\n return (\n \u003cMasonry id=\"Masonry Component\" column={4} padding=\"2em 4em\"\u003e\n /* Must insert components customized */\n \u003cYOUR_COMPONENT /\u003e\n \u003cImage src=\"anything.png\" redirectURL=\"/\" /\u003e\n /* Component of dev-portfolio */\n \u003cImage src=\"https://picsum.photos/900/1100/?random\" redirectURL=\"/\" /\u003e\n /* Component of dev-portfolio */\n \u003c/Masonry\u003e\n );\n};\n\nexport default App;\n```\n\n| props | type | description | default | note |\n| --------- | ------ | --------------------------- | ----------- | ------------------------------------------------------------------ |\n| `id` | string | Name to be added to Sidebar | | See \u003ca href=\"#guidelines-to-input-icons\"\u003eGuideline\u003c/a\u003e to add icon |\n| `column` | number | Number of vertical lines | `4` |\n| `padding` | string | Masonry padding | `'2em 4em'` | |\n\n### Image\n\n![ezgif com-gif-maker (5)](https://user-images.githubusercontent.com/56839474/189905432-400ef4b5-6f6f-4237-a146-d1376a3a389e.gif)\n\n```js\nimport { Image } from 'dev-portfolio';\n\nconst App = () =\u003e {\n return (\n \u003cImage\n src=\"https://picsum.photos/500/600/?random\"\n head=\"Write your head\"\n subhead=\"Write your subhead\"\n redirectURL=\"/\"\n noShowHead={false}\n zoomWhenHover={false}\n headSize=\"20px\"\n headColor=\"black\"\n headWeight=\"bold\"\n subheadSize=\"14px\"\n subheadColor=\"white\"\n /\u003e\n );\n};\n\nexport default App;\n```\n\n| props | type | description | default | note |\n| --------------- | ------- | --------------------------------------------------- | ---------------------- | ---- |\n| `src` | string | Image source url | | |\n| `head` | string | Main Title Text | `'Write your head'` | |\n| `headSize` | string | Head text size style | `'20px'` | |\n| `headColor` | string | Head color style | `'black'` | |\n| `headWeight` | string | Head font weight style | `'700'` | |\n| `subhead` | string | Sub Title Text | `'Write your subhead'` | |\n| `subheadSize` | string | Subhead text size style | `'14px'` | |\n| `subheadColor` | string | Subhead text color style | `'black'` | |\n| `redirectURL` | string | URL to redirect | `'/'` | |\n| `noShowHead` | boolean | Flag for whether to hide texts | `false` | |\n| `zoomWhenHover` | boolean | Flag for whether to zoom image when hovered on item | `false` | |\n\n### Item\n\n![ezgif com-gif-maker](https://user-images.githubusercontent.com/56839474/189906937-e0645174-5473-4a70-b373-c05eefd4ac38.gif)\n\n```js\nimport { Item } from 'dev-portfolio';\n\nconst App = () =\u003e {\n return (\n \u003cItem\n src=\"https://picsum.photos/600/600/?random\"\n title=\"This is title\"\n description=\"description\"\n redirectURL=\"/\"\n textRisingSpeed={300}\n isTextRising={false}\n descriptionColor=\"white\"\n hoverdInnerBorderColor=\"white\"\n /\u003e\n );\n};\n\nexport default App;\n```\n\n| props | type | description | default | note |\n| ------------------------ | ------- | -------------------------------------- | ----------------------------------------- | ---- |\n| `src` | string | Image source url | `'https://picsum.photos/600/600/?random'` | |\n| `title` | string | Main Title Text | `'This is title'` |\n| `description` | string | Description Text | `'description'` | |\n| `redirectURL` | string | URL to redirect | `'/'` | |\n| `textRisingSpeed` | number | | `300` |\n| `isTextRising` | boolean | | `false` |\n| `descriptionColor` | string | Description text color style | `'white'` | |\n| `hoverdInnerBorderColor` | string | Inner border color of item when hoverd | `'white'` | |\n\n### Card\n\n\u003cimg width=\"1716\" alt=\"스크린샷 2022-09-13 오전 2 09 54\" src=\"https://user-images.githubusercontent.com/56839474/189715442-c5e8b36c-b602-46e3-89f8-5c30836a60fc.png\"\u003e\n\n```js\nimport { Card } from 'dev-portfolio';\n\nconst App = () =\u003e {\n return (\n \u003cCard\n width=\"10em\"\n height=\"10em\"\n redirectURL=\"/\"\n shape=\"square\" // 'square' | 'round-square' | 'round'\n hover=\"none\" // 'up' | 'down' | 'zoom'\n /\u003e\n );\n};\n\nexport default App;\n```\n\n| props | type | description | default | note |\n| ------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | -------------------------------------------------------------------------------------------- | ---------- | ---- |\n| `width` | string | Card width | `'10em'` | |\n| `height` | string | Card height | `'10em'` | |\n| `redirectURL` | string | URL to redirect | `'/'` |\n| `shape` | \u003ca href=\"https://github.com/modern-agile-team/dev-portfolio/blob/master/src/lib/common/types/ComponentTypes/CardType.ts#:~:text=type-,CardShapeType,-%3D%20%27square%27\"\u003eCardShapeType\u003c/a\u003e | You can decorate shape of Card a variety of theme such as 'square', 'round-square', 'round'. | `'square'` | |\n| `hover` | \u003ca href=\"https://github.com/modern-agile-team/dev-portfolio/blob/master/src/lib/common/types/ComponentTypes/CardType.ts#:~:text=type-,CardHoverType,-%3D%20%27up%27\"\u003eCardHoverType\u003c/a\u003e | You can make an effect on Card a variety of theme such as 'up', 'down', 'zoom'. | `'none'` | |\n\n### Contact\n\n\u003cimg width=\"100%\" alt=\"스크린샷 2022-08-20 오후 12 32 19\" src=\"https://user-images.githubusercontent.com/56839474/185727384-1b024c72-83e3-4ef9-84ac-68f832d8df3e.png\"\u003e\n\n```js\nimport { Contact } from 'dev-portfolio';\n\nconst channels = [ ... ];\nconst aboutMeInfos = [ ... ];\n\nconst App = () =\u003e {\n return (\n \u003cContact\n id=\"Contact Component\"\n backgroundColor=\"whitesmoke\"\n title=\"Hello My name is OOO\"\n subTitle=\"If you're interested in me, please press the button below :D\"\n buttonText=\"Want to work with me?\"\n email=\"abc@dev-portfolio.com\"\n channels={channels}\n aboutMeInfos={aboutMeInfos}\n titleColor='black'\n subTitleColor='black'\n buttonTextColor='black'\n buttonColor='black'\n buttonBorderColor='black'\n /\u003e\n );\n};\n\nexport default App;\n```\n\n| props | type | description | default | note |\n| ------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------- | ---------------------------------------------------------------- | ------------------------------------------------------------------ |\n| `id` | string | Name to be added to Sidebar | | See \u003ca href=\"#guidelines-to-input-icons\"\u003eGuideline\u003c/a\u003e to add icon |\n| `backgroundColor` | string | Contact Background Color | `'whitesmoke'` | |\n| `title` | string | Main title text of your contacts | `'Hello, my name is DEV_PORTFOLIO'` | |\n| `titleColor` | string | Title color style | `'black'` | |\n| `subTitle` | string | Sub title text | `'If you're interested in me, please press the button below :D'` | |\n| `subTitleColor` | string | Sub title text color style | `'black'` | |\n| `email` | string | Your Email | `'abc@dev-portfolio.com'` | |\n| `buttonText` | string | Text of button that function as a link to your email | `'Want to work with me?'` | |\n| `buttonTextColor` | string | Button text color style | `'white'` | |\n| `buttonBorderColor` | string | Button border color style | `'black'` | |\n| `channels` | \u003ca href=\"https://github.com/modern-agile-team/dev-portfolio/blob/8b8f85015e356e649deee3e988cc3e33036a3b33/app/src/lib/common/types/ComponentTypes/ChannelType.ts#:~:text=export%20interface-,ChannelType,-extends%20ChannelStyledType%20%7B\"\u003eChannelType[]\u003c/a\u003e | Channel-only props such as Github and LinkedIn, etc | See \"More about Contact's Props\" |\n| `aboutMeInfos` | \u003ca href=\"https://github.com/modern-agile-team/dev-portfolio/blob/8b8f85015e356e649deee3e988cc3e33036a3b33/app/src/lib/common/types/ComponentTypes/Contact/AboutMeInfoType.ts#:~:text=AboutMeInfoPropsType\"\u003eAboutMeInfoPropsType[]\u003c/a\u003e | Your personal information like TEL, Home etc | See \"More about Contact's Props\" |\n\n### More about Contact's props\n\n#### channels example\n\n \u003cimg width=\"200\" alt=\"channels\" src=\"https://user-images.githubusercontent.com/83394348/193384430-55a671a8-0a97-45b5-8590-f12de4526057.png\"\u003e\n\n```js\nconst channels = [\n { name: 'github', redirectUrl: 'https://', color: '#181717BB', size: '24px' },\n { name: 'naver', redirectUrl: 'https://', color: '#47A141BB', size: '24px' },\n { name: 'facebook', redirectUrl: 'https://', color: '#1877F2BB', size: '24px' },\n { name: 'youtube', redirectUrl: 'https://', color: '#FF0000BB', size: '24px' },\n];\n```\n\n#### aboutMeInfos example\n\n \u003cimg width=\"200\" alt=\"aboutMeInfos\" src=\"https://user-images.githubusercontent.com/83394348/193386818-ea657a2c-0544-4eca-9225-688ce0a58958.png\"\u003e\n\n```js\nconst aboutMeInfos = [\n {\n title: 'Where I live',\n description: 'Gangdong-gu, Seoul, Republic of Korea',\n },\n {\n title: 'Give me a call',\n description: 'T. +82 (0)10 1234 5678',\n },\n {\n title: 'Or, why don’t you email me?',\n description: 'dev-portfolio@gmail.com',\n },\n ],\n```\n\n### VisitorCounter\n\n\u003cimg width=\"200\" alt=\"visitor-counter\" src=\"https://user-images.githubusercontent.com/83394348/189859070-d9230ec1-4750-4e7b-870c-e21e306c1c65.png\"\u003e\n\n```js\nimport { VisitorCounter } from 'dev-portfolio';\n\nconst App = () =\u003e {\n return (\n \u003cVisitorCounter\n title=\"hits\"\n theme=\"big-size\" // 'default' | 'big-size' | 'simple'\n todayVisitor={0} // Your fetched variable\n totalVisitor={123} // Your fetched variable\n todayTitle=\"today\"\n totalTitle=\"total\"\n backgroundColor=\"#91c230c4\"\n todayVisitorColor=\"red\"\n totalVisitorColor=\"red\"\n todayTitleColor=\"black\"\n totalTitleColor=\"black\"\n size=\"14px\" // include: px\n /\u003e\n );\n};\n\nexport default App;\n```\n\n| props | type | description | default | note |\n| ------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------- | ------------- | ------------------------- | --- |\n| `title` | string | Hit title used in 'default' and 'big-size' | `'hits'` | |\n| `theme` | \u003ca href=\"https://github.com/modern-agile-team/dev-portfolio/blob/master/src/lib/common/types/ComponentTypes/VisitorCounterType.ts#:~:text=type-,VisitorCounterThemeType,-%3D%20%27default%27\"\u003eVisitorCounterThemeType\u003c/a\u003e | Visitor Counter theme: 'default', 'big-size', 'simple' | `'default'` | |\n| `todayVisitor` | number | Number of today's visitors | `0` | fetched variable |\n| `totalVisitor` | number | Number of total's visitors | `123` | fetched variable |\n| `todayTitle` | string | Title of today visit count used in 'big-size' and 'simple' | `'today'` | |\n| `totalTitle` | string | Title of total visit count used in 'big-size' and 'simple' | `'total'` | |\n| `backgroundColor` | string | Background color of todayTitle | `'#91c230c4'` | | |\n| `todayVisitorColor` | string | Today visitor color style | `'red'` | | |\n| `totalVisitorColor` | string | Total visitor color style | `'red'` | | |\n| `todayTitleColor` | string | Today title color style | `'black'` | | |\n| `totalTitleColor` | string | Total title color style | `'black'` | | |\n| `size` | string | Font size and component size in the visitor counter component | `'14px'` | Make sure to include 'px' |\n\n### More about VisitorCounter's props\n\n#### theme example\n\n```js\n// 'default' | 'big-size' | 'simple'\nconst theme = 'default';\n```\n\n#### VisitorCounter example\n\n```js\nconst visitorCounter = {\n title: 'hits',\n todayTitle: 'today',\n totalTitle: 'total',\n};\n```\n\n### VisitorComment\n\n![visitor-comment](https://user-images.githubusercontent.com/83394348/189853162-d52851eb-bfbe-4bc7-9024-e592c4057cbb.gif)\n\n```js\nimport { VisitorComment } from 'dev-portfolio';\n\nconst commentList = [ ... ];\n\nconst App = () =\u003e {\n return (\n \u003cVisitorComment\n id=\"VisitorComment Component\"\n theme=\"basic\" // 'basic' | 'box' | 'vertical'\n backgroundColor=\"whitesmoke\"\n inputBackgroundColor=\"White\"\n inputFontColor=\"black\"\n inputPlacehoderColor=\"black\"\n userInputLineColor=\"#b4b4b4a2\"\n buttonColor=\"#1877f2\"\n listBackgroundColor=\"white\"\n listCommentColor=\"black\"\n listNicknameColor=\"#959595\"\n listDateColor=\"#959595\"\n progressbarColor=\"#5f5f5f\"\n isShowScrollDownIcon={true}\n scrollDownIconColor='black'\n descriptionPlaceholder='write your description...'\n nicknamePlaceholder='ID'\n passwordPlaceholder='PW'\n commentList={commentList} // Your fetched variable\n comment='this portfolio is very nice' // Data you entered in comment-input\n nickname='dev-portfolio' // Data you entered in comment-input\n password='1234' // Data you entered in comment-input\n handleCreateComment={handleCreateComment} // Event handling variable\n handleChangeDescription={handleChangeDescription} // Event handling variable\n handleChangeNickname={handleChangeNickname} // Event handling variable\n handleChangePassword={handleChangePassword} // Event handling variable\n /\u003e\n );\n}\n\nexport default App;\n```\n\n| props | type | description | default | note |\n| ------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------- | ------------------------------------------------------------------ |\n| `id` | string | Name to be added to Sidebar | | See \u003ca href=\"#guidelines-to-input-icons\"\u003eGuideline\u003c/a\u003e to add icon |\n| `theme` | \u003ca href='https://github.com/modern-agile-team/dev-portfolio/blob/master/src/lib/common/types/ComponentTypes/VisitorCommentType.ts#:~:text=type-,VisitorCommentThemeType,-%3D%20%27basic%27'\u003eVisitorCommentThemeType\u003c/a\u003e | Visitor Comment theme: 'basic', 'box', 'vertical' | `'basic'` | |\n| `backgroundColor` | string | VisitorComment background-color | `'whitesmoke'` | |\n| `inputBackgroundColor` | string | Background color of guest book preparation column | `'White'` | |\n| `inputFontColor` | string | Font Color in input box when create comment, user infomation | `'Black'` | |\n| `inputPlacehoderColor` | string | Placehoder font Color in input comment, user infomation boxes | `'Black'` | |\n| `userInputLineColor` | string | Underline color in the User Information field | `'#b4b4b4a2'` | |\n| `buttonColor` | string | Font color of send button | `'#1877f'` | |\n| `listBackgroundColor` | string | Background color of comment list | `'white'` | |\n| `listCommentColor` | string | Color of comment in comment list | `'black'` | |\n| `listNicknameColor` | string | Color of nickname in comment list | `'#959595'` | |\n| `listDateColor` | string | Color of date in comment list | `'#959595'` | |\n| `progressbarColor` | string | The color of the progress bar that is generated when a scroll event occurs | `'#5f5f5f'` | |\n| `isShowScrollDownIcon` | boolean | Whether to display icons that are generated when a scroll event occurs | `true` | |\n| `scrollDownIconColor` | string | Color in ScrollDown Icon | `'black'` | Only works when isShowScrollDownIcon is true |\n| `descriptionPlaceholder` | string | Placeholder of description area | `'write your description...'` | |\n| `nicknamePlaceholder` | string | Placeholder of nickname area | `'ID'` | |\n| `passwordPlaceholder` | string | Placeholder of password area | `'PW'` | |\n| `commentList` | \u003ca href='https://github.com/modern-agile-team/dev-portfolio/blob/master/src/lib/common/types/ComponentTypes/VisitorCommentType.ts#:~:text=export%20interface-,VisitorCommentListType,-%7B'\u003eVisitorCommentListType\u003c/a\u003e | List of Comment such as description, nickname, date | See \"More about VisitorComment's Props\" | fetched variable |\n| `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 |\n| `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 |\n| `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 |\n| `handleCreateComment` | (e?: React.MouseEvent\u003cHTMLButtonElement\u003e) =\u003e void | Comments Props for event handling | | |\n| `handleChangeDescription` | (e?: React.ChangeEvent\u003cHTMLElement\u003e) =\u003e void | Description Props for event handling | | |\n| `handleChangeNickname` | (e?: React.ChangeEvent\u003cHTMLElement\u003e) =\u003e void | Nickname Props for event handling | | |\n| `handleChangePassword` | (e?: React.ChangeEvent\u003cHTMLElement\u003e) =\u003e void | Password Props for event handling | | |\n\n### More about VisitorComment's props\n\n#### commentList example\n\nList of Comment such as description, nickname, date. \nThis props is fetched datas from the backend.\n\n```js\nconst commentList: [\n {\n description: `The scroll customization method is the same as the teckstack component progress bar, so please use it!`,\n nickname: 'woorim960',\n date: '2022-08-26',\n },\n {\n description: `Progress bar customization is also possible when creating a scroll.`,\n nickname: 'seohyunsim',\n date: '2022-08-26',\n },\n {\n description: `Likewise, there are three types of themes: basic, box, and vertical.`,\n nickname: 'jisu3817',\n date: '2022-08-26',\n },\n {\n description: 'Refer to dev-portfolio README.md for instructions on building a personal server.',\n nickname: 'soonki-98',\n date: '2022-08-26',\n },\n {\n description: `A personal server can be built through environmental variables, and visitors can write their text and nicknames.`,\n nickname: 'woorim960',\n date: '2022-08-26',\n },\n {\n description: 'By looking at your portfolio, visitors can leave a guest book.',\n nickname: 'seohyunsim',\n date: '2022-08-26',\n },\n ],\n};\n```\n\n### ProgressBar\n\n```js\nimport { ProgressBar } from 'dev-portfolio';\n\nconst App = () =\u003e {\n return (\n \u003cProgressBar\n rateText=\"100%\"\n rateTextColor=\"black\"\n isHiddenRateText={false}\n backgroundColor=\"whitesmoke\"\n colorFrom=\"white\"\n colorTo=\"red\"\n width=\"100%\"\n height=\"40px\"\n animationType=\"wave\" // \"wave\" | \"fill-up\" | \"fill-up-wave\" | \"none\"\n isBlinking={false}\n /\u003e\n );\n};\n\nexport default App;\n```\n\n| props | type | description | default | note |\n| ------------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------ | ------------ | ---- |\n| `rateText` | string | How well you handle the skill (unit: %) | `'100%'` | |\n| `rateTextColor` | string | rateText color style | `'black'` | |\n| `isHiddenRateText` | boolean | Whether show rate in progressbar | `true` | |\n| `backgroundColor` | string | ProgressBar's background color style | `whitesmoke` | |\n| `colorFrom` | string | Start color of blinking animation of progressbar | `'white'` | |\n| `colorTo` | string | End color of blinking animation of progressbar | `'red'` |\n| `width` | string | Progressbar css width | `'100%'` | |\n| `height` | string | Progressbar css width | `'40px'` | |\n| `animationType` | \u003ca href=\"https://github.com/modern-agile-team/dev-portfolio/edit/feature/msk/%23152/README.md?pr=%2Fmodern-agile-team%2Fdev-portfolio%2Fpull%2F174#more-about-progressbars-props\"\u003eanimationType\u003c/a\u003e | Progressbar animation | `'wave'` | |\n| `isBlinking` | boolean | Progressbar blinking state | `false` | |\n\n### More about ProgressBar's props\n\n#### animationType\n\n```ts\ntype amimationType = 'wave' | 'fill-up' | 'fill-up-wave' | 'none';\n```\n\n# Example\n\n1. \u003c[dev-portfolio-app](https://github.com/modern-agile-team/dev-portfolio-app)\u003e http://52.78.64.144/\n\n![ezgif com-gif-maker](https://user-images.githubusercontent.com/56839474/194718430-5404fa1f-c24b-48a0-8730-15db2d3bde00.gif)\n\n\u003cbr\u003e\n\n2. \u003c[woorim960](https://github.com/woorim960/woorim-personal-website)\u003e http://152.70.89.184/\n\n![ezgif com-gif-maker (1)](https://user-images.githubusercontent.com/56839474/194719475-1cc2469e-7b7b-4ef0-8f87-236fa3aefbe1.gif)\n\n\u003cbr\u003e\n\n3. \u003c[seohyunsim](https://github.com/seohyunsim/seohyunsim-portfolio)\u003e https://seohyunsim-portfolio.vercel.app/\n\n\u003cimg width=\"1000\" alt=\"스크린샷 2022-09-12 오후 8 52 52\" src=\"https://user-images.githubusercontent.com/56839474/189646646-7faf4842-e881-42bc-bcb9-422975adac95.png\"\u003e\n\n## Guidelines to input icons\n\nEnter the name of the icon you searched on the following \u003ca href='https://icon-sets.iconify.design/'\u003esite.\u003c/a\u003e\n\n(example: 'simple-icons:devdotto')\n\n### More about used props\n\n- id example\n\n```js\nconst id = \"['ID_NAME', 'ICON_NAME']\";\n```\n\n- iconName example\n\n```js\nconst iconName = 'ICON_NAME',\n```\n\n## License\n\nMIT\n\n## Contributor\n\n- [seohyunsim](https://github.com/seohyunsim)\n- [soonki-98](https://github.com/soonki-98)\n- [woorim960](https://github.com/woorim960)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmodern-agile-team%2Fdev-portfolio","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmodern-agile-team%2Fdev-portfolio","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmodern-agile-team%2Fdev-portfolio/lists"}