이예령 Front-End Developer Portfolio | 프론트옌드

프론트옌드 이예령 입니다.

Github 아이콘 GitHub
노션아이콘 이력서&자기소개서
PDF아이콘 이력서다운
예령포트폴리오 메인 이미지

업무에 꼭 필요한 이치들을 터득해
누구보다 효과적으로 처리 할 수 있는,

Front-End Developer 이예령 입니다.

#자기주도적 #호기심 #몰입 #동향관찰습관 #INFJ

📱 010-6805-0333 | 📬 onedaytheflower@naver.com | 📃이력서&자기소개서

발전전체타임라인
오피스프로그램훈련
퍼블리싱훈련
에듀랩입사
리액트훈련
리액트를 활용한 풀스택 프로젝트

Skill

0

ReactJS

0

HTML, CSS

0

jQuery

0

JavaScript

0

BootStrap, SASS

0

Photoshop, Illustrator

0

XD

0

PremierPRO, AfterEffect

0

ReactJS

HTML, CSS, jQuery, JavaScript

Bootstrap, Sass

Adobe - Photoshop, Illustrator, XD,
PremierPRO, AfterEffect

Project

기기 화면에 마우스를 올려 보세요. | 스와이프가 가능한 슬라이드 입니다. | 노션아이콘 Project 모아보기

01
02
03
04
05
06
07
08
09
모니터 목업 PC 풀화면
패드 목업 Pad 풀화면
모바일 목업 mobile 풀화면
FrontYend
Front-End Developer Portfolio | 프론트옌드

  • 이예령 프론트엔드 개발자 웹 포트폴리오

  • 제작기간: 2주
  • 사용스킬: HTML, CSS, JavaScript, jQuery
  • fullpage라이브러리를 활용한 반응형 웹(rem단위 사용)

  • Description

  • 첫페이지를 벗어날시 메뉴사이즈와 로고이미지 변경
  • mousemove이벤트로 위치값을 가져와 마우스를 따라다니는 이미지 구현
  • skill: svg>circle의 stroke속성과 h3에 생성한 data-num속성을 연결해 페이지에 진입할때마다 data-num값 만큼 움직이는 progress 구현
  • project: 프로젝트의 각 기기에서 볼수있는 전체화면을 기기이미지에 마우스를 올렸을때 실제 보여지는 만큼만 자동 스크롤이 되게 구현(클릭시 전체화면 이미지로 연결되어있음)
TOP
01
리딩토탈 학습앱
Work Experience | 에듀랩 (IT 개발실 > 콘텐츠 제작팀)

  • 학습콘텐츠 제작 및 유지보수

  • 근무기간: 2021.11.21 ~ 2022 11.30
  • 사용스킬: HTML, CSS, JavaScript, jQuery, Photoshop, Illustrator, PremierPRO
  • 유아동 나이의 개월 수 마다 여러도서가 지정되어
    도서내용으로 다양한 학습콘텐츠를 제공하는 하이브리드 앱

  • Description

  • 배정된 콘텐츠를 기존 템플릿에 맞춰 웹앱으로 제작 또는 영상 제작
  • 여러개의 html과 요소, 해당하는 오디오들을 기획서 순서대로 차례대로 노출
  • 한 콘텐츠의 여러개의 html에 연결된 js를 한페이지로 합치기
  • drog&drop을 사용한 기존 단일정답체크 퀴즈콘텐츠를 다중정답 체크로 구현
  • touch event,mouse event로 좌표값을 가져와 canvar안에서 선긋기 구현
02
패드 목업 Pad 풀화면
모니터 목업 PC 풀화면
모바일 목업 mobile 풀화면
Mango Shop
Full Stack 쇼핑몰 사이트

  • React.js 로 클라이언트 개발 / Node.js 로 서버 개발 및 배포

  • 제작기간: 1개월
  • 사용스킬: ReactJS, NodeJS, GitHub, SQlite
  • 반응형, 서브페이지 2개

  • Description

  • 반응형, 서브페이지 2개
  • 메인페이지 상품목록, 상세페이지 상품생성 API 구현
  • 슬라이드배너 구현
  • 상품업로드 페이지 및 업로드 기능 구현
