CHANMI'S PORTFOLIO

Only I can change me life,

no one can do it

This is best of portfolio

goal-oriented

FRONT-END DEVELOPER

Kim chanmi

01about me讚美

가장 큰 위험은 위험없는 삶이다 !
도전하는 것을 두려워하지 않는 신입 프론트엔드 개발자, 김찬미입니다. 누구의 인생이나 그렇듯 저 또한 지금까지 도전의 연속이었습니다. 제 전공과 직업을 버리고 새로운 길로 들어서기로 마음 먹었을 때, 두렵지 않냐는 질문들이 많았습니다. 적은 나이도 아니었고, 그동안 해왔던 것들이 있었기 때문입니다. 안정적인 상태에서 새로운 도전을 하는 것이 쉬운 결정은 아니었지만, 저의 진정한 적성과 흥미를 찾아 더 나아가기 위해 시작하게 되었습니다. 지금은 부족한 것이 많은 저이지만, 끊임없이 배우고 공부할 것입니다. 처음에는 힘들고 쉽지 않을지라도 포기하지 않고 노력하면 언젠가는 그 노력이 빛을 발한다고 생각합니다. 변화에 뒤쳐지지 않고 열심히 배우겠습니다.

mouse effect

parallax effect

quiz effect

search effect

slider effect

tetris game

memory game

search game

music player

HTML5

css3

javascript

gsap

jquery

react

vue

php

animation

algorithm

svg

animation

mysql

github

netlify

firebase

bootstrap

cpdepen

profile

name김찬미

age29세

address경기도 안산시 상록구

MBTIINTJ

CERTIFICATION컴활1급

02web site
react, vue, php site

Only I can change me life,Only I can change me life, Only I can change me life, Only I can change me life, Only I can change me life,

no one can do it no one can do it no one can do it no one can do it no one can do it no one can do it no one can do it no one can do it

challengeable AND goal-oriented challengeable AND goal-oriented challengeable AND goal-oriented challengeable AND goal-oriented challengeable AND goal-oriented

front-end developer front-end developer front-end developer front-end developer front-end developer front-end developer front-end developer front-end developer

web site

WEBSTADARD SITE

웹표준과 웹접근성을 준수하여 작업한 웹표준
사이트 입니다.

webstandard site

웹표준과 웹접근성을 준수하여 작업한 웹표준 사이트 입니다. 웹표준과 웹근성을 준수하기 위해 IR 효과와 대체텍스트 등을 넣어 모든 사용자들이 불편함 없이 사이트를 이용할수 있도록 제작하였습니다. 자바스크립트를 활용한 페럴렉스 효과를 적용시켜 메뉴 이동을 편하게 하였고, 스와이퍼를 이용하여 슬라이드에 동적인 효과를 더하였습니다.

사이트 보기

web site

RESPONSIVE SITE

다양한 크기의 디바이스에 대응하여 화면 크기에 따라
반응하도록한 반응형 사이트 입니다.

responsive site

다양한 디바이스에 대응해 화면 크기에 따라 반응하도록 작업한 반응형 사이트 입니다. 미디어쿼리를 이용하여 레이아웃의 배치와 디자인을 다르게 하였습니다.

사이트 보기

web site

REACT API SITE

영화, 유튜브, UNSPLASH API를 사용하여 만든
사이트입니다.

react api site

CMD에서 터미널을 설정하고 NPM으로 JS라이브러리를 설치한 후, API를 이용한 사이트입니다. 각 섹션별로 순위 높은 아이템들이 무엇인지 확인할 수 있고, 검색도 가능합니다.

사이트 보기

web site

REACT SITE

YOUTUBE API를 사용하여 만든 경제 유튜브 API
사이트입니다.

react site

경제를 주제로 리액트를 이용해 유튜브 API 사이트를 만들었습니다. 카테고리에서 채널을 클릭하면 채널에 맞는 영상들을 볼 수 있고 영상을 클릭하면 영상보기 페이지로 넘어갑니다. 검색과 채널보기 기능도 추가하였습니다.

사이트 보기

