본문 바로가기
CSS HTML JAVASCRIPT 웹디자인기능사 GSAP 포트폴리오 유튜브
Tutorial/port2023

15. 포트폴리오 사이트 만들기 : React-Site : 스킬 영역

by @webstoryboy 2023. 7. 31.
Tutorial/portfolio

포트폴리오 사이트 만들기 - React

by @webs 2023. 08. 01.
05
포트폴리오 사이트 만들기 : 스킬 영역
난이도 중간
소스 다운로드
완성 화면 완성 코드 영상 보기

소개

안녕하세요! 웹스토리보이입니다. 오늘은 스킬 영역을 작업하겠습니다. 스킬 영역도 크게 어려운 점이 없으니 천천히 잘 따라하시면 됩니다. 그럼 시작해보겠습니다.

인덱스

VITE SITE

  • 1. 셋팅하기
    • 1_1. vite 설치하기
    • 1_2. vite 폴더 정리하기
    • 1_3. gsap/lenis 설치하기
    • 1_4. git 연동하기
  • 2. 레이아웃
    • 2.1 레이아웃 구조 만들기
    • 2.2 메인 레이아웃 구조 만들기
    • 2.3 CSS 셋팅하기
    • 2.4 JavaScript 셋팅하기
  • 3. 헤더 영역
    • 3.1 헤더 구조 잡기
    • 3.2 헤더 디자인 설정
    • 3.3 반응형 작업하기
    • 3.4 메뉴 자바스크립트 설정
  • 4. 인트로 영역
    • 4.1 인트로 구조 잡기
    • 4.2 인트로 디자인 설정
    • 4.3 반응형 작업하기
  • 5. 스킬 영역
    • 5.1 스킬 구조 잡기
    • 5.2 스킬 디자인 설정
    • 5.3 반응형 작업하기
  • 6. 사이트 영역
    • 6.1 사이트 구조 잡기
    • 6.2 사이트 디자인 설정
    • 6.3 반응형 작업하기
  • 7. 포트폴리오 영역
    • 7.1 사이트 구조 잡기
    • 7.2 사이트 디자인 설정
    • 7.3 반응형 작업하기
    • 7.4 스크립트 작업하기
  • 8. 연락처 영역
    • 8.1 연락처 구조 잡기
    • 8.2 연락처 디자인 설정
    • 8.3 반응형 작업하기
  • 9. 푸터 영역
    • 9.1 푸터 구조 잡기
    • 9.2 푸터 디자인 설정
    • 9.3 반응형 작업하기
  • 10. 마무리
    • 10.1 스무스 효과주기
    • 10.2 링크 연결하기
    • 10.3 netlify에 배포하기

REACT SITE

  • 1. 셋팅하기
    • 1_1. React 설치하기
    • 1_2. React 폴더 정리하기
    • 1_3. 라이브러리 설치하기
    • 1_4. git 연동하기
  • 2. 라우팅 및 컴퍼넌트
    • 2_1. 라우팅 설정하기
    • 2_2. 컴퍼넌트 설정하기
    • 2_3. SCSS 설정하기
  • 3. 헤더 영역
    • 3_1. 헤더 구조잡기
    • 3_2. 헤더 디자인 설정
    • 3_3. 헤더 데이터 작업
    • 3_4. 헤더 토글 메뉴 작업하기
  • 4. 인트로 영역
    • 4_1. 인트로 구조잡기
    • 4_2. 인트로 디자인 설정
    • 4_3. 인트로 데이터 작업
  • 5. 스킬 영역
    • 5_1. 스킬 구조잡기
    • 5_2. 스킬 디자인 설정
    • 5_3. 스킬 데이터 작업

5. 스킬 영역

5.1 스킬 구조잡기

기존 소스를 리액트 소스로 변경해보겠습니다.

import React from "react";

const Skill = () => {
    return (
        <section id="skill">
            <div className="skill__inner">
                <h2 className="skill__title">Challenge <em>나의 도전</em></h2>
                <div className="skill__desc">
                    <div>
                        <span>1.</span>
                        <h3>꿈을 설계하고 디자인하다.</h3>
                        <p>
                            나는 공간을 만드는 것을 좋아한다. 
                            어려을 때부터 나만의 공간을 만드는 것을 좋아했고 나만의 다락방을 좋아했다. 
                            단 한 사람이라도 내가 만든 공간 속에서 영감을 받거나 마음이 움직였으면 좋겠다.
                            나만의 공간을 마음것 만들 수 있다는 건 코딩에 엄청난 매력인거 같다. 
                            그 한구석에 나만의 꿈을 설계하고, 개발을 하며 앞으로도 살고 싶다.
                        </p>
                    </div>
                    <div>
                        <span>2.</span>
                        <h3>열심히 할수록 기회는 따른다.</h3>
                        <p>
                            운이 좋은 사람은 없다. 단지 운을 만들 뿐이다. 
                            운을 만들기 위해서는 내가 좋아하는 일이나 내가 하고 싶은 일에 몰두하면 된다.
                            몰두 하다보면 길이 보이고 방향이 보이게 된다. 
                            운이란 고된 노동과 노력을 통해 스스로 만들어 내는 것이다.
                        </p>
                    </div>
                    <div>
                        <span>3.</span>
                        <h3>나에게 정직하다.</h3>
                        <p>
                            정직은 다른 사람보다 나에게 큰 의미를 부여해야 한다. 
                            자신이 정직하지 않으면 진정으로 원하는 일을 열정적으로 밀고 나갈 수 없다. 
                            마음에서 우러나오는 일을 해야 정직해지며 삶을 더 즐길 줄 알게 된다.
                        </p>
                    </div>
                </div>
            </div>
        </section>
    );
};