Front GitHub Server GitHub
03
친절한 주차씨
Kind Mr. Parking

  • Mobile UX UI Design

  • 제작기간: 1주
  • Team Project: Team leader
  • XD를 활용하여 실시간 협업을 통해 제작

  • Description

  • 프로토타입으로 제작
  • 팀리더로서 팀원들의 의견 조율
  • 팀원들과 앱의 목적과 스타일가이드를 소통을 통해 맞춰가며 팀웍이 생김
  • 작업물을 시뮬레이션 할수있는 페이지 공유
기획서 시뮬레이션
04
project5
모니터 목업 PC 풀화면
패드 목업 Pad 풀화면
모바일 목업 mobile 풀화면
블랙야크
BLACKYAK

  • Bootstrap을 활용한 반응형 웹사이트

  • 제작기간: 2일
  • 사용스킬: HTML, Bootstrap

  • Description

  • Bootstrap의 그리드 시스템, 타이프그래피, 폼등에 대한
  • 공부가 되었던 프로젝트
SITE VIEW
05
아쿠아플라넷 제주
Aqua plabet JEJU

  • Sass를 활용한 반응형 웹 사이트

  • 제작기간: 1일
  • 사용스킬: HTML, Sass

  • Description

  • Sass를 활용한 코드 재사용성, 가독성, 유지보수성을
  • 알게해준 프로젝트
SITE VIEW
06
모니터 목업 PC 풀화면
모니터 목업 PC 풀화면
패드 목업 Pad 풀화면
모바일 목업 mobile 풀화면
JABDA
JABDA | 기업의 진짜 문화를 잡다

  • JABDA 사이트 반응형으로 클론코딩

  • 제작기간: 2주
  • 사용스킬: HTML, CSS, JavaScript, jQuery
  • 웹표준을 준수하고 반응형을 적용한 웹사이트

  • Description

  • 컴퓨터, 태블릿, 핸드폰 세가지의 반응형 구현
  • 익스플로러와 파이어폭스 크로스브라우징
  • 상단에 실시간 시간 반영 요소 추가 구현
  • 쿠키값을 사용해 오늘 다시 다시보지않기 기능이 들어간 팝업 창 추가 구현
  • 스크롤을 내리면 우측 하단에 TOP버튼 생성 추가 구현
SITE VIEW
07
환경부
Department of the Environment

  • 풀다운메뉴가 있는 관공서 사이트 클론 코딩

  • 제작기간: 3주
  • 사용스킬: HTML, CSS
  • 서브페이지: 게시판

  • Description

  • 첫 프로젝트
  • input과 label을 연결해 부드럽게 열리는 게시판이 있는 서브페이지 구현
  • 그리드, 와이어 프레임을 통한 화면설계
SITE VIEW
08
모니터 목업 PC 풀화면
모니터 목업 PC 풀화면
꽃의 일기장
코딩 수업 기록지

  • 수업내용을 기록 및 적용한 페이지

  • 제작기간: 3개월
  • 사용스킬: HTML, CSS
  • HTML 수업이 시작되면서 수업내용을 일기처럼 기록

  • Description

  • 환경부 프로젝트 들어가기 전의 학습한 내용을 일기장에 구현하며 복습
  • 포토샵, 일러스트, 프리미어프로, 에프터이펙트로 제작한 결과물 삽입
SITE VIEW
09

Design & Video

Front-End Developer 이예령 👩🏻‍💻

예령연락처사진

씨앗이 싹을 틔어 새싹이 되었습니다.

그동안의 경험을 발판삼아 끊임없이 발전해,
귀사에 잘 뿌리내려 어떠한 상황에서도 흔들리지 않고
야생화처럼 굳건하게 피어나겠습니다.
감사합니다!

📱 010-6805-0333 📬 onedaytheflower@naver.com 📃이력서&자기소개서