dev-porfolio

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

List

Installation
Usage
Components
Example
Guidelines to input icons
Licence
Contributor

Install

Install only dev-portfolio library.

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

npx create-dev-portfolio <YOUR_APP_NAME>

Usage

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

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

export default App;

Components

Header
Channel
Channels
Intro
Skill
TechStackList
Experience
Carousel
Gallery
Masonry
Image
Item
Card
Contact
VisitorCounter
VisitorComment
ProgressBar

Header

import { Header } from 'dev-portfolio';

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

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

export default App;

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

More about Header's props

logoOption example

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

channels example

For an example of channels, see: channels example

sideBarOption example

Way to change the sidebar icon, use iconName props.

Refer to the guidelines.

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

Channel

import { Channel } from 'dev-portfolio';

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

export default App;

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

Channels

import { Channels } from 'dev-portfolio';

const channels = [ ... ];

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

export default App;

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

More about Channels Props

channels example

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

Intro

import { Intro } from 'dev-portfolio';

const introOption = [ ... ];

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

export default App;

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

Skill

import { Skill } from 'dev-portfolio';

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

export default App;

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

TechStackList

import { TechStackList } from 'dev-portfolio';

const techStackList = [ ... ];

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

export default App;

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

More about TechStackList's props

techStackList example

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

gap example

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

Experience

import { Experience } from 'dev-portfolio';

const historyList = [ ... ];

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

export default App;

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

More about Experience's props

historyList example

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

Carousel

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

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

export default App;

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

Gallery

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

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

export default App;

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

Masonry

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

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

export default App;

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

Image

import { Image } from 'dev-portfolio';

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

export default App;

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

Item

import { Item } from 'dev-portfolio';

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

export default App;

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

Card

import { Card } from 'dev-portfolio';

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

export default App;

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

Contact

import { Contact } from 'dev-portfolio';

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

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

export default App;

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

More about Contact's props

channels example

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

aboutMeInfos example

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

VisitorCounter

import { VisitorCounter } from 'dev-portfolio';

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

export default App;

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

More about VisitorCounter's props

theme example

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

VisitorCounter example

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

VisitorComment

import { VisitorComment } from 'dev-portfolio';

const commentList = [ ... ];

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

export default App;

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

More about VisitorComment's props

commentList example

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

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

ProgressBar

import { ProgressBar } from 'dev-portfolio';

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

export default App;

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

More about ProgressBar's props

animationType

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

Example

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

<woorim960> http://152.70.89.184/

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

Guidelines to input icons

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

(example: 'simple-icons:devdotto')

More about used props

id example

const id = "['ID_NAME', 'ICON_NAME']";

iconName example

const iconName =  'ICON_NAME',

License

MIT

Name		Name	Last commit message	Last commit date
Latest commit History 690 Commits
.github		.github
.husky		.husky
public		public
src		src
.eslintrc.js		.eslintrc.js
.gitignore		.gitignore
.npmignore		.npmignore
.nvmrc		.nvmrc
.prettierrc		.prettierrc
.releaserc		.releaserc
CHANGELOG.md		CHANGELOG.md
Contribute.md		Contribute.md
README.md		README.md
commitlint.config.js		commitlint.config.js
package-lock.json		package-lock.json
package.json		package.json
tsconfig.json		tsconfig.json

modern-agile-team/dev-portfolio

Folders and files

Latest commit

History

Repository files navigation

dev-porfolio

List

Install

Usage

Components

Header

More about Header's props

logoOption example

channels example

sideBarOption example

Channel

Channels

More about Channels Props

channels example

Intro

Skill

TechStackList

More about TechStackList's props

techStackList example

gap example

Experience

More about Experience's props

historyList example

Carousel

Gallery

Masonry

Image

Item

Card

Contact

More about Contact's props

channels example

aboutMeInfos example

VisitorCounter

More about VisitorCounter's props

theme example

VisitorCounter example

VisitorComment

More about VisitorComment's props

commentList example

ProgressBar

More about ProgressBar's props

animationType

Example

Guidelines to input icons

More about used props

License

Contributor

About

Topics

Resources

Stars

Watchers

Forks

Releases 8

Contributors 5

Languages