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

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

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

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

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

소개

이번 섹션은 가로 모드 느낌을 나게 연출하겠습니다. GSAP 라이브러리를 활용하여 작업하겠습니다. 자바스크립트를 작업하여 연출할 수 있지만, 비효율적이고, 애니메이션 효과가 라이브러리보다 훨씬 좋지 않습니다. 좋은 기능들은 갔다 쓰는게 더 효율적일 수 있습니다. GSPA를 처음 듣거나 할 줄 모르다면 gsap 강의를 한번 듣고 오는 것을 추천합니다. 그럼 시작해보겠습니다.

인덱스

1. 포트폴리오 사이트 만들기 : 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 스크립트 작업하기

7. 포트폴리오 영역

7.1 사이트 구조 잡기

port__wrap 안에 port__item 박스가 10개 있는 구조입니다. 우선 가로모드를 작업하기 전에 CSS 구성부터 완벽하게 작업해야 스크립트에서 실수없이 완성할 수 있습니다. 

<section id="port"> 
    <div class="port__inner">
        <div class="port__title">
            portfolio <em>포폴 작업물</em>
        </div>
        <div class="port__wrap">
            <article class="port__item p1">
                <span class="num">01.</span>
                <a href="https://github.com/kimsangjunv1/-React-Portfolio" target="_blank" class="img">
                    <img src="assets/img/port01.jpg" alt="김상준 포트폴리오" />
                </a>
                <h3 class="title">어워드에도 올라간 포트폴리오</h3>
                <p class="desc">
                    라마 디자인을 통해 자신의 스킬을 가장 멋지게 표현한 포트폴리오입니다.
                    가로 모드와 세로 모드는 매우 인상적이며 특히 리액트와 비트를 이용하여 제작한 것은 더욱 놀랍습니다.
                    이 사이트는 awwwards.com에도 인정받아 올라간 포트폴리오입니다. 
                    확실히 그의 뛰어난 디자인 스킬과 기술력이 빛을 발휘한 결과물인 것 같습니다.
                </p>
                <a href="https://portfoliosj-react.netlify.app/" target="_blank" class="site">사이트 보기</a>
            </article>
            <article class="port__item p2">
                <span class="num">02.</span>
                <a href="https://github.com/seolhee313/PORTFOLIO-REACT" class="img" target="_blank">
                    <img src="assets/img/port02.jpg" alt="천설희 포트폴리오" />
                </a>
                <h3 class="title">빛나는 밤에 포트폴리오</h3>
                <p class="desc">
                    이 사이트는 정말 인상적인 포트폴리오입니다. 
                    특히 스무스한 효과와 가로 모드드 높은 퀄리티를 자랑합니다. 
                    디테일과 꼼꼼함이 넘치는 포트폴리오는 개발자의 뛰어난 능력을 엿볼 수 있습니다.
                    GSAP와 React.js를 이용하여 사이트를 표현한 것은 기술적인 능력과 창의성을 강조하는데, 부족함이 없으며,
                    세심한 코딩과 디테일한 작업으로 그의 개발 감각과 능력이 빛을 발휘한 것 같습니다. 
                </p>
                <a href="https://portfolio-313.web.app/" target="_blank" class="site">사이트 보기</a>
            </article>
            <article class="port__item p3">
                <span class="num">03.</span>
                <a href="https://github.com/YeoDaSeul4355/portfolio" class="img" target="_blank">
                    <img src="assets/img/port03.jpg" alt="여다슬 포트폴리오" />
                </a>
                <h3 class="title">열정이 넘치는 포트폴리오</h3>
                <p class="desc">
                    깔끔하고 발랄한 느낌이 묻어나는 장난꾸러기 같은 사이트입니다.
                    배치와 색상 선택이 조화롭고 사용자를 환영하는 분위기를 조성하고 있습니다. 
                    또한, 가로 모드에서의 디자인도 매우 멋집니다.
                    GSAP와 React.js를 이용한 부드러운 효과들이 사이트에서 눈에 띄며, 페이지 전환과 요소의 움직임이 매끄러운 포트폴리오입니다.
                </p>
                <a href="https://portfolio-jjul.web.app/" target="_blank" class="site">사이트 보기</a>
            </article>
            <article class="port__item p4">
                <span class="num">04.</span>
                <a href="https://github.com/dlgnsrb227/portfolio-next" class="img" target="_blank">
                    <img src="assets/img/port04.jpg" alt="이훈규 포트폴리오" />
                </a>
                <h3 class="title">모던한 포트폴리오</h3>
                <p class="desc">
                    블랙 컨셉과 애니메이션이 돋보이는 포트폴리오 사이트입니다.
                    GSAP를 통한 애니메이션과 NEXT.js를 통해 제작된 포트폴리오입니다.
                    pin 애니메이션을 통한 포폴 작업물의 표현 능력이 돋보이는 사이트입니다.
                </p>
                <a href="https://hoongportfolio-next.netlify.app/" target="_blank" class="site">사이트 보기</a>
            </article>
            <article class="port__item p5">
                <span class="num">05.</span>
                <a href="/" class="img" target="_blank">
                    <img src="assets/img/port05.jpg" alt="박준승 포트폴리오" />
                </a>
                <h3 class="title">가로모드의 정석 포트폴리오</h3>
                <p class="desc">
                    이 포트폴리오는 가로모드를 통해 눈에 띄는 애니메이션 효과를 가진 멋진 작품들이 펼쳐집니다. 
                    세션 간의 부드러운 전환과 흥미로운 움직임이 사용자들에게 색다른 경험을 선사합니다.
                    사이트에는 탁월한 디자인과 창의적인 애니메이션들이 어우러져, 사용자들에게 인상적인 시각적인 효과를 줍니다. 
                    애니메이션은 적절히 사용되어 사이트를 더욱 생동감 있게 만들어주는 포트폴리오입니다.
                </p>
                <a href="https://junseungpark.github.io/portfolio/index3.html" target="_blank" class="site">사이트 보기</a>
            </article>
            <article class="port__item p6">
                <span class="num">06.</span>
                <a href="/" class="img" target="_blank">
                    <img src="assets/img/port06.jpg" alt="포트폴리오" />
                </a>
                <h3 class="title">화려함의 정석 포트폴리오</h3>
                <p class="desc">
                    화려하고 세련된 디자인과 다채로운 색상이 사용된 포트폴리오는 사용자를 홀릴 듯한 시각적인 매력을 지니고 있습니다.
                    포트폴리오 내의 각 작품들은 디테일한 디자인과 탁월한 시각적 표현력을 갖추고 있어, 주인공의 뛰어난 예술적 감각을 느낄 수 있습니다. 
                    화려한 애니메이션 효과와 부드러운 전환은 사이트를 더욱 생동감 있게 만들어주며, 사용자들에게 색다른 경험을 선사합니다.
                </p>
                <a href="https://webstoryboy.github.io/port2023/portfolio-student/DavidYang/index.html" target="_blank" class="site">사이트 보기</a>
            </article>
            <article class="port__item p7">
                <span class="num">07.</span>
                <a href="/" class="img" target="_blank">
                    <img src="assets/img/port07.jpg" alt="포트폴리오" />
                </a>
                <h3 class="title">패럴랙스 정석 포트폴리오</h3>
                <p class="desc">
                    마치 예술작품을 감상하는 듯한 환상적인 경험을 선사하는 포트폴리오입니다. 
                    패럴랙스 스크롤링을 활용하여 구성된 사이트는 사용자들에게 독특하고 멋진 시각적 효과를 제공합니다.
                    배경과 움직이는 요소들이 조화롭게 어우러져, 사이트 전반에 걸쳐 깊이와 입체감을 느낄 수 있습니다. 
                    스크롤에 따라 움직이는 요소들은 마치 세계를 탐험하는 듯한 느낌을 주며, 사용자들을 끌어들이는 매력적인 요소로 작용합니다.
                </p>
                <a href="https://webstoryboy.github.io/port2023/portfolio-student/TaeyongLee/index.html" target="_blank" class="site">사이트 보기</a>
            </article>
            <article class="port__item p8">
                <span class="num">08.</span>
                <a href="/" class="img" target="_blank">
                    <img src="assets/img/port08.jpg" alt="김현로 포트폴리오" />
                </a>
                <h3 class="title">트랜지션 포트폴리오</h3>
                <p class="desc">
                    화면 전환과 요소들의 흐름이 순조롭고 매끄러운 작품들로 가득한 포트폴리오 사이트입니다. 
                    페이지 간의 트랜지션은 마치 이야기를 풀어내는 듯한 흥미진진한 경험을 선사합니다.

                    트랜지션 효과의 적절한 활용은 작품들을 보다 동적이고 생동감 있게 만들어줍니다. 
                    각 페이지의 이동이 자연스럽고 사용자들이 원활하게 사이트를 탐색할 수 있도록 배려된 구성은 
                    개발자의 디자인 능력을 잘 보여주는 특징입니다.
                </p>
                <a href="https://webstoryboy.github.io/port2023/portfolio-student/HyunroKim/index.html" target="_blank" class="site">사이트 보기</a>
            </article>
            <article class="port__item p9">
                <span class="num">09.</span>
                <a href="/" class="img" target="_blank">
                    <img src="assets/img/port09.jpg" alt="포트폴리오" />
                </a>
                <h3 class="title">스크롤의 정석 포트폴리오</h3>
                <p class="desc">
                    스크롤링을 활용하여 훌륭한 사용자 경험을 선사하는 포트폴리오 사이트입니다.
                    스크롤을 내리면서 작품들이 순차적으로 나타나고 효과적으로 전환되는 것은 마치 예술적인 이야기를 읽어나가는 듯한 느낌을 주며 사용자를 매료시킵니다.
                    스크롤의 움직임을 통해 작품들이 서서히 드러나고, 각 페이지 간의 전환은 자연스럽고 부드럽습니다. 
                    이러한 트랜지션과 애니메이션들이 작품들의 내용과 테마를 더욱 강조해줍니다.
                </p>
                <a href="https://webstoryboy.github.io/port2023/portfolio-student/ChoJaeHyung/index.html" target="_blank" class="site">사이트 보기</a>
            </article>
            <article class="port__item p10">
                <span class="num">10.</span>
                <a href="/" class="img" target="_blank"> 
                    <img src="assets/img/port10.jpg" alt="포트폴리오" />
                </a>
                <h3 class="title">모던함의 정석 포트폴리오</h3>
                <p class="desc">
                    현대적이고 세련된 디자인으로 가득한 포트폴리오 사이트입니다.
                    모던한 느낌과 세심한 디테일이 조화를 이루며, 사용자에게 신선하고 품격 있는 경험을 제공합니다.
                    사이트의 디자인은 깔끔하고 단정하면서도 특유의 감성과 풍부한 표현력이 느껴집니다. 
                    간결한 레이아웃과 모던한 색상 선택은 주인공의 디자인 감각을 잘 보여주는 특징입니다.
                </p>
                <a href="https://webstoryboy.github.io/port2023/portfolio-student/JooHyeji/index.html" target="_blank" class="site">사이트 보기</a>
            </article>
        </div>
    </div>
