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

14. 포트폴리오 사이트 만들기 : React-Site : 인트로 영역

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

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

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

소개

안녕하세요! 웹스토리보이입니다. 오늘은 인트로 영역을 작업하겠습니다. 기존의 기본 코딩을 바탕으로 리액트에 맞게 작업하고 있습니다. 조금 다른 점이 있지만, 전체적인 맥락은 비슷하기 때문에 잘 따라 할 수 있을겁니다. 익숙해지면 쉬업집니다. 익숙해질려면 반복적으로 연습하면 됩니다. 그럼 오늘도 시작해볼까요!

인덱스

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. 인트로 데이터 작업

4. 인트로 영역

4.1 인트로 구조잡기

리액트에서 이미지를 불러오는 방법은 다음과 같이 import를 해야 합니다. import를 사용하여 이미지 파일을 가져온 뒤, JSX에서 {} 중괄호를 사용하여 이미지의 경로를 동적으로 지정합니다. 경로를 동적으로 지정해야하는 경우, 변수를 사용하여 이미지의 경로를 관리할 수도 있습니다. 

import React from "react";

import about from "../assets/img/about.jpg";

const Intro = () => {
    return (
        <section id="intro">
            <div class="intro__inner">
                <h1 class="intro__title">port developer</h1>
                <div class="intro__lines" aria-hidden="true">
                    <span class="line"></span>
                    <span class="line"></span>
                    <span class="line"></span>
                    <span class="line"></span>
                    <span class="line"></span>
                    <span class="line"></span>
                    <span class="line"></span>
                </div>
                <div class="intro__text">
                    <div class="text">
                        <div>talent is</div>
                        <div>found at the end of the</div>
                        <div>effort</div>
                    </div>
                    <div class="img">
                        <img src={about} alt="어바웃" />
                    </div>
                </div>
                <div class="intro__lines bottom" aria-hidden="true">
                    <span class="line"></span>
                    <span class="line"></span>
                    <span class="line"></span>
                    <span class="line"></span>
                    <span class="line"></span>
                    <span class="line"></span>
                    <span class="line"></span>
                </div>
            </div>
        </section>
    );
};

export default Intro;

4.2 인트로 디자인 설정

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

#intro {
    height: 100vh;
}
.intro__inner {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: flex-start;
    justify-content: flex-end;
    flex-direction: column;
    padding: 16px;

    @media (max-width: 800px){
        justify-content: center;
    }

    .intro__title {
        font-size: 10vw;
        text-transform: uppercase;
        line-height: 1;
        font-weight: 800;
        white-space: nowrap;
        text-indent: -0.5vw;
        letter-spacing: -0.3vw;

        @media (max-width: 320px){ 
            display: none;
        }
    }
    .intro__text {
        width: 100%;
        height: 40vh;
        background-color: var(--black);
        color: var(--white);
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        position: relative;

        .text {
            font-size: 3vw;
            line-height: 1;
            font-weight: 900;
            text-transform: uppercase;
            text-decoration: underline;
            text-align: center;
            position: relative;
            z-index: 100;
            transition: all 0.3s;
            cursor: all-scroll;

            @media (max-width: 800px){ 
                font-size: 24px;
            }
        }
        .img {
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            width: 30vh;
            height: 30vh;
            border-radius: 50%;
            overflow: hidden;
            filter: grayscale(100%);
            transition: all 0.3s;

            @media (max-width: 320px){ 
                width: 20vh;
                height: 20vh;
            }
        }

        &:hover .text {
            opacity: 0;
        }
        &:hover .img {
            filter: grayscale(0);
        }
    }
    .intro__lines {
        width: 100%;

        .line {
            display: block;
            width: 100%;
            height: 1px;
            background-color: var(--black);
            margin-bottom: 0.5vw;

            &:nth-child(1){
                height: 1px;
            }
            &:nth-child(2){
                height: 2px;
            }
            &:nth-child(3){
                height: 5px;
            }
            &:nth-child(4){
                height: 9px;
            }
            &:nth-child(5){
                height: 13px;
            }
            &:nth-child(6){
                height: 17px;
            }
            &:nth-child(7){
                height: 25px;
            }
        }

        &.bottom {
            .line {
                margin-top: 0.5vw;
                margin-bottom: 0;
                display: none;

                @media (max-width: 800px){ 
                    display: block;
                }

                &:nth-child(1){
                    height: 25px;
                }
                &:nth-child(2){
                    height: 17px;
                }
                &:nth-child(3){
                    height: 13px;
                }
                &:nth-child(4){
                    height: 9px;
                }
                &:nth-child(5){
                    height: 5px;
                }
                &:nth-child(6){
                    height: 2px;
                }
                &:nth-child(7){
                    height: 1px;
                }
            }
        }
    }
}

4.3 인트로 데이터 작업

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

const introText = {
    title: "port developer",
    desc: ["talent is", "found at the end of the", "effort"],
};

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

const Intro = () => {
    return (
        <section id="intro">
            <div className="intro__inner">
                <h1 className="intro__title">{introText.title}</h1>
                <div className="intro__lines" aria-hidden="true">
                    <span className="line"></span>
                    <span className="line"></span>
                    <span className="line"></span>
                    <span className="line"></span>
                    <span className="line"></span>
                    <span className="line"></span>
                    <span className="line"></span>
                </div>
                <div className="intro__text">
                    <div className="text">
                        <div>{introText.desc[0]}</div>
                        <div>{introText.desc[1]}</div>
                        <div>{introText.desc[2]}</div>
                    </div>
                    <div className="img">
                        <img src={about} alt="어바웃" />
                    </div>
                </div>
                <div className="intro__lines bottom" aria-hidden="true">
                    <span className="line"></span>
                    <span className="line"></span>
                    <span className="line"></span>
                    <span className="line"></span>
                    <span className="line"></span>
                    <span className="line"></span>
                    <span className="line"></span>
                </div>
            </div>
        </section>
    );
};

3. 마무리

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

git add .
git commit -m "😱 인트로 완료"
git push -u origin main

리액트에서 이미지를 불러오는 경우에는 import를 해야 하는 번거로움이 있지만, 이미지 처리하는 방법도 배웠습니다. 반응형까지 SCSS를 이용하여 작업하였습니다. 여러분들도 포폴 작업시 이런식으로 하면 도움이 되실겁니다. 그럼 수고하셨습니다. 🤭

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

예제 목록

관련글

댓글

티스토리툴바