Tutorial/portfolio

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

by @webs 2023. 08. 01.

포트폴리오 사이트 만들기 : 사이트 영역

난이도 중간

소스 다운로드

완성 화면 완성 코드 영상 보기

소개

이번 섹션은 자신이 작업한 사이트를 보여주는 섹션입니다. 본인이 작업한 사이트를 보여주고 내가 이정도는 문제없이 할 수 있다라는 것을 보여주는 것이 중요합니다. 내가 작업한 사이트의 기술 스택이나 상세 설명을 적어주는 것이 좋고, 작업한 코드를 바로 볼 수 있는 버튼과 완성된 화면을 보여주는 것이 좋습니다.

작업한 사이트들은 git이나 netlify에 배포하여 보여주는 것이 좋습니다. 기본 웹표준 코딩부터, 반응형 코딩, 모바일 코딩, 리액트 코딩, 뷰 코딩으로 구성된 사이트 등을 보여주면 됩니다.

인덱스

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 반응형 작업하기

6. 사이트 영역

6.1 사이트 구조 잡기

4개의 사이트를 position: sticky;를 이용하여 고정시키는 효과를 연출하였습니다. 4개의 사이트는 article 속성으로 변경하여 콘텐츠의 성격을 명확히 표현하였습니다.

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

6.2 사이트 디자인 설정

.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;
}
.site__title em {
    font-size: 1.25rem;
    font-weight: 400;
    line-height: 2;
}
.site__item {
    height: 70vh;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    position: sticky;
    left: 0;
}
.site__item.s1 {
    background-color: var(--subBg100);
    top: 180px;
}
.site__item.s2 {
    background-color: var(--subBg200);
    top: 200px;
}
.site__item.s3 {
    background-color: var(--subBg300);
    top: 220px;
}
.site__item.s4 {
    background-color: var(--subBg400);
    top: 240px;
}
.site__item .num {
    font-size: 5vw;
    line-height: 1;
    font-weight: 900;
    font-family: var(--mainNum-font);
    position: absolute;
    left: 1vw;
    top: 1vw;
}
.site__item .text {
    text-align: center;
    margin-bottom: 1rem;
}
.site__item .text > div {
    font-size: 3vw;
    line-height: 1;
    font-weight: 900;
    text-transform: uppercase;
    text-decoration: underline;
    font-family: var(--mainEng-font);
}
.site__item .title {
    font-family: var(--mainKor-font);
    margin-bottom: 1rem;
}
.site__item .btn a {
    text-decoration: underline;
    text-transform: uppercase;
    color: var(--black200);
    font-size: 1rem;
    transition: all 0.3s;
}
.site__item .btn a:hover {
    color: var(--black);
}
.site__item .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;
}
.site__item .info span {
    font-family: var(--mainKor-font);
    font-size: 12px;
    padding: 3px 0;
    text-transform: uppercase;
}

6.3 반응형 작업하기

반응형 작업도 특별하게 할 건 없습니다. 모바일에 맞추어 폰트 사이즈만 한 단계 낮추어 줬습니다.

@media (max-width: 800px){
    .site__title {
        width: 100%;
        margin-bottom: 10vw;
        font-size: 30px;
        height: auto;
        top: 68px;
        z-index: 1000;
        background-color: var(--mainBg-color);
    }
    .site__item.s1 {
        top: 140px;
    }
    .site__item.s2 {
        top: 160px;
    }
    .site__item.s3 {
        top: 180px;
    }
    .site__item.s4 {
        top: 200px;
    }
    .site__item .num {
        font-size: 80px;
        left: 20px;
        top: 20px;
    }
    .site__item .text > div {
        font-size: 26px;
    }
    .site__item .info {
        flex-direction: column;
        width: 90%;
        margin-left: 5%;
        padding: 5px 0;
    }
}

3. 마무리

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

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

사이트 영역도 마무리 했습니다. 특별한 건 없기 때문에 안되는 부분은 없을거라고 생각이 듭니다. 혹시나 안되거나 이상한 부분은 댓글 남겨주세요! 수고하셨습니다. 🥳

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

WEBSTORYBOY

재능은!
노력 끝에서 발견된다

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

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

소개

인덱스

1. 포트폴리오 사이트 만들기 : VITE SITE

6. 사이트 영역

6.1 사이트 구조 잡기

6.2 사이트 디자인 설정

6.3 반응형 작업하기

3. 마무리

예제 목록

댓글

티스토리툴바

재능은!노력 끝에서 발견된다

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

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

소개

인덱스

1. 포트폴리오 사이트 만들기 : VITE SITE

6. 사이트 영역

6.1 사이트 구조 잡기

6.2 사이트 디자인 설정

6.3 반응형 작업하기

3. 마무리

예제 목록

관련글

댓글

티스토리툴바

재능은!
노력 끝에서 발견된다