</section>
<!-- //port -->

7.2 사이트 디자인 설정

port__item 박스를 가로롤 정렬하기 위해 display: flex를 사용했습니다. .port__wrap를 가로로 유지하기 위하여 width: 7000px;을 설정했습니다. 

#port {
    width: 100%;
    margin-top: 30vh;
    overflow: hidden;
}
.port__inner {
    padding: 16px;
}
.port__title {
    width: 100%;
    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: 16px;
    text-indent: -0.26vw;
}
.port__title em {
    font-size: 1.25rem;
    font-weight: 400;
    line-height: 2;
}
.port__wrap {
    display: flex;
    flex-wrap: wrap;
    width: 7000px;
}
.port__item {
    width: 500px;
    height: 70vh;
    background-color: var(--subBg100);
    padding: 2.5rem;
    margin-right: 20px;
}
.port__item.p1 {
    background-color: var(--subBg100);
}
.port__item.p2 {
    background-color: var(--subBg200);
}
.port__item.p3 {
    background-color: var(--subBg300);
}
.port__item.p4 {
    background-color: var(--subBg400);
}
.port__item.p5 {
    background-color: var(--subBg500);
}
.port__item.p6 {
    background-color: var(--subBg100);
}
.port__item.p7 {
    background-color: var(--subBg200);
}
.port__item.p8 {
    background-color: var(--subBg300);
}
.port__item.p9 {
    background-color: var(--subBg400);
}
.port__item.p10 {
    background-color: var(--subBg500);
}
.port__item .num {
    font-size: 2rem;
    font-family: var(--mainNum-font);
}
.port__item .img {
    display: block;
    margin-top: -20px;
    transition: margin-top 0.3s;
}
.port__item:hover .img {
    margin-top: 0;
}
.port__item .img img {
    border-radius: 5px;
    filter: saturate(0%);
    transition: all 0.3s;
}
.port__item .img:hover img {
    filter: saturate(100%)
}
.port__item .title {
    font-size: 1.5rem;
    text-align: center;
    padding: 0.8rem 0;
    font-weight: 700;
    color: var(--black100);
    border-bottom: 2px solid var(--black100);
    margin-bottom: 1rem;
}
.port__item .desc {
    font-size: 1rem;
}
.port__item .site {
    border: 1px solid var(--black100);
    display: block;
    text-align: center;
    padding: 0.625rem 1.5rem;
    margin-top: 1.5rem;
}

