0

frontend developoer

PackSunHye‘ s Portfolio

welcome to

portfolio 성장속도가 남다른 개발자 박선혜입니다.

아치형이미지
보라색박스
박선혜프로필사진
게임학과를 전공한 저는 디자인이나 일러스트를 주로 공부하였지만 웹 디자인이라는 것을 교양으로 처음 접하게 된 후 관심을 갖게되었습니다. 학교를 졸업한 뒤 웹 디자인도 제대로 배워보고 싶어 여러가지 알아보던 중 웹 퍼블리셔나, 프론프 앤드에 대해 알게 되었고 학원을 다니며 배우게 되었습니다. 처음 배운 코딩의 세계는 많이 어려웠지만 그만큼 저에게 도전의식과 재미를 갖게 되어 꿈에도 나올 만큼 빠지게 되었습니다. 물론 제 생각만큼 쉬운 길은 아니겠지만, 더더욱 성장하며 개발자 박선혜가 되겠습니다.

my lovely

cat나의 평생 친구입니다.

고양이
새로운 일이나, 무엇이든 계기를 만들어주는 저의 소중한 가족입니다.
물론 집에서 가끔 방해를 하긴 하지만 공부할 때에 곁에 있어주는 기특한 아이입니다.
저를 소개할 때에 빠질 수 없는 존재라 생각해 같이 소개합니다.

script effect 여러 이펙트의 자바스크립트를 공부해보았습니다.

처음 배운 자바스크립트로 메서드나, for문 foreach문 등으로 공부한 이펙트들입니다. 마우스 커서를 움직일 때 글씨가 반전되거나,스크롤을 내릴때 이미지에 이질감을주거나, 이미지를 좌우로 슬라이 드 할 수 있으며 여러 CSS 속성을 검색 할 수도 있고 객관식의 약 60문항의 정답과, 점수를 구할 수 있게 되었습니다. 마지막으로 뮤직플레이어를 만들거나 기억력 게임, 테트리스 게임, 카드 게임을 즐겁게 만들었습니다.
스크립트시작
  • QUIZ EEFECT 처음 배운 자바스크립트로 배열을 만들어
    직접 60문제의 카드를 만들지 않고 제작했습니다.
  • SEARCH EEFECT 간단한 자바스크립트 메서드를 이용하여
    서치 게임을 만들어 봤습니다.
  • SLIDER EEFECT 플러그인을 사용하지 않고 이미지 슬라이드를
    직접 작성해보았습니다.
  • MOUSE EEFECT GSAP를 이용하여 마우스를 움직여 이미지를 반전시키거나
    글자를 기울게 만들었습니다.
  • PARALLAX EEFECT 패럴렉스 이펙트를 공부하여 스크롤링에 도움이 되는
    사이트를 만들었습니다.
  • GAME EEFECT 뮤직 플레이어, 기억력 게임, 카드 게임, 테트리스 게임등을 제작하여
    게임을 할 수 있는 사이트를 만들었습니다.

사이트도 몇 개 만들어 봤습니다. SITE CODING

반응형이 가능한 사이트로, 이미지 슬라이드는 스와이퍼를 사용하였으며, 그 외 사이트에 자주 쓰이는 이미지 타입, 텍스트 타입, 카드 타입 등등을 이용해 사이트의 기초를 직접 코딩였으며, 이후 REACT 와 VUE로 다시 제작하면서 처음 시작하는 언어의 초기를 단단히 공부했습니다.

