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

소개

안녕하세요! 웹스토리보이입니다. 이번에는 사이트 영역을 작업하겠습니다. 크게 어려운 점이 없으니 잘 따라해주세요!

인덱스

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. 스킬 데이터 작업
• 6. 사이트 영역
  • 6_1. 사이트 구조잡기
  • 6_2. 사이트 디자인 설정
  • 6_3. 사이트 데이터 작업

6. 사이트 영역

6.1 사이트 구조잡기

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

import React from "react";

const Site = () => {
    return (
        <section id="site">
            <div className="site__inner">
                <h2 className="site__title">Site coding <em>나의 작업물</em></h2>
                <div className="site__wrap">
                    <article className="site__item s1">
                        <span className="num">1.</span>
                        <div className="text">
                            <div>make</div>
                            <div>site compliant with</div>
                            <div>webstandard</div>
                        </div>
                        <h3 className="title">웹 표준을 준수한 사이트 제작</h3>
                        <div className="btn">
                            <a href="https://github.com/webstoryboy/port2023-vite">code</a>
                            <a href="https://port2023-vite.netlify.app/">view</a>
                        </div>
                        <div className="info">
                            <span>site coding</span>
                            <span>production period : two days</span>
                            <span>use stack : html5/css3, CSS Variable, Vite</span>
                        </div>
                    </article>
                    <article className="site__item s2">
                        <span className="num">2.</span>
                        <div className="text">
                            <div>Make</div>
                            <div>site compliant with</div>
                            <div>react.js</div>
                        </div>
                        <h3 className="title">리액트를 이용한 사이트 제작</h3>
                        <div className="btn">
                            <a href="https://github.com/webstoryboy/port2023-react">code</a>
                            <a href="https://port2023-react.netlify.app/">view</a>
                        </div>
                        <div className="info">
                            <span>site coding</span>
                            <span>production period : two days</span>
                            <span>use stack : HTML5/CSS3, CSS Variable, Vite</span>
                        </div>
                    </article>
                    <article className="site__item s3">
                        <span className="num">3.</span>
                        <div className="text">
                            <div>Make</div>
                            <div>site compliant with</div>
                            <div>vue.js</div>
                        </div>
                        <h3 className="title">뷰를 이용한 사이트 제작</h3>
                        <div className="btn">
                            <a href="https://github.com/webstoryboy/port2023-vue">code</a>
                            <a href="https://port2023-vue.netlify.app/">view</a>
                        </div>
                        <div className="info">
                            <span>site coding</span>
                            <span>production period : two days</span>
                            <span>use stack : vue.js, CSS Variable, vite</span>
                        </div>
                    </article>
                    <article className="site__item s4">
                        <span className="num">4.</span>
                        <div className="text">
                            <div>Make</div>
                            <div>site compliant with</div>
                            <div>next.js</div>
                        </div>
                        <h3>넥스트를 이용한 사이트 제작</h3>
                        <div className="btn">
                            <a href="https://github.com/webstoryboy/port2023-next">code</a>
                            <a href="https://port2023-next.netlify.app/">view</a>
                        </div>
                        <div className="info">
                            <span>site coding</span>
                            <span>production period : two days</span>
                            <span>use stack : next.js, CSS Variable, Vite</span>
                        </div>
                    </article>
                </div>
            </div>
        </section>
    );
};

export default Site;

6.2 사이트 디자인 설정

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