web site

VUE API SITE

웹표준 사이트 레이아웃을 뷰를 사용하여 만든
사이트입니다.

vue site

REACT로 작성한 사이트레이아웃을 그대로 VUE문법을 사용하여 사이트를 만들었습니다. youtube, movie, unsplash api를 사용하였습니다. prettier, eslint를 이용해 문법에 오류가 없도록 작업하며 코드정리도 했습니다.

사이트 보기

web site

PHP project SITE

PHP를 사용해 댓글 기능, 게시판, 로그인, 회원가입
기능을 넣었습니다.

php site

팀프로젝트로 PHP를 사용해 식물을 주제로한 사이트를 제작하였습니다. 댓글 기능, 게시판, 블로그, 로그인, 회원가입 기능을 넣었습니다.

사이트 보기

web site

PHP project SITE

PHP를 사용해 댓글 기능, 게시판, 로그인, 회원가입
기능을 넣었습니다.

php site

PHP를 사용해 웹 페이지를 제작하였습니다. 댓글 기능, 게시판, 로그인, 회원가입 기능을 넣었습니다. MyAdmin에 접속한 후 MySQL을 이용해 데이터베이스에 접속하여 데이터들을 수정, 삭제, 복사 등을 할 수 있습니다.

사이트 보기

03effect

자바스크립트를 활용한 다양한 효과들을 공부하였습니다. 마우스 좌표값을 이용하여 만든 마우스 효과, 스크롤값을 이용한 페럴렉스 효과, CSS 속성들을 공부하기 위한 서치 효과, 여러가지 다양한 방법으로 움직이는 슬라이더 효과, 웹디자인기능사 기출문제를 활용한 퀴즈 효과가 있습니다. 각각의 효과별로 한 가지씩이 아닌 다양한 버전으로 준비되어 있습니다. 그리고 음악 재생 플레이어, 추억의 테트리스 게임, 카드 짝 기억해서 맞추는 메모리 게임, css 속성들을 이용한 서치게임을 제작하였습니다. 서치게임은 시간제한이 있으며, 음악 재생과 정지를 조절할 수 있습니다.

Mouse Effect

마우스 커서의 움직임에 따라
다양한 mouse effect를 주는 스크립트입니다.

Parallax Effect

스크롤값에 따라 다양한
parallax effect를 주는 스크립트입니다.

Search Effect

keyup event를 활용하여
css 속성들을 공부할 수 있는 스크립트입니다.

Slider Effect

javascript를 이용해
보여주는 다양한 slide입니다.

Quiz Effect

기출문제를 활용하여
다양한 quiz effect를 보여주는 스크립트입니다.

Music Player

javascript를 활용한
다양한 기능이 있는 music player입니다.

Tetris Game

javascript를 이용하여
제작한 tetris game 입니다.

Memory Game

javascript를 이용하여
제작한 memory game 입니다.

Search Game

javascript를 이용하여
제작한 search game 입니다.

04study

그동안 학원 수강하면서 제가 공부한 것들을 모아놓은 스터디 리스트입니다. MDN 사이트를 참고하여 작성한 HTML과 CSS의 속성 리스트들과 설명들, 수업시간에 배운 내용들을 토대로 정리한 자바스크립트의 공부내용들을 확인하실 수 있습니다. 이것들은 앞으로도 더욱 더 공부하면서 추가할 예정입니다. 수업시간에 배웠던 자바스크립트를 더 활용하기 위하여 프로그래머스의 1단계 알고리즘 문제들을 풀어보았습니다. 풀이한 문제들은 블로그에 정리하였으니 참고하여 주시기 바랍니다. 또한, 제가 공부한것들을 모두 모아놓은 티스토리 블로그도 있습니다. 아직도 부족한 점은 많지만 어떠한 일이든 배울 준비가 되어있습니다. 신입의 반짝이는 열정이 아닌 꾸준하게 노력하는 모습 보여드리겠습니다.

study list

HTML
Reference

CSS
Reference

Javascript
Reference

ALGORITHM
PROGRAMMERS