export default Skill;

5.2 스킬 디자인 설정

CSS로 SCSS로 변형하여 작업하였습니다.

.skill__inner {
    padding: 16px;
    display: flex;
    justify-content: space-between;

    @media (max-width: 800px){ 
        flex-direction: column;
    }

    .skill__title {
        position: sticky;
        top: 70px;
        left: 0;
        width: 48%;
        height: 5vw;
        font-size: 4vw;
        font-weight: 900;
        line-height: 1.6;
        font-family: var(--mainKor-font);
        text-transform: uppercase;
        color: var(--black100);
        border-bottom: 0.4vw solid var(--black100);

        @media (max-width: 800px){ 
            width: 100%;
            margin-bottom: 10vw;
            font-size: 30px;
            height: auto;
            top: 68px;
            background-color: var(--mainBg-color);
        }

        em {
            font-size: 1.25rem;
            font-weight: 400;
            line-height: 2;
        }
    }
    .skill__desc {
        width: 50%;

        @media (max-width: 800px){ 
            width: 100%;
        }

        span {
            font-size: 5vw;
            line-height: 1;
            font-weight: 900;
            line-height: 1.3;
            font-family: var(--mainNum-font);

            @media (max-width: 800px){ 
                font-size: 20vw;
            }
        }
        h3 {
            font-size: 1.5rem;
            text-decoration: underline;
            text-underline-position: under;
            margin-bottom: 1vw;
        }
        p {
            margin-bottom: 30vh;
            font-size: 1.1rem;
        }
    }
}

5.3 스킬 데이터 작업

핵심 데이터는 따로 작업하였습니다.

const skillText = [
    {
      title: "꿈을 설계하고 디자인하다.",
      desc: "나는 공간을 만드는 것을 좋아한다. 어려을 때부터 나만의 공간을 만드는 것을 좋아했고 나만의 다락방을 좋아했다. 단 한 사람이라도 내가 만든 공간 속에서 영감을 받거나 마음이 움직였으면 좋겠다. 나만의 공간을 마음것 만들 수 있다는 건 코딩에 엄청난 매력인거 같다. 그 한구석에 나만의 꿈을 설계하고, 개발을 하며 앞으로도 살고 싶다.",
    },
    {
      title: "열심히 할수록 기회는 따른다.",
      desc: "운이 좋은 사람은 없다. 단지 운을 만들 뿐이다. 운을 만들기 위해서는 내가 좋아하는 일이나 내가 하고 싶은 일에 몰두하면 된다. 몰두 하다보면 길이 보이고 방향이 보이게 된다. 운이란 고된 노동과 노력을 통해 스스로 만들어 내는 것이다.",
    },
    {
      title: "나에게 정직하다.",
      desc: "정직은 다른 사람보다 나에게 큰 의미를 부여해야 한다. 자신이 정직하지 않으면 진정으로 원하는 일을 열정적으로 밀고 나갈 수 없다. 마음에서 우러나오는 일을 해야 정직해지며 삶을 더 즐길 줄 알게 된다.",
    },
];

해당 부분만 변경해주었습니다.

const Skill = () => {
    return (
        <section id="skill">
            <div className="skill__inner">
                <h2 className="skill__title">
                    Challenge <em>나의 도전</em>
                </h2>
                <div className="skill__desc">
                    {skillText.map((skill, key) => (
                        <div key={key}>
                            <span>{key + 1}.</span>
                            <h3>{skill.title}</h3>
                            <p>{skill.desc}</p>
                        </div>
                    ))}
                </div>
            </div>
        </section>
    );
};

3. 마무리

이제 깃헙에 올리겠습니다.

git add .
git commit -m "😱 스킬 완료"
git push -u origin main

스킬 데이터도 map()을 통해 정리했습니다. 데이터를 따로 처리하니 조금더 깔끔해지고 가독성이 좋아진 것을 확인할 수 있습니다. 그럼 오늘은 여기까지... 수고하셨습니다.

완성 화면 소스 보기 영상 보기

예제 목록

관련글

댓글

티스토리툴바