.site__inner {
    padding: 16px;

    .site__title  {
        position: sticky;
        top: 70px;
        left: 0;
        width: 70%;
        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);
        margin-bottom: 100px;

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

        em {
            font-size: 1.25rem;
            font-weight: 400;
            line-height: 2;
        }
    }
    .site__wrap {
        .site__item {
            height: 70vh;
            @include flex-center;
            flex-direction: column;
            position: sticky;
            left: 0;

            &.s1 {
                background-color: var(--subBg100);
                top: 180px;

                @media (max-width: 800px){ 
                    top: 140px;
                }
            }
            &.s2 {
                background-color: var(--subBg200);
                top: 200px;

                @media (max-width: 800px){ 
                    top: 160px;
                }
            }
            &.s3 {
                background-color: var(--subBg300);
                top: 220px;

                @media (max-width: 800px){ 
                    top: 180px;
                }
            }
            &.s4 {
                background-color: var(--subBg400);
                top: 240px;

                @media (max-width: 800px){ 
                    top: 200px;
                }
            }
            .num {
                font-size: 5vw;
                line-height: 1;
                font-weight: 900;
                font-family: var(--mainNum-font);
                position: absolute;
                left: 1vw;
                top: 1vw;

                @media (max-width: 800px){ 
                    font-size: 80px;
                    left: 20px;
                    top: 20px;
                }
            }
            .text {
                text-align: center;
                margin-bottom: 1rem;

                > div {
                    font-size: 3vw;
                    line-height: 1;
                    font-weight: 900;
                    text-transform: uppercase;
                    text-decoration: underline;
                    font-family: var(--mainEng-font);

                    @media (max-width: 800px){ 
                        font-size: 26px;
                    }
                }
            }
            .title {
                font-family: var(--mainKor-font);
                margin-bottom: 1rem;
            }
            .btn {
                a {
                    text-decoration: underline;
                    text-transform: uppercase;
                    color: var(--black200);
                    font-size: 1rem;
                    transition: all 0.3s;
                    margin: 0 2px;

                    &:hover {
                        color: var(--black);
                    }
                }
            }
            .info {
                position: absolute;
                left: 0;
                bottom: 3%;
                width: 98%;
                margin-left: 1%;
                border-top: 1px solid var(--black);
                border-bottom: 1px solid var(--black);
                display: flex;
                justify-content: space-between;

                @media (max-width: 800px){ 
                    flex-direction: column;
                    width: 90%;
                    margin-left: 5%;
                    padding: 5px 0;
                }

                span {
                    font-family: var(--mainKor-font);
                    font-size: 12px;
                    padding: 3px 0;
                    text-transform: uppercase;
                }
            }
        }
    }
}

6.3 사이트 데이터 작업

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

const siteText = [
    {
        text: ["make", "site compliant with", "webstandard"],
        title: "비트를 이용한 사이트 제작",
        code: "https://github.com/webstoryboy/port2023-vite",
        view: "https://port2023-vite.netlify.app",
        info: [
            "site coding",
            "production period : two days",
            "use stack : HTML5/CSS3, CSS Variable, Vite",
        ],
    },
    {
        text: ["make", "site compliant with", "react.js"],
        title: "리액트를 이용한 사이트 제작",
        code: "https://github.com/webstoryboy/port2023-react",
        view: "https://port2023-react.netlify.app",
        info: [
            "site coding",
            "production period : two days",
            "use stack : HTML5/CSS3, CSS Variable, Vite",
        ],
    },
    {
        text: ["make", "site compliant with", "vue.js"],
        title: "뷰를 이용한 사이트 제작",
        code: "https://github.com/webstoryboy/port2023-vue",
        view: "https://port2023-vue.netlify.app",
        info: [
            "site coding",
            "production period : two days",
            "use stack : HTML5/CSS3, Scss Variable, vue",
        ],
    },
    {
        text: ["make", "site compliant with", "next.js"],
        title: "넥스트를 이용한 사이트 제작",
        code: "https://github.com/webstoryboy/port2023-next",
        view: "https://port2023-next.netlify.app",
        info: [
            "site coding",
            "production period : two days",
            "use stack : HTML5/CSS3, Scss Variable, next.js",
        ],
    },
];

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

const Site = () => {
    return (
        <section id="site">
            <div className="site__inner">
                <h2 className="site__title">Site coding <em>나의 작업물</em></h2>
                <div className="site__wrap">
                    {siteText.map((site, key) => (
                        <article className={`site__item s${key+1}`} key={key}>
                            <span className="num">{key+1}.</span>
                            <div className="text">
                                <div>{site.text[0]}</div>
                                <div>{site.text[1]}</div>
                                <div>{site.text[2]}</div>
                            </div>
                            <h3 className="title">
                                {site.title}
                            </h3>
                            <div className="btn">
                                <a href={site.code}>code</a>
                                <a href={site.view}>view</a>
                            </div>
                            <div className="info">
                                <span>{site.info[0]}</span>
                                <span>{site.info[1]}</span>
                                <span>{site.info[2]}</span>
                            </div>
                        </article>
                    ))}
                </div>
            </div>
        </section>
    );
};