7.3 반응형 작업하기

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

    }
    .port__item {
        width: 400px;
        padding: 40px 30px;
        height: auto;
    }
}

7.4 스크립트 작업하기

ScrollTrigger를 사용하기 위해서는 import를 시켜야 합니다. port__item 속성이 여러개 있기 때문에 다중 선택을 해야 합니다. gsap.utils.toArray 속성을 사용하여 다중 선택을 하고 gsap.to 속성을 이용하여 이동시켜 줍니다. trigger 속성은 움직이는 시점을 설정하고, start와 end를 통해 애니메이션을 컨틀롤 할 수 있습니다. 

import gsap from "gsap";
import ScrollTrigger from "gsap/ScrollTrigger";

export function port() {
    gsap.registerPlugin(ScrollTrigger);
    const horSection = gsap.utils.toArray(".port__item");

    gsap.to(horSection, {
        xPercent: -120 * (horSection.length - 1),
        ease: "none",
        scrollTrigger: {
            trigger: "#port",
            start: "top 56px",
            end: "+=3000",
            pin: true,
            scrub: 1,
            markers: false,
            invalidateOnRefresh: true,
            anticipatePin: 1,
        },
    });
}
  • import ScrollTrigger from "gsap/ScrollTrigger"; : GSAP의 ScrollTrigger 모듈을 가져옵니다. ScrollTrigger는 GSAP의 플러그인으로 스크롤에 반응하는 애니메이션을 쉽게 구현할 수 있도록 도와줍니다.
  • gsap.registerPlugin(ScrollTrigger); : ScrollTrigger를 GSAP에 등록합니다. 이를 통해 ScrollTrigger를 사용하여 애니메이션을 정의할 수 있습니다.
  • const horSection = gsap.utils.toArray(".port__item"); : 클래스 이름이 "port__item"인 모든 요소들을 선택하여 배열 horSection에 저장합니다.
  • gsap.to(horSection, {...}); : GSAP의 to 메서드를 사용하여 요소들에 애니메이션을 적용합니다.
  • xPercent: -120 * (horSection.length - 1),: 요소들을 가로 방향으로 배치하기 위해 xPercent 속성을 사용합니다. 스크롤되면 120% 만큼 이동하도록 설정합니다.
  • ease: "none", : 애니메이션의 이징(easing)을 "none"으로 설정하여 일정한 속도로 애니메이션이 진행되도록 합니다.
  • scrollTrigger: {...}: ScrollTrigger를 이용하여 스크롤에 따라 애니메이션을 제어하는 옵션들을 설정합니다.
  • trigger: "#port": 애니메이션을 시작할 트리거 요소로, #port를 선택합니다.
  • start: "top 56px": 트리거 요소의 상단에서 56px 아래에서 애니메이션이 시작됩니다.
  • end: "+=3000": 트리거 요소의 아래에서 3000px 아래에서 애니메이션이 끝납니다.
  • pin: true,: 애니메이션이 스크롤 범위 동안 고정되도록 합니다.
  • scrub: 1,: 스크롤 시 애니메이션 속도에 비례하여 애니메이션이 진행됩니다.
  • markers: false,: 디버깅을 위한 마커를 표시하지 않습니다.
  • invalidateOnRefresh: true,: 페이지 리프레시 시 ScrollTrigger 캐시를 재설정합니다.
  • anticipatePin: 1,: 고정된 상태로 애니메이션이 시작되기 전에 스크롤 위치에 따라 약간의 애니메이션 효과를 부여합니다.

3. 마무리

깃에 올려주고 마무리 하겠습니다. 

git add .
git commit -m "🤓 포트폴리오 완료"
git push -u origin main

포트폴리오 사이트에 하이라이트 부분을 완성하였습니다. vite를 사용하여 작업하고 있기 때문에 사이트를 확인하려면 터니널에서 npm run dev로 작업하셔야 제대로 된 화면을 확인할 수 있습니다. 이점 꼭 잊지 마세요!. 라이브 서버로 보시면 안됩니다. ScrollTrigger를 통해 가로모드를 완성하였습니다. 이부분이 어렵고 이해가 안되면 GSAP 영상을 보시면 쉽게 느껴질 것입니다. 오늘도 수고하셨습니다. 그럼 다음 섹션에서 뵙겠습니다. 😫

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

예제 목록

관련글

댓글

티스토리툴바