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;

import { Header } from 'dev-portfolio';

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

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

export default App;

import { Intro } from 'dev-portfolio';

const introOption = [ ... ];

const App = () => {
  return (
    <Intro 
      id="Intro Component"
      textAlign="left"
      backgroundColor="whitesmoke"
      introOption={introOption}
    />
  );
}

export default App;

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;

import { Experience } from 'dev-portfolio';

const verticalOption = { ... };
const historyList = [ ... ];

const App = () => {
  return (
    <Experience 
      id="Experience Component"
      title="Experience Title"
      textAlign="left"
      theme="vertical" // 'basic' | 'box' | 'vertical'
      verticalOption={verticalOption}
      historyList={historyList}
    />
  );
}

export default App;

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;

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;

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;

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}
    />
  );
}

export default App;

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}
    />
  );
}

export default App;

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;

import { Contact } from 'dev-portfolio';

const contactOption = { ... };

const App = () => {
  return (
    <Contact 
      id="Contact Component"
      backgroundColor="whitesmoke"
      contactOption={contactOption}
    />
  );
}

export default App;

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"
      size="14px" // include: px
      todayBoldColor="red"
      totalBoldColor="red"
    />
  );
}

export default App;

import { VisitorComment } from 'dev-portfolio';

const commentList = [ ... ];

const App = () => {
  return (
    <VisitorComment 
      id="VisitorComment Component"
      theme="basic" // 'basic' | 'box' | 'vertical'
      backgroundColor="whitesmoke"
      inputBackgroundColor="White"
      userInputLineColor="#b4b4b4a2"
      buttonColor="#1877f2"
      progressbarColor="#5f5f5f"
      isShowScrollDownIcon={true}
      scrollDownIconColor='black'
      commentInputPlacehoder={commentInputPlacehoder}
      comment='this portfolio is very nice' // Your fetched variable
      nickname='dev-portfolio' // Your fetched variable
      password='1234' // Your fetched variable
      commentList={commentList} // Your fetched variable
      handleCreateComment={handleCreateComment} // Event handling variable
      handleChangeDescription={handleChangeDescription} // Event handling variable
      handleChangeNickname={handleChangeNickname} // Event handling variable
      handleChangePassword={handleChangePassword} // Event handling variable
    />
  );
}

export default App;