tag surrounding the components of 'dev-portfolio' must be 'App'.\n // Only then can the SideBar in the component recognize id props and automatically assign all components into the SideBar.\n ![\"스크린샷](\"https://user-images.githubusercontent.com/56839474/189714124-370954bf-e995-4c85-9246-36fb12732a34.png\")
\n\n```js\nimport { Header } from 'dev-portfolio';\n\nconst logoOption = { ... };\nconst channels = [ ... ];\nconst sideBarOption = { ... };\n\nconst App = () => {\n return (\n ![\"image\"](\"https://user-images.githubusercontent.com/83394348/193384391-ff363c34-9a28-40b1-b462-9d16a624799b.png\")
\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![\"스크린샷](\"https://user-images.githubusercontent.com/56839474/193393251-a182a876-956d-4ccf-a18d-b0f4a713ad3e.png\")
\n\nFor an example of channels, see: channels example\n\n#### sideBarOption example\n\n![\"image\"](\"https://user-images.githubusercontent.com/83394348/193385692-028f193d-a82a-4a19-87cf-74bebfdd3cd7.png\")
\n![\"image\"](\"https://user-images.githubusercontent.com/83394348/193385720-7c68dc98-3264-4ea9-ba5c-1b0876347a91.png\"\n)
\n\nWay to change the sidebar icon, use iconName props.\n\nRefer to the guidelines.\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![\"스크린샷](\"https://user-images.githubusercontent.com/56839474/193393242-0aa4dabb-3de0-436d-89af-4729d9b5c36d.png\")
\n\n```js\nimport { Channel } from 'dev-portfolio';\n\nconst App = () => {\n return (\n ![\"스크린샷](\"https://user-images.githubusercontent.com/56839474/189714308-db45a17e-02e5-4575-a616-64c2fb31cae5.png\")
\n\n```js\nimport { Intro } from 'dev-portfolio';\n\nconst introOption = [ ... ];\n\nconst App = () => {\n return (\n ![\"스크린샷](\"https://user-images.githubusercontent.com/56839474/193394980-6fc37f61-64f3-47b0-a2dd-be9394772de8.png\")
\n\n```js\nimport { Skill } from 'dev-portfolio';\n\nconst App = () => {\n return (\n ![\"스크린샷](\"https://user-images.githubusercontent.com/56839474/185727226-b401ce50-50fb-4572-b78e-692ff6cf63ef.png\")
\n\n```js\n// 'narrower' | 'narrow' | 'normal' | 'wide' | 'wider';\nconst gap = 'normal';\n```\n\n\n\n### Experience\n\n![\"image\"](\"https://user-images.githubusercontent.com/83394348/193396422-4c5ad8f8-d679-4575-8a78-b016cf5aee83.png\")
\n\n```js\nimport { Experience } from 'dev-portfolio';\n\nconst historyList = [ ... ];\n\nconst App = () => {\n return (\n ![\"스크린샷](\"https://user-images.githubusercontent.com/56839474/189715251-5145031f-d602-414b-8cd7-ede5bd78c5ab.png\")
\n\n```js\nimport { Gallery, Item } from 'dev-portfolio';\n\nconst App = () => {\n return (\n \n // Must insert components customized\n ![\"스크린샷](\"https://user-images.githubusercontent.com/56839474/189715278-2e74562d-7d46-482b-8222-01251d538f1e.png\")
\n\n```js\nimport { Masonry, Image } from 'dev-portfolio';\n\nconst App = () => {\n return (\n \n /* Must insert components customized */\n \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 Guideline to add icon |\n| `column` | number | Number of vertical lines | `4` |\n| `padding` | string | Masonry padding | `'2em 4em'` | |\n\n### Image\n\n\n\n```js\nimport { Image } from 'dev-portfolio';\n\nconst App = () => {\n return (\n ![\"스크린샷](\"https://user-images.githubusercontent.com/56839474/189715442-c5e8b36c-b602-46e3-89f8-5c30836a60fc.png\")
\n\n```js\nimport { Card } from 'dev-portfolio';\n\nconst App = () => {\n return (\n ![\"스크린샷](\"https://user-images.githubusercontent.com/56839474/185727384-1b024c72-83e3-4ef9-84ac-68f832d8df3e.png\")
\n\n```js\nimport { Contact } from 'dev-portfolio';\n\nconst channels = [ ... ];\nconst aboutMeInfos = [ ... ];\n\nconst App = () => {\n return (\n ![\"channels\"](\"https://user-images.githubusercontent.com/83394348/193384430-55a671a8-0a97-45b5-8590-f12de4526057.png\")
\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 ![\"aboutMeInfos\"](\"https://user-images.githubusercontent.com/83394348/193386818-ea657a2c-0544-4eca-9225-688ce0a58958.png\")
\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![\"visitor-counter\"](\"https://user-images.githubusercontent.com/83394348/189859070-d9230ec1-4750-4e7b-870c-e21e306c1c65.png\")
\n\n```js\nimport { VisitorCounter } from 'dev-portfolio';\n\nconst App = () => {\n return (\n ) => void | Comments Props for event handling | | |\n| `handleChangeDescription` | (e?: React.ChangeEvent) => void | Description Props for event handling | | |\n| `handleChangeNickname` | (e?: React.ChangeEvent) => void | Nickname Props for event handling | | |\n| `handleChangePassword` | (e?: React.ChangeEvent) => void | Password Props for event handling | | |\n\n### More about VisitorComment's props\n\n#### commentList example \nList of Comment such as description, nickname, date. \nThis props is fetched datas from the backend.\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 = () => {\n return (\n
\n\n2. <[woorim960](https://github.com/woorim960/woorim-personal-website)> http://152.70.89.184/\n\n\n\n
\n\n3. <[seohyunsim](https://github.com/seohyunsim/seohyunsim-portfolio)> https://seohyunsim-portfolio.vercel.app/\n\n![\"스크린샷](\"https://user-images.githubusercontent.com/56839474/189646646-7faf4842-e881-42bc-bcb9-422975adac95.png\")
\n\n## Guidelines to input icons\nEnter the name of the icon you searched on the following site.\n\n(example: 'simple-icons:devdotto')\n\n### More about used props \n\n- id example\n```js\nconst id = \"['ID_NAME', 'ICON_NAME']\"\n```\n\n- iconName example\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","readmeFilename":"README.md"}
\n
\n );\n}\n\nexport default App;\n```\n\n## Components\n\n- Header\n- Channel\n- Channels\n- Intro\n- Skill\n- TechStackList\n- Experience\n- Carousel\n- Gallery\n- Masonry\n- Image\n- Item\n- Card\n- Contact\n- VisitorCounter\n- VisitorComment\n- ProgressBar\n### Header\n\n\n\n```js\nimport { Header } from 'dev-portfolio';\n\nconst logoOption = { ... };\nconst channels = [ ... ];\nconst sideBarOption = { ... };\n\nconst App = () => {\n return (\n \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\n\nFor an example of channels, see: channels example\n\n#### sideBarOption example\n\n\n\n\nWay to change the sidebar icon, use iconName props.\n\nRefer to the guidelines.\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\n\n```js\nimport { Channel } from 'dev-portfolio';\n\nconst App = () => {\n return (\n \n\n```js\nimport { Channels } from 'dev-portfolio';\n\nconst channels = [ ... ];\n\nconst App = () => {\n return (\n \n\n```js\nimport { Intro } from 'dev-portfolio';\n\nconst introOption = [ ... ];\n\nconst App = () => {\n return (\n \n\n```js\nimport { Skill } from 'dev-portfolio';\n\nconst App = () => {\n return (\n \n\n```js\n// 'narrower' | 'narrow' | 'normal' | 'wide' | 'wider';\nconst gap = 'normal';\n```\n\n\n\n### Experience\n\n\n\n```js\nimport { Experience } from 'dev-portfolio';\n\nconst historyList = [ ... ];\n\nconst App = () => {\n return (\n \n\n```js\nimport { Gallery, Item } from 'dev-portfolio';\n\nconst App = () => {\n return (\n \n\n```js\nimport { Masonry, Image } from 'dev-portfolio';\n\nconst App = () => {\n return (\n \n\n```js\nimport { Card } from 'dev-portfolio';\n\nconst App = () => {\n return (\n \n\n```js\nimport { Contact } from 'dev-portfolio';\n\nconst channels = [ ... ];\nconst aboutMeInfos = [ ... ];\n\nconst App = () => {\n return (\n \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 \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\n\n```js\nimport { VisitorCounter } from 'dev-portfolio';\n\nconst App = () => {\n return (\n \n\n2. <[woorim960](https://github.com/woorim960/woorim-personal-website)> http://152.70.89.184/\n\n\n\n
\n\n3. <[seohyunsim](https://github.com/seohyunsim/seohyunsim-portfolio)> https://seohyunsim-portfolio.vercel.app/\n\n
\n\n## Guidelines to input icons\nEnter the name of the icon you searched on the following site.\n\n(example: 'simple-icons:devdotto')\n\n### More about used props \n\n- id example\n```js\nconst id = \"['ID_NAME', 'ICON_NAME']\"\n```\n\n- iconName example\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","readmeFilename":"README.md"}