3. 마무리

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

git add .
git commit -m "🤪 사이트 완료"
git push -u origin main

사이트 페이지도 완료가 되었습니다. 데이터 작업을 하기 때문에 수정하기도 편하고 가독성도 좋아졌습니다. 여러분들도 이렇게 코딩을 해보면 좋을 거 같습니다. 수고하셨습니다.

---

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

예제 목록

• 1. 포트폴리오 사이트 만들기 : Vite-Site : 셋팅하기
• 2. 포트폴리오 사이트 만들기 : Vite-Site : 레이아웃 설정
• 3. 포트폴리오 사이트 만들기 : Vite-Site : 헤더 영역
• 4. 포트폴리오 사이트 만들기 : Vite-Site : 인트로 영역
• 5. 포트폴리오 사이트 만들기 : Vite-Site : 스킬 영역
• 6. 포트폴리오 사이트 만들기 : Vite-Site : 사이트 영역
• 7. 포트폴리오 사이트 만들기 : Vite-Site : 포트폴리오 영역
• 8. 포트폴리오 사이트 만들기 : Vite-Site : 연락처 영역
• 9. 포트폴리오 사이트 만들기 : Vite-Site : 푸터 영역
• 10. 포트폴리오 사이트 만들기 : Vite-Site : 마무리
• 11. 포트폴리오 사이트 만들기 : React-Site : 셋팅하기
• 12. 포트폴리오 사이트 만들기 : React-Site : 컨퍼넌트 설정
• 13. 포트폴리오 사이트 만들기 : React-Site : 헤더 영역
• 14. 포트폴리오 사이트 만들기 : React-Site : 인트로 영역
• 15. 포트폴리오 사이트 만들기 : React-Site : 스킬 영역
• 16. 포트폴리오 사이트 만들기 : React-Site : 사이트 영역
• 17. 포트폴리오 사이트 만들기 : React-Site : 포트폴리오 영역
• 18. 포트폴리오 사이트 만들기 : React-Site : 연락처 영역
• 19. 포트폴리오 사이트 만들기 : React-Site : 푸터 영역
• 20. 포트폴리오 사이트 만들기 : React-Site : 마무리

• 21. 포트폴리오 사이트 만들기 : Vue-Site : 셋팅하기
• 22. 포트폴리오 사이트 만들기 : Vue-Site : 컨퍼넌트 설정
• 23. 포트폴리오 사이트 만들기 : Vue-Site : 헤더 영역
• 24. 포트폴리오 사이트 만들기 : Vue-Site : 인트로 영역
• 25. 포트폴리오 사이트 만들기 : Vue-Site : 스킬 영역
• 26. 포트폴리오 사이트 만들기 : Vue-Site : 사이트 영역
• 27. 포트폴리오 사이트 만들기 : Vue-Site : 포트폴리오 영역
• 28. 포트폴리오 사이트 만들기 : Vue-Site : 연락처 영역
• 29. 포트폴리오 사이트 만들기 : Vue-Site : 푸터 영역
• 30. 포트폴리오 사이트 만들기 : Vue-Site : 마무리
• 31. 포트폴리오 사이트 만들기 : Next-Site : 셋팅하기
• 32. 포트폴리오 사이트 만들기 : Next-Site : 컨퍼넌트 설정
• 33. 포트폴리오 사이트 만들기 : Next-Site : 헤더 영역
• 34. 포트폴리오 사이트 만들기 : Next-Site : 인트로 영역
• 35. 포트폴리오 사이트 만들기 : Next-Site : 스킬 영역
• 36. 포트폴리오 사이트 만들기 : Next-Site : 사이트 영역
• 37. 포트폴리오 사이트 만들기 : Next-Site : 포트폴리오 영역
• 38. 포트폴리오 사이트 만들기 : Next-Site : 연락처 영역
• 39. 포트폴리오 사이트 만들기 : Next-Site : 푸터 영역
• 40. 포트폴리오 사이트 만들기 : Next-Site : 마무리