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

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

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

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

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

소개

이번 섹션은 자신의 스킬을 나타내는 섹션을 구성하는 부분입니다. 포트폴리오에서 자신의 스킬을 표현하는 방법은 중요하고 효과적인 커뮤니케이션을 위해 핵심적입니다

자기의 능력을 보여주는 방법은 여러가지가 있겠지만, 키워드 또는 아이콘을 이용하여 보여주는 방법이 제일 많이 쓰이긴 합니다. 스킬을 표현할 때에는 간결하고 명확한 언어로 스킬에 대한 내용을 표현하면 좋습니다. 또한 스킬을 실제로 어떻게 활용하는지 시각적으로 증명하는 것도 효과적입니다.

인덱스

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

5. 스킬 영역

5.1 스킬 구조 잡기

포트폴리오에서 자기의 실력을 뽐내는 것은 중요합니다. 내가 어느 정도 할 수 있고, 얼마나 알고 있는 지는 면접에서도 중요한 요건이 됩니다. 나는 아직 신입이고 잘 하지는 못하지만, 자신감을 갖고 자기의 능력을 자랑해보세요! 저는 스킬보다는 나의 의지, 생각 등을 표현하였습니다. 이번 섹션은 position: sticky; 속성을 이용하여 제목을 고정시켰습니다. 

<section id="skill">
    <div class="skill__inner">
        <h2 class="skill__title">Challenge <em>나의 도전</em></h2>
        <div class="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>
<!-- //skill -->

5.2 스킬 디자인 설정

position: sticky;를 설정하여 top: 70px;에서 멈추도록 설정하였습니다. 

.slkll__inner {
    padding: 16px;
    display: flex;
    justify-content: space-between;
}
.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);
}
.skill__title em {
    font-size: 1.25rem;
    font-weight: 400;
    line-height: 2;
}
.skill__desc {
    width: 50%;
}
.skill__desc span {
    font-size: 5vw;
    line-height: 1;
    font-weight: 900;
    line-height: 1.3;
    font-family: var(--mainNum-font);
}
.skill__desc h3 {
    font-size: 1.5rem;
    text-decoration: underline;
    text-underline-position: under;
    margin-bottom: 1vw;
}
.skill__desc p {
    margin-bottom: 30vh;
    font-size: 1.1rem;
}

5.3 반응형 작업하기

position: sticky;를 설정하여 top: 70px;에서 멈추도록 설정하였습니다. 

@media (max-width: 800px){
    .slkll__inner {
        flex-direction: column;
    }
    .skill__title {
        width: 100%;
        margin-bottom: 10vw;
        font-size: 30px;
        height: auto;
        top: 68px;
        background-color: var(--mainBg-color);
    }
    .skill__desc {
        width: 100%;
    }
    .skill__desc span {
        font-size: 20vw;
    }
}

3. 마무리

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

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

스킬 영역까지 마무리 하였습니다. 스킬 영역은 자신있게 표현하는게 좋습니다. 또한 자기 사진을 많이 넣고 표현하면 긍정적인 효과를 줄 수 있습니다. 오늘도 수고하셨습니다! 🤭

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

예제 목록

관련글

댓글

티스토리툴바