2023년 권은진 프론트엔드 포트폴리오

Make it More Appealing,

들여다보게 만들다,

한 번 더 들여다보게 만드는 홈페이지를 만들겠습니다.

project

Type: 반응형 웹디자인
Tool: HTML5, CSS3, JavaScript - jQuery
CMS: Gnuboard
Color
Work: 개인작업 100%
Info: 그누보드를 사용하여 멀티페이지 홈페이지를 (모든 메뉴 클릭 가능)제작했습니다. 게시판에 글 작성이 가능하며 게시판 글을 추출해서 메인페이지 뉴스섹션에 최신글을 자동으로 불러옵니다. 반응형으로 제작되었습니다.
Design: 메인컬러 이외는 무채색을 사용하여 메인 컬러가 돋보이게 강조하였습니다. 메인슬라이드의 이미지 사이즈가 커졌다 줄어들어 좀 더 역동적인 슬라이드로 제작하였습니다.

project

Type: PC 웹디자인
Tool: HTML5, CSS3, JavaScript - jQuery
CMS: Gnuboard
Color
Work: 개인작업 100%
Info: 그누보드를 사용하여 멀티페이지 홈페이지를 (모든 메뉴 클릭 가능)제작했습니다. 게시판에 글 작성이 가능하며 게시판 글을 추출해서 메인페이지 뉴스섹션에 최신글을 자동으로 불러옵니다. Slick Slide를 이용하여 슬라이드를 제작했습니다.
Design: 섹션타이틀 타이포그라피에 마름모 모양의 가상요소 디자인을 넣어 타이틀에 통일감과 강조를 주었습니다. Pretendard 글꼴의 사용하여 모던한 느낌으로 디자인하였습니다.

project

Type: PC 웹디자인
Tool: React, react-router-dom, react-slick, gsap, HTML5, CSS3, SCSS(sass), Styled-Component, JavaScript, GitHub Pages
Color
Work: 개인작업 100%
Info: React의 react-router-dom을 사용하여 SPA으로 제작하였습니다. 서브페이지 작동가능(모든 메뉴 클릭 가능) 합니다. react-slick으로 슬라이드를 제작하였고, SCSS를 사용하여 style을 주었습니다. 게시판에 글쓰기, 수정, 삭제 기능이 가능합니다.
Design: 섹션타이틀 타이포그라피에 원 모양의 가상요소 디자인을 넣어 타이틀에 통일감과 강조를 주었습니다. Pretendard 글꼴의 사용하여 모던한 느낌으로 디자인하였습니다.

project

Type: PC 웹디자인
Tool: React, react-router-dom, axios, react-slick, gsap, HTML5, CSS3, SCSS(sass), Styled-Component, JavaScript, GitHub Pages
Color
Work: 개인작업 100%
Info: axios를 사용하여 영화 데이터 api를 가져와서 영화사이트를 제작했습니다. React의 react-router-dom을 사용하여 영화를 클릭하면 디테일 페이지로 이동합니다. 장르별로 영화리스트를 구분하였고, 검색 기능이 가능합니다. scss을 이용하여 style을 주었습니다.
Design: 영화 사이트에서 많이 쓰는 다크컬러를 메인으로 하고 포인트 컬러 하나만 써서 강조를 주었습니다. 영화 이미지에 마우스 호버하면 이미지가 밝게 보여 선택한 영화를 잘 알 수 있게 했습니다.

project

Type: PC 웹디자인
Tool: React, react-router-dom, axios, react-slick, gsap, HTML5, CSS3, SCSS(sass), Styled-Component, JavaScript, GitHub Pages
Color
Work: 개인작업 100%
Info: axios를 사용하여 공공데이터 api를 가져와서 부산맛집지도 사이트를 제작했습니다. kakao-maps api를 이용하여 맛집을 지도에 표시해 줍니다. 부산의 구,군 별로 리스트를 만들었고 레스토랑을 클릭하면 레스토랑의 정보를 보여줍니다. scss을 이용하여 style을 주었습니다.
Design: gnb와 맛집 지도가 한 눈에 보이게 배치 하였습니다. 산뜻한 포인트 컬러를 사용하여 사이트에 생기를 주었습니다. 지도의 마커에 맛집의 음식 사진을 넣어 클릭을 유도하게 만들었습니다.

project

Type: PC 웹디자인
Tool: HTML5, CSS3, JavaScript - jQuery, GitHub Pages
Color
Work: 개인작업 100%
Info: YTPlayer를 사용하여 메인비주얼 부분에 youtube 동영상을 넣었습니다. Slick Slide를 이용하여 슬라이드를 제작했습니다.
Design: 메인비주얼에 동영상을 넣고 그위에 가상요소로 패턴을 뿌려 메인비주얼 슬로건의 가독성을 살렸습니다. 코카콜라를 상징하는 빨간색으로 버튼을 만들고 마우스 호버 효과를 주어 동적인 느낌을 주었습니다.

project

Type: PC 웹디자인
Tool: HTML5, CSS3, JavaScript - jQuery, GitHub Pages
Color
Work: 개인작업 100%
Info: Slick Slide를 이용하여 슬라이드를 제작했습니다. Aos를 사용하여 마우스 스크롤 시 이벤트가 발생합니다.
Design: 기존 포인핸드 사이트는 페이지의 70%가 메인컬러로 페이지가 모두 덮히는 스타일이라 정보전달력이 부족했던 점을 보완하여 조금 더 심플하면서 정보전달이 잘 되게 제작하였습니다.

Contact

Education