포트폴리오 만들기

회사에선 시간을 못 낼 정도로 바빠지고 집에서는 얼마 안되는 시간으로 하다 보니 한주가 지나갔다.

이전에 수정하던 리포지토리를 날린 뒤에도 계속 다른 테마를 찾아보던 와중, 드디어 원하는 것과 비슷한 테마를 찾을 수 있었다.

creative-theme-jekyll

Start Bootstrap의 Creative라는 테마를 지킬로 이식한 creative-theme-jekyll 테마를 사용하기로 했다.

한 레이아웃에 여러 페이지가 구간별로 들어가 있고, 이전에 쓴 테마보다는 기능이 없었지만 간단하게 구성되어 있어서 테마 수정을 해볼 만 했다.

테마 수정(커스텀)

• 네비게이션 바 수정
• 메인 구역 수정
• 구글 폰트 추가
• 다크 모드 추가

---

네비게이션 바 수정

메인 구역의 바와 메인을 벗어나면 바뀌는 바의 색상이 다른게 맘에 들지 않아 먼저 살펴본 내용이다. 메인 구역 <nav> 태그에서 affix-top 이라는 클래스가 메인을 벗어나면 affix 로 바뀌는 힌트로 네비게이션 바 색이 바뀌는 부분을 알 수 있었다.

구역에 상관없이 같은 색인 네비게이션 바를 원해서 관련된 SCSS를 찾아 아래 내용과 같이 수정했고, &.affix가 붙은 다른 부분도 찾아서 원하는 색으로 수정했다.

.navbar-default {
    background-color: white; → 같은 색으로 수정
    (생략)
    @media (min-width: 768px) {
        background-color: transparent; → 같은 색으로 수정
        (생략)
        
        &.affix {
            background-color: white; → 같은 색으로 수정
            (생략)
        }
    }
}

메인 구역 수정

먼저 메인 구역의 배경을 저작권 무료 이미지로 바꿨다.

그 다음은 원본의 맨 아래부분에 있는 소셜 및 연락처 내용을 메인 구역에 두기로 했다. 테마에 포함된 Font Awesome(v4)와 <a> 태그를 활용하여 제목 아래쪽에 나오도록 했다.

.a-icon{
    a{
        color: white; text-decoration: none;
        margin-left: 10px; margin-right: 10px;
    }
}

.github-icon {
    &:hover { color: rgb(19, 19, 19); }
}

.linkedin-icon {
    &:hover { color: rgb(21, 103, 226); }
}

.mail-icon {
    &:hover { color: rgb(226, 171, 21); }
}

<div class="a-icon wow fadeIn" data-wow-delay=".5s">
	<a class="fa fa-github fa-3x github-icon" target="_blank" href="https://github.com/{{ site.github_username }}"></a>
	<a class="fa fa-linkedin fa-3x linkedin-icon" target="_blank" href="https://www.linkedin.com/in/{{ site.linkedin_username }}"></a>
	<a class="fa fa-envelope fa-3x mail-icon" href="mailto:{{ site.email }}"></a>
</div>

구글 폰트 추가

폰트로 바꿀 방법을 찾다가 우연히 구글 폰트를 알게 되었다. 종류와 양이 적을 수 있지만 라이센스 걱정 없는 무료 폰트를 구하기에는 안성맞춤이였고 원하는 폰트를 찾을 수 있었다.

<link href="https://fonts.googleapis.com/css2?family=Nanum+Gothic:wght@400;700;800&display=swap" rel="stylesheet" type='text/css'>
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100;300;400;500;700;900&display=swap" rel="stylesheet" type='text/css'>
<link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+KR:wght@100;200;300;400;500;600;700&display=swap" rel="stylesheet" type='text/css'>

다크 모드

이전에 사용했던 테마에서는 다크 모드를 On/Off 할 수 있는 기능이 있었는데, 지금 사용중인 테마에도 다크 모드 기능을 넣고 싶었다. 찾아본 다크 모드 기능 구현에 대한 글을 참고하면서 만들었다.

