Junyong's blog

개요

Hugo-Blox의 Research Group Template을 기반으로 만들어진 정적 웹사이트입니다.

프로젝트: 개인 포트폴리오 사이트

기획 및 제작: 박준용

분류: 개인 프로젝트

제작 기간: 2024.09. ~ 10.

최종 배포일: 2021.10.06.

주요 기능: 라이트/다크 모드, 언어 전환, 반응형 웹, Email 발송, open graph

사용 기술: Hugo, Bootstrap/v5, HTML/CSS/JS

기능 살펴보기

라이트/다크 모드 전환

라이트 모드

다크 모드

전환 방법

우측 상단의 달 모양의 아이콘을 누르면 3개의 드랍 메뉴 중 하나를 선택할 수 있습니다.

언어 전환

지원하는 언어 목록:

한국어 (기본 언어)

English

한국어 모드

다크 모드

전환 방법

우측 상단의 지구본 모양의 아이콘을 누르면 2개의 드랍 메뉴(한국어, 영어) 중 하나를 선택할 수 있습니다.

반응형 웹

PC website

mobile website(phone)

mobile website(tablet)

Email 발송

발송방법 Contact 메뉴로 이동 -> 스크롤 하단의 message 버튼 클릭 -> 필드를 모두 채우고 보내기 클릭

email 발송 기능 사이트

Open Graph

오픈 그래프(Open Graph)란? 인터넷 프로토콜의 한 종류로서 2010년에 페이스북이 발표했다. 오픈 그래프의 목적은 웹페이지에 대한 정보를 담고 있는 메타데이터의 사용방식을 표준화하여 페이스북 내에서의 링크 공유 시 해당 웹페이지에 대한 정보를 특정 형식의 미리보기 형태로 제공해주는 기능을 모든 웹페이지에서 가능하게끔 하는 것이었고, 이후 트위터와 링크드인에서 이를 차용하여 더 나은 UX를 제공하는 데에 활용하고 있다.

웹사이트 오픈 그래프 디버거 오픈 그래프 디버거 해당 사이트에 접속해보면 open graph 프로토콜이 정상적으로 동작하는지 확인할 수 있다.

나의 사이트의 경우 미리보기 이미지까지 정상적으로 출력되는 모습이다

설치 및 배포

레포지토리 클론:

git clone https://github.com/sksla123/sksla123.github.io.git

레포지토리 복제: 지정된 workflow에 의해 깃허브에 push하게되면 자동으로 배포됩니다.

라이센스

MIT License

자세한 내용은 MIT lisence 탭 혹은 LICENSE.md를 확인하세요.

Contact

email: 'pjy010608@naver.com' or 'pjy010608@jbnu.ac.kr'