DO 해커톤: 포트폴리오 디자인

개인 브랜드 구축은 모든 개발자의 경력에 ​​중요합니다. 포트폴리오를 유지하는 것은 온라인 인지도를 얻는 좋은 방법입니다. 이력서는 관례와 종이 한 장으로 제한되지만 포트폴리오는 가능한 최선의 방법으로 기술과 경험을 보여줄 수 있습니다.

이 기사에서는 내 포트폴리오 디자인을 보여주고 정당화할 것입니다. denniskrasnov.com에서 확인하십시오.

목표

내 포트폴리오는 다음과 같아야 합니다.

내 기술과 경험을 보여줘

채용 담당자 및 고용 관리자가 내 이력서에 쉽게 액세스할 수 있도록 함

궁극적으로 더 많은 취업 기회를 얻으세요 :)

형세

랜딩 섹션

목표는 기능 대신 이점에 중점을 두고 짧고 단순하게 유지하는 것입니다. "저는 개발자입니다"대신 "고용 가능한 개발자"입니다.

내 이력서를 다운로드하는 버튼은 명확한 클릭 유도 문안을 제공합니다. 캐리커처가 웹사이트에 약간의 개성을 더하는 동안 :)

기술 섹션

대부분의 작업은 특정 기술 집합을 찾습니다. 목표는 채용 담당자 또는 고용 관리자가 이러한 요구 사항을 쉽게 확인할 수 있도록 하는 것입니다.

따라서 나는 내 기술을 논리적으로 여섯 가지 범주로 나누고 중요한 부분을 강조했습니다.

접은 부분 위에 있는 콘텐츠(아래로 스크롤하지 않아도 표시됨)가 가장 많이 표시됩니다. 스킬 섹션은 상위에 위치할 만큼 중요합니다.

추천 섹션

사회적 증거는 리뷰, 추천, 평가 등 신뢰성에 도움이 됩니다.

작업 섹션

물론 취업에 있어 경력은 매우 중요합니다.

표준 이력서 레이아웃을 좀 더 보기 좋게 양식화했습니다.

프로젝트 섹션

저는 몇 가지 주목할만한 사이드 프로젝트를 가지고 있으며 그것들의 잠재력을 최대한 보여주고 싶습니다.

따라서 사례 연구(설명, 데모 및 선택적으로 강조 표시)로 이어지는 각 프로젝트에 대한 눈에 띄는 미리보기 이미지를 만들었습니다.

교육과

여기서는 별로 할 말이 없지만, 제 경우에는 다른 모든 것을 더 강조하고 싶어서 마지막으로 주문했습니다.

기술

내 콘텐츠는 자주 변경되지 않으므로 정적 웹사이트만 있으면 됩니다. 또한 JavaScript 프레임워크와 SCSS를 사용하고 싶습니다.

나는 몇 가지 이유로 Svelte과 Sapper에 정착했습니다.

Svelte로 작업하는 것은 일반 HTML 및 CSS로 작업하는 것과 매우 유사하며 간단하고 즐겁습니다

Svelte는 매우 가볍습니다

Sapper가 정적 웹 사이트 번들로 컴파일됨(필요한 경우 반응형 Svelte가 뿌려짐)

객체 지향 언어의 클래스와 마찬가지로 Svelte 구성 요소는 다음과 같습니다.

재사용 가능

컴포저블

관심사 분리 가능(JavaScript 논리 및 범위 지정 CSS)

다음은 Svelte로 가능한 높은 수준의 코드 종류를 보여주는 코드 스니펫입니다.

<Section id="skills" watermarkPadding dark>
    <WatermarkHeader title="skills" />
    <Skills>
        <Skill
            imageUrl="/skills/backend.svg"
            title="Backend Development"
            summary="<b>Spring</b>-based <b>Java/Kotlin</b> ..."
        />

        <!-- other skills ... -->

    </Skills>
</Section>

<!-- other sections ... -->

지금은 코드에 웹 사이트 콘텐츠를 하드 코딩하지만 콘텐츠를 변경하기 위해 소스 코드를 편집하는 데 지치면 최소한의 변경으로 콘텐츠 관리 시스템에서 데이터를 쉽게 소싱할 수 있습니다.

결론

여기에는 포트폴리오를 만드는 데 사용한 레이아웃과 기술이 포함됩니다.

다음에는 포트폴리오를 배포한 방법에 대해 설명하겠습니다.