scss에서 다크 모드일때와 아닐 때의 색을 구분해놓았다. 변수를 사용하니 일일이 색상코드를 넣지 않아도 되어서 관리하기 편리했고, 미디어 쿼리로 웹 브라우저나 OS의 다크 모드 설정 여부를 구분 할 수 있었다.

body {
    --font: #1d1d1d;
    --navbar: #f7f7f7;
    (생략)
}

@media (prefers-color-scheme: dark){
    body {
        --font: #1d1d1d;
        --navbar: #f7f7f7;
		(생략)
	}
}

하지만 내가 원하는 건 사용자가 On/Off 할 수 있는 다크 모드였기에 dataset을 이용해서 On/Off 하는 방식으로 만들었다.

body {
    --font: #1d1d1d;
    --navbar: #f7f7f7;
    (생략)
}

body[data-theme="dark"]{
    --font: #f7f7f7;
    --navbar: #272727;
    (생략)
}

@media (prefers-color-scheme: dark){
    body {
        --font: #1d1d1d;
        --navbar: #f7f7f7;
        (생략)
	}
    
    body[data-theme="dark"]{
        --font: #f7f7f7;
        --navbar: #272727;
        (생략)
	}
}

// Detect Dark Theme
$(document).ready(function(){
	if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
		document.body.dataset.theme = "dark";
	}else{
		document.body.dataset.theme = "light";
	}

	window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', event => {
		const newColorScheme = event.matches ? "dark" : "light";
		document.body.dataset.theme = newColorScheme;
    });
});

// Theme Switch
$('#mode-switch').bind('click', function(event) {
	if(document.body.dataset.theme == "light"){
		document.body.dataset.theme = "dark";
	}else{
		document.body.dataset.theme = "light";
	}
});

On/Off 버튼은 네비게이션 바의 맨 오른쪽에 두기로 했다.

다크 모드 버튼을 누르면 아이콘도 바뀌게끔 하려고 했으나 Font Awesome이 이전 버전이라 원하는 아이콘을 사용할 수 없어서 전구 아이콘 하나로만 사용하기로 했다.

<li>
	<span id="mode-switch" class="" role="button">
		<i id="switch" class="fa fa-2x fa-lightbulb-o"></i>
	</span>
</li>

내용 입력

포트폴리오 사이트를 만들면서 가장 오래 걸린 작업이였다.

캐리어 부분에선, 회사에서 근무한 파일이나 프로젝트는 사내망(VPN+VDI)에서 작업하고 회사 규칙 상 내용물을 보여줄 수 없었기에 작성 할 수 있는 내용이 많지 않았다. 회사에서 근무하면서 담당했던 작업들을 최대한 나열해 보았고, 내용이 쓸데없는 내용으로 많은 거 보단 핵심만 간결하게 표현하는 것이 나아보여서 핵심만 짧게 작성했다.

스택 부분에선, 회사에서 직접 코드를 짠 적은 없지만 내용 구성을 둘러봤었던 코볼과 다른 프로젝트에서 잠깐 사용했던 ABAP 등 얇게 배운 것들은 스택 내용에서는 제외시키기로 했다.

프로젝트는 지금 만든 포트폴리오 사이트 밖에 올릴 수 없었다. 차후에 해보고 싶은 개인 프로젝트를 끝낼 때 마다 추가할 예정이다.

---

결과

위의 과정을 거쳐서 작년 12월부터 시작한 포트폴리오 사이트를 1월 말에 겨우 완성시킬 수 있었다. 많이 부족하지만 웹 서핑을 제외하고 혼자서 사이트를 만들어 낸 것에 의의를 두었다.

현재 이 글을 쓰는 시점에서는 이직서 작성을 하고 있다. 깃허브 프로필(readme.md) 수정한 내용은 크게 한 게 없어서 여기에다 올려도 되는지 고민중.

• 이직용 포트폴리오 사이트 개발 (100%)
• 이직 준비 (80%)
• 블로그 개설 전 작업내용 글쓰기 (75%)
• 업무 중 배웠던 내용 글쓰기 (0%)
• 개인 공부용 토이 프로젝트 (0%)