react-portfolio : about

About page만들기

상단은 다른 페이지들에서도 공통으로 사용할 것임으로 component에 따로 만들어주자.

Header.jsx

const Header = ({title,image,children}) => {
  return(
    <header className="header">
      <div className="header__container">
        <div className="header__container-bg">
          <img src={image} alt="Header Backgroung Image"/>
        </div>
        <div className="header__content">
          <h2>{title}</h2>
          <p>{children}</p>
        </div>
      </div>
    </header>
  )
}

export default Header;

About.jsx

import Header from '../../components/Header';
import HeaderImage from '../../images/header_bg_1.jpg';
import './about.css';

const About = () => {
  return(
    <>
      <Header title="About us" image={HeaderImage}>
      Lorenm ipsum dolor sit amet consetetur adipisicing elit.
      </Header>
    </>
  )
}

export default About;

story content 만들기

import StoryImage from '../../images/about1.jpg';
import VisionImage from '../../images/about2.jpg';
import MissionImage from '../../images/about3.jpg';

<section className="about__story">
  <div className="container about__story-container">
    <div className="about__section-image">
      <img src={StoryImage} alt="Our Story Image"/>
        </div>
<div className="about__section-content">
  <h1>Our Stroy</h1>
<p>
    Lorenm ipsum dolor sit amet consetetur adipisicing elit. Maiores fugit adneque quo,
      quas eius quam at sunt quod in atque nulla minus nam impedit tempore consectetru esse quibusdm voluptaum otio nemo!
        </p>
<p>
        Lorenm ipsum dolor sit amet consetetur adipisicing elit. Maiores fugit adneque quo,
          quas eius quam at sunt quod in atque nulla minus nam impedit tempore consectetru esse quibusdm voluptaum otio nemo!
            </p>
<p>
            Lorenm ipsum dolor sit amet consetetur adipisicing elit. Maiores fugit adneque quo,
              quas eius quam at sunt quod in atque nulla minus nam impedit tempore consectetru esse quibusdm voluptaum otio nemo!
                </p>
</div>
</div>
</section>

<section className="about__vision">
  <div className="container about__vision-container">
    <div className="about__section-content">
      <h1>Our Stroy</h1>
<p>
        Lorenm ipsum dolor sit amet consetetur adipisicing elit. Maiores fugit adneque quo,
          quas eius quam at sunt quod in atque nulla minus nam impedit tempore consectetru esse quibusdm voluptaum otio nemo!
            </p>
<p>
            Lorenm ipsum dolor sit amet consetetur adipisicing elit. Maiores fugit adneque quo,
              quas eius quam at sunt quod in atque nulla minus nam impedit tempore consectetru esse quibusdm voluptaum otio nemo!
                </p>
<p>
                Lorenm ipsum dolor sit amet consetetur adipisicing elit. Maiores fugit adneque quo,
                  quas eius quam at sunt quod in atque nulla minus nam impedit tempore consectetru esse quibusdm voluptaum otio nemo!
                    </p>
</div>
<div className="about__section-image">
  <img src={VisionImage} alt="Our Vision"/>
    </div>
</div>
</section>

<section className="about__mission">
  <div className="container about__mission-container">
    <div className="about__section-image">
      <img src={MissionImage} alt="Our mission Image"/>
        </div>
<div className="about__section-content">
  <h1>Our Stroy</h1>
<p>
    Lorenm ipsum dolor sit amet consetetur adipisicing elit. Maiores fugit adneque quo,
      quas eius quam at sunt quod in atque nulla minus nam impedit tempore consectetru esse quibusdm voluptaum otio nemo!
        </p>
<p>
        Lorenm ipsum dolor sit amet consetetur adipisicing elit. Maiores fugit adneque quo,
          quas eius quam at sunt quod in atque nulla minus nam impedit tempore consectetru esse quibusdm voluptaum otio nemo!
            </p>
<p>
            Lorenm ipsum dolor sit amet consetetur adipisicing elit. Maiores fugit adneque quo,
              quas eius quam at sunt quod in atque nulla minus nam impedit tempore consectetru esse quibusdm voluptaum otio nemo!
                </p>
</div>
</div>
</section>