Responsive Site 01
Responsive Site 01
Responsive Site 02
Responsive Site 02
Responsive React Site
Responsive React Site
Responsive Vue Site
Responsive Vue Site

    project & gguda

    project & gguda

    변경이미지 변경이미지
    다꾸 웹사이트 ‘꾸다’ 입니다. 꾸다의 뜻은 꿈꾸다의 줄임말이며, 다이어리를 이용하여 사진을 넣거나, 일기를 쓰며 스티커를 넣어 귀여움을 추가해줄 수 있습니다.

    그 외 TIP에서 다이어리에 대한 궁금한 점이나 팁을 얻을 수 있거나, 도움을 줄 수 있습니다.

    Diary & sticker site

    마이페이지이미지 마이페이지이미지
    사이트의 구조와, 반응형 CSS, 회원 가입, 공지사항과 이벤트, TIP과 관련된 글의 PHP, 댓글 등을 관리하고 만들었습니다. 그리고 마이페이지의 회원 정보 수정도 관리하였습니다.
    명함이미지
    javascript

    자바스크립트를 시작하며, 변수와 객체, 배열등을 알아가고 그 에 적용하는 데이터를 불러오는 방법들인 for문과 forEarh문을 기초부터 차근히 공부해나아갔습니다. 이에 함수에 넣는 법, 다양한 조건에 실행하게 만드는 조건문 등 웹 개발에 필요한 자바스크립트와 메서드들을 공부했습니다.

    quiz effect

    처음으로 배웠던 이펙트로써, const 안에 정답을 넣고 if문으로 정답과 상대방이 적는 답이 같은지 확인과, 여러개의 객관식과 주관식을 문제를 일일히 적지 않아도 출력할 수 있게 하였습니다.

    search effect

    검색과 원하는 방식으로 나열, 또 배열안에 중요도를 표시해 선택한 중요도를 누르면 관련된 레퍼런스들만 나올 수 있게 하였습니다. 사용한 메서드는 indexOf() / search() , includes() , charAt() , find() , filter() , sort() / reverse() 등이 있습니다.

    mouse effect

    마우스를 움직여 어느쪽에 옮기면 커서가 변화하던가, 똑같이 움직일 때 이미지가 반전 되거나 이질감을 줄 수 있으며 폰트가 움직이거나, 반전 할 수 있습니다. GSAP를 이용해 커서의 중심을 맞추고 화면의 비율을 구해 좌표값을 구할 수 있습니다.

    slider effect

    이미지를 슬라이드 할 때, 다시 되돌아가는 슬라이드 와 첫번째 이미지를 복사함으로써 무한 반복으로 보이게 할 수 있고 버튼을 눌러 좌우로 움직이게 하거나, 이미지가 슬라이드 될 때 토글이 변화되는 등의 이펙트를 줄 수 있습니다. 마지막으로 auto로 움직이지만 stop버튼을 누르면 멈추게 할 수 있습니다.

    parallax effect

    스크롤 값을 구해 세션의 위치에 따라 메뉴가 활성화 되거나 닷에서 활성화할 수 있습니다. 부드럽게 이동할 수도 있으며 스크롤에 따라 GSAP를 사용하지 않고 각각의 세션의 스크롤 값을 구하여 위치가 맞을 때마다 글씨나, 이미지가 움직이거나 이질감을 줄 수 있습니다. 또한 글씨를 하나씩 span에 감싸도록 스크립트를 주어 애니메이션으로 하나씩 딜레이를 주어 움직였습니다.

    game effect

    게임 이펙트에서 폴더를 눌러 각 창을 띄울 수있으며 움직일 수 있습니다. 폴더마다 클릭을 하면 커서의 색상이 바뀔 수 있습니다. 게임은 뮤직플레이어, 기억력게임, 카드 맞추기 게임, 테트리스가 있으며 맨 아래는 그 코드를 알 수 있게 했습니다. 각 게임은 시간제한이나, 맞출 수 있는 횟수, 속도의 제한이 있어 점수를 가릴 때 편합니다.

    responsive react site

    반응형 웹사이트를 리엑트로 만들어 작업해보았습니다. 반복문도 쓰였기 때문에 리엑트에서 반복문을 쓰는법도 공부할 수 있었습니다.

    responsive vue site

    반응형 웹사이트를 뷰로 만들어 작업해보았습니다. 반복문도 쓰였기 때문에 뷰에서 반복문을 쓰는법도 공부할 수 있었습니다.

    react site

    리엑트에서 여러 API를 사용해 웹사이트를 만들고, 스와이프를 사용하는 법도 공부했습니다. API에서는 유튜브 영상 API, unsplash API, TMDB API를 사용했습니다.

    vue site

    뷰에서 여러 API를 사용해 웹사이트를 만들고, 스와이프를 사용하는 법도 공부했습니다. API에서는 유튜브 영상 API, unsplash API, TMDB API를 사용했습니다.p>

    react api site

    YOUTUBE API를 사용할 수 있지만, 특정 키워드로 전용 유뷰트 영상을 보일 수 있게하던가, 채널들을 불러보아 사이들로 배치해 누르면 이동하며, 그 채널의 영상들만 볼 수 있게 했습니다. 영상을 클릭하면 유튜브 사이트로 이동하지 않고 영상을 불러와 제목과 조회수 좋아요수를 알 수 있습니다.

    php site

    PHP를 처음 공부한 사이트입니다, 회원가입과 블로그, 카테고리 분류와 댓글 사용, 마지막으로 게시판을 이용할 수 있습니다.

    project gguda

    직접 기획한 사이트로 사람들이 '다꾸'에 친숙해질 수 있도록 제작한 사이트입니다 다이어리로써 사용할 수 있으며 다른 사람에게 공유는 못하지만 스스로 간직할 수 있도록 이미지로 다운로드할 수 있습니다 그 외에 정보를 공유할 수 있도록 TIP 게시판돠 공지사항과 이벤트가 있습니다.

    contact me

    개인 정보 입력
    전하고 싶은 말

    핱

    빁

    빁

    빁