0
LODING
i’m frontend
welcome
to my portfolio
i'm frontend
welcome
to my portfolio
반
갑
습
니
다
부족함을 꾸준함으로
배움에 두려움이 없는 신입 개발자 전현정입니다.
새로운 분야에 도전한 만큼 Never say Never이란
문구처럼 포기하지 않고
꾸준히 도전하며 능력을 향상시키는 개발자가 될 것입니다.
처음으로 만든 포트폴리오입니다. 재밌게 봐주시면 감사하겠습니다 :)
기분 좋은 에너지
I’m Frontend
Developer !
Developer !
WELCOME TO
MY PLAYGROUND!
cool 한
성격
리액션담당
SHOW
CREATIVITY
하고싶은 건
일단 하고 보는
ENFP
Hello world!
w h a t i d o
w h a t i d o
skills
튼튼한
뼈대 작업
html
웹표준 & 웹접근성
css
미디어 쿼리
반응형 사이트 제작
Keyframe
애니메이션
애니메이션
IE6 문법 이해
javascript
제이쿼리&
라이브러리 사용
AJAX
SQL을 이용한
DB 생성 & 관리
php
회원가입, 댓글 쓰기 가능
react
API 호출 가능
REACT를 이용한
개발경험 보유
개발경험 보유
WEB PROJECT
WEBSITE, VANILLA JAVASCRIPT, CSS ANIMATION 작업물들 입니다.
더 재밌고 다양한 기능을 구현하기 위해 꾸준히 노력하고 있습니다.
재밌게 봐주시면 감사하겠습니다 :)
더 재밌고 다양한 기능을 구현하기 위해 꾸준히 노력하고 있습니다.
재밌게 봐주시면 감사하겠습니다 :)
VUE SITE
VUE를 이용해 간단한 웹 사이트를 제작했습니다. 현재 제작 중이고 계속적으로 업데이트 할 예정입니다. 조금만 기다려 주세요!
제작 중이니 조금만 기다려주세요!
soybebe
soybebe 사이트를 리뉴얼하였습니다.
가로 스크롤 형태의 사이트 구조에서 사용자 중심의
효과적인 정보전달에 초점을 맞추어 레이아웃 구성을 변경하였습니다.
또한 swiper.js를 이용해 이미지 슬라이드를 구현하고
클릭 이벤트를 추가하였습니다.
sajo group
기존의 사조그룹 사이트에서 미디어쿼리를 사용하여 다양한
디바이스화면에 따라 반응하도록 만든 리뉴얼 반응형 사이트입니다.
웹 표준에 준수하여 시멘틱 태그를 사용하여 코딩했습니다.
jQuery를 이용해 서브메뉴와 이미지 슬라이드를 구현하고
SVG를 활용해 아이콘 작업을 했습니다.
c s s a n i m a t i o n
Tail Animation
CSS효과를 이용한 tail animation입니다.
div로 5개 원을 만들어 transform의 translateY의 값을
사용해 부드럽게 움직이는 모양를 나타내었고
translateX를 이용해 좌우로 움직이는 모양을 만들었습니다.
그리고 animation-delay의 값을 이용해 따라오는 효과를 주었습니다.
Circle Animation
CSS효과를 이용한 circle animation입니다.
6개의 div로 원 구조를 만들고 keyframe을 사용하여 애니메이션을 구현했습니다.
6개 원을 감싸는 태그에 scale, rotate 값을 주어 회전하면서
숨쉬는 듯한 효과를 만들고 개별 원에는 translateX, translateY 값을 주어
자연스러운 움직임을 표현했습니다.
Cube Animation
CSS효과를 이용한 cube animation입니다.
HTML로 구조를 만들고 keyframe을 이용하여 animation을 만들었습니다.
rotateY, rotateY 값을 이용하여 회전 효과를 주고 각각의 class에
translateZ 값을 주어 정육면체를 표현했습니다.
Rocket Animation
CSS효과를 이용한 rocket animation입니다.
불꽃, 스파크, 별에는 scale, rotate, skew 값을 이용해 역동적인 느낌을 표현했고,
각각의 불꽃에는 animation-duration 길이를 짧게 주어
계속 불꽃이 뿜어나오는 느낌을 만들었습니다.
별에는 animation-delay을 다르게 주어 스피드 감을 표현했습니다.
역동적이고 재밌는 것들을
구현하기 위해
늘 고민 하고 있어요 !
To Do List
Vanilla Javascript로 만든 그림판입니다.
펜 굵기에 맞춰 커서 크기에 변화를 주었고
그린 그림을 초기화 하는 reset 버튼과 png 파일로 저장하는 save 버튼을 추가하였습니다.
Mouse Effect
Vanilla Javascript와 JQuery를 이용한 Mouse Effect입니다.
mouse hover효과를 이용해 다양한 효과를 구현했습니다.
Prarallax Effect
Vanilla Javascript와 JQuery를 이용한 Script Effect입니다.
스크롤 값을 이용해 다양한 효과를 구현했습니다.
더 자세히 볼 수 있어요!
코딩의 솔직함에 매료되다
새로운 것에 도전하는 것을 좋아하는 행동파 프론트앤드 개발자 , 전현정입니다.
호기심으로 시작된 첫 코딩은 저에게 무척 재밌게 다가왔습니다. 체계적으로 배우고자
6개월간 마크업 중심의 웹퍼블리셔 국비과정을 수료했습니다. 하지만 좀 더 다양하고
재미있는 동적 효과 구현을 만들고 싶은 마음에 Javascript, React, Vue, Php를
배워 새로운 포트폴리오를 준비했습니다. 밝은 에너지로 동료들과 협동하며 매력적인
코딩, 깔끔한 동적 구현을 해내고 마는 프론트앤드, 전현정이 되도록 하겠습니다.
제 포트폴리오 페이지를 방문해주셔서 감사합니다!
ⓒ 2021 hyeonjeong’s portfoilo
안녕하세요! 신입 프론트엔드 개발자,전현정입니다.
저를 소개합니다!
아직 많이 서툴지만 꾸준히 공부하며 채워가는 중 입니다!
더 나은 프론트엔드 개발자를 꿈꾸며 준비한 작업들입니다.
web project 작업물들입니다.
Transform과 Keyframe,SVG를 이용하여 만든 애니메이션 작업들입니다.
Javscript & jQuery를 이용하여 만든 스크립트 작업들입니다.
잘 감상하셨나요? 포트폴리오가 마음에 드셨다면 연락 바랍